CSSが反映されない

  • 解決済 amryllis

    (@amryllis)


    7年、 10ヶ月前

    私のサイトは、ブログみたいにほぼ、毎日更新するものではないです。

    固定ページを更新する時にCSSも変更することがあります。
    しかし、子テーマのCSSを変更(追記)しても、レイアウトが変更されません。

    実に言うと、私は、ある小さな団体のサイトを公開しており、固定ページのみ、必要がある時だけ更新するので、１か月以上更新しません。
    今回は、３か月ぶりの更新です。

    キャッシュの関係で、反映されないのが、原因かもしれません。
    キャッシュに関係なく、強制的に反映するには、どうすればいいですか？

    因みにテーマは、Twenty Fourteenを使用しています。

    子テーマのstyle.cssは、

    
 /*
 Theme Name:Twenty Fourteen child
 Template:twentyfourteen
*/

@charset "utf-8";
@import url("../twentyfourteen/style.css");

    子テーマのfunction.phpは、

    
<?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
} ?>

    になっています。

15件の返信を表示中 - 1 - 15件目 (全28件中)
1 2
  • CG

    (@du-bist-der-lenz)

    7年、 10ヶ月前

    エンキューがあり、Template:で親テーマを指定してあるので、@importは不要ではないかしら。
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',は必要なのかもしれません。

    • この返信は7年、 10ヶ月前にCGが編集しました。理由: child-style を追記
    トピック投稿者 amryllis

    (@amryllis)

    7年、 10ヶ月前

    エンキューがあり、Template:で親テーマを指定してあるので、@importは不要ではないかしら。
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',は必要なのかもしれません。

    もう少し分かりやすく解説していただけませんでしょうか？
    子テーマのstyle.cssを

     /*
 Theme Name:Twenty Fourteen child
 Template:twentyfourteen
*/

    にして、子テーマのfunction.phpを

    <?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css' );
 
} ?>

    にすればいいんですか？

    CG

    (@du-bist-der-lenz)

    7年、 10ヶ月前

    WordPress が4.7以上であれば、追加CSSの機能が拡張されます。スタイルシートの工夫だけで、テンプレート自体をカスタマイズする必要なければ子テーマを用意しなくても済むと考えています。
    それで気軽にテーマを変更して試すこともできると便利に思っています。
    WordPress が4.7以下だと、そうもいかないので子テーマを使っています。その際、記述しているのはコーデックス通りです。

    以下、日本語Codexより抜粋引用です。

    以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。したがって子テーマには functions.php を作成する必要があります。

    子テーマのスタイルシートは、通常は自動的に読み込まれます。そうでない場合は、同様にエンキューする必要があります。 依存関係として「parent-style」を設定し、その後に子テーマのスタイルシートをロードしましょう。

    トピック投稿者 amryllis

    (@amryllis)

    7年、 10ヶ月前

    WordPress が4.7以上であれば、追加CSSの機能が拡張されます。スタイルシートの工夫だけで、テンプレート自体をカスタマイズする必要なければ子テーマを用意しなくても済むと考えています。
それで気軽にテーマを変更して試すこともできると便利に思っています。

    なるほど。
    4.7以上(最新バージョンは4.7.1)にしたほうがいいですね。
    現在のバージョンは.4.6.1です。

    で、4.7.1にバージョンアップする前にやる作業がありますでしょうか？
    バージョンアップした後にやる作業も教えて頂けませんでしょうか？

    CG

    (@du-bist-der-lenz)

    7年、 10ヶ月前

    https://ja.wordpress.org/support/topic/4-7-アップグレードに伴う既知の問題とその解決方/

    フォーラムに既出されていないか確認することが、回答を待つより時間的に有意義ですよ。
    新しい事象か、問題発生していないかを見に来たついでに返信をしているので、わたしが次に回答を返すかは確かではありませんから。

    アップグレードで行うことは、今回特別変化はありません。
    わたしがいくつか更新した過程で、外部スタイルシートの記述も、問題なく追加CSSに受け継がれていました。ただ、スタイルシートに不備があるものは引き継がれなかったサイトも有りました。

    それを踏まえると、スタイルシートはバックアップして、アップグレード後に記載し直す。
    4.7で動作しないプラグインも今回、わたしのサイトでは多く発生したのでプラグインを停止して作業を行うのが良いでしょう。
    4.7.1で新規サイトを作成して、現在の状況が動作するかを確認してから現サイトの作業をするのが最も確かで合理的ですね。

    トピック投稿者 amryllis

    (@amryllis)

    7年、 10ヶ月前

    Simple Custom CSSというプラグインが、インストールされていたが、停止していたので、それを有効にして、そこに追記するカスタムCSSを入れたら、反映されました。
    しかし、それは、すべてのテーマ(有効化したテーマ)にも、反映されるでしょうか？

    やはり、4.7.1にした方が良さそうかな？

    追伸
    Google ChromeのデベロッパーツールでCSSをいじってみるとやはり、リアルタイム的にレイアウトが変更されてない。

    • この返信は7年、 10ヶ月前にamryllisが編集しました。
    • この返信は7年、 10ヶ月前にamryllisが編集しました。
    トピック投稿者 amryllis

    (@amryllis)

    7年、 10ヶ月前

    追伸
