前回・前々回で少し道が逸れてしまいましたが、テーマのカスタマイズを行うための準備は完了しました。

しかし、テーマのカスタマイズを行うために少しだけ前準備が必要となります。

親テーマと子テーマについて

テーマのカスタマイズの前知識を一つ。

テーマをカスタマイズするには、テーマのファイルを編集する必要があります。

ただ、直接ファイルを編集した場合、テーマの自動更新があった場合に編集した情報が上書きされてしまうので編集した情報は消えてしまいます。

それに大元のファイルを直接編集するのも少し不安ではありますよね…

しかし、この悩みを解決する良い方法があります。

テーマのカスタマイズには、大元のテーマ(親)を継承しつつ新たな機能を盛り込んだ新しいテーマ(子)を作ることができる親子関係の仕組みというものがあります。

親テーマは編集せず子テーマのみ編集を行います。

テーマの更新があった場合は通常通り親テーマに反映されますが、その親テーマの持つ情報をしっかりと子テーマは維持します。

これによって、テーマの更新があっても編集した情報が上書きで消えてしまう心配もなく、大元のファイルを直接編集することもなく、カスタマイズ作業を行えるようになります。

子テーマの作成

「themes」フォルダ内にある親テーマのフォルダと同じ階層に子テーマのフォルダを作成します。

今回は「Twenty Sixteen」のテーマをカスタマイズしようと思うので「twentysixteen-child」という名前のフォルダを作成しました。

「twentysixteen-child」フォルダ内に「style.css」というファイルを作成します。

「style.css」をテキストエディタで開き、以下のようなコードを記述します。

こちらは「Twenty Sixteen」の子テーマとした場合の例となります。

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/

記載した意味はこのようになっています。

  • Theme Name : テーマの名前
  • Template : 親テーマのフォルダ名

次に「functions.php」ファイルを作成し、以下のコードを記述します。

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

子テーマを有効化

WordPress管理画面の左側のメニューの「外観」→「テーマ」をクリックします。

「Twenty Sixteen Child」テーマが追加されているので「有効化」をクリックします。

これで子テーマの内容が反映されるようになります!

まとめ

WordPressの子テーマについて解説しました。

テーマのカスタマイズをする際は、子テーマのファイルを用意することで効率良く編集することができます。

テーマをカスタマイズする際は、是非子テーマを利用するようにしましょう。

更新日 : 2019年6月20日

投稿者: TWEI

趣味はプログラミング。 以前は仕事でプログラミングをやっていました。現在はWebエンジニアを目指して勉強中。 勉強で得た知識などをブログで発信していく予定です。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA