カテゴリー
WordPress

【WordPress】Twenty Fifteen 子テーマ の CSS の読み込み方を最新のやり方に改めました♪@import → wp_enqueue_style 関数

子テーマを作る時、CSS を読み込むポイント

  • 親テーマ CSS を子テーマから読み込むには、functions.php で wp_enqueue_style 関数を使用する。
  • 子テーマの style.css で @import url(“../twentyfifteen/style.css”); とする方法は古く、非推奨 ← 子テーマ – WordPress Codex 日本語版
  • 子テーマで外部の CSS を読み込む時も、同様に wp_enqueue_style 関数を使用する。用途は親テーマの CSS の読み込に限定されない。

本投稿は、【WordPress】Twenty Fifteen の子テーマを作った記録！ | oki2a24 の続きですの♪「CSS の読み込み方が実は古い。」という課題を、解決しましたので記録いたしました。

実際の子テーマのソース修正部分・内容

子テーマの functions.php への変更

  • 親テーマ Twenty Fifteen の style.css
  • ウェブフォント Noto Sans Japanese の notosansjapanese.css

以上 2 つの CSS を @import ではなく、 wp_enqueue_style 関数を使用して読み込みます。

次のようになりました。まずは functions.php に追加した部分です。

/**
 * CSS を読み込みます。
 */
function theme_enqueue_styles() {
    // 親テーマの CSS を読み込み
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // ウェブフォントの読み込み
    wp_enqueue_style( 'oki2a24com-twentyfifteen-child-fonts',  '//fonts.googleapis.com/earlyaccess/notosansjapanese.css');
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

上記ソースについて、少し解説いたします。 wp_enqueue_style 関数は wp_enqueue_style( $handle, $src, $deps, $ver, $media ); という形を取ります。

最初の $handle は「スタイルシートのハンドルとして使われる名称。」とのことなのですが、最初はよくわかりませんでした＞＜。しかし反映後の HTML ソースを見て、$handle はタグの id 要素に使われる名称なのだとわかりましたの♪

さらに、-css が付け足され、$handle + “-css” という文字列が id となりこともわかりました。よって、$handle には、css を含める必要がございませんこと、ポイントですわね♪

続いて、get_template_directory_uri 関数ですの！

こちらのget_template_directory_uri 関数は、テンプレートディレクトリの URI を取得いたします。あらあら？

get_template_directory_uri() . ‘/style.css’ と書くことで、親テーマの style.css を取得することが目的でした。子テーマにこの記述をいたしますと、子テーマのテンプレートディレクトリの URI を得てしまい、親テーマの URI が得られ無いはずですの＞＜。どういうことかしら？

get_template_directory_uri 関数の説明をもう少し読んでみますと、「子テーマを使用している場合、親テーマのディレクトリの URI を返します。」とあります。なあんだ、欲しいものは親テーマのディレクトリの URI ですので、子テーマで get_template_directory_uri 関数を使用して親テーマのディレクトリの URI + style.css を得ることができました♪

さて、結果を見てみましょう♪

親テーマの CSS を読み込み、出力される HTML は次のようになりますわ♪

<link rel='stylesheet' id='parent-style-css'  href='https://oki2a24.com/wp-content/themes/twentyfifteen/style.css?ver=4.1' type='text/css' media='all' />

そして、ウェブフォントを読み込んだ部分の出力される HTML はこうなりましたの♪

<link rel='stylesheet' id='oki2a24com-twentyfifteen-child-fonts-css'  href='//fonts.googleapis.com/earlyaccess/notosansjapanese.css?ver=4.1' type='text/css' media='all' />

子テーマの style.css への変更

続いてですけれども、逆に style.css から削除いたしました。次の2行ですの。

@import url("../twentyfifteen/style.css");
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

おわりに

この投稿には、続きがございます。

それはこれから書くのですけれども、この後に「投稿の編集ページのフォントが Noto Serif で見つからないため設定されない。」問題を解決いたしましたら、ウェブフォントの読み込みが不要となりましたの！

今にして考えてみれば、当たり前ですわ♪編集画面でのフォントと、表示部分のフォントを1回で指定できた方がスマートですものね。さすが公式テーマですの♪さすが！

公式テーマはそんなところまで考えて作られていること、記録に残しませんと！

以上です。

「【WordPress】Twenty Fifteen 子テーマ の CSS の読み込み方を最新のやり方に改めました♪@import → wp_enqueue_style 関数」への2件の返信

コメントを残す