WordPressのブロックテーマを用いたフルサイト編集のすすめ (1)導入
本記事を含むいくつかの記事で、WordPressのブロックテーマについてお話しようと思います。まずは、なぜブロックテーマを使うのか、そして、ブロックテーマを使うにあたって読んでおいた方がいいドキュメントはどれか、を説明します。
ぼくも学びながらやっているので、つたない点や間違いがあるかもしれませんが、見つけ次第適宜記事を修正します。もし問題を見つけたら [email protected] までご連絡ください。静的サイトに変換しているので、このサイトにはコメントもフォームもないのです…
1. コンテンツ管理システムとは
WordPressはコンテンツ管理システム(Contents Management System, CMS)のひとつです。以下、CMSについて軽く説明いたします。
CMSはウェブサーバー上で動くアプリケーションです。
CMSを使うと、誰もが簡単にウェブサイトを構築して運営することができます。インターネットが一般に普及しはじめた1990年代後半では、ウェブサイトを運営するにはhtmlファイルや画像ファイルを全て自分で作成したのちに、FTPなどを使ってウェブサーバーにアップロードする必要がありました。CMSを使うとそのような手間を省くことができます。
ウェブサイト、と言いましたが、CMSで運営できるタイプのウェブサイトは、blogサイトや固定ページだけのサイトです。CMSでは何らかのアプリケーションを実現するサイトは作れません。通常それらは開発者がもっと複雑なシステムを使って構築します。
CMSには、主に二つの機能があります。ひとつはコンテンツの管理、もうひとつはコンテンツの表示です。コンテンツとは、ここでは主にテキストでの記事・固定ページ・画像・動画を指します。
コンテンツの管理を使い、ユーザーはより容易にサーバーとのやりとりを行うことができるようになりました。ユーザーはブラウザだけを使って、コンテンツのサーバーへのアップロードや編集を行うことができます。特に記事はテキストベースなため、ブラウザ上で動くリッチな編集環境を用いて、スムーズに入力編集も行うことができます。また、バージョン管理もできるため、間違えた場合も元に戻すことが容易にできます。
コンテンツの表示は、CMSで管理しているコンテンツを不特定の人たちに公開する機能です。ユーザーはCMSの存在に気付かずに普通のウェブサイトを見る感覚でサーバーにアクセスすることができます。表示方法はCMSにより変わります。また、ユーザーによる表示のカスタマイズも可能です。
2. WordPressのテーマとは
WordPressのテーマとは、CMSの二つ目の機能であるコンテンツの表示をカスタマイズするための機能です。ユーザーはテーマを使うことにより、手軽にコンテンツを表示できるようになります。また、たくさん存在するテーマを選ぶことにより、コンテンツの表示を様々な方法で装飾できます。ユーザーはたくさんあるテーマからお気に入りのものを選ぶだけで良いため、とても簡単です。
WordPressのテーマは、主に3種類のページの見た目を管理します。記事を表示するページ、記事のリストを表示するページ、記事に関係なく一定の内容を表示する固定ページです。
これら3種類のページの中身は、さらに4種類の部品で作られています。ヘッダー、フッター、サイドバー、コンテンツです。ヘッダーはページの上部に、フッターはページの下部に、サイドバーはページの左右にそれぞれ配置されます。真ん中にコンテンツ本体が表示されます。WordPressのテーマはこれらの部品についても一つずつ表示を管理します。
3. クラシックテーマとブロックテーマの違い
WordPressのテーマはさらに二種類に分けられます。昔からあるクラシックテーマと、WordPress5.9から使えるようになったブロックテーマです。それぞれ利点と欠点があります。
クラシックテーマは、表示の仕方が統一されてお手軽で綺麗な代わりに、あまりユーザーがカスタマイズできないテーマです。クラシックテーマにおいては、記事を表示するページの記事本体の見た目と、固定ページの見た目をユーザーが管理することができます。一方ヘッダー、フッター、サイドバーはユーザーのカスタマイズがききづらい部品です。これらの部品はいくつかの選択肢をテーマ側が用意して、それをユーザーが選ぶ形でカスタマイズします。選択肢から外れた表示はできない代わりに、どの選択肢を選んでも綺麗に表示されるようにテーマが作られています。
ブロックテーマは、ユーザーのカスタマイズがききやすいテーマです。ブロックテーマにおいては、すべての部品とすべてのページの見た目をユーザーが管理できます。これをWordPressではフルサイト編集(Full Site Editing, FSE)と呼びます。クラシックテーマより圧倒的にユーザーが管理できるページや部品が多いため、ユーザーの好みにあった表示を自分で作り上げることができます。
一方、ブロックテーマは自由度が高いため、ユーザーの編集があまりうまくないと、簡単に表示が崩れてしまいます。配布されているテーマ自体は表示の仕方が統一されていても、ユーザーの編集によりそれがいとも簡単に崩れます。上級者向けのテーマです。
4. ブロックテーマを用いたフルサイト編集のすすめ
上級者向けと言いましたが、それをさらりと翻して初心者のぼくもブロックテーマを使うことにしました。チャレンジャーです。
ブロックテーマを使う理由は、やはりFSEの存在でしょう。クラシックテーマだと、どうしてもコンテンツ表示の幅が狭まります。この種類の記事のヘッダーにはこれを表示して続くコンテンツ本体の前にアイキャッチ画像を幅半分だけおいてその横にテキストを流し込んで云々、みたいな微妙なカスタマイズがクラシックテーマだとできません。正確には、クラシックテーマでそれをやるにはphpやcssの知識がいりますのでハードルが高いです。様々なクラシックテーマが出ているのは、ユーザーの好みが様々だからでしょう。
ブロックテーマはFSEに完全に対応しているため、そのような細かいカスタマイズもユーザー自身が自由に行えます。当然、htmlとcssで表示できる範囲内のカスタマイズ性で、しかも厳密にいうとカスタマイズできない箇所もまだ多々あるのですが、それでもクラシックテーマに比べると圧倒的に自由です。
さらに、今現在のWordPress 6.6であれば、FSEの力をphpなどのコードを書かずに発揮させることができます。ノーコードと呼ばれますね。ブロックテーマが出た当初はphpやcssを自分で編集する必要があったようなのですが、6.6の今ではプラグインを導入することにより、マウスをくりくりするだけでFSEを実現できます。これ、本当にすごいです。初心者のぼくでもある程度見た目を編集できました。
FSEの威力を知るため、みなさんには是非空白のテーマからFSEを体験してほしいと思います。ぼくはなんちゃってミニマリストなので、空白のテーマを見ると嬉しくなっちゃいます。自分が把握できる程度の複雑さで表示をカスタマイズできるので、ミニマルかつ十分な機能をもつウェブサイトを作れる可能性が大きいからです。
ブロックテーマを用いたFSEの導入によりWordPressは新たな次元へと突入したでしょう。と始めたばかりのぼくが偉そうに言ってみます。きちんとした仕事に耐えるだけのクオリティがブロックテーマにあるのかはまだわかりません。ですが、個人で使う分には十分選択の余地があると信じています。
5. おすすめのドキュメント
この記事のタイトルに「導入」と書きましたが、続くかは実は未定です。なぜかというと、公式のドキュメントの質が高いためです。ぼくいらないねこれ…
公式と言っても日本語の公式ではなく、英語の方の公式です。最近はブラウザに翻訳機能がついていて、しかも結構性能がいいので、わりと問題なく日本語に変換して読めます。
ただ、二つ悪い点があります。e-ラーニング形式のチュートリアルは、途中に出てくる質問に答えてある程度点数を取らないと先に進めません。e-ラーニング形式とはいえ、自由に読ませろ！と思ってしまいます。もう一つの悪い点というか難しい点は、ところどころに動画による解説があることです。当然英語です。まぁまぁギリギリ聞けたりするので、頑張って聞きましょう…
公式ドキュメントは初歩から存在していて、しかも前述のようにe-ラーニング形式とリファレンス形式の両方あるため、初心者から上級者まで一通りの要求を満たすことができます。以下、ぼくがざっと目にしたよさげなドキュメントをご紹介します。
WordPressの利用
レベルの違うe-ラーニング記事です。ユーザーの側から見たWordPressについて解説してあります。ブロックテーマ対応です。
ビギナー向けはぼくは見てないのですが、ざっと目次を見た感じだと、わりと初歩から教えてくれるように見受けられます。ホスティングからインストール、記事と固定ページの違い、サイトエディタ、コンテンツ生成、セキュリティ、SEOと、初心者向けの割には一通りそろっています。
中級者向けは、もっと複雑な記事の書き方、ブロックテーマを用いたカスタマイズ、最適化、セキュリティ、SEO、WordPressダッシュボードのさらなる機能解説、サイト移行についてが書いてあります。中級者向けまで読めば。サーバー管理も含めて一通りのことはできそうです。
ちいさなビジネスサイトのつくりかた
ちいさなビジネスサイトをテーマに、そもそもどうやってコンセプトやページ構成を考えるのか、からはじまって、記事を書いて表示させるまでのやり方を学べるe-ラーニングです。短いですが一通りのやり方がわかって勉強になりました。
サイトデザインとサイト編集
FSEに焦点を絞ったe-ラーニングです。これを読めば一通りFSEを行うことができるようになると思います。
ブロックテーマ自体の制作
ブロックテーマは自由なので、テーマ自体の制作とその修正の境界が曖昧です。これはテーマ自体の制作のドキュメントです。少しだけコードが出ていますが、バージョン6.6時点ですと、プラグインを導入することでコードを書かなくてもこのドキュメントに書かれたことは実現できます。しかし、どのファイルがどういう機能を持っているかについては知っておいた方がいいでしょう。特にテーマを配布しようと考えている人には必須です。
リファレンス、多分開発者向け
おそらく開発者向けのドキュメントで、ぼくは読んでません。他にもプラグインやAPIの開発についてのドキュメントがデベロッパー向けのページにあります。テーマに関しては読んでおいた方がいいかもしれません。ぼくもこれから目を通します。
6. おわりに
これらをざっと読んで作ったのが今のこのサイトです。初心者でもできるのか、とか、この程度か、とか、まぁいろいろと感想はあるとは思います。まだFSEの威力を発揮しきれてないと思いますので、今後も精進する予定です。精進の記録をblogにかけるといいな。