「WordPressブロックエディタの投稿で毎回ブロックを選んで入力するのが面倒」
「いつも同じパターンの投稿をするので､テンプレートをつくることはできないの？」
「投稿を施工実績として使うので決まったテンプレートをつくっておきたい」
こんな悩みにお答えします｡
じつは､WordPressのブロックエディタで毎回同じような投稿をする場合には､ブロックパターンでテンプレートを用意しておくと便利です｡
投稿ページで新規投稿時に手動でブロックパターンを選ぶことはできますが､自動的にブロックパターンが表示されるようにしておくこともできます｡
この記事では､以下について解説しています｡
- ブロックパターン､テンプレートを用意するメリット
- ブロックパターンを設定する方法
- ブロックパターンを投稿ページのテンプレートにする方法
記事を読み終えると､投稿ページにテンプレートを用意することができ､投稿をしやすくすることができます｡
私は､2015年からWeb制作の仕事をはじめて､200件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡
ブロックパターン､テンプレートを用意するメリット
- 個別のブロックを毎回選択する必要がない
- あらかじめ決まったブロックが表示されているので投稿内容に困らない
- あくまでテンプレートというだけなので､内容の増減にも対応できる
ブロックエディタ以前からある「カスタムフィールド」でも同様なことはできますが､今回だけ少し追加､変更したいとか､少し見た目を変えたいという対応は難しいです｡
逆にブロックパターンだと全体がひとつの文章､HTMLとして認識されるため､カスタムフィールド(データベース)のように､必要な情報だけを取り出して､表示するというようなことが難しいです｡
ブロックパターンを設定する方法
WordPressの投稿を建築会社などでつくる「施工事例」ページとして使う場合のテンプレートを設定してみます｡
以下のコードをfunctions.phpにコピペします｡
これでブロックパターンとして登録されます｡
add_action( "init", "add_custom_block_pattern" );
function add_custom_block_pattern(){
$content = '
<!-- wp:heading -->
<h2>ご相談内容</h2>
<!-- /wp:heading -->
<!-- wp:group {"style":{"color":{"background":"#eeeeee"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#eeeeee">
<!-- wp:list -->
<ul>
<!-- wp:list-item {"placeholder":"相談･依頼された内容を箇条書きで記入してください"} -->
<li></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>
<!-- /wp:group -->
<!-- wp:heading -->
<h2>施工概要</h2>
<!-- /wp:heading -->
<!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes">
<table>
<tbody>
<tr>
<td>施工現場責任者</td>
<td></td>
</tr>
<tr>
<td>施工日</td>
<td></td>
</tr>
<tr>
<td>施工箇所</td>
<td></td>
</tr>
<tr>
<td>施工内容</td>
<td></td>
</tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->
<!-- wp:heading -->
<h2>施工詳細</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"実際におこなった施工の詳細な説明を記入してください｡"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2>施工画像</h2>
<!-- /wp:heading -->
<!-- wp:gallery {"columns":4,"linkTo":"media","sizeSlug":"thumbnail"} -->
<figure class="wp-block-gallery has-nested-images columns-4 is-cropped"></figure>
<!-- /wp:gallery -->
';
register_block_pattern(
"works-pattern",
array(
"title" => "施工実績",
"content" => $content,
"categories" => "",
"postTypes" => [ "post" ]
)
);
}
解説
add_action( "init", "add_custom_block_pattern" );
function add_custom_block_pattern(){
}
「init」アクションフックで､「add_custom_block_pattern」関数を実行します｡(関数名「add_custom_block_pattern」はお好みの名前でかまいません)
$content = '
<!-- wp:heading -->
<h2>ご相談内容</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"実際におこなった施工の詳細な説明を記入してください｡"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:gallery {"columns":4,"linkTo":"media","sizeSlug":"thumbnail"} -->
<figure class="wp-block-gallery has-nested-images columns-4 is-cropped"></figure>
<!-- /wp:gallery -->
';
関数の中で､ブロックパターンのHTMLを$contentに代入します｡
通常のHTMLの前後にコメントアウトのような感じでブロックの設定を書きます｡
見出しの場合は「<!-- wp:heading -->」のような書き方でHTMLを囲みます｡
同じような要領で､HTMLを囲んだり､属性で設定を書き込んだりあします｡
ただ､よくわからない場合は､実際にブロックエディタで操作をしたブロックをそのままコピペするとかんたんにつくれます｡
ブロックエディタからコピペしたHTMLは改行が入っていないので､編集しやすいように調整します｡
register_block_pattern(
"works-pattern",
array(
"title" => "施工実績",
"content" => $content,
"categories" => "",
"postTypes" => [ "post" ]
)
);
register_block_patternを使って､自作のブロックパターンを追加できます｡
第1引数には､英語のタイトルをつけます｡
第2引数は配列にし､表示するタイトル(title)､追加するブロックパターンHTML(content)､必要におうじてカテゴリー(categories)､ブロックパターンを使用する投稿タイプ(postTypes)をそれぞれ指定します｡
ブロックパターンHTMLをここに書くとわかりにくくなるので､変数($content)にしました｡
ブロックパターンを投稿ページのテンプレートにする方法
登録したブロックパターンを新規投稿時に自動的に設定されるようにします｡
以下のコードをfunctions.phpにコピペします｡
add_action( "init", "new_post_template" );
function new_post_template() {
$post_type_object = get_post_type_object( "post" );
$post_type_object->template = [
[
"core/pattern",
[
"slug" => "works-pattern",
]
]
];
}
解説
add_action( "init", "new_post_template" );
function new_post_template() {
}
「init」アクションフックで､「new_post_template」関数を実行します｡(関数名「new_post_templaten」はお好みの名前でかまいません)
$post_type_object = get_post_type_object( "post" );
get_post_type_object( "post" )で､投稿時のオブジェクトをすべて取得します｡
$post_type_object->template = [ ]; }
取得したオブジェクトの「template」には初期値が入っていないので､ここにブロックパターンを設定します｡
[
"core/pattern",
[
"slug" => "works-pattern",
]
]
取得したオブジェクトの「template」には初期値が入っていないので､ここにブロックパターンを設定します｡
「"core/pattern"」のところを書き換えると､ブロックパターンではなく､ブロック個別に初期設定することもできます｡
まとめ
ブロックパターンをテンプレートにする方法を解説しました｡
- ブロックパターンを設定する
- ブロックパターンを投稿ページのテンプレートにする
ブロックエディタのギャラリーブロックをfoncyboxに対応してポップアップ表示させる方法はこちらの記事で解説しています｡
【WordPress】ギャラリーブロックで拡大画像をポップアップ表示させる方法を解説
WordPressでギャラリーブロックの拡大表示をポップアップにしたいですか？この記事では、ギャラリーブロックの拡大画像をJavaScriptを使ってfancyboxに対応したポップアップで表示させる方法を解説しています。ぜひご覧ください。
