ロフトワークの今を伝えるブログメディア

WordPressをカスタマイズする前にやっておきたい子テーマの作り方

既存テーマを直接編集するのは危険!子テーマを利用しよう

WordPressの既存テーマ、使ってますか?
僕は使っています。

WordPressでは、デザインが優れていたり、多機能なテーマが多く配布されています。
勿論そのまま利用するのも良し。

ですが、同じテーマを利用しているサイトが他にもあるかもしれないし、やっぱり自分なりにカスタマイズしたくなりますよね。

そんな時、既存テーマを直接編集するのは危険です

「テーマのアップデートが配信されていたのでうっかり更新したら、頑張ってカスタマイズしたデータが上書きされてしまった…」とか、
「カスタマイズしてたらWordpressの表示がおかしくなった!テーマを構成するファイルがたくさんあって、どこでミスったのかわからない…」とか、
既存テーマを直接編集していると、いざという時に取り返しがつかなくなることがあります。

WordPress公式オンラインマニュアル『WordPress codex』でも、子テーマの利用を推奨しています。

子テーマの作り方

必要なフォルダ・ファイルを用意する

子テーマに最低限必要なものは、たった3つだけです!

  • 子テーマのディレクトリ(フォルダ)
  • functions.php
  • style.css

フォルダ名は、わかりやすいものにしましょう。
例えば、親テーマが『Twenty Fifteen』だったら、『twentyfifteen_child』など。

style.cssに下記を記述(Twenty Fifteenの子テーマの場合)

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

注意点としては、Templateに書くのは親テーマ名というよりは、親テーマのフォルダ名です。
僕はここで何度かつまづきました(汗

functions.phpに下記を記述

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
function enqueue_my_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/style.css' ); // 子テーマのcss
}

親テーマのstyle.cssの後に、子テーマのstyle.cssを読み込ませる処理です。
こうすることで、親テーマのstyle.cssに記述されているものはそのままに、子テーマのスタイルを優先して適用できます。
テーマによって記述が多少異なりますので、親テーマのfunctions.phpを開いて、

add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );

以下がどのような記述されているのか確認しておきましょう。

アップロード

子テーマのフォルダにfunctions.php、style.cssを格納して、他のテーマが格納されいているフォルダにアップします。
大体の場合、”公開ディレクトリ/wp-content/theme”になります。

テーマを適用する

「外観」の「テーマ」からインストール済みのテーマを確認できる

アップしたら、Wordpressのダッシュボードにログインして、右メニューの「外観」にマウスを置き、サイドメニューの「テーマ」をクリックします。

正常であれば、下のような表示で子テーマがあります。
正常であれば、こんな感じの子テーマがあるはず

「有効化」をクリックして、有効化したら子テーマの適用が完了です。
自分好みにテーマカスタマイズしましょう!

安藤 大海

玉川大学卒。大学で日本美術を学び、学芸員資格を取得。
在学中から2014年まで横浜のギャラリーに勤務。画廊運営を通じて現代作家に関心を持ちはじめ、作品蒐集を始める。
2014年からweb制作会社で、デザインからWordPress実装までを担当。中小企業のコーポレートサイトを中心に制作。
2016年にロフトワーク入社。前職のスキルを活かし、主にWordpress案件における技術面のサポートを行う。
日本神話好きで、趣味は神社巡り。>>プロフィール詳細