WordPress 子テーマの特長、作成方法と利用例

WordPressに新たな機能を追加しようとする時、テーマの編集を行なって、テンプレートファイルを変更する必要がある場合があります。追加する機能に対応しているプラグインがあれば、プラグインを使用するのも選択肢の一つです。

使いやすく、便利で信頼できるプラグインも沢山ある一方で、全てのプラグインが便利で、望む機能を簡単、確実に実現できるというわけではありません。プラグインによっては余計な機能が沢山ついていたり、使い方が良く分からない、設定を間違えて不具合を起こすなどのリスクもあります。プラグインを使うことが常に最善の解となるとは限りません。

目次 - Table of Contents

テンプレートファイルの編集が必要となる場合

プラグインがサポートしていない機能は、搭載するための機能を実現するコードを、テンプレートに追加したり、コード変更する必要があります。ちょっとした機能追加などは、自分でテンプレートファイルを編集したほうが簡単な場合もあります。

WordPress 標準テーマの機能追加

WordPress 標準テーマは、WordPressによる動作確認も十分に行われており、利用者も多いため、信頼性が高いです。多くのユーザーによる利用を前提にしているため、標準で搭載する機能は限られて（絞られて）います。標準で備えていない機能を利用者が必要と思う場合は、追加する必要があります。

プラグインで対応できる機能もありますが、WordPress 標準テーマの場合は、プラグインが対応していない機能や足りない機能などで、テンプレートファイルを編集する必要がある場合があります。

プレミアムテーマの機能追加

プレミアムテーマは、標準で備えている機能が多いです。足りない機能の多くはプラグインで補う形となります。プレミアムテーマの場合は、CSSの追加などを除いて、テンプレートファイルの編集が必要となることはあまりありません。CSSの追加は、テンプレートファイルを編集せずに、WordPressの標準機能を使ってできます。

特別、または複雑な機能のカスタマイズやプラグインの機能変更などの場合に、テンプレートファイルを編集する必要があることもあります。また、広告コードの設置をマニュアルでテンプレートを編集して行いたいと考える場合も同様です。（広告コードの設置・挿入に関しては、プラグインで行うこともでき、非常に高度な機能を備えるプラグインもあるので、マニュアルでテンプレートを編集して設置したいとサイト運営者が考える場合が該当します。）

テンプレート編集で対応した具体例

WordPress 標準テーマの場合は、プラグインが対応していない機能や足りない機能などで、テンプレートファイルを編集する必要があると上に書きましたが、以下に具体例を紹介します。

WordPress 標準テーマのトップページ記事全文表示から序文抜粋表示に変更

WordPress 標準テーマ、Twenty fifteen, Sixteen, Seventeenは、トップページに記事の全文を表示する仕様になっています。デフォルトでは、トップページに直近に投稿した10記事が表示されるます。全文を表示するのではなく、序文を抜粋して表示する設定をテンプレートを編集して対応しました。さらに、抜粋する文の文字数を設定変更するコードを、functions.phpに追加しました。

（変更は簡単にできます。変更方法について、別途記事を投稿する予定です。）

パンくずリストの表示プラグインのカスタマイズ

