WordPressブロックテーマで一新された、ブログデザインと制作フロー

2023年12月に、このブログのWordPressテーマをリニューアルしました。
その際、あえてこれまでのWordPressテーマ制作手法と違う手法で制作したため、この記事では新しいWordPressのテーマ形式である「ブロックテーマ」について解説をします。

今回のWordPressテーマ制作手法

今回のブログリニューアルの際に、あえて行った手法は以下の通りです。

これまで主流だったクラシックテーマではなく、これから主流になる（と思われる）ブロックテーマと呼ばれる新しいテーマ制作手法で制作する
FigmaやAdobe XDのようなデザインツールを使用しない
WordPressのフルサイト編集機能でデザインする
HTMLとCSSを書いてからWordPressテーマに変換しない
functions.php にコードを追加しない
機能を追加したい時は、なるべく既存のプラグインを使用する
どうしてもPHPが必要になった場合、自分で書くのではなくChatGPTなどの大規模言語モデルに書いてもらい、独自プラグインにする

この記事では、主に1番目の理由と、クラシックテーマとブロックテーマの違いについて解説します。
2〜3番目の「FigmaのかわりにWordPressフルサイト編集機能でデザイン」などは、別の記事として公開する予定です。

5〜7について: WordPress用のPHPは書き慣れていますが、今回はあえて他の方が開発したプラグインを使用したり、ChatGPTにコードを書いてもらうということを試しました。
機会があればその理由も記事にするかもしれません。

なぜWordPressを選択したのか

4年ぶりに開催されたWordCamp TokyoでWordPressへのモチベーションが上がったことも理由の1つです。

私は撮影スタッフとして参加し、この写真を撮影しました。

なぜWordPressブロックテーマでリニューアルしたかの前に、「なぜそもそも（note.com などのレンタルブログではなく）引き続きWordPressを選択したのか」の話をします。

理由を一言で言うと、「コンテンツが自分のものだから」です。
他者のプラットフォームでは、コンテンツは永遠に自分のものにはならないと最近痛感しています。

例えば、私は2010年頃からTwitterでWeb制作の情報を発信して、地道にフォロワーを増やしていました。
しかしある日突然、とある大富豪によってTwitterが買収されてから無茶苦茶になっていき、この記事を執筆している時点では、とうとう「YouTubeの動画URLを含むツイートが表示されない場合がある」という状況になっています。

note.com は、サービス開始から約9年間の間公式のエクスポート（記事の書き出し）機能が無く、ユーザーが他のブログサービスに移行することを許していませんでした。

noteはサービス開始8周年をむかえました #note8周年｜note公式（2022年4月に8周年を迎えた）
エクスポート機能実装のお知らせ（2023年3月）

日本の企業サイト制作でもよく利用されているSTUDIOは、2023年12月に「PV（ページ表示回数）が一定のしきい値を超えた場合、ページを非表示にする」というお知らせを突然行ったことで物議を醸していました。

レンタルブログではなく、自分で借りたサーバーにWordPressをインストールした場合、こういった問題に悩まされずに済むという安心感は大きいと思います。

もし「この部分をもっとこうしたい」と思った場合も、多くの場合はプラグインのインストールや自分でコードを書くことで解決できます。

その他の候補としては「静的サイトジェネレーターや軽量なCMSを使用する」という候補も考えられますが、以下の理由によりこのブログでは引き続きWordPressを選択しました。

高速な新サーバーに引っ越したことと、WordPress公式のCDNを使用することでLighthouseのスコアがとても高くなった（要するに、静的なHTMLとCSSのWebページと比較してもあまり劣らないほど速くなった）
このブログではWordPressのリッチなブロックエディターを使用したかった

私のブログのレンタルサーバーを、新しいサーバーに移転しました。
私のブログはWordPressで制作していますが、新サーバーではまるで静的サイトのように高速に動作しており、Lighthouseは全てのスコアで90を超えています。https://t.co/ya8UtlIX1X pic.twitter.com/QFoGO7pMn8
— なつき🐰Webデザイン&AI (@Stocker_jp) December 8, 2023

