HA Canvas

恐らく世界中で最もミニマルなWordPress向けブロックテーマ

ブロックテーマの基礎知識

本サイトで配布しているHA CanvasテーマはWordPress用のブロックテーマですが、そもそもブロックテーマって何?従来のテーマとどう違うの?と疑問に思っている方も多いのではないかと思います。

そこで本ページでは、ブロックテーマに関する基礎知識について、私が分かる範囲で以下の項目に分けて解説していきます。

クラシックテーマ(ハイブリッドテーマ含む)とブロックテーマの違い

WordPressは、投稿や固定ページとして作成したものをデータとして保存し、訪問者のアクセスがあるとデータの中から必要なものを引っ張り出してきて目に見える形にしています。

このときのデータ→見える形にする機能を持つものをWordPressではテーマと呼んでいます。

テーマは機構上、大きく「クラシックテーマ」と「ブロックテーマ」の2種類があり、それぞれに特徴と長所・短所がありますので、それぞれのテーマの特徴と自身のサイトの特徴を踏まえて選ぶようにしましょう。

クラシックテーマ

WordPress 4.9.x以前で主として使われてきたテーマの形態です。

ページの内容を決める骨格部分(テンプレート)は、PHPという言語で作られており、テーマによって予め決まった形になっているのが特徴で、とにかく決まった形で投稿や固定ページなどのコンテンツをどんどん作りたい方に向いていると思います。

逆にテーマに備わっているテンプレートを独自のものに変えるには、PHPやCSS、機能によってはJavaScriptなどを使ってカスタマイズすることとなり、思うような表現をするには知識が必要となります。

また、公式外で配布または販売しているテーマには、独自のブロックやショートコード、独自の表現、検索エンジン最適化など、オリジナルの機能を備えているものが多数ありますが、WordPress公式内で配布されているテーマは追加機能が必要な場合にはプラグインを使うことが前提となっているため、多機能なものは少ないと思います。

「外観」メニューをマウスオーバーした時に「テーマファイルエディター」というサブメニューがある場合には、今サイトで使用しているテーマは間違いなくクラシックテーマでしょう。

補足として、後述するブロックテーマの仕組みで詳しく書きますが、サイト全体の形態をまとめたtheme.jsonというファイルが存在するクラシックテーマは「ハイブリッドテーマ」と呼ばれ、クラシックテーマと区別されていますが、機構自体はクラシックテーマと変わりありません。

ブロックテーマ

WordPress 5.0以降に登場したテーマで、このバージョンから採用されたブロック形式の投稿エディター(ブロックエディター)の機構を使ってテンプレートの作成やカスタマイズができ、自由にレイアウトやパーツの構成ができるのが最大の特徴です。

基本的にはテンプレートの部品配置や移動などはブロックエディターと同じように操作できるので、スタイルコードなどの知識がなくても色や隙間などを調整できるようになっているのも特徴です。

WordPressインストール時に有効化されているテーマ(これをデフォルトテーマと言います)は現在ブロックテーマになっており、時代によって違いはあるものの、あまりの素っ気なさにびっくりするかも知れませんが、これは前述したように自由にテンプレートのカスタマイズが行えるようわざとシンプルにしているのだと思われます。

従って、デフォルトのブロックテーマや本サイトで配布しているようなブロックテーマでは、自由にレイアウトやデザインができる分、形にするまでに時間がかかるので、手っ取り早くそれなりのサイトを作りたいという場合にはクラシックテーマの方が向いているのかも知れません。

「外観」メニューをマウスオーバーした時に「サイトエディター」というメニューがあれば、今サイトで使用しているテーマは間違いなくブロックテーマでしょう。

ブロックテーマの仕組み

先ほど投稿や固定ページのコンテンツはデータベースにデータとして保存され、必要な時に必要な部品を引っ張り出してページを構成するということを書きました。

ブロックテーマもこれと同様の仕組みになっていて、サイトエディターを通じてテンプレートやテンプレートパーツなどに行った変更はすべてデータベースに保存され、ページの表示時には加工されたデータが存在するかを判断して、あればそれを通じて、なければテーマに最初から備わっているものを通じて表示される仕組みになっています。

