【WordPress】子テーマのCSS編集について

WordPress初心者です。
子テーマのCSSの編集が反映されなくて困っております。

まずはじめに、子テーマを作成しました。
子テーマファイル内には、「functions.php」「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' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
?>

と記入してあります。

その後、子テーマを有効化し、試しに背景の色を変えてみようと思い"テーマの編集"からスタイルシート (style.css)を編集したい部分を親テーマからコピーしました。
それを、「/ここから上書きしたいスタイルを記述/」より下に貼り付けて、
「#333333」から「#0f1330」に変えてみてファイルを更新したところ、全く反映されず
困っております。
そもそも変更したところを間違えているのでしょうか。

お詳しい方、是非ご指導宜しくお願いいたします。

下に、記入したスタイルシート (style.css)を記載しました。

/*
Template:cele
Theme Name:cele-child
*/

@import url('../cele/style.css');

/*ここから上書きしたいスタイルを記述*/

body {
  height: 100%;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
  font-weight: 300;
  background: #0f1330;
  color: #0f1330;
  -webkit-font-smoothing: subpixel-antialiased;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
}

.overflow-container {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 100%;
}

.main {
  background: #FAFAFA;
  margin: 0 auto;
  padding: 1.875em 8.3334%;
  min-height: 100vh;
}

.loop-container:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

kei344

2017/05/24 15:38

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

araimaru

2017/05/24 15:43

kei334さん　再びありがとうございます！ご指摘の通りコードブロック(?)をやってみたのですが、上手いことできているでしょうか。宜しくお願いいたします！

dit.

2017/05/25 02:56

キャッシュが残っていたりしませんか？http://www.benricho.org/Tips/page_reload/

行動規範の内容に同意します

回答2件

ベストアンサー

まず、@import url('../cele/style.css'); と wp_enqueue_style はどちらかで問題ないはずです。（後者をお勧めします）

【wordpress子テーマの作り方！style.css・各テンプレートファイル・function.php の設定手順】
http://viral-community.com/wordpress/wp-child-theme-5818/

【子テーマを作ってWordPressの既存テーマをカスタマイズする方法 | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/wordpress-child-theme/

で、テーマが選択されて切り替わっていることを確認したうえで、デベロッパーツールでCSSが読み込まれているか、それが適用されているかを確認してみてください。（「#333333」から「#0f1330」はどちらも「濃いグレー」に見えるものなので、「pink」「red」とかで試すとわかりやすいです）

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

投稿2017/05/24 15:58

kei344

総合スコア69407

araimaru

2017/05/25 02:49

ご返事がおそくなりました。いつもありがとうございます。ご指摘のとおり、 ``` @import url('../cele/style.css'); ``` を消しました。デベロッパーツールで確認してみたところ、CSSは読み込まれているようですが、スタイルシートで新たに入力した変更の適用はされていないようです。試しに、違うテーマの子テーマなら適用はされるのかを確認しようと、教えて頂いたサイト（【子テーマを作ってWordPressの既存テーマをカスタマイズする方法 | Webクリエイターボックス】http://www.webcreatorbox.com/tech/wordpress-child-theme/　）にならい、子テーマを作りました。そしてサイトの通り背景をピンクに変えようとスタイルシートに、 ``` /* Theme Name: twentyifteen-Child Template: twentyfifteen */ body { background: pink; } ``` を記入して、子テーマの有効化をしました。（手順でいうと、スタイルシートに書いた後にテーマの有効化をしました。）すると、見事背景がピンクになりました。その後、ピンクの背景をやめてみようと ``` body { background: pink; } ``` の部分を消して更新をすると、今度は背景がピンクのまま、消したCSSは適用されなくなってしまいました。スタイルシートの書き方が間違っているのか、更新の仕方が間違っているのか、さっぱりワケワカメの状態です。申し訳ありませんが、もうしばらくお付き合いしていただけたら幸いです..... ご指導の程宜しくお願いいたします。

8-0_nyan5

2017/05/25 02:52

キャッシュのクリアとかをしてみましたか？

kei344

2017/05/25 03:02

キャッシュのクリアと、キャッシュ系プラグインが入っている場合はそのキャッシュのクリアをしてみてください。【Chromeブラウザでスーパーリロードする方法 #Pistatium】 http://kimihiro-n.appspot.com/show/86002 【【みんなの知識ちょっと便利帳】Webページを最新の状態で見る - ブラウザーのフルリロード、スーパーリロード方法】 http://www.benricho.org/Tips/page_reload/ 【WordPressのキャッシュが消えない時にクリア、削除する方法 | urashita.com】 https://urashita.com/archives/571

行動規範の内容に同意します