CSSが反映されない

解決済 amryllis
(@amryllis)

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

固定ページを更新する時に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' );
 
} ?>
```
になっています。

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

← 1 2

CG
(@du-bist-der-lenz)

9年、 1ヶ月前

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

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

CG
(@du-bist-der-lenz)

9年、 1ヶ月前

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

9年、 1ヶ月前
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')
    );
}
```
２つのwp_enqueue_styleは1番目が親テーマの読み込みとそれにid（任意の文字列：ここではparent-style）を設定。2番目のが子テーマので先に設定した親のidを指定（array('parent-style）して、それよりも後で子テーマを読み込んでねという設定。
あと!importantの兼合いかな
nobita
(@nobita)

9年前
@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/

等を使ってください
- この返信は9年前にnobitaが編集しました。
モデレーターまーちゅう
(@rocketmartue)

9年前
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 になっていたりしませんか？
- この返信は9年前にまーちゅうが編集しました。
nobita
(@nobita)

9年前
@rocketmartue

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

http://tenman.info/labo/snip/archives/7322#my_issue
- この返信は9年前にnobitaが編集しました。
モデレーターまーちゅう
(@rocketmartue)

9年前
@nobita
ありがとうございます。
確かに、
```
// Load our main stylesheet.
wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );
```
になっていますね。
- この返信は9年前にまーちゅうが編集しました。
- この返信は9年前にまーちゅうが編集しました。
Akane
(@reguls)

9年前
もし親テーマ、子テーマともにスタイルシートがテーマフォルダ直下の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)

9年前
@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のシークレットウインドウズで開いています。
キャッシュクリア作業しなくても、できる方法は、ないでしょうか？
- この返信は9年前にamryllisが編集しました。理由: ｢エディタ｣使用内容記述
CG
(@du-bist-der-lenz)

9年前
ローカルで動作確認完了後に、Webサーバーにアップロードすると煩わしさはなくなります。また、Mac であればテキストエディットでファイルを修正すると、Web上でも同期されます。
- この返信は9年前にCGが編集しました。理由: タイプミスを修正　テキストエディタをテキストエディットに
トピック投稿者 amryllis
(@amryllis)

9年前
ローカルで動作確認完了後に、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
```
↑
こんな内容で私が、いじってもない。
キャッシュに関する内容が含まれてない。
どうでしょうか？
モデレーターまーちゅう
(@rocketmartue)

9年前

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

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

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

モデレーターまーちゅう
(@rocketmartue)

9年前

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

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

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