カテゴリー
WordPress

【WordPress】数分で子テーマを作ります２！カスタマイズの準備♪【Twenty Fifteen】

【WordPress】数分で子テーマを作ります！カスタマイズの準備♪【Twenty Fifteen】 | oki2a24 での子テーマ作り方が、問題は無く動くけれども古くて非推奨でしたので、新しくて推奨される作り方を改めて具体的に記します。

子テーマを作るのに必要なことまとめ

  • テーマディレクトリを作成する。
  • style.css ファイルを作成する。
    • 冒頭のコメントで、Theme Name: を記述する。
    • 冒頭のコメントで、Template: を記述する。
  • functions.php ファイルを作成する。
    • wp_enqueue_style 関数で親テーマのスタイルシートをキューに入れる関数を作る。
    • wp_enqueue_scripts アクションに作った関数をフックする。

作る子テーマの名前やディレクトリ名や構造など♪

  • 子テーマ名　Twenty Fifteen Child
  • 子テーマディレクトリ名　twentyfifteen-child
  • 親テーマは Twenty Fifteen

wp-content/theme ディレクトリ内に次のような構成で作成

twentyfifteen-child/
|-- functions.php
`-- style.css

具体的な作成手順！

コマンドと vim の CUI 環境を使用しますが、FileZila や別途エディタを使用してももちろん問題ありませんわ。

現在、theme ディレクトリにいるとします。つまり、theme がカレントディレクトリですの。

ディレクトリ、ファイル作成

まずは、子テーマディレクトリ twentyfifteen-child を theme ディレクトリ内に作成します。次に twentyfifteen-child ディレクトリ内に、functions.php ファイルと、style.css ファイルを作成いたします。

mkdir twentyfifteen-child
touch twentyfifteen-child/style.css
touch twentyfifteen-child/functions.php

style.css を編集。たったの4行追加♪

twentyfifteen-child ディレクトリに移動し、style.css を編集します。

cd twentyfifteen-child/
vim style.css

WordPress がテーマを認識できるようにする箇所のみ、つまり冒頭のコメントであるスタイルシートヘッダに必要最低限のTheme Name: と、Template: を記述いたします。

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/

functions.php を編集。６行のプログラム（コメントは別に３行）を追加！

次は、親テーマのスタイルシートを読み込みます。親テーマのスタイルシートをキューに入れる、という表現をするそうですの。馴染みがありませんわ＞＜。

vim functions.php

親テーマのスタイルシートをキューに入れるには、

  1. まずは関数を作成し、
  2. その中でwp_enqueue_style 関数呼び出して、
  3. add_action 関数を使って、作成した関数を wp_enqueue_scripts アクションにフック

するようにいたします。コードで書くと次のようになりますの♪

<?php
/**
 * CSS を読み込みます。
 */
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

なお、wp_enqueue_style 関数内で get_template_directory_uri 関数を呼び出しております。この関数は、テンプレートディレクトリの URI を取得しますけれども、子テーマの場合は親テーマのディレクトリ URI を返しますの♪

また、第一引数 ‘parent-style’ はリンクタグの id 要素になりますの。具体的には <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 として出力されますわ。

これで、必要最低限の子テーマ作成が完了です！

管理画面のテーマページから、Twenty Fifteen Child テーマを有効にしますと、親テーマである Twenty Fifteen とまったく同じ動きが確認できました♪

おわりに

本投稿の内容を基本として、Twenty Fifteen テーマを、オリジナルの Twenty Fifteen には一切変更を加えずにカスタマイズする準備ができましたの♪

今回の内容は、次のカスタマイズ作業を通して学んだことを抽出した内容となります♪次回、

この投稿の内容は、別の子テーマを作るときに大いに参考にいたしますわ♪

今回、まとめるに当たり、参考にした公式ページです。一番頼りになるのはやっぱり公式ドキュメントですの♪

以上です。

コメントを残す