子テーマのCSSが反映されない!
オリジナルのテーマを編集しないでデザインやレイアウトを変更できるWordPressの子テーマ。
オリジナルのテーマがバージョンアップしても変更点は別のファイルで編集してあるので、スムースにオリジナルのテーマをバージョンアップすることができます。
とても便利な子テーマなのですが、実際に作成してみるとCSSが反映されない!という不具合に遭遇してしまいました。
忘れないうちに解決方法をメモっておきたいと思います。
子テーマのCSSが反映されないのを回避する方法を探すも・・・
子テーマのstyle.cssを読み込ませる方法として「@import」を利用する方法は見つけることができたのですが、
@importを利用するとWordPressのパフォーマンスが落ちる
との事。
CodeX日本語版の子テーマを参照したところ、
「functions.phpを作成してから下記のPHPコードをfunctions.phpに貼り付ければ@importなしでCSSが反映されるよ〜ん」
という事だったので「な〜んだ、簡単じゃん!」と子テーマディレクトリ(子テーマフォルダ)にfunctions.phpを作成してPHPコードを貼り付けてみました。しかし・・・
子テーマのCSSが反映されません!
@importは利用したくなかったので、いろいろググっていたところ、CodeX英語版Child ThemesにCSSを反映させるPHPコードを発見することができました。
子テーマのCSSを反映させる方法
下記のPHPコードを子テーマ内に作成したfunctions.phpに記述します。
<?pho 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') ); } ?>
上記のPHPコードを子テーマ内のfunctions.php貼り付けたところ、
@importなしでCSSを反映させることができました!
困った時にはCodeX英語版で調べてみることが大切みたいですね。
(^ ^;
関連記事
-
プラグインをインストール後に管理画面に移動できない!
WordPressにプラグインをインストールした後に管理画面に移動できないという …
-
特定のカテゴリーの時にだけ表示させる!
WordPressの特定のカテゴリーの記事一覧で表示させたい文字列があったので「 …
-
wordpressで記事編集リンクを付ける方法
wordpressで利用するテーマによっては、記事を編集するためのリンクが記述さ …
-
WordPressのSimplePieで取得できるタイトルを変更。
WordPressに同梱されているSimplePieで取得できるタイトルの部分を …
-
カスタム投稿でカスタムフィールドの入力欄が表示されない!
カスタム投稿タイプでカスタムフィールドを利用した入力をしようとした時にカスタムフ …
-
Stinger7の記事一覧でページ送りが表示されない!
Stinger5で表示されていたページ送り(ページネーション)の部分がSting …
-
stinger7でFatal error: Call to undefined function
WordPressのテーマをstinger7に変更したところ「Fatal err …
-
パーマリンクが編集できない!
新しいブログを作る為にWordPressをインストールしたのですが、パーマリンク …
-
W3 Total CacheとDB Cache Reloaded Fixでエラー
W3 Total CacheとDB Cache Reloaded Fixの両方を …
-
get_postsで最近の投稿をタイトル順に指定した数だけ並べる
サイドバーなどに最近の投稿をタイトル順に指定した数だけ並べる必要があったのですが …