お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

    【WordPress】#02ワードプレスの「子テーマ」の作り方とCSSの反映方法について~前回の続き

    WordPress(ワードプレス)
    この記事は約7分で読めます。

    前回までは、子テーマのファイル構成と、必要最低限、必要な記述のお話を書きました。今回は「子テーマのstyle.cssを本番サイトに反映させる方法と、そのためのfunctions.phpへの記述方法についてお伝えしたいと思います。

    まずは、子テーマ構成のおさらい。

    前回の復習ですが、子テーマを準備する際に必要なのが、style.cssファイルと、必須項目の記述です。

    Template親テーマのフォルダ名(必須
    Theme Name子テーマの名前(必須
    Theme URI子テーマのURI
    Description子テーマの説明
    Author子テーマの作者
    Author URI子テーマの作者URI
    Version子テーマのバージョン
    License子テーマのライセンス
    License URI子テーマのライセンスURI

    最低限「Template」「Theme Name」が書いてあれば、有効化することができます。

    @charset "UTF-8";
    /*
    Template: twentytwentyone
    Theme Name: twentytwentyone-child
    */

    子テーマのstyle.cssを読み込ませる

    ただし、このままではstyle.cssに何を書いても、CSSを読み込むことはありません。「親テーマを継承して子テーマがCSSを読み込む」という指定がどこにもないためです。

    @charset "UTF-8";
    /*
    Template: twentytwentyone
    Theme Name: twentytwentyone-child
    */
    
    @media only screen and (min-width: 482px){
    .site-title {
        font-size: 80px;
        }
    }

    このように(タイトルのフォントサイズが80px)なってほしいところですが・・・

    うんともすんとも、変わりません。CSSの読み込みすら、されていません。

    functions.phpに子テーマを読み込みための記述が必要

    子テーマのstyle.cssを読み込ませるためには「functions.php」に子テーマを読み込みための記述が必要です。

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }

    ※冒頭に<?php を入れておかないとphpとして読み込まないので注意。

    詳細は、公式サイトのCODEXを参照ください。

    関数リファレンス/wp enqueue style - WordPress Codex 日本語版

    子テーマのCSSが読み込めない?

    このままでは親テーマのCSSは読み込めますが子テーマのCSSが反映されないかと思います。(読み込める方法があるのかもしれませんが・・・)

    子テーマのstyle.cssが読み込まれない場合は「依存関係として「parent-style」を設定し、その後に子テーマのスタイルシートをロードしましょう」と書いてあります。

    子テーマ - WordPress Codex 日本語版

    子テーマのスタイルシートを読み込む場合には第三引数の$depsでarray()から、スタイルシートの依存関係を作ります。「parent-style」「child-style」を設定します。

    @charset "UTF-8";
    /*
    Template: twentytwentyone
    Theme Name: twentytwentyone-child
    */
    
    @media only screen and (min-width: 482px){
    .site-title {
        font-size: 80px!important;
        }
    }

    念のため、強制CSSの!importantも追加しておきます。

    テーマのスタイルシートを読み込むための3大関数「get_template_directory_uri()」「get_stylesheet_uri()」「get_stylesheet_directory_uri()」

    ここで「get_stylesheet_uri()」「get_template_directory_uri()」「get_stylesheet_directory_uri()」についておさらいします。

    get_template_directory_uri()

    親テーマディレクトリURIを返します。

    get_template_directory_uri()

    結果

    http://twentytwentyone.local/wp-content/themes/twentytwentyone

    ですので、通常は下記のような指定がされています。

    get_template_directory_uri() . ‘/style.css’

    結果

    http://twentytwentyone.local/wp-content/themes/twentytwentyone/style.css

    ですので、現在設定されているテーマが親テーマでも子テーマでも、get_template_directory_uri()を使うと親テーマのディレクトリが返ってきますので、使用の際は注意が必要です。

    get_stylesheet_uri()

    現状テーマで使われているスタイルシートのURIをstyle.css付きで返します。子テーマのときは子テーマのURIを参照します。

    get_stylesheet_uri()

    結果(親テーマが設定されている場合)】

    http://twentytwentyone.local/wp-content/themes/twentytwentyone/style.css

    結果(子テーマが設定されている場合)】

    http://twentytwentyone.local/wp-content/themes/twentytwentyone-child/style.css

    get_stylesheet_directory_uri()

    現在テーマディレクトリURIを返します。子テーマの場合は子テーマ内を参照します。

    結果(親テーマが設定されている場合)】

    http://twentytwentyone.local/wp-content/themes/twentytwentyone

    結果(子テーマが設定されている場合)】

    http://twentytwentyone.local/wp-content/themes/twentytwentyone-child

    ですので、通常は下記のような指定がされています。

    get_stylesheet_directory_uri(). ‘/style.css’

    結果(親テーマが設定されている場合)】

    http://twentytwentyone.local/wp-content/themes/twentytwentyone/style.css

    結果(子テーマが設定されている場合)】

    http://twentytwentyone.local/wp-content/themes/twentytwentyone-child/style.css

    まとめ

    無事に子テーマのCSSを読み込みました!

    ここまで長い道のりでしたが、ようやく子テーマのstyle.cssを読み込むことに成功しました。これで親テーマが更新されても子テーマのstyle.cssの中身が消えることはありません。

    注意点としては、以前もお伝えしましたが、もし親テーマのCSSのIDやクラス名を指定していた場合、それらが変わってしまうと、子テーマは手動変更なので都度確認と修正が必要です。テーマを更新する際は、必ず事前に(特に親テーマの)バックアップを取っておきましょう。更新されてからでは何が変わったのか分からなくなってしまいます。

    それでは、すてきな子テーマライフを。ご参考ください😃

    0 件のコメント

    コメント
    タイトルとURLをコピーしました