WordPress 標準テーマ Twenty Seventeenにパンくずリストを追加する設定を行った際、プラグインで表示するパンくずリストのアイテムを表示変更するために、プラグイン製作者が公開しているコードをテンプレートファイル(functions.php）に追加しました。

プラグイン Breadcrumb NavXT パンくずリストの設置と表示カスタマイズ方法

構造化データで足りなかったマークアップの出力追加

WordPress 標準テーマ Twenty Fifteen を使用しているブログで、Search Consoleの構造化データレポートにauthorがありません。とエラーが表示されました。対応は、テンプレートファイルを編集してコードを1行追加しただけです。ちょっとした問題に対する対応もテンプレートファイルを修正して対処することがあります。

構造化データレポートでauthorがありませんのエラーが発生した場合の対処法

特定ページでWordPress自動整形機能を無効にする

ネイティブAMP対応ブログで、AMPの新しいコンポーネント、イメージスライダーの機能を記事内に設定したところ、動作はしたのですが、コード内にbrタグが自動挿入されて、AMPのバリデーションでエラーが発生しました。そのため、イメージスライダーを表示しているページのみ、WordPress 自動整形機能を無効にしました。
WordPress でpタグやbrタグの自動挿入を無効に設定する方法

備考：
WordPress 自動整形機能を無効にするプラグインはあるのですが、更新が3年以上されていないこと、機能追加自体は簡単なコード追加で済むため、テンプレートファイルを編集して対応しました。

子テーマの特長と利点

WordPressは、更新（アップデート）が頻繁に行われます。プラグインやテーマもアップデートが頻繁に行われています。テーマをアップデートすると、テンプレートファイルは新しい内容に上書きされます。テンプレートファイルを編集していた場合、変更・設定部も上書きされてしまうため、テンプレートの編集を改めてやり直さなければならなくなります。

テーマのアップデートの度に、テンプレートファイルを再編集するのは非効率です。また、変更内容が思い出すのに時間がかかったり、変更が正常に動作しないと余計に労力と時間を消費してしまうことになりかねません。この様な問題の対策として、子テーマがあります。

子テーマを作成して、テンプレートファイルの編集を子テーマで行うと、親テーマをアップデートしても、テンプレートの変更内容は子テーマの方で保持されます。（アップデートするのは親テーマで、変更を行った子テーマはそのまま保持できるためです。）

テンプレートファイルの編集・変更は子テーマを使用するのがお勧めです子テーマを作成して使用することで、テンプレートの設定変更の保守性や効率を（飛躍的に）高めることができます。

子テーマの作成方法

必要なツールと基本知識

子テーマの作成は、基本的に難しいものではありません。簡単、難しいと言うのは人によって異なりますが、テンプレートの編集を行うことができる人であれば、求められる知識レベルはほぼ同等です。（人によっては簡単と思われると思います。）

子テーマを作成する上で必要なツールは、FTPとテキストエディターです。

FTP

FTPは、サイト運営する上で必須に近いツールです。しかし、最近はサイト運営も簡単に行うことができる環境になってきているので、FTPを使われたことがない方もいらっしゃるかもしれません。FTPの使い方は覚えておいて損はないです。FTPの代わりにレンタルサーバー会社が提供するファイルマネージメントツールを利用する方法もあります。

子テーマでFTPを使用して行う作業は、ディレクトリー（フォルダー）の作成とファイルのアップロードです。

テキストエディター

Notepad++などのプレーンなテキストエディター。Macの場合は、TextEditがお勧めです。

子テーマのフォルダーを作成

WordPressがインストールされているルートディレクトリー（public_html直下、またはその下（上）の階層）の下（上）にあるテーマディレクトリー(wp-content/themes)の下に子テーマのフォルダー（ディレクトリー）を作成します。

子テーマのフォルダー名は、ベストプラクティスとして、親テーマ名 -childが推奨されています。例えば、親テーマがWordPress標準テーマtwentyseventeenの場合は、小テーマの名前は”twentyseventeen-child”にします。

ステイルシートの作成

子テーマには、style.cssという名前のスタイルシートファイルが必要です。ファイル内の最上部には、以下のヘッダーコメントが必須となります。コメントによってWordPressが必要とするテーマの基本情報を通知します（WordPressに認識させます）。

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

上のコードをコピーし、テキストエディターにペーストして、必要な箇所の内容を変更後、保存して、style.cssという名前のテキストファイルを作成します。

以下の情報は必須です。

Theme Name – ユニークなテーマの名前
Template – 親テーマのディレクトリー名

できるだけ適切な情報を入れるようにして下さい。子テーマで必須のファイルはstyle.cssだけですが、親テーマのスタイルシートの情報を読み込んで子テーマと組み合わせる（キューする）ためには、functions.phpが必要になります。

備考：
現在のWordPressでは、CSSの追加は標準機能として備えられているため、CSSの追加をするために子テーマは必要ありません。子テーマは、機能を追加する場合に必要になることが多いです。機能を追加する場合は、functions.php が主に使用されます。つまり、functions.phpは、子テーマを使用する上で、実質的に必須となります。

スタイルシートのエンキュー(Enqueue）

子テーマのディレクトリーにfunctions.phpを設置して、現在使用している親テーマのスタイルシートの情報を読み込んで子テーマのCSS情報と組み合わせる（エンキューする）ことをWordPressは推奨しています。

子テーマのstyle.cssにコードが含まれている場合（通常の場合）のエンキューを行う推奨するコード例は以下のようになります。

<?php
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {$parent_style = ‘parent-style’; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme.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 ),
wp_get_theme()->get(‘Version’)
);
}
?>

