2023/02

2022年末から、WordPressのクラシックテーマを、1カラムのテーマ、2カラムのテーマなど制作していました。
もとはといえば2021年春頃に、それまでMovableTypeでサイト運営に利用していたテンプレートを、WordPressに移植しようと作っていたものです。

年末年始にはだいたいの形まで出来上がりましたが、ネットや動画サイトでWordPressの勉強をするうちに、ブロックテーマを作成できないだろうかと思い始めました。

一番わかりやすかったのは、Youtubeの動画、WEBサイトチャンネルが配信する「WordPressブロックテーマ公式通りに作ってみた！＆カンタン解説！」でした。
ただ、この動画は、2022年春頃のもので、WordPressのバージョンが5.8の時のものであり、現在は6.1.1。

実際、動画で参考にされていたWordPress公式サイトの解説も少し古くなっていて、しかも詳しく知りたいところまでは書いてなく、参考資料が不十分なものでした。

ブロックテーマ制作に関する情報はあまりに少なく、一部海外の情報もgoogle chromeの翻訳で読みましたが、やはり不十分なものでした。

それでも、最初は操作に慣れず苦労したとはいえ、ブロックテーマの操作には触ってみて感覚的に覚えるといった面があったため、試しに作ってみることにしました。

ほかに参考にした情報は下記の通りです。

ブロックテーマ WordPress公式サイト
フルサイト編集に対応したブロックテーマを作ってみる オレインデザイン
WordPress のフルサイト編集で使えるブロックテーマを作ってみた データベースに接続できません
WordPressサイトエディター対応のブロックテーマ開発（基本編） Kiwi blog
WordPressブロックテーマを作ってみた　Koro-Koro.com

というより、正直まともな情報はこのくらいしかありませんでした。

参考書籍

2月初旬になって、エビスコムさんの書籍「作って学ぶ　WordPress ブロックテーマ」が発売になりました。

これにより、ビジュアルエディターやコードエディターで編集したはずのテーマが古いバージョンに戻ってしまう、FTPでバックアップしたつもりのファイルが実は古いままのもので、上書きしてしまい、また作り直し、といった失敗の原因もだいぶわかりました。

後で注意点でも述べますが、WordPressは情報が多いといいながら、公式の情報が不十分、特にβ版のブロックテーマに関してはバグかもしれないものもあり、デフォルトのcssなどブラックボックス的なところもあります。

1か月近くもかけて大体のところが完成したブロックテーマ開発の備忘録として、残しておいた方がよいと考えていたため、リアルタイムではないものの、作業の経過をメモにしておきます。

ただし最初のころの作業はひたすらブロックの操作を覚えながらいじっては壊していたようなもので、細部までは覚えていません。

意外にもフロントページが1日でできる

前述の動画「WordPressブロックテーマ公式通りに作ってみた！＆カンタン解説！」を深夜に布団の中で見た翌日、さっそく、これまでに制作したテーマをブロックテーマで作ることをやってみました。

動画を見ながら、しかし動画で参照しているWordPress公式サイトの内容が少々違うので、ネットで調べながら、それでもわからずに無闇にいじりながら無謀な作成をしました。

今でも原因がわからないのですが、一番最初の作業である、WordPress のテーマとして認識させるためのフォルダ構造、index.php と style.cssの作成と、スタイルシートへのテーマヘッダの記入の部分で、恐ろしく手間取りました。

また、theme.jsonというものはよくわからず、情報も少なく、それでもほとんど空白でも作業は進められました。

htmlに関しては手打ちもでき、20年近くも使い続けているMovableTypeのタグや、最近ではWordPressのphpも勉強してわかってきていましたが、ブロックテーマの独特のタグは、いまでもなじめません。

何度も何度もやり直すうちに、動画を見た翌日に、フロントページが出来上がりました。

レスポンシブとナビゲーション、デザイン上の不満

さて、せっかくここまで1日で進めながら、いったんブロックテーマは放置し、クラシックテーマの制作に戻ってしまいました。

レスポンシブデザインが、PCとモバイルの2段階であったこと、そしてナビゲーションのハンバーガーメニューがデザイン的に貧弱であったためです。

デザイン上の制約があり、スタイルの適用もブラックボックスで、テーマ独自のcssをいじっても思い通りにならないことも多くありました。

クラシックテーマでは、MovableTypeのテンプレートで使用していたデザインをほぼ再現でき、PC、タブレット、スマホの3段階のスムーズなレスポンシブデザインで、bootstrapのcssから必要な部分だけを抜き出して使っていました。

ところが作成したブロックテーマでのレスポンシブでは、タブレットサイズ程度に画面を狭めると、かなり見づらくなってしまい、スマホサイズでの表示との落差が大きくなってしまいます。

bootstrapのcssを適用すれば、クラシックテーマではスムーズな3段階になるのに、ブロックテーマではさまざま試みてもいっこうにできませんでした。

また、ハンバーガーメニューについては、WordPressデフォルトのナビゲーションでは、バリエーションも少なく、開くときのボタンの位置と、閉じるときの×の位置ともずれて表示されました。

対処法はあるのかもしれませんが、わかるはずもありませんでした。

デフォルトのスタイルを一部排除することで、3段階のレスポンシブを実現（※後日追記・スタイルの一部排除の方法は却下）

それでもあきらめられず、1月前半から中旬にかけて、再度ブロックテーマの制作に取り掛かりました。

ブロックテーマでは、そのページに適用されるcssのスタイルが、htmlのヘッドに抜き書きのように列挙されて記載されています。
そのどれかがbootstrapのcssより優先されているとあたりをつけ、さらにWordPressのデフォルトのcssがどこにあるのか、相当に探しました。

ナビゲーションについてはだいたい分かったものの、レスポンシブは2段階になっている程度のことしわかりませんでした。

ここでかなり原始的な方法になりますが、ページに適用されているデフォルトのスタイルを、１つ１つはずしたら、どれが影響しているのかわかると思い、調べました。

クラシックテーマでは、WordPressが勝手に吐き出すデフォルトのスタイルは排除し、すっきりするhtmlソースにするようにしていました。

MovableTypeでは、自分の意図しないcssが適用されることはなく、すべて管理画面で自分で管理でき、ブラックボックスがありません。

とにかく、レスポンシブとナビゲーションを解決しないと、自分の中ではブロックテーマは使えないという気持ちで、次の作業を行いました。

・デフォルトのcssを排除する方法をネットで調べ、functions.phpに記載して排除する。
・そのうえで、排除したcssをテーマ独自のcssに移し、1行ずつ、削除しては表示を確かめ、どれが影響しているのかを特定する。

ブロックテーマの場合には、誰でもデザインをカスタマイズできるようにしている利点もあるため、デフォルトの仕様を排除するのではなく、残せるだけ残す方法に変えました。

その結果、bootstrapの3段階のレスポンシブを妨げているのは、たった1行だけと分かりました。
functions.phpで、下記のようにglobal-stylesをいったん排除。

/* global-stylesのインラインCSS出力を排除する */
add_action('wp_enqueue_scripts', 'remove_global_styles');
function remove_global_styles() {
wp_dequeue_style('global-styles');
}

実際に障害となっていたのは、global-styles-inline-cssの中の、

body .is-layout-flex{display: flex;}

の1行だけ。
そこでこの1行を除くglobal-styles-inline-cssを、テーマ独自のcssに記述し、残しました。

ただしもう1点、レイアウトを崩す原因として、下記のcssも排除しました。

