絶対に分かる!WordPressの子テーマ作成

ヘッダ画像

絶対に分かる!WordPressの子テーマ作成

WordPressでは子テーマという機能があります。
既存のテーマを作成すれば、カスタマイズする際に変更したい部分だけを子テーマで定義できます。
ベースとなるテーマとまさに親子関係となり、オリジナルのカスタマイズ部分は子テーマのテンプレートを編集します。
親のテーマにはまったく触れる必要がありません。

デフォルトで採用され、デザインだけでなく、SEO的にも評価の高いTwentyシリーズのカスタマイズにも最適です。子テーマはカスタマイズのメンテナンス性が向上するだけではなく、テーマのアップデートの際にも上書きされて元のデザインに戻ってしまうということもありません。
自作テーマはまだ敷居が高いという初心者の方にもピッタリのカスタマイズ方法です。

子テーマの作成手順

子テーマの作成はけして難しくありません。
むしろ、普通のテーマを直接変更するよりもトラブルも少ないです。
しかし、テーマとして認識されなかったり、反映されない・cssが効かないなどでつまずいてしまうケースも多いようです。

子テーマは完全に作成した後、ZIP圧縮することでダッシュボードからインストールは行えます。
ただし、カスタマイズには基本的にサーバ内のwp-contens/themes内の子テーマディレクトリを操作する必要があります。
そういう意味でFTPやレンタルサーバで提供されるファイルマネージャーサービスなどサーバにファイルをアップロードできる環境はないと難しいです。
ダッシュボードにしかアクセスしたことがないという初心者の方はここは頑張ってみてください!

テーマディレクトリの作成

上記で述べたWordPressの通常のテーマディレクトリパスであるwp-contents/themesに任意の名称で子テーマのディレクトリを作成します。

まずは子テーマのディレクトリを作る

他のテーマと同じ場所に

スタイルシートの準備

作成した子テーマのディレクトリ内に以下内容のstyle.cssを作成します。

@charset "utf-8";
/*
Theme Name:TWF-Child
Template:twentyfourteen//親テーマディレクトリ名
Author:R3098
Theme URI: https://seous.info/
Description:twentyfourteen用オリジナル子テーマ
*/
@import url('../twentyfourteen/style.css');//親テーマのCSS読み込み

スタイルシートを定義した時点でテーマとして認識しますので、管理画面よりこの子テーマを選択してカスタマイズを行っていきます。
ただし、現在は@import urlによる読み込みは推奨されていません。
wp_enqueue_script()という関数で親テーマのCSSを読み込みます。

fanctions.phpでCSS読み込みを定義する

後述しているようにfanctions.phpの取り扱いには注意が必要です。
動作自体に問題はありませんので、トラブルが怖い場合は現状では@import urlを使ってもよいでしょう。

テキストエディタで新規ファイルでfanctions.phpを作成します。
アップロード先は子テーマフォルダ内、文字コードはUTF-8Nです。

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

これでベースの準備は完了です。
ダッシュボード上でテーマとして認識しているのが、確認できるはずです。

テーマビューは設定してませんが、テーマと認識されています。

テーマビューを付けたい場合はpng形式のスクリーンショット画像をscreenshot.pngとして作成して保存します。(640×480px以下が推奨のようです)
子テーマなので親テーマのscreenshot.pngを使ってもよいでしょう。

Twenty Seventeen用子テーマダウンロード

ここまでを丁寧に読んでいただければ、ほとんどの方が迷うこともないと思いますが、参考までにTwenty Seventeen用のベース構成ファイルを用意しましたした。
ZIP圧縮していますので、ダッシュボードからそのままアップロードできます。
FTPの場合は解凍してアップロードください。
他の子テーマにしたい場合はstyle.cssのTemplate項目を対処テーマのフォルダ名に変更します。

ダウンロード:Twenty Seventeen用子テーマ構成ファイル

テーマとして認識されない

スタイルシートの必須項目は親テーマと子テーマの定義となるTheme Name(4行目)とTemplate(2行目)の2つだけです。
逆にいうと、ダッシュボードにテーマとして認識されない、つまり、子テーマが反映されない場合はこの2つの項目に「2バイト文字」あるいは「余計なスペース」が含まれていることがほとんどです。

