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

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

 

子テーマの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
stinger7でget_mtime()エラー

テーマをstinger7に変更した後、個別記事でコンテンツを取得できず「Fata …

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

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

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

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

no image
wordpressで記事編集リンクを付ける方法

wordpressで利用するテーマによっては、記事を編集するためのリンクが記述さ …

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

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

no image
stinger7でFatal error: Call to undefined function

WordPressのテーマをstinger7に変更したところ「Fatal err …

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

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

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

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

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

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

no image
カスタム投稿でカテゴリーを取得する!

WordPressのカスタム投稿タイプでカテゴリを取得しようとしたところ「the …