上のコードをコピーし、テキストエディターに貼り付けて、functions.phpという名前で保存します。

ファイルのアップロード

上で紹介した作業を行って作成した2つのファイル(style.css と functions.php) を、作成した子テーマのディレクトリー（フォルダー）にアップロードします。

子テーマの有効化

WordPressにログインして、ダッシュボードのメニュー「外観」から「テーマ」をクリックします。インストールされているテーマがプレビューで表示されます。作成した子テーマ（今回の場合は、Twenty Seventeen Child Theme)が含まれて表示されています。

プレビュー画像は設定していないため、表示されませんが、実質的には問題ありません。無事に動作しているか心配な場合は、先に「プレビュー」ボタンを押して、無事にテーが表示して動作するか確認できます。問題なければ、「有効化」を押すと、子テーマが有効化されます。

テンプレートファイルの追加

子テーマで基本的に必須となるファイルは、上で紹介したstyle.css と functions.php の2つのファイルになります。それ以外の親テーマのファイルを子テーマのフォルダー（ディレクトリー）に設置すると、子テーマ側のファイルが親テーマの同盟のファイルの内容を上書きして表示します。（ファイルの内容が優先して実行されます。親テーマのファイルの中身が書き換えられるわけではありません。）

style.css と functions.php 以外の親テーマのファイルを編集する必要が発生した場合は、親テーマのファイルをコピー（またはダウンロード）して、子テーマのフォルダーにペースト（アップロード）します。

例えば、親テーマのheader.php内のコードを編集したい場合は、ファイルを複製して子テーマのフォルダーに設置して、カスタマイズ（編集）を行います。

functions.phpの使い方

子テーマのfunctions.phpは、親テーマのfunctions.phpを上書きせずに動作します。子テーマのfunctions.phpにコードを追加した機能は、親テーマのfunctions.phpに記載されている機能に加えて実行される仕組みになっています。この様な仕組みになっているため、機能追加のコードを子テーマのfunctions.phpに追加することで、親テーマの標準機能に加えて実行でき、利便性、保守性が高いです。

子テーマの設定が反映されない場合の対処

子テーマで設定して、サイトを表示しても、設定した機能が動作しない場合、キャッシュが関連していることが多いです。新たに設定した情報ではなく、キャッシュに保管されている情報が実行されてしまう場合があります。

キャッシュのプラグインなどを使用している場合は、プラグインのキャッシュを削除すると設定が反映される可能性が高いです。また、CloudflareなどのCDNを使用している場合、CDN側のキャッシュ情報が更新されないと、新しく設定した情報は反映されません。そのため、CDN側のキャッシュをリフレッシュ（削除・クリア）する必要があります。

設定内容自体が適切でなかったり、設定の仕方が適切でない場合を除けば、キャッシュをクリアすれば、子テーマで設定した変更内容は反映されます。