BLOG

ブログ

programming

2020.08.24

Gutenberg（グーテンベルク）で特定のブロックの有無を判定する方法【WordPress】

こんにちは、ティウェブ藤園です。

今回は、WordPressのブロックエディタ「Gutenberg」を使用したときの便利なカスタマイズ方法をご紹介します。

Gutenbergとは？
特定のブロックがあったときに、指定の処理をする関数
まとめ

Gutenberg（グーテンベルク）とは？

正式に公開されてしばらく経ちますが、Gutenberg（グーテンベルク）とは、WordPress5.0以降のあたらしいエディタ（編集画面）ことです。

💡それ以前の旧エディタのことはClassicエディタと呼びます。

以前のものと見た目も作りも違いますが、Gutenbergはいわゆるブロックエディタという種類のもので、エディタ内に「文章を書く」のではなく、「ブロック（要素）を積み上げてページをつくる」という感覚になります。

Gutenbergの良し悪しについては今回の記事では省略しますが、Classicエディタはおそらく段階的にサポートされなくなり、最終的にはなくなってしまうと思われるので、ティウェブではあたらしくWordPressを導入するサイトや、リニューアルする際にはGutenbergを積極的に利用しています。

余談ですが、Gutenbergとはあの活版印刷を発明したと言われるドイツのヨハネス・グーテンベルクにちなんで付けられた名前です。「グーテンベルグ」と表記される方もいらっしゃいますが、一般的には「グーテンベルク」と濁りません。

特定のブロックがあったときに、指定の処理をする関数

今回のブログの本題に入ります。

Gutenbergにはデフォルトでたくさんの種類のブロックがあり、また、オリジナルのブロックを追加したりすることも可能です。

今回ちょうど「特定のブロックが使用されているときや、特定のブロックが特定の値のときだけ、jQueryのプラグインを読み込みたい」ということがあったので、ブロックの有無と、ブロックがあった場合の値で簡単に条件分岐できる関数を作成しました。

⚠️今回の作業はWordPressのテーマファイル内のfunctions.php内で行いますが、functions.phpはかならずバックアップを取ったうえで作業するようにしてください。

完成形

早速ですが、完成形は下記の通りです。
値の入るフィールド名や、配列の並びはそれぞれ異なってくるので適宜変更してください。

/*-------------------------------------------------------
// block 有無の判定
// $blockがあり、値が$valueの場合trueを返す
// $valueの指定がない場合、$blockがあればtrueを返す
--------------------------------------------------------*/
function get_page_block($block, $value) {
	global $post; // 記事またはページ情報を取得
	$content = $post->post_content; // 本文を取り出す
	$blocks = parse_blocks( $content ); // 本文内のブロックを配列で返す
	foreach($blocks as $key => $val) { // 取得したブロックの配列をひとつひとつ確認する
		$keyIndex = $blocks[$key]['blockName']; // 取得したブロックの名前
		if($value != '') { // 値の指定があったら値とも比較するので処理をわける
			$contentVal = $blocks[$key]['attrs']['data']; // ※$blocksの中身を見て適宜変更してください
			if($keyIndex == $block) { // ブロック名が指定したブロックと一致したら
				$blockValue =  $contentVal['値の入るフィールド名'];
				if($blockValue == $value) { // 値が一致したら
					return true;
				}
			}
		} else { //値の指定がなければ
			if($keyIndex == $block) { // ブロック名が指定したブロックと一致した時点でtrue
				return true;
			}
		}
	}
}

※WordPressのデフォルトのブロック名の一覧はこちらのページがわかりやすいです。

以下で詳細を説明します。

関数の作成

まずは関数の大枠を作り、関数名を定義します。

function get_page_block() {
	return true;
}

これで、if(get_page_block())でtrueが返ってくるようになりました。
まだ何も条件が含まれていないので、これにどんどん条件を足していきます。

パラメータ（引数）が使えるようにする

次に、「ブロックの有無」と「ブロックがあった場合の値」を調べたいので、どのブロックの有無を調べるかを指定できるように、パラメータ（引数）を条件に入れられるようにします。

function get_page_block($block, $value) {
	if(ブロックの有無を判別) {
		return true;
	}
}

これで、get_page_block(‘$ブロック名’,’$値’)としたときに、それぞれ$block=$ブロック名と$value=$値としてこの関数の中で処理できるようになります。

判別する条件の作成

それでは、実際にブロックの有無を判別していきます。

まず、記事またはページ情報を取得し、本文を取り出します。
そして、parse_blocksというコンテンツの文字列からブロックを解析する関数があるので、これを利用して本文からブロック情報を取得し、配列で返します。

function get_page_block($block, $value) {
	global $post; // 記事またはページ情報を取得
	$content = $post->post_content; // 本文を取り出す
	$blocks = parse_blocks( $content ); // 本文内のブロックを配列で返す

	～ブロックの配列が返ってくる～

	if(ブロックの有無を判別) {
		return true;
	}
}

実際にvar_dump($blocks);を行ってみるとどういった配列が返ってくるのかが確認できるので、それを参照しつつ進めるとスムーズです。

ここまでできればあとは取得できた配列をもとにブロックの有無と内容を確認・判別していくだけになります。

関数の使用例

<?php if(get_page_block('core/cover', '')): ?>
	カバーブロックがあったときの処理
<?php endif; ?>

<?php if(get_page_block('newestpost', 'event')): ?>
	オリジナルブロック「newestpost」があり、
	かつ、「値の入るフィールド名」の値が「event」のときの処理
<?php endif; ?>

上記のようにテーマファイル内で記述することで、必要に応じてファイルの読み込みや処理ができるようになるため、ページの読み込み速度の改善や、プログラムの競合などの予期せぬエラーを防ぐことが可能になります。

まとめ

GutenbergはまだまだWordPress側でも開発途中で、5.0から5.4にかけても次々にあたらしいブロックが追加され、改変されています。

加えて、慣れ親しんだClassicエディタを使っているユーザーも多いため、情報がそれほど多くない状態ですが、様々なカスタマイズを加えることでより使いやすくすることが可能です。

ティウェブではWebサイトのリニューアルはもちろん、部分的な機能追加なども承っておりますので、お気軽にお問い合わせ・ご相談ください。