ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

WordPressテンプレートエディターの使用方法【version5.8新機能】

ワードプレスはversion5.8からGutenberg(ブロックエディター)内でテンプレートエディター機能が使えるようになりました。

従来、テンプレートを作成するためには、PHPを使ってテンプレートファイルを作成する必要がありましたが、テンプレートエディターを使えば管理画面の中で作成できます

本記事では、そんなテンプレートエディターの使い方について紹介します。

例としてテーマはTwenty Twenty-Oneを使用しますが、他のテーマでも同様です。

目次

テンプレートエディターを使える設定とする

テンプレートエディターは、デフォルト状態では使用できるようになっていません

使えるようにするには、functions.phpの中に次の記述をする必要があります。

add_theme_support( 'block-templates' );

functions.phpの中にはadd_theme_support( )を記述しているところがあるので、そこに続けて加えてやればよいでしょう(親テーマをそのまま使用する場合)。

テーマTwenty Twenty-Oneの場合、functions.phpの次の箇所が該当箇所となります。

Twenty Twenty-Oneのfunctions_phpへの記述箇所

実際の手順としては、ダッシュボードメニューの外観>テーマエディターと進めてfunctions.phpを開いてから、次のようにしてやります。

Twenty Twenty-Oneのfunctions_phpへの記述手順

テンプレートエディターの使い方

ここから先は、Gutenberg(ブロックエディター)を開けて進めていきます。
(投稿でも固定ページでもどちらでも可能)

※テンプレートエディターはGutenbergエディターを使う必要があります。

テンプレートを作成する

例として、ヘッダー部の背景色を変更したテンプレートを作成します。

1.テンプレートの名前を入力する

①画面右の情報パネルの”テンプレート”を開ける
②”新規”をクリック
③作成するテンプレート名を入力
(今回は”header”としました)
④”生成”をクリック

これでテンプレートエディターが開きます。

※functions.phpへの記述が有効でないと情報パネルに①”テンプレート”や②”新規”は表示されません。

テンプレート名を入力

※初めてテンプレートを生成する場合、”テンプレートエディターへようこそ”という表示が出ますが”始めてみよう”をクリックして次へ進めてください。

テンプレートエディターへようこその画面表示

2.テンプレートを編集(headerに背景色をつける)

テンプレートエディターが開くと、次のような画面となります。

サイトタイトルとキャッチフレーズが上部に表示されています。

テンプレートエディターを開いた直後

マイブログ”=サイトタイトル
ちょうど別のWordPressサイト”=キャッチフレーズ

ブロック構成を確認するため、リスト表示をしてみましょう。

画面左上の”アウトライン”をクリックするとリスト表示されます。

リスト表示をする

リスト表示を見れば、ヘッダー部のサイトタイトルとキャッチフレーズは、”サイトのタイトル”ブロック”サイトのキャッチフレーズ”ブロックにより、それぞれ表示されていることがわかります。

ヘッダー部の構成ブロック

したがって、ヘッダー部に背景色をつけるには、”サイトのタイトル”と”サイトのキャッチフレーズ”の入ったグループブロックに着色すればよいことになります。

※もし、ヘッダーなしのテンプレートにしたい場合は、このグループブロックごと削除すればよいわけです。)

ヘッダーに背景色をつける具体的手順は次の通りです。
①リスト表示内のヘッダーに相当するグループブロックをクリック
②画面右パネルの”色”を開ける
③”背景色”の中から色をクリック

ヘッダー部に背景色をつける手順

以上でヘッダー部に背景色が設定できました。

”投稿タイトル”と”投稿コンテンツ”ブロックは必須ブロック

もう一度リスト表示を見てみましょう。

投稿タイトル”ブロックと”投稿コンテンツ”ブロックが存在しています。

投稿タイトルと投稿コンテンツブロック
ブロック機能
投稿タイトル投稿や固定ページのタイトルを表示する
投稿コンテンツ投稿や固定ページの本文を表示する

ブロックの機能を見ればわかるように、”投稿タイトル”と”投稿コンテンツ”ブロックはテンプレートとしては必須のブロックとなります。

これらがないと、このテンプレートを使って投稿や固定ページを作成しても、ヘッダー部以外何も表示されないというわけです。

記事コンテンツの挿入のしくみ

したがってこのまま”投稿タイトル”と”投稿コンテンツ”ブロックは残しておきましょう

このほか、version5.8から新設されたブロックの”テーマ”グループの中には、コンテンツを表示することができるさまざまなブロックが準備されています。

新しいブロックグループ_テーマ

例えば、アイキャッチ画像を表示させたいならば、”投稿のアイキャッチ画像”ブロックを挿入しておけばよいわけですね。

記事一覧表を表示するならば、次の記事が参考になります。

テンプレートを使う

作成したheaderテンプレートを使って記事を作成していきます。

Gutenbergエディターの中で作成したテンプレートを呼び出す

記事を書く


公開する

という流れになります。

1.投稿または固定ページで”新規追加”をクリックしてGutenbergエディターを開く

2.画面右パネルの”テンプレート”を開いて”header”をクリック

headerテンプレートを選択

3.ページタイトルと記事本文を作成して”公開”

以下のようなタイトルと記事本文としました。

コンテンツを作成して公開

4.サイト表示

以下のように、背景色をつけたヘッダーの下に作成した記事内容が表示されます。

作成したページのweb表示

テンプレートの編集

テンプレートは後から編集変更することもできます。

先ほどのheaderテンプレートで作成した記事を見ると、ヘッダー部と記事タイトルが詰まり過ぎに見えるので、スペーサーブロックで余白を挿入しようと思います。

1.投稿または固定ページで”新規追加”をクリックしてGutenbergエディターを開く

2.画面右パネルでテンプレートの”編集”まですすめる

テンプレートの編集手順

3.テンプレートを編集して公開
(”区切り”ブロックの下に”スペーサー”ブロックを挿入)

テンプレーtの編集(スペーサーの挿入)

スペーサーの高さは30pxに調整しています。

以上でテンプレートの編集ができたので、先ほど作成した記事を再度表示させてみましょう。

編集後テンプレートでの記事web表示

テンプレートの編集が反映されて、ヘッダー部とタイトル間がいい感じになりました。

まとめ

テンプレートエディターを使って独自のテンプレートを作成する手順を紹介してきました。

初めて使う時に戸惑いがちなのが、”投稿タイトル”と”投稿コンテンツ”ブロックの取り扱いです。

これらはテンプレートとしては必須ブロックなので、必ず残すようにしましょう。

このほか、ワードプレスversion5.8で導入された新機能はこちらです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる