🙆‍♂️

WordPressのブロックテーマをtailwindcssで作る

2024/05/02に公開

WordPress

※こちらに書かれている内容はあくまで実験的な内容です。

クラシックテーマならtailwindcssを使えるのですが、今後移行していくであろうブロックテーマでもtailwindcss使えないかなーとかなり以前から模索してたところ、この方法ならというのが見つかりましたので書きたいと思います!

どのような人向け？

・ブロックテーマを作りたいが、クラシックテーマに慣れてしまってなかなか作れない
・ブロックテーマでは実現が難しい細かいデザインを再現したい
・tailwinder

やり方

テーマを用意する

まず何でもいいのでテーマを用意します。今回はデフォルトテーマである「Twenty Twenty-Four」を使います。(試しにやってみたい方の解説です。ちゃんとやるならボイラーテーマを使うなど元テーマのCSSの影響を受けないようなやり方が良いです)

プラグイン「Pattern Manager」を入れる

Advanced Custom Fields (ACF)など、WordPress開発をしている方ならおなじみのプラグインを開発しているWP Engine開発のブロックパターン管理ツールです。

こちらをインストールするとPatternsというメニューがサイドバーに現れブロックパターンが管理できます。

例えば「Hero」というパターンが先頭にあるのでそれをDuplicate(コピー)し、Hero2という名前にして保存するとテーマフォルダのpatternsディレクトリにファイルができます。

勘の良い方はもう分かるかと思いますが、各ブロックの高度な設定>追加CSSにtailwindcssのクラスを記述して保存すると、gulpなりviteなりのビルドツールを使ってCSSを自動ビルドすれば良いわけです。

今回はWordPressでプラグインやカスタムブロック開発をする時に使用するwp-scriptsを使ってみます。こちらを使用するとtailwindcssは本体のみで大丈夫ですし(PostCSSやautoprefixerが必要ない)、sassを使う方はインストールしなくても対応してるので書き出してくれます。

wp-scripts

wp-scriptsのインストール

npm install @wordpress/scripts --save-dev

tailwindcssのインストール

npm install -D tailwindcss

postcss.config.jsとtailwind.config.jsを作成

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,scss}',
    './templates/**/*.html',
    './parts/**/*.html',
    './patterns/**/*.{js,php}',
    './template-parts/**/*.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

srcディレクトリを作成し、index.jsとtailwind_config.cssとstyle.scssを作成

src/index.js

import './tailwind_config.css';
import './style.scss';

src/tailwind_config.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/style.scss

// 空で良い。このファイルを作らないと書き出せない

package.jsonに以下がなかったら追加

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "wp-scripts start",
    "build": "wp-scripts build"
  },

実行してみます。

npm run start

buildフォルダにビルドされているか確認する

あとはfunction.phpでフロントエンドと管理画面でcssを読み込んでやれば良いです。

function.phpに追加

function.php

// テーマにスタイルを読み込む
function read_files()
{
  $date_id = date("YmdHis");
  wp_enqueue_style('tailwind_style', get_theme_file_uri('/build/index.css'), array(), $date_id);
	wp_enqueue_style('main_style', get_theme_file_uri('/build/style_index.css'), array(), $date_id);
}

add_action('wp_enqueue_scripts', 'read_files');

// 管理画面にスタイルを読み込む
function read_admin(){
	add_theme_support('editor-styles');
  add_editor_style(array('build/index.css', 'build/style-index.css'));
}
add_action('after_setup_theme', 'read_admin');

以上で設定は終わりです。

やり方

Patten Managerを使ってパターンを作成し、高度な設定>追加CSSクラスでtailwindcssを追加します。

そして保存します。するとビルドツールでCSSが書き出されるのでリロードすると管理画面に反映されます。

まだ実験中

このように、Patten Mangerを使うことでかなり楽に組めるようになりました。ちなみに管理画面をフロントページと同じ見え方にする方法や、WordPressもともとのブロックのスタイルをリセットしないと駄目な場合があるなど、まだまだこの実験は発展途上です。他にいいやり方があれば教えて下さい。