/* wp-block-columns-inline-cssのインラインCSS出力を排除する */
function prefix_remove_core_block_styles() {
	wp_dequeue_style( 'wp-block-columns' );
	wp_dequeue_style( 'wp-block-column' );
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_core_block_styles' );

実際に排除したスタイルが不明にならないように、テーマ独自のcssの中のコメントアウト内に、排除した10行ほどのスタイルをコメントとして記述してあります。

いずれもブロックのレイアウトに関するスタイルです。

（2023/2/21後日追記）

レスポンシブとナビゲーションのhtmlソースを改善すれば、WordPressデフォルトのスタイルを排除する必要はないのではないかと思い立ち、実行したところ即日、問題解消。

具体的にはレスポンシブについては、「カラム」ブロックで作成していたため、自動的にis-layout-flexのclassが付与されていたことが原因と思い立ち、「グループ」ブロックで作り直したところ、あっさり解決。

ナビゲーションについては、テーマエディターで指定していた背景色と文字色が、本来はPCとスマホで白黒逆なのに、どちらにも同じ配色が適用され、スマホでメニューが読めなくなるため、テーマエディターでの色彩指定をリセット。
cssの指定を少し追加し、問題解消。

その結果、WordPressデフォルトのスタイルはすべてそのまま適用しても表示に問題が生じなくなり、テーマとしては汎用性が高まることとなりました。

完成した3段階レスポンシブデザイン

ハンバーガーメニューのデザインに取り掛かる

そのあと、ナビゲーション部分のハンバーガーメニューの改善にとりかかりました。

最初に行った方法は、スマホメニューの「開く」「閉じる」ボタンが、それぞれ

button.wp-block-navigation__responsive-container-open
button.wp-block-navigation__responsive-container-close
でスタイルを定義され、svg画像で表示されていることがわかりました。

この背景に色を付け、角のまるみを付けて円形のマークが背景に来るようにし、位置調整をして「開く」「閉じる」ボタンが同じ位置にくるようにしました。

100%満足とは言えないものの、一応は納得できるものが1月中旬にはできていたのですが、今見ると表示位置がずれてしまっています。

その後半月の間にいじったスタイルの何かの影響でしょう。

さらに1月中旬以降に、ナビゲーションはやはりbootstrapのnavbarを使ってできないかと考え、再チャレンジすることにしました。

bootstrapのcssを使ったナビゲーションとハンバーガーメニューは、一例としては下記のようなhtmlソースで、ちょっと複雑です。

<div class="is-layout-constrained wp-block-group navbar navbar-default navbar-static-top navbar-fixed-top">
<div class="is-layout-constrained wp-block-group clearfix header-container">
<div class="is-layout-constrained wp-block-group navbar-header">
<div class="is-layout-constrained wp-block-group pull-left site-logo">
<div class="wp-block-site-logo"><a href="https://＊＊＊＊＊" class="custom-logo-link" rel="home"><img loading="lazy" width="320" height="58" src="https://＊＊＊＊＊.png" class="custom-logo" alt="ForestCafe-block" decoding="async"/></a>
</div>
</div>

<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>

<div id="navbar" class="is-layout-constrained wp-block-group navbar-right navbar-collapse collapse menu-global has-white-color has-black-background-color has-text-color has-background">

<ul class="nav navbar-nav menu-global-main has-white-color has-black-background-color has-text-color has-background has-large-font-size">
<li><a href="https://＊＊＊＊＊/">■HOME■</a> </li>
<li><a href="https://＊＊＊＊＊/">■HOME■</a> </li>
<li><a href="https://＊＊＊＊＊/">■HOME■</a> </li>
<li><a href="https://＊＊＊＊＊/">■HOME■</a> </li>
</ul>
</div>
</div>
</div>
</div>

面白いもので、一日中さんざんやってできなかったのに、翌日にすんなりできるということが何度もありました。
朝から悪戦苦闘した結果、夕方には急にできるということもありました。

bootstrapを使ったソースコードを見ると、ハンバーガーメニューの部分は、ulとliが主体であることがわかります。
PC用のナビゲーションはできていたので、これをどう実現するか、なぜ実現できないのかを、cssのclassを中心に調べました。

最初は固定観念として、ヘッダー部分のナビゲーションは、ブロックテーマの「ナビゲーション」ブロックを使うものだと思っていましたが、サイトロゴは普通の画像にし、ナビゲーションは「リスト」にすることで解決しました。

bootstrapを使ったhtmlコードでは、何重もの入れ子の中に、それぞれのdivにclassが割り当てられているため、ブロックテーマの「グループ」ブロックを入れ子にしました。

エディターで「グループ」であるdivを選択すると、サイトエディターの右下に、「高度な設定」とあり、クリックすると追加でcssのclassを割り当てられるため、元のhtmlソースをもとにclassを割り当てていきました。

悪戦苦闘した結果、詳細な経過は忘れましたが、ブロックテーマ独自のスタイルのclassも割り当てられていたため苦労したものの、bootstrapのスタイルを適用したハンバーガーメニューが完成しました。
夜中までやってできなかったのに、翌日やったら割とすぐにできたという感じです。

なお、ハンバーガーメニューを開いたときに、左上に出る矢印は、ページのトップに戻るためのボタンです。

PC表示では右下に固定表示されます。

これについてもかなり苦労しましたが、テーマ独自のscriptはfunctions.phpで読み込む処理を書くのが原則。

しかしそれをやっても読み込みはされるものの、スマホでは動作せず、原因がわかりませんでした。
ようやく、footer部分に入れれば動くことを確認したものの、functions.phpにその読み込み処理を書いても動作せず、やむなくテーマエディターで、「カスタムHTML」を選択して直接scriptの読み込みタグを書き、動作するようになりました。
（その後解決、functions.phpでの読み込み処理だけで動作するようになったが、結局原因はわからず）

ただ、ハンバーガーメニューを閉じているときに適切な位置に表示することができていないため、開いたときに表示される形になっています。
この点はまだちょっとわからないものの、ページトップに戻るボタンは重要性が高くなく、スマホではかえって誤操作のもとになる邪魔なものと考える人もいるため、一応これでOKとしています。

（※2023/2/21追記）

ページトップに戻るのボタンは、ナビゲーションメニュー内にテキスト「▲」で設定。

動作させるためのJavaScriptはタグをhead内に出力させるためのfunctions.php内の記載に誤りがあったことと判明し、問題解消しました。

具体的には、読み込むJavaScriptのバージョン指定をしていなかったため、勝手にWordPressのバージョンである6.1.1がJavaScriptのバージョンとして勝手に付与されてしまったことと、2つあるJavaScriptの読み込みの順番が悪かったことのせいで、順番を1行逆にして問題解消しました。

本格的なブロックテーマ制作へ

ブロックテーマの制作を進めるかどうかは、3段階レスポンシブと、ナビゲーションにかかっていたため、両者が解決したことで、本格的にブロックテーマの開発を進めることになりました。

1月後半には、単一記事ページ、アーカイブ記事ページ、固定ページ、404ページ、検索ページの作成を進めていきました。

しかし困ったのは、テーマエディターでデザインを更新したにもかかわらず、翌日にいじると古いバージョンに戻ってしまい、また作り直す羽目になることが何度も起きたことです。

これはブロックテーマを制作するときのかなりの注意点です。

結論をいってしまえば、テーマエディターで、ビジュアルエディターであってもコードエディターであっても、テンプレートを更新しただけでは、実際のテンプレートファイルは更新されていないことです。

ではなぜデザインが更新されるかといえば、記事の内容などと同様に、データベースに保存されているのです。

したがって、毎日FTPでテーマをダウンロードして保存していましたが、それが最新のバージョンでなかったということになります。

テーマエディターで更新した内容を、テーマのテンプレートそのものに反映させるには、zip形式でエクスポートする方法もありますが、私の環境かサーバーの環境か、エクスポートしたzipファイルは無効というメッセージが出て開けません。

やむなく、「ツール」－「テーマファイルエディター」のメニューから、テーマエディターで編集したコードを、コピー＆ペーストして更新し、これで最新のテンプレートを残すようにしていました。

しかし、より簡単な方法があります。

「Create Block Theme」プラグインをインストールし、「（テーマ名）に上書きする」をチェックして「生成」ボタンを押せば、最新のテーマ編集内容が実際のテンプレートなどに反映されます。

このプラグインでも私の環境ではなぜかエクスポートがうまくできませんが、最新の編集内容があっという間に保存できるため、何度も壊れてはやり直しということがなくなりました。

それ以外にも要注意な点があります。

テンプレートパーツを作成した後で、他のページでテンプレートパーツを使いまわし、その内容をページに合わせ編集するときは、パーツを「テンプレートから切り離す」手順を踏むことが必要です。

これをしないで編集すると、他のページで使っている同じテンプレートパーツにも変更が反映されてしまいます。

こうした注意点がわかって、作業が効率的になったのは、エビスコムさんの書籍「作って学ぶ　WordPress ブロックテーマ」を入手し、テーマのデザインの大半が完成した2月初旬のことでした。

本日時点のブロックテーマのデザイン

現在～今後の開発方針

今回のブロックテーマのコンセプトとしては、下記のようなものを目指しています。

1つのテーマで1カラム、2カラム、全幅のページ、背景画像あり＆なしなど、数多くのデザインのサイトをあっという間に配置でき、差し替えができるテーマ

設置方法＆使用方法の説明があるサイトのデータをインポートすれば、すぐにサンプルサイトが完成するテーマ

自動的にメタタグ、canonicalが入るが、自分で入力した場合にはそちらが反映され、構造化データ、パンくずリストなどの機能も自動的に適切に入るため、記事のライティングに専念できるテーマ

これらのデザイン、機能も1月後半から2月までに多くができ、今後はデザインバリエーションを増やすこととしています。

テーマ独自のカラーパレットの設定も行いました。

同時に、公式テーマに認定されるためのテーマチェックを、プラグイン「Theme Ckeck」で行い、1つ1つ解決し、プラグインでのテストには合格したところです。

なおクラシックテーマ（1カラム、2カラム）についても、もう少しでテストに合格しますが、functions.phpを分割してプラグインに分ければいいだけです。

昨日は、メタタグ＆canonical＆構造化データの機能を、funtions.phpから分割してプラグインにし、動作させるところまでを完了しました。

今後はブロックパターンを利用することにより簡単にデザイン変更ができるバリエーションの制作と、プラグイン化を行う予定です。

サポートサイトの制作、テーマの国際化なども今後の課題です。

追加のテストもクリア

2月20日には、追加で下記のテストを行いました。

テストデータでの表示テスト

画像、埋め込み動画、コメント投稿、各国語テキストなど、様々な条件でのテーマの表示、動作を検証する、WordPress推奨のテストデータをインポートして、テストを行いました。

WordPress6.2ベータ版での表示テスト

3月末にもリリースされるWorpPress6.2ベータ版での表示テストも行いました。

いずれのテストもクリアできています。

最新（2023年2月21日）の機能追加

・メタタグやパンくずリスト、canonical、構造化データなどを自動or手動挿入できるプラグインを、テーマインストール時に同時にインストールするよう促すphpを同梱。

・css、functions.php、プラグイン等のソースのコメントの英訳版を制作。

・Front-page12パターンのテンプレートパーツを制作。
・index、single、page、search、404なども同様に制作予定。

・header、footer、loop、メニュー、ピックアップコンテンツ、その他のパーツも制作。

・テンプレートパーツはさらに、テーマ独自ブロックとしても設定。

・「外観」－「ウィジェット」メニューから、ユーザーがオリジナルでブロックを登録できる機能を追加。

今後の開発予定

・サポートサイト（日本語サイト、英語サイト）の制作中。

・readmeテキスト

・テーマ独自のテンプレートパーツ、ブロックパターンの追加。

・ダウンロードサイト（無料テーマ、有料テーマ、無料プラグイン、有料プラグイン）の制作。

・メールフォームの作成・設定

（※当面ここまででWordPress6.2対応として公式サイトテーマ申請予定）

・Theme-jsonでスタイルの整理。

・テーマ独自のブロックパターンの汎用化（プラグインで他のテーマで利用できるもの）※検討中