ブログ運営

WordPressでの子テーマの作り方

ワードプレスに関する記事

WordPressには子テーマという機能があります。
子テーマは親となるテーマのCSSなどの設定を引き継ぎながら独自のカスタマイズなどを行う際に非常に便利な機能です。
また、親テーマのバージョンアップ時に独自に行ったCSSなどのカスタマイズが無効にならないというメリットもあります。

  1. 親テーマの内容を引き継げる
  2. 親テーマに影響を与えずカスタマイズできる
  3. 親テーマのアップデートの影響を受けない

子テーマを使わずにテーマをバージョンアップすると「style.css」が上書きされ、これまでに行った独自のカスタマイズがリセットされてしまいます。

そのようなことを避けるためにも必ず子テーマを利用してカスタマイズしましょう。

WordPressでの子テーマの作り方

WordPressの子テーマの作り方は簡単で「style.css」と「functions.php」を用意するだけできます。

style.cssを作成する

まずはCSSを設定するための「style.css」を作成します。

style.cssには以下の2つの項目を最低限設定する必要があります。

style.cssの記述する内容

  1. Template:親テーマフォルダー名
  2. Theme Name:子テーマ名


(ファイルの中身はコメントだけでOKです。)
サンプルで今回はWordPressにデフォルトで導入されているテーマ「Twenty Seventeen」の子テーマを作成しています。

/*
Template:twentyseventeen
Theme Name:twentyseventeen-child
*/

ここで注意が必要なのはTemplateはテーマ名ではなくテーマフォルダー名です。

子テーマの名前はわかりやすものをつけましょう。

ファイルの文字コードは「UTF-8」にしておきます。

functions.phpを作成する

次にfunctions.phpを作成します。

functios.phpにはデフォルトで親テーマのCSSを読みむ処理を記述しておきます。

<?php
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' )) ;
}
?>

ファイルの文字コードは「UTF-8」にしておきます。

子テーマをWordPressへアップロードする

ここまでで準備は完了なので、子テーマをWordPressに登録します。

登録する方法は2つあり、1つはFTPでサーバへ2つのファイルをアップロードします。

アップロード先は「WordPressをインストールしたディレクトリ/wp-content/themes」に子テーマの名前でフォルダーを作成し、そこへstyel.cssとfunctions.phpをアップロードします。

もう一つは作成した2ファイルをzipで圧縮して、WordPressの管理画面の「外観」→「テーマ」で新規追加で子テーマを登録します。

子テーマが認識されない時

作成した子テーマがうまく認識されない時は以下のことを確認してみてください。

うまくいかない時は?

  1. ファイルの文字コードが「UTF-8」になっているか?
  2. style.cssの記述内容が正しいか?
  3. functions.phpで親テーマのCSSを読み込んでいるか?

まとめ

これで子テーマを無事WordPressに登録することができました。

最近では多くのテーマが子テーマを準備してくれているので自作する機会は減ったかもしれませんが、自分で作るも難しくはないのでやり方を覚えておくことをお勧めします。


以上、WordPressでの子テーマの作り方でした。