はじめに

WordPressを使用してWebサイトを制作するにあたり、テーマのカスタマイズは重要なポイントです。そして、ベースとして使用するテーマの選択は非常に重要となります。この記事では、ワードプレスのテーマ、小テーマ、そして特に「スターターテーマ」に焦点を当て、その特徴や使用方法を解説します。

子テーマについて

WordPressの子テーマとは、WordPressの通常のテーマ（親テーマ）と連携して機能するテーマのことで、親テーマから全ての機能とスタイルを引き継ぎます。

なぜ子テーマを使用するのか？

子テーマを利用するメリットは、主に以下のようなものがあります。

WordPressのアップデートに対応しやすくなる

WordPressは、下記補足の理由で定期的なアップデートが必要ですが、アップデート時にテーマファイルも更新（上書き）されてしまいます。ここで上書きされるのは親テーマのファイルのみなので、子テーマを利用することでカスタマイズ内容を保存することができます。

開発効率アップにつながる

子テーマは親テーマから機能やスタイルを引き継ぐので、必要な部分だけ開発、改修を行えば構築作業できます。一からテーマファイルを作成する必要はないので、作業量を減らすことができます。

コードを再利用しやすい

必要な改修分を子テーマとして切り出すことができるので、別のサイトにも再利用しやすくなります。

意図しない書き換えを防ぐ

親テーマのコードを直接編集することはないので、予期しないエラーや動作不良のリスクを減らすことができます。

スターターテーマについて

スターターテーマ(Starter Themes)とは、カスタマイズを前提としたシンプルなテーマで、WordPressで自作テーマを作る際のベースとなるものを指します。代表的なものにはUnderscoresやSageがあります。以後の記事では、Underscoresを利用する前提で進めます。

前の記事でCocoonやSANGO、SWELLについて述べましたが、これらのテーマはカスタマイズ不要で使用でき、ブロガーなどの非開発者がメインで使用することを目的に作成されています。スターターテーマはカスタマイズ前提であり、WordPressを使用したWebサイト制作をする開発者が利用する目的で作られています。

また、WordPressのスターターテーマはブランクテーマ（空白のテーマ）とも呼ばれます。何もデザインされていないという意味でブランクと呼ばれますが、基本的で最低限のコードが揃った状態から開発を進めることができます。

また、スターターテーマはUnderscoresのような配布テーマではなく、自作することもできます。しかし、上述の保守・セキュリティ事項に対応するため、配布テーマを利用するのが安全で一般的と言えます。

Underscoresについて

Underscoresとは、Automattic社によって開発されたスターターテーマで、下のような特徴があります。

• Underscoresはあくまでベースとなるテーマであり、デザインや機能は最小限のものに留まります。必要なテンプレートファイルや基本的なスタイルは用意されているので、開発者がそれを拡張して独自のテーマを作成することができます。
• 最新のWordPressを反映しているため、初めてWordPressを勉強する人にぴったりです。
• アクセシビリティの標準に対応するための基本的なマークアップが含まれています。
• WordPressのカスタマイザーをサポートする基本的な実装が組み込まれています。
• Underscoresを使用することで、他のテーマやプロジェクトに容易にコードを移行することができます。

これからWordPressテーマ開発を行う人や、余計なデザイン・機能が無い状態からカスタムテーマを作成したい開発者にとって、Underscoresはとてもおすすめなテーマです。

Underscoresを用いた小テーマの作成手順

前回の記事でインストールしたWordPressに、Underscore（親テーマ）と子テーマを設定します。

Underscoresテーマのダウンロード

公式サイトにアクセスします。

【Theme Name】にサイト名を入力し、をクリックし、【GENERATE】をクリックします。ここでは、【yochitech-site】としています。

テーマファイル（ZIPファイル）がダウンロードされれば成功です。

Underscoresテーマのインストール

MAMPを立ち上げ、【http://localhost:81/wp-login.php】にアクセスし、WordPressにログインします。ログイン後、ダッシュボードで【外観】にカーソルを当て、【テーマ】をクリックします。

テーマの管理画面が開くので、【新規追加】をクリックします。

新規追加画面が開くので、【テーマのアップロード】をクリックします。

【ファイルを選択】から先程ダウンロードしたテーマファイル（ZIPファイル）を選び、【今すぐインストール】をクリックします。

しばらくして「テーマのインストールが完了しました。」が表示されたら、【有効化】をクリックしテーマを適用します。

最後にサイトプレビューし、テーマが適用されていることを確認します。先述の通りUnderscoresにはデザインが適用されていないので、表示はシンプルなものになります。

子テーマを適用する

最後に、最低限の子テーマを作り、WordPressにアップロードする手順を紹介します。実行にあたり、テキストエディタが必要になります。どのエディタでも構いませんが、Sublime Textのダウンロード方法を紹介しておりますので、よければ利用してみてください。

Sublime Text 4

好きな場所でフォルダを作成します。名前は任意ですが、分かりやすく【（親テーマ名）-child】としましょう。ここでは、【yochitech-site-child】としています。

作成したフォルダの中に、「style.css」と「functions.php」を作成します。

style.cssの作成

新規エディタを開き、以下のコードを入力し「style.css」として先程のフォルダ内に保存します。なお、【Theme Name】はフォルダ名と、【Template】はUnderscoreで作成した親テーマの名前と同じに設定してください。

/*
Theme Name: yochitech-site-child
Version: 1
Template: yochitech-site
*/

functions.phpの作成

新規エディタを開き、以下のコードを入力し「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')
);
}
?>

2ファイルの作成が完了したら、フォルダからZIPを作成します。Windowsの場合、【フォルダを右クリック】→【送る】→【圧縮（zip形式）フォルダー】で作成できます。ここでは、【yochitech-site-child.zip】を作成しています。

ZIPを作成したら、WordPressに戻り、子テーマをインストールします。【Underscoresテーマのインストール】①～④の手順を行い、【yochitech-site-child.zip】をインストールしてください。

インストールが完了したら、下記のように表示されます。【Underscoresテーマのインストール】⑤と内容は似ていますが、親テーマを指定しているため、親テーマの情報も記載されています。テーマのインストールが完了したら、咲くほどと同様【有効化】をクリックします。

【有効化】をクリックしたら、子テーマが適用されているかチェックします。メニューの【テーマ】をクリックし、子テーマに【有効】が表示されていることを確認できればOKです。

まとめ

今回の記事では、WordPressの子テーマについてと利用するメリット、実際の作成までの流れについて解説しました。WordPressでのサイト作成方法は様々ありますが、この方法だとセキュリティ対策しやすく、また安全に一からカスタマイズを行うことができるため、Web開発者にとって一番おすすめといえる方法ではないかと思います。

次回の記事以降では、実際にデザインされたサイトにWordPressを組み込み、記事サイトを作成していこうと思います。