Google ChromeのデベロッパーツールでCSSをいじってみるとやはり、
リアルタイム的にレイアウトが変更されてない。

    ↑
    ごめんなさい。
    デベロッパーツールは、問題ありませんでした。

    CG

    (@du-bist-der-lenz)

    7年、 10ヶ月前

    Simple Custom CSSと同様の働きをするプラグインや、プラグインによっては一部にカスタムCSSがあるものが少なくないので、WordPress自体に組み入れられたと考えてみたら？

    nobita

    (@nobita)

    7年、 10ヶ月前

    こんにちは、

    
 /*
 Theme Name:Twenty Fourteen child
 Template:twentyfourteen
*/

    style.cssのコメント部分を上記のようにしている場合、キャッシュが効いた状態で維持されます。

    なぜか？

    スタイルシートのソースを確認すると

    
<link rel='stylesheet' id='style-css'  href='http://example.com/wp/wp-content/themes/theme-nama/style.css?ver=4.7.1' type='text/css' media='all' />

    多分　?ver=4.7.1というクエリ文字列がついていますよね。4.7．1というのは、ワードプレスのバージョンなんですが

    なんで、このクエリ―文字列がついているかというと、更新された時に古いスタイルシートのキャッシュをリフレッシュするためにあります。

    なので、スタイルシートを変更した時に、このクエリ―文字列が変更になるように設定してやるといいです。

    その方法は、wp_enqueue_styleに引数を追加する事で実現できます。

    
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css', array('twentythirteen-style'),  filemtime( get_theme_file_path( 'style.css' ) ));
 
}

    3番目の引数　これは、スタイルシートの依存関係を指定する引数です。

    これを指定しておかないと、親テーマのスタイルシートの前に子テーマのスタイル指定が来たりする可能性があり、その場合親テーマと同じ指定の仕方をした場合、スタイルが反映されません

    4番目の引数　これは、クエリ―文字列をスタイルシートのの更新にあわせて、変更するものです。

    PHP関数が使われていて、なんか怪しげな感じがするかもしれませんので、ネタ元はこちらを参照してくださいね

    https://make.wordpress.org/core/2016/09/09/new-functions-hooks-and-behaviour-for-theme-developers-in-wordpress-4-7/

    もう少し細かな話は、個人的なメモですが

    http://tenman.info/labo/snip/archives/7322

    • この返信は7年、 10ヶ月前にnobitaが編集しました。
    • この返信は7年、 10ヶ月前にnobitaが編集しました。
    トピック投稿者 amryllis

    (@amryllis)

    7年、 10ヶ月前

    nobita様、回答をありがとうございます。

    子テーマのstyle.cssを

     /*
 Theme Name:Twenty Fourteen child
 Template:twentyfourteen
*/

    ↑
    @import url(“../twentyfourteen/style.css”);
    無しで。

    次に子テーマのfunction.phpを回答してくださった通りに

    <?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css', array('twentythirteen-style'),  filemtime( get_theme_file_path( 'style.css' ) ));
 
} ?>

    に変更しましたが、style.cssが、読み込まれていませんでした。
    因みに、子テーマにheader.phpを置いてあります（変更が必要になったときのためにコピー（複製）して、子テーマのフォルダに入れました）。

    <?php
/**
 * The Header for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>
以後、〜中略〜

    すみませんが、どこを直せば、読み込まれるでしょうか？

    nobita

    (@nobita)

    7年、 10ヶ月前

    再現テストをしてみました。

    結論から言うと、Twentyfourteenのバグです。

    @amryllisが書いたコードとほぼ同じコードを記述すると

    
<?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
	// load parent stylesheet
/*	wp_enqueue_style( 'twentyfourteen-style',
		get_template_directory_uri() . '/style.css', 
		array(), 
		filemtime( get_theme_file_path( 'style.css' ) )
	);*/	
	// load child stylesheet
    wp_enqueue_style( 'twentyfourteen-child-style',
		get_stylesheet_directory_uri() . '/style.css', 
		array('twentyfourteen-style'), 
		filemtime( get_theme_file_path( 'style.css' ) )
	);
} 

?>

    テーマのソースは、

    
<link rel='stylesheet' id='twentyfourteen-style-css'  href='http://www.example.com/wp/wp-content/themes/twentyfourteen-child/style.css?ver=4.8-alpha-39909' type='text/css' media='all' />
<link rel='stylesheet' id='twentyfourteen-child-style-css'  href='http://www.example.com/wp/wp-content/themes/twentyfourteen-child/style.css?ver=1484606043' type='text/css' media='all' />

    となりました、twentyfourteen-styleハンドルで読み込まれるスタイルシートが、チャイルドテーマのスタイルになっているため、正しく表示されません。

    この原因は、親テーマのfunctions.php 236

    
	// Load our main stylesheet.
	//wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );
        //get_stylesheet_uri()は、get_stylesheet_directory_uri()を参照してURLを作成しているので、チャイルドだとチャイルドテーマのCSSのURLになってします