WordPressの「ブロックエディター」とは

昔のWordPressのエディター（クラシックエディター）は、Microsoft Wordのように、上部にツールバーが並んでいるUIでした。
それに対してモダンなブログサービス、海外であれば medium.com、日本であれば note.com などは、現在編集中の行の近くに[+]ボタンがあり、そのボタンをクリックすると、画像やリストなどの様々なブロックが挿入できるUIになっています。

このようなエディターは、コンテンツを配置する時にユーザーが直感的に理解しやすく、モバイルファーストデザインとの相性も良いです。
また、直感的に記事を書けることが、心地よさに繋がっている と考えるユーザーも多いようです。

WordPressでもリッチで直感的なエディターが必要とされており、バージョン5.0からブロックエディターが標準で利用できるようになりました。

WordPressのブロックエディターは note.com のエディターに似ていますが、プラグインを追加したりコードを書くことで独自のブロックを追加できたり、選択した文字列に蛍光ペンのような効果を追加する機能などを簡単に追加できるのがメリットだと感じています。（逆に、自分が利用しないブロックや効果は管理画面からオフにできます）

たとえば、私の場合は「うさぎのアイコン + 吹き出し」のブロックをよく使いそうな予感がしたので、そういったブロックは「マイパターン」として登録しておき、新しい段落で /うさぎ と入力することでサッと呼び出せるようにしています。

WordPressのエディターで吹き出しを入力する時の動き

実際に入力された吹き出しの例が↓です。

蛍光ペンのような効果や、このような吹き出しを追加するために使用しているプラグインは VK Blocks です。

従来のテーマと「ブロックテーマ」の違い

WordPressテーマを作る際、従来のようにHTMLを書いてから「header.php」「footer.php」などに分割し、WordPress独自関数を追加していく作り方のテーマは「クラシックテーマ」と呼ばれるようになりました。
ここでは、新しいブロックテーマは従来のテーマと何が違うのかについて解説します。

ご注意

「ブロックエディター」と「ブロックテーマ」は別物です のでご注意ください。

従来のテーマの問題点

「今後もWordPressテーマは従来のテーマで良いのでは？」と思う方もいらっしゃるかもしれませんが、従来のテーマは「クラシックテーマ」と呼ばれていることから分かる通り、さまざまな問題があります。

ブロックエディターで作成したコンテンツの表示が崩れることがある
フロントエンド（サイトの表側）での見た目が、エディター上での見た目と異なることがある
最新のブロックに対応していないことがある
クラシックテーマの保守運用にはそれなりの覚悟が必要

2023年10月に開催された「HTMLからWordPressのクラシックテーマにする」という趣旨のオンラインセミナーに、WordPressコミュニティの方が「これから始める人にはお勧めできない」「過去のサイトのメンテナンスのためならともかく、新規サイトでクラシックテーマで制作するのは負の遺産を増やすだけ」と懸念を表明しているのも観測しました。

このような状況で、このブログのテーマをリニューアルするのであれば、クラシックテーマではなくブロックテーマの方が良いと考えました。

新しいテーマの制作手法

ブロックテーマを制作する際は、Create Block Theme という公式プラグインを利用し、Blockbase というシンプルな公式テーマの子テーマとして制作しました。

子テーマの具体的な制作方法を知りたい方は、ここをクリックすると展開します。

WordPressで新しいブロックテーマを制作する際に、「Create Block Theme」という公式プラグインを利用すると、簡単にカスタムテーマを作成することができます。ここでは、「Blockbase」というシンプルな公式テーマをベースに子テーマを作成する手順を説明します。

ステップ 1: 必要なものを準備する

WordPressがインストールされている環境を用意します。
WordPressのダッシュボードにログインします。

ステップ 2: Blockbaseテーマをインストールする

ダッシュボードの左側のメニューから「外観」>「テーマ」を選択します。
「新規追加」ボタンをクリックします。
検索バーに「Blockbase」と入力し、検索結果からBlockbaseテーマを見つけます。
「インストール」ボタンをクリックし、その後「有効化」をクリックします。