従って、サイトエディター上で何等かの変更をしたものを使用するという前提であれば、クラシックテーマをお使いになったことのある方なら聞いたことのあるであろう子テーマというのは原則必要ありません。

ただし、子テーマを使用しないということは、クラシックテーマと同様に更新によって追加やカスタマイズしたものが消失してしまうので、もしもコードの追加によるカスタマイズが必要な場合には、本サイトで配布している「HA My Functions」のように、プラグインとして追加すればよいでしょう。

それから先ほどクラシックテーマのところで少し触れましたが、ブロックテーマにおける基本情報(サイトの幅やフォント、見た目のスタイルなど)は、theme.jsonというファイルで一元管理されていて、WordPressでは「グローバルスタイル」と呼ばれています。

ただこれも、直接ファイルを編集するのではなく、サイトエディターの「スタイル」の項目から自由に変えることができ、テンプレートやテンプレートパーツと同様に変更した内容はデータベースに保存され、同じようにカスタマイズしたものがあるかないかによってきちんと処理して表示してくれますから、コードの知識は必要ありません。

最後に、ブロックテーマでは、カスタマイズ済のものを標準のテーマとしてパソコンなどに保存して他サイトに使いまわすことができる「エクスポート」という機能が備わっており、他サイトへ簡単に流用できるようになっているのも便利です。

ブロックテーマのカスタマイズの仕方

前項でも軽く触れましたが、ブロックテーマをカスタマイズする場合には以下のようにするといいでしょう。

テンプレートやテンプレートパーツなどのカスタマイズ

「外観」→「サイトエディター」を開き、以下のメニューからカスタマイズしていきます。

  • サイト全体の設定やスタイル、サイト内のすべてのブロックの共通デザインとしてカスタマイズしたいときは「スタイル」メニューから行います
  • テンプレートの追加やカスタマイズは「テンプレート」メニューから行います
  • パターンやテンプレートパーツの追加やカスタマイズは「パターン」から行います

すべて触り慣れていく必要はあろうかと思いますが、ブロックエディターでの投稿や固定ページの編集に慣れている方なら問題なくカスタマイズできると思います。

コードによる機能やスタイルの変更、追加

前述したように、子テーマで行う方法とプラグインを使って行う方法がありますが、子テーマを使うことでブロックテーマの特徴である「エクスポート」機能を使った場合に不都合が起こることがあるため、個人的にはプラグインを使って機能やスタイルの変更を行うことをおすすめします。

自分用の機能を追加するためのプラグインの作成方法が分からない方は本サイトで配布している「HA My Functions」の使用をおすすめします。

ブロックテーマの選び方

ここまで読んで分かる通り、ブロックテーマは機構のほとんどをWordPressのプログラムが担っており、公式サイトやその他のサイトで配布または販売されているテーマでは主に以下のような違いがあります。

  • 独自のテンプレートやテンプレートパーツが利用できるようになっている
  • 独自のパターンが利用できるようになっている
  • 独自のブロックが封入され、利用できるようになっている
  • スタイルバリエーション機能があり、簡単にデザインの着せ替えができる
  • その他独自の機能が備わっている

もちろんそれら高機能なブロックテーマを使うのは大きなメリットかとは思いますが、独自の〇〇があればあるほど、クラシックテーマの場合と同様に、いざテーマを変更しよう!と思った時に、過去のコンテンツすべてでメンテナンスが必要になったりしますから、個人的にはテーマはWordPress標準のブロックテーマの仕様に即したシンプルなものにし、必要な機能はプラグインを使って補完するという方法をおすすめします。

以上、WordPressのブロックテーマに関する基礎知識でした。

最後に、本サイトでは「HA Canvas」というWordPress用のブロックテーマを配布しています。

これは自身「WordPress標準のテーマでもいいけど、できればもっとシンプルなものを作ろう」という思いの元、余分な機能やテンプレートなどを一切排したカスタマイズベース用のテーマですので、サイトのトップページなどをご覧になり、よかったら使ってみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

※リンクやURLの挿入されているコメントは無視します