wp_enqueue_style( 'twentyfourteen-style', get_template_directory_uri() . '/style.css' );
//このようになっていれば、問題ない

    @amryllisさんのコードの間違い

    
function theme_enqueue_styles() {
    wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css', array('twentythirteen-style'),  filemtime( get_theme_file_path( 'style.css' ) ));
 
} ?>

    3番目の引数が、twentythirteen-styleになっているため、twentyfourteenの親スタイルは、そもそも読みこまれず

    
<link rel='stylesheet' id='twentyfourteen-child-style-css'  href='http://www.example.com/wp/wp-content/themes/twentyfourteen-child/style.css?ver=1484606043' type='text/css' media='all' />

    だけが読み込まれている状態にありました。

    で、とりあえずチャイルドテーマでこれらのスタイルをうまく動かすためには、

    
<?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
	// load parent stylesheet
	wp_enqueue_style( 'twentyfourteen-style',
		get_template_directory_uri() . '/style.css', 
		array(), 
		filemtime( get_theme_file_path( 'style.css' ) )
	);	
	// load child stylesheet
        wp_enqueue_style( 'twentyfourteen-child-style',
		get_stylesheet_directory_uri() . '/style.css', 
		array('twentyfourteen-style'), 
		filemtime( get_theme_file_path( 'style.css' ) )
	);
} 

?>

    で動くと思います

    • この返信は7年、 10ヶ月前にnobitaが編集しました。
    nobita

    (@nobita)

    7年、 10ヶ月前

    追記

    一応 twentyfourteenのバグと書きましたが、デフォルトテーマ　twentyfourteenから　twentyseventeenまで同じ方法をとっているようなので
    「バグじゃないよー」という事もあるのかもしれません。

    バグじゃないよ　という意見を聞かせていただけるとうれしいのですが、、、

    訂正

    
<?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
	// load parent stylesheet
	wp_enqueue_style( 'twentyfourteen-style',
		get_template_directory_uri() . '/style.css' )
	);	
	// load child stylesheet
        wp_enqueue_style( 'twentyfourteen-child-style',
		get_stylesheet_directory_uri() . '/style.css', 
		array('twentyfourteen-style'), 
		filemtime( get_theme_file_path( 'style.css' ) )
	);
} 

?>
    • この返信は7年、 10ヶ月前にnobitaが編集しました。
    nobita

    (@nobita)

    7年、 10ヶ月前

    訂正の訂正

    
<?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
	// load parent stylesheet
	wp_enqueue_style( 'twentyfourteen-style',
		get_template_directory_uri() . '/style.css'		
	);	
	// load child stylesheet
    wp_enqueue_style( 'twentyfourteen-child-style',
		get_stylesheet_directory_uri() . '/style.css', 
		array('twentyfourteen-style'), 
		filemtime( get_theme_file_path( 'style.css' ) )
	);
} 

?>

    ぼやき：もう少し編集可能な時間伸ばしてもらえるとうれしい

    oisit

    (@oisit)

    7年、 10ヶ月前

    stylesheetが読み込まれていませんでしたの意味するところではないでしょうか。
    head部分に出力されていないのか、レイアウトの変更がないので出力されていないと判断したのか。

    トピック投稿者 amryllis

    (@amryllis)

    7年、 10ヶ月前

    nobita様
    oisit様

    回答をありがとうございます。
    nobitaさんがおっしゃる通りに

    	// Load our main stylesheet.
	wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );

    になっていました。

    子テーマのfunction.phpをnobita様が最後に回答してくださった、コードをコピペして、サイトを確認したら、親テーマのstyle.cssが読み込まれてませんでした（子テーマのstyle.cssの@importは、無しで）。

    <style>〜</style>の内容は、こちらで見てください。
    http://hanadayori2009.web.fc2.com/WordPress_html.txt
    ↑
    ※ WordPressとは無関係のサイトです。

    こんな感じの内容になっています。
    なお、今日4.7.1にアップデートしましたが、大きなドラブルがなく、アップデートが完了しています。
    でも、親テーマのstyle.cssが反映されないままです。

    私は、PHPに知識が無く、インターネットで探しながら、やっていました。
    勉強したい気持ちがありますが、なかなか進みません。
    どうやれば、反映されるでしょうか？
    ちなみにやりやすいテーマが、あるかな？

    • この返信は7年、 10ヶ月前にamryllisが編集しました。理由: 追加の文章
15件の返信を表示中 - 1 - 15件目 (全28件中)
1 2
  • トピック「CSSが反映されない」には新たに返信することはできません。

タグ