はじめに
WordPressでブロックテーマが導入されて久しいですね。
筆者は未だにブロックテーマで作ったことはないので一抹の危機感？を持っていて、最近唐突に「実際ブロックテーマでどのくらい作られているのだろう」と思ったのです。
そこで、以下のブロックテーマ判定コードを作ってみました。
const checkCreatedByBlockTheme = () => {
// 各種 meta 要素の wpキーワードをチェック
const hasElm_wpKeyword = [
document.querySelector('meta[name="generator"][content*="WordPress"]'),
document.querySelector('script[src*="wp-includes"]'),
document.querySelector('link[href*="wp-includes"]'),
];
// 各 link 要素の wpキーワードをチェック
const hasLinkHref_wpKeyword = Array.from(document.querySelectorAll('link')).some(linkElm => {
if(!linkElm.href){
return false;
}
return linkElm.href.includes('wp-content');
});
// src 属性を持つ各DOM要素の wpキーワードをチェック
const hasSrcTxt_wpKeyword = Array.from(document.querySelectorAll('[src]')).some(srcElm => srcElm.src.includes('wp-content'));
if(
!hasElm_wpKeyword.some(elm => elm !== null) &&
!hasLinkHref_wpKeyword &&
!hasSrcTxt_wpKeyword
){
console.log('このサイトはWordPressではないようです');
return;
}
// ブロックテーマで作成されたWPサイトには .wp-site-blocks というラッパー要素のクラス名が付与される
const is_WpSiteBlocks = document.querySelector('.wp-site-blocks');
if(is_WpSiteBlocks){
console.log('このWPサイトは「ブロックテーマ」で作成されているようです');
return;
}
console.log('このWPサイトは「クラシックテーマ」です');
}
checkCreatedByBlockTheme();
対象読者
- WordPressの開発者（経験年数問わず）
- web制作会社のディレクター
- 市況感を見たいSEO業者
- クラシックテーマからブロックテーマに移行しようと検討している方
使用方法
先のコードを開発者ツールのConsoleパネルにコピペして実行するだけです。
Qiita はWordPressサイトではないので「このサイトはWordPressではないようです」と出力されます。
コードを実行して確認した結果
上記のギャラリーサイトで30〜40サイトほど確認したところブロックテーマのWordPressサイトは2件でした。
これは正直思っていた以上に少ない印象でした。
筆者も昔、少しだけブロックテーマに触ってみたことがあるのですが、クラシックテーマと大きく変わっている印象だったのでまだまだ普及しきっていないのでしょうか。
- クラシックテーマ
page-***.phpやsingle-***.php,tax-***.phpなど主にphpファイルベースの作り方で、各phpのテンプレートファイル内にphpとhtmlを記述してサイト作成していく - ブロックテーマ
theme.jsonでカラーリングやマージン、ウェイトなど色々な設定を管理し、phpファイルはあまり使用しない。
ブロックと呼ばれるものを組み合わせてサイト作成していく。まずはデザインに適したブロックを探して（選んで）、それにスタイルをあてていく感じだそう。
ブロックテーマは非エンジニアへの配慮がなされたシステムで、ノーコードでサイト制作ができる素晴らしい機能です。
しかし反面、似通ったブロック（デザイン）になってしまったり、ブロックパターンが公開されているものの日本語圏には向いていないようなデザインに感じてしまったりという印象も持っていました。
-
ブロックの種類
https://wordpress.com/ja/support/wordpress-editor/blocks/ -
ブロックパターン
https://ja.wordpress.org/patterns/
上記のような印象を持っていたこともあって、次項で紹介するサイトデザインに感心するとともにブロックテーマでどのように作っているのか気になるところです。
余談：ブロックテーマで作られている素敵なサイトたち
ヒーローイメージの紹介動画がファーストビューで表示されているのですが初期表示速度も速く、何よりムービー自体がリラックスや安らぎを想起させてくれて一気に惹き込まれました。
サイト内に「Find Your Hotel」という各地域の宿泊施設が一覧表示されているセクションがあるのですが、そこのデザインをはじめ、インタラクションが特に素敵だと感じました。
（ブロックテーマでどうやって作ってるんだ…）
こちらもファーストビューはヒーローイメージ。
スタッフさん方の真剣味あふれる一枚が表示されていくギャラリー仕様で、自然と信頼感を抱くような素敵なデザインです。
次のセクションではプロフェッショナルの矜持を感じる紹介文が掲載されていて、サイトの視線誘導含めて練られた設計だと感心しました。
スクロールインタラクションも良い塩梅でストレスフリーです。
本家wordpress.orgサイト
流石に本家wordpress.orgはブロックテーマでした。
さいごに
思っていた以上にブロックテーマ制のWordPressサイトは少なかったですね。
もしかしたら筆者がランダムに選んだサイトがそうだっただけかもしれませんので、
素敵なブロックテーマ制のWordPressサイトを（気が向けば）教えていただけますとありがたく存じます。
（ついでに、あわよくば実装方法も！）
ここまで読んでいただき、ありがとうございました。