WordPressテーマを作る

ついにこの私にも、WordPressでゼロからサイト構築をする機会が巡ってきましたよ。
WordPress案件は既存サイトの保守ばかりだったので、
今回は知識をアップデートしつつ取り組んでいきたいですな。

ということで、Theme Handbookに沿って学習を進めていきます。
https://developer.wordpress.org/themes/

WordPressのテーマはブロックテーマとクラシックテーマに分類されます。

ハイブリッドテーマというものもあるらしいが、重要なのはブロックとクラシックの違いを理解することらしいですな。

 ブロックテーマ最新のテーマ手法。一般的に標準的な規則に従い完全にブロックで構築されます。

これはWordPressのプロジェクトの将来で、このハンドブックでは主にブロックテーマを扱います。

HTMLベースのブロックテンプレートに従い画面を構築します。

 クラシックテーマPHPベースのテンプレートシステムに従い画面を構築します。

2005年にWordPress1.5で導入され現在でも広く使われています。

 ハイブリッドテーマ非公式な定義。部分的にモダンなブロック関連機能を採用したクラシックテーマに過ぎません。

megatkhs

テーマとプラグインの使い分けも大事そう。
テーマはコンテンツのプレゼンテーションをコントロールし、プラグインはサイトの動作や機能をコントロールする。
テーマが変わったとしてもサイトの機能が損なわれないことがチェックポイント。

つまり、従来のfunctions.phpみたいなのはプラグインにしろってですか？
一般公開するようなテーマじゃなかったらこの辺は気にしなくていいんですかね。

megatkhs

いまのところ、2回ぐらいテーマをエクスポートできるという点を推されていますが、何のための機能でどこに優位性があるのか一切言及されていないきがしますな。

megatkhs

とりあえず、環境構築をしていきますよ！

megatkhs

開発者らしくWSLを使用してみようと思います。
まだNode.jsも用意されていないのでnvmをインストールするところから。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

terminalを開きなおして

nvm install --lts

バージョンを確認

node -v
npm -v

megatkhs

wp-envと呼ばれるパッケージを使うことでプラグインやテーマを構築したりテストするためのローカル環境が用意できるらしいですな。

megatkhs

まずはDockerをインストール

gnome-terminalをインストール

sudo apt install gnome-terminal

レポジトリをセットアップする

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

debファイルをダウンロードする

curl -O https://desktop.docker.com/linux/main/<arch>/docker-desktop-<arch>.deb

インストールする

sudo apt-get update
sudo apt-get install ./docker-desktop-<arch>.deb

!

インストールの最後に表示される下記のエラーメッセージは無視してよい。

N: Download is performed unsandboxed as root, as file '/home/user/Downloads/docker-desktop.deb' couldn't be accessed by user '_apt'. - pkgAcquire::Run (13: Permission denied)

Docker Desktopを起動

systemctl --user start docker-desktop

バージョンを確認

docker compose version
docker --version
docker version

システム起動時にDocker Desktopを起動するように設定

systemctl --user enable docker-desktop

megatkhs

Dockerのインストールにめっちゃ時間かかった...

megatkhs

wp-envをインストール

npm -g install @wordpress/env

バージョンの確認をする

wp-env --version

バージョン確認のコマンドを実行したときに、「Dockerが起動しているか？」と聞かれたので色々調べたら、下記記事の対応で解決できましたよ。

megatkhs

作業フォルダを作成して移動する

mkdir wp-theme-example
cd wp-theme-example/

下記のコマンドを実行してDocker環境を構築する。

wp-env start

構築が完了するとhttp://localhost:8888で開発環境のサイトにアクセスできる。
ダッシュボードにアクセスするときにユーザーネームはadmin、パスワードはpassword。

テストサイトというのも立ち上がるが何か違いがあるんですかな？

どうやらwp-env自体はプロジェクトのスキャフォールディングをしてくれない模様。

megatkhs

pnpmを使いたいので有効化

corepack enable pnpm

pnpmでプロジェクトを作成する

pnpm init

一応、workspaceを有効にしておく

pnpm-workspace.yaml

packages:
  - packages/**

wp-envはローカルにインストールしてグローバルのは削除しておきますな

pnpm add -Dw @wordpress/env

npm -g remove @wordpress/env

megatkhs

.wp-env.jsonはどうやって書けばええんや

megatkhs

ここにきて初めてビルトインのブロックテーマを触ってみました。
みんなに使ってもらう公開テーマとして作るのであればブロックテーマはいい選択肢だけど、納品して運用してもらうんだったら今まで通りのクラシックテーマがいい気がするなあ。