ステップ 3: Create Block Themeプラグインをインストールする

ダッシュボードの左側のメニューから「プラグイン」>「新規追加」を選択します。
検索バーに「Create Block Theme」と入力し、検索結果からプラグインを見つけます。
「今すぐインストール」ボタンをクリックし、インストールが完了したら「有効化」をクリックします。

ステップ 4: 新しいブロックテーマを作成する

ダッシュボードの左側のメニューから「外観」>「Create Block Theme」を選択します。
「Blockbase の子テーマを作成」オプションを選択します。
新しいテーマの詳細を入力します（テーマ名、テーマURI、作者名など）。
「Create」ボタンをクリックして、子テーマの作成を開始します。

ステップ 5: 子テーマをカスタマイズする

新しい子テーマがダッシュボードの「外観」>「テーマ」セクションに表示されます。子テーマを有効化します。
「外観」>「エディター」を選択して、フルサイトエディターを開きます。
フルサイトエディターを使用して、テンプレート、スタイル、ブロックパターンなどをカスタマイズします。
変更を保存して、サイトで新しいデザインを確認します。

ステップ 6: 子テーマをエクスポートする

フルサイトエディターの右上にある「…（縦に三点並んだボタン）」をクリックします。
「ZIPファイルをエクスポート」オプションを選択して、子テーマの.zipファイルをダウンロードします。

ステップ 7: 子テーマを公開する

子テーマの.zipファイルを持っていれば、他のWordPressサイトにインストールして使用できます。

さらに詳しくは、2024年に開催予定の新しい「WordPress講座」で学べます。
以下のフォームからメールマガジンにご登録頂き、開催をお待ちください。

新しいテーマで可能になったことの一例

最も良いことは「雑誌のように自由にレイアウトできる」ことと、「思い立った時にすぐレイアウトを変更できる」ことだと思います。

雑誌のような自由なレイアウト

せっかく自由にレイアウトできるようになったのに、技術記事ではそれが活かせないことが多そうなので、新たに「写真ギャラリー」というカスタム投稿タイプを作り、「私が撮影した写真 + AIによるコメント」を投稿できるようにしました。

これまでのクラシックテーマでは、写真は小さく表示し、クリックで拡大表示されるようにしていましたが、写真ギャラリーでは写真は最初からなるべく大きく表示しています。ぜひPCでご覧ください。

PCでは、写真7:文章3 の2カラムや、写真と文章の一部を重ねた複雑なレイアウトもお楽しみ頂けます。
スマートフォンでご覧になっている方は、端末を横向きにしてご覧ください。

思い立った時にすぐレイアウトを変更できる

トップページの最新記事の下には、お知らせ+写真ギャラリーの最新記事を表示するコーナーを設けています。
これは記事ページの本文の下にあるお知らせコーナーと共通のパーツとして制作しており、内容はもちろん、レイアウトを変更したくなった時にはWordPressのサイト編集画面から簡単に変更できます。

これまでのクラシックテーマでは、ローカルでPC版WordPressクラシックテーマとスマホ版WordPressテーマを編集し、サーバーにアップロードして確認をしていたので、かなり変更が楽になりました。

YouTube動画 + メールマガジン登録の部分は、Webスクールの告知期間にはスクールのお知らせに差し替える予定です。

まとめ

ブログをブロックテーマでリニューアルしたことで、かなり記事が書きやすく、お知らせやレイアウトの変更などもやりやすくなりました。
新しいテーマはまだ完成ではなく、今後も状況に応じて柔軟に変更していく予定です。
CSSなどもまだ改善の余地があるので改善していく予定です。

記事を書くのはかなり快適になったので、作り直して良かったと思っています。

今後も、「Figmaの代わりにWordPressのフルサイト編集機能でブログをデザインした理由」などの記事を公開する予定です。

WordPressブロックテーマで一新された、ブログデザインと制作フロー