サポート » 使い方全般 » CSSが反映されない

  • 解決済 amryllis

    (@amryllis)


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

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

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

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

    因みにテーマは、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' );
     
    } ?>
    

    になっています。

13件の返信を表示中 - 16 - 28件目 (全28件中)
  • CG

    (@du-bist-der-lenz)

    「子テーマのCSSを変更(追記)しても、レイアウトが変更されません。」という点から、子テーマのスタイルが反映しないということで考えてましたが、

    「でも、親テーマのstyle.cssが反映されないままです。」とは、そもそもが、ということですか。アップデートでスタイル自体が適用されなくなったということであれば、他のテーマ(Twenty Seventeen 等)で確認してください。

    CG

    (@du-bist-der-lenz)

    テーマを変更するとキャッシュはクリアされます。

    PHPではなく、まずCSSのおさらい
    【WordPressでCSSが効かない場合の対処法】 – Webサイト専門プログラマの言いたい放題

    まず親が読み込こまれていて、それから子が読み込まれなければCSSは上書きされない。

    プラグインを有効化して設定したのが

    <style type="text/css" media="screen">
    	html { margin-top: 32px !important; }
    	* html body { margin-top: 32px !important; }
    	@media screen and ( max-width: 782px ) {
    		html { margin-top: 46px !important; }
    		* html body { margin-top: 46px !important; }
    	}
    </style>

    ならば一番最後にしかも直書きなので有効になるのはしかり。
    コーデックスの

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array('parent-style')
        );
    }

    2つのwp_enqueue_styleは1番目が親テーマの読み込みとそれにid(任意の文字列:ここではparent-style)を設定。2番目のが子テーマので先に設定した親のidを指定(array('parent-style)して、それよりも後で子テーマを読み込んでねという設定。
    あと!importantの兼合いかな

    @amryllisさんごめんなさい 返信を見落としていました

    http://hanadayori2009.web.fc2.com/WordPress_html.txt

    を確認しましたが、チャイルドテーマ用のスタイルが読み込まれていませんね。

    以下を確認してください。

    チャイルドテーマに

    functions.php を作成(function.phpではありませんsを必ずつけてください)

    
    <?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' ) )
    	);
    } 
    
    ?>
    

    <?php の前と?>の後ろには、スペースや改行が無い事

    エディターは、notepad は不可(壊れます)

    エディタがなければ

    https://notepad-plus-plus.org/

    等を使ってください

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

    (@rocketmartue)

    http://hanadayori2009.web.fc2.com/WordPress_html.txt
    を確認してみましたが、
    <link rel='stylesheet' id='twentyfourteen-style-css' href='http://自分のサイトURL/wp-content/themes/twentyfourteen_child/style.css?ver=4.7.1' type='text/css' media='all' />
    この1行が気になります。
    id は、twentyfourteen-style-css で親テーマの物ですが、読み込んでいるのは、~/twentyfourteen_child/style.css?ver=4.7.1 で子テーマの style.css になっています。

    nobitaさんのコードをコピペしたのであれば、
    親テーマの style.css は、id が twentyfourteen-style-css
    子テーマの style.css は、id が twentyfourteen-child-style になるはずです。

    wp_enqueue_style の第一引数が、両方とも twentyfourteen-style-css になっていたりしませんか?

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

    @rocketmartue

    デフォルトテーマは、チャイルドテーマでwp_enqueue_style()していない場合は、チャイルドテーマディレクトリから親スタイルを読みこもうとします。

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

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

    (@rocketmartue)

    @nobita
    ありがとうございます。
    確かに、

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

    になっていますね。

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

    もし親テーマ、子テーマともにスタイルシートがテーマフォルダ直下のstyle.cssのみでしたら、
    子テーマのfunctions.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' ); 
    }
    ?>

    子テーマを使用している場合、
    get_template_directory_uri() → 親テーマのディレクトリ
    get_stylesheet_directory_uri() → 子テーマのディレクトリ
    になります。
    (http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_directory_uri)

    子テーマのstyle.cssは通常何も書かなくても自動で読み込まれます。
    もし、親テーマ、子テーマともにテーマフォルダ直下のstyle.css以外にもcssがある場合は、wp_enqueue_styleを追加してください。

    トピック投稿者 amryllis

    (@amryllis)

    @nobita
    @rocketmartue
    @reguls

    皆さま、回答してくださってありがとうございます。

    チャイルドテーマに
    functions.php を作成(function.phpではありませんsを必ずつけてください)

    1文字「s」を付け忘れていました。
    ファイル名を修正しました。

    エディターは、notepad は不可(壊れます)
    エディタがなければ
    https://notepad-plus-plus.org/
    等を使ってください


    PCは、Windows系ではなく、Macを使用していますので、「Komodo Edit 10」というエディタを使いました。

    functions.php に@nobitaさんが、回答してくださったコードを、<?php の前と?>の後ろには、スペースや改行が無い事に気をつけながら、

    <?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' ) )
    	);
    } 
    
    ?>

    をコピペしてみました。
    そしたら、問題なく表示されました。
    しかし、毎回毎回キャッシュ削除が煩わしい。
    そこで、Google Chromのシークレットウインドウズで開いています。
    キャッシュクリア作業しなくても、できる方法は、ないでしょうか?

    • この返信は7年、 3ヶ月前にamryllisが編集しました。理由: 「エディタ」使用内容記述
    CG

    (@du-bist-der-lenz)

    ローカルで動作確認完了後に、Webサーバーにアップロードすると煩わしさはなくなります。また、Mac であればテキストエディットでファイルを修正すると、Web上でも同期されます。

    • この返信は7年、 3ヶ月前にCGが編集しました。理由: タイプミスを修正 テキストエディタをテキストエディットに
    トピック投稿者 amryllis

    (@amryllis)

    ローカルで動作確認完了後に、Webサーバーにアップロードすると煩わしさはなくなります。
    私は、ローカルで動作確認を行っていません。
    管理画面から、やっています。
    ローカルにあるのは、バックアップファイルだけです。

    でも、インターネットで調べてみると、「.htaccess」が、有効らしいですが、どうでしょうか?
    とりあえず、「WP Htaccess Editor」というプラグインで見てみたら、

    # BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
    
    # END WordPress


    こんな内容で私が、いじってもない。
    キャッシュに関する内容が含まれてない。
    どうでしょうか?

    Honda

    (@rocketmartue)

    1文字「s」を付け忘れていました。
    ファイル名を修正しました。

    ファイル名やコードの記述で、1文字違いは大違いです。
    初歩的なミスなので、気を付けましょうね。

    無事解決したようなので、解決済みにしておいてください。

    Honda

    (@rocketmartue)

    せっかく du-bist-der-lenz さんが、「ローカルで動作確認すれば煩わしさはなくなります」と提案してくれているのですから、「私は、ローカルで動作確認を行っていません」と、突っぱねるのではなく耳を傾けてみてはどうでしょうか?
    .htaccess の内容は通常通りです。

    そもそも、最初の質問と質問内容が変わっていますので新たにスレッドを立ててください。

    余談ですが、Chrom のショートカット
    Mac なら⌘+shift+r
    Win ならCtrl+Shift+r
    で、キャッシュをクリアしてページが再読み込みされます。

13件の返信を表示中 - 16 - 28件目 (全28件中)
  • トピック「CSSが反映されない」には新たに返信することはできません。