レンタルサーバー比較メモ

レンタルサーバーメモブログ

 

子テーマの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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
カスタム投稿で投稿の情報を取得する!

カスタム投稿タイプで投稿が持っているいろいろな情報を取得したかったのでメモってお …

no image
W3 Total CacheとDB Cache Reloaded Fixでエラー

W3 Total CacheとDB Cache Reloaded Fixの両方を …

no image
パーマリンクが編集できない!

新しいブログを作る為にWordPressをインストールしたのですが、パーマリンク …

no image
WordPressのSimplePieで取得できるタイトルを変更。

WordPressに同梱されているSimplePieで取得できるタイトルの部分を …

no image
RSSから特定のカテゴリーを削除する

WordPressのRSSから特定のカテゴリーを削除したかったのでメモっておきた …

no image
Search Regexでタイトルなどを一括変更!

「WordPressのタイトルとかを変更したいんだけど・・・」と知り合いに相談さ …

no image
「SyntaxHighlighter Evolved」でコードソースを表示させる。

WordPressでPHPスクリプトなどのコードソースを表示されるプラグインを探 …

no image
特定のカテゴリーを削除!

WordPressで特定のカテゴリーを指定して削除したいと思ったのでメモっておき …

no image
カスタム投稿でカスタムフィールドの入力欄が表示されない!

カスタム投稿タイプでカスタムフィールドを利用した入力をしようとした時にカスタムフ …

no image
プラグインをインストール後に管理画面に移動できない!

WordPressにプラグインをインストールした後に管理画面に移動できないという …