WordPressのブロックテーマを自作してみる

はじめに

個人的な興味レベルだが、WordPressのテーマを自作してみることにした。
無料のテーマや有料のテーマを使うという手もあるが、自分なりにWordPressを理解して使えるようになりたいというのが動機だったりします。

今後、制作過程で詰まったことや苦労したことなど、備忘録的に残していきたいと思います。

今回は、WordPress公式が配布している「Create Block Theme」を使って新しいテーマを作成する方法をまとめました。

プラグイン「Create Block Theme」のインストール

手始めにWordPress公式が配布しているブロックテーマを作成するのに便利なツール(プラグイン)をインストール。

インストール手順

  1. ダッシュボードからプラグインを選択
  2. 画面左上にある「プラグインの追加」ボタンをクリック
  3. 画面右上にある検索窓に「Create Block Theme」と入力
  4. 作成者がWordPress.org(公式)のものの右上にある「今すぐインストール」ボタンをクリック
  5. インストールが完了したら「有効化」ボタンをクリック

新規テーマ、子テーマを作ったり、既存のテーマを複製したり、サイトエディタの編集内容を自作テーマに反映させる機能がある。

新しいテーマを作るにしても一から作るのは少々大変なのでここは利用することにした。

新規テーマの作成方法

Create Block Themeを有効化すると、ダッシュボードの外観にブロックテーマを作成という項目が増えるので、こちらから作成するのが最も簡単。

表示された画面から、新しい空のテーマを作成するを選択します。
Create Block Themeというウインドウが表示されるので、以下の必要事項を入力します。
なお、以下の入力項目は後から編集可能なので、現時点で難しく考えなくても大丈夫です。

  • テーマ名(必須)
    • ここにはテーマ名を英数字で入力します。
      ここで入力したものがフォルダ名になりますので、日本語の使用は避けたほうが良さそうです。
  • テーマの説明
    • ここは入力なしで問題ありません。
      配布を考えている場合は、入力しておいた方が良いとのことです。
  • 作成者
    • ここも入れなくても問題ありません。
      配布を考えている場合は、入力しておいた方が良いとのことです。

必要事項の入力が終わったら「空のテーマの作成と有効化」のボタンをクリック。
サイト表示に必要最低限の新しいテーマが作成され、有効化されます。

新規テーマの構成

新しく作られた新規テーマは以下のような必要最小限のファイル構成になっています。

functions.phpなどもない状態からのスタートになるようですね。
ただ、これだけの構成で表示させることができるようなので、HTML、CSSなどの言語を一からすべて学習しなくてもよさそうです。
必要に応じて学習していくスタイルで行けそうな気がしてきました。

まとめ

WordPress公式が配布している「Create Block Theme」を使うことで、最も単純な構成の新しいテーマを作ることができた。

サイトエディタの使い方を学びつつ、HTMLやCSSを少しずつ学習していけば、サイト制作はできそうな気がしてきました。