※「Twenty Seventeen」用の「TWF-Child」という子テーマの場合でダッシュボード上で確認できるテーマ名は「Twenty Seventeen」ですが、ディレクトリ名は大文字とスペースを含まない「twentyseventeen」ですので、とくに注意が必要です。

×→Template:Twenty Seventeen
〇→Template:twentyseventeen

必要に応じて各テンプレートを用意

基本的にはデザインのカスタマイズだけであればスタイルシートで可能でheader.php・single.php・sidebar.phpなどの各テンプレートは必要ないと思いますが、必要に応じて子テーマに追加します。

例えば、index.phpを子テーマに置けば、親テーマのindex.phpではなく、子テーマのものが適用されます。

うまく表示できない・動作しない場合

上記の解説はTwenty Seventeenを例としており、これで問題なく動作するはずです。
ただし、ダッシュボード上でテーマとして認識しているが、表示がおかしいというような場合はテーマによっては使用パーツをテーマ内の専用ディレクトリから読み込んでいる可能性があります。
画像が表示されない、体裁が崩れる、メニューがないなどの場合は下記が正常に読み込まれているか確認してください。

1.追加CSS
2.スクリプト類
3.画像

また、CSSでの背景画像の指定や追加CSSテーマ内のimgディレクトリからロゴなどを読み込めば、そのままのパスでは当然表示できません。
そのような構成の場合でもほとんどがテーマ内のCSSから相対パスで指定してあるはずなので、これらをコピーしてしまうのが手っ取り早いでしょう。

例えば、このサイトのテーマはわたしがオリジナルで作っているenoughoneというものですが、jQueryのほかウェブフォントやロゴ画像などもテーマ内のディレクトリから読み込んでいます。
そのままのパスでは読み込まれないため、同じ階層になるようこれらを子テーマに加えています。
もちろん、パスを親テーマの対象ディレクトリに対して変更してもよいです。

左=親テーマ:右=子テーマ

子テーマのfunctions.php

上記のように子テーマでは該当するテンプレートが存在した場合は親テーマよりも優先されます。
しかし、functions.phpだけは扱いが異なり、子テーマが読み込まれたあとに親テーマが読み込まれます。
差分のような形で子テーマの関数が追加されることとなります。

ページが真っ白になってしまうことも

親テーマと子テーマで同じ名称の関数の定義を行った場合、エラーが発生してページそのものが表示できなくなってしまうこともあります。
function_existsによる条件分岐で子テーマで同名の関数を定義するという方法もありますが、初心者向きではなくなってしまうため、ここでは割愛します。
いずれにしても、子テーマを扱っていて「ページが真っ白になった」という場合はまずfunctions.phpが原因と考えて間違いないです。
このような状況に陥った場合は子テーマのfunctions.phpの内容を一度消去してしまえば、復旧できるかと思いますが、慎重に取り扱う必要があります。

実際のところカスタマイズに不慣れであれば、子テーマでfunctions.phpを追加することは避けた方が無難です。

表示にどのテンプレートが使われているか把握する

WordPressではインクルードという形でテンプレート内に別のテンプレートを読み込むことができます。
今回、例に挙げたTwenty Seventeenもそうなのですが、テーマ構成が複雑になると、どのテンプレートを修正すれば、希望の出力結果になるのか分からない場合があります。
つまり、投稿ページの表示(single.php)をカスタマイズしたいが、実際にはパーツテンプレートが使われているというケースです。
テーマのカスタマイズにはまず該当の表示にどのテンプレートが使用されているか知る必要があります。

このインクルードされたテンプレートを確認する方法については別記事にしましたので、カスタマイズ初級者の方はぜひ参考にしてみてください。

WordPressで表示に使用されているテンプレートをすべて知りたい

コメントを残す

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

関連記事

WordPressのログインユーザー名は丸見え!?

知っていますか? WordPressのログインユーザー名はだだ漏れだという事実を… ダッ […]

Contact Form 7の送信完了画面がでない

お手軽にお問い合わせフォームなどを設置できるContact Form 7 添付ファイルも送信でき、シ […]

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。 ウェブフォントの登場によって、描画速度が速く手軽に挿 […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]