【図解】WordPressのブロックテーマ｜子テーマの作り方

この方法は、既存のブロックテーマを分解し理解することで、wordpressのテンプレートタグがどのように使われるのかを学ぶ事ができますので、オリジナルのブロックテーマを作るためにはとても良い教材であると思います。

wordpressのテンプレートタグとは

テーマ内のPHPファイルに記述されたWordPress特有の関数のことです。これらのタグを使用することで、WordPressはコンテンツを動的に生成し、テーマの外観を調整することができます。

例えば、the_title()は、現在表示されている投稿やページのタイトルを表示するために使用されるテンプレートタグです。また、the_content()は、現在表示されている投稿やページのコンテンツを表示するために使用されます。

テンプレートタグを使用することで、WordPressテーマのデザインや機能をカスタマイズすることができます。また、テンプレートタグは、カスタム投稿タイプやカスタムフィールドなど、WordPressの拡張機能と組み合わせて使用することもできます。

localにWordPressを新規追加する

localのインストールと動作確認については、１日目でやりましたのでそちらでご覧ください。

本日は、ブロックテーマを作るためのWordPressを新たにインストールして、初期設定をします。

このアイコンをダブルクリックして、Localを起動します。

画面の左下の「＋」ボタンをクリックすると、新規でWordPressを追加できます。

以下の様に、新規追加したLocalの基本画面です。

ローカル環境の保存先は、以下の様になっています。

Go to site folder ⇒ app ⇒ public ⇒ wp-content ⇒ themes ⇒ テーマ

「themes」フォルダ内に、新規テーマ用ディレクトリを作成します。例）kanaeblocktheme

WordPressに初期設定をする

Localの基本画面から、WordPressにログインし、最低限必要な初期設定をします。WP Multibyte Patch

1. 一般設定：サイトのタイトル、キャッチフレーズを入力します。
2. サイトの言語：日本語
3. タイムゾーン：UTC+9
4. 日付形式：Y年n月j日
5. 時刻形式：H:i

以上を変更したら「変更を保存」をクリックします。

パーマリンク設定は、投稿者名になっている事を確認します。

プラグインを入れる

プラグインは、何もインストールされていないので「新規追加」をクリックして、検索窓に「WP Multibyte Patch」と入力し、インストールして有効化します。

WP Multibyte Patchは、WordPressを日本語環境下で正しく動作させるためのプラグインです。

これで、準備が整いました。

WordPress のテンプレート階層について

ja.wordpress.org　テンプレート階層　外観図

この図は、DLしていつでも見れるようにしておきましょう。

この図の基準は、一番右側のindex.phpです。 WordPressのテーマで最も基本的なファイルで、テンプレートのエントリーポイントです。左側に行くほど優先度が高く、優先順位の高いテンプレートファイルがない場合は、index.phpを使用します。

WordPressテーマに必要なファイルを作る

取り合えずですが、inde.php と style.css この２つがあれば、WordPressのテーマとして、認識されますので、早速作ってみましょう。※inde.phpの中身は、空で作成します。

style.css は、以下の内容をコピーして、必要事項を書き換えてお使い下さい。
※このstyle.cssは、ja.wordpress.orgにて配布されています。

/*
Theme Name: テーマの名前
Theme URI: テーマの 配布元URL
Author: テーマの製作者
Author URI: テーマの製作者や組織のURL
Description: テーマの説明　※改行しないこと
Tags: full-site-editing, blog
Version: 1.0.0
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fse-tutorial

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

inde.php と style.css を「themes」フォルダ内の、kanaeblocktheme フォルダ内に作成しました。

WordPressの「外観」をクリックして見ると、作成したテーマが以下の様に追加されています。

テーマのサムネイル画像を1200 × 900pxで作成し「screenshot.png」の名前で、inde.php や style.css と同じフォルダに保存します。

WordPressの「外観」をクリックして見ると、作成したテーマが以下の様に追加されています。

テーマをクリックすると、詳細が表示されます。

テーマを有効化することはできますが、今のところ中身がからっぽなのでブラウザで表示されるページは真っ白です。オリジナルのテーマを作成するときは、この中にファイルを作っていきます。

子テーマについて

WordPressの子テーマは、親テーマをベースにして作成されるテーマのことで、子テーマは親テーマの機能を継承しながら、自由にカスタマイズすることができます。

子テーマを使用することで、親テーマのファイルを変更することなく、テーマをカスタマイズできます。これにより、親テーマがアップデートされた場合でも、カスタマイズが失われることがありません。また、子テーマを使用することで、テーマのアップデートが容易になります。

子テーマの作り方

「themes」フォルダ内に子テーマ用フォルダを作成します。例）child_kanaeblocktheme

さらにchild_kanaeblockthemeフォルダの中に、「screenshot.png」と「style.css 」を作成します。今回は、index.phpは必要ありません。

子テーマ用「style.css」 以下の内容をコピーして、必要事項を書き換えてお使い下さい。

/*
Theme Name: Child kanae block theme
Theme URI: https://www.osslicense.jp/
Author: Kanae
Author URI: https://www.osslicense.jp/
Description: これは、twentytwentytwoをベースに作られた、kanae block themeの子テーマです。
Version: 1.0.0
Template: twentytwentytwo
*/

一番下の「Template: twentytwentytwo」が、親テーマの名前を指定する行です。「themes」フォルダの中にある、親として使いたいテーマのフォルダ名を記述します。

「screenshot.png」と「style.css 」を作成したら、ダッシュボードの「外観」を見てみましょう。以下の様に追加されていれば成功です。

子テーマをクリックすると、詳細が表示されます。有効化して使ってみましょう。

子テーマを「有効化」した後にサイトを表示すると、以下の様になっています。

親テーマに指定した「twentytwentytwo」の機能を引きつい出いますので「twentytwentytwo」の機能で全て動かすことができます。

子テーマのまとめ

子テーマを使うと、既存のテーマである「twentytwentytwo」などの元ファイルを編集しなくても、変更したいファイルだけを抜き出して書き換える事ができます。

さらに、親テーマが更新されても、子テーマの内容は影響を受けませんので、既存のテーマのデザインに変更を加えて利用したい場合には、子テーマを使う方法をお勧めします。

※この場合は、元のテーマのライセンスを確認して使う事を忘れないでください。