🐥

TailwindをWPに統合して、管理画面更新時に自動反映したい

に公開
WordPress
Tailwind CSS
tech

はじめに

※localで実装・検証している実験的な内容です。

この記事は備忘録です。
tailwindcssの導入は有識者の分かりやすい記事がたくさんあるのでそちらをご参考に。
あとはとりあえず動けば良いの考えなので、要改善。
tailwindcss＋WordPressでの構築を考えた時にCDNしか選択肢なくて不便だなーと思って考えたコードです。

環境

  • WordPress6.8.2
  • tailwindcss4.1（CLI）

階層構造

theme
    ├ assets
    │　├ css
    │　│　└ style.css
    │　
    ├ src
    │　├ style.css（出力用）
    │　└ html
    ├ functions.php
    ├ style.css（theme用）

処理の内容

  1. 固定ページが更新されたら、src/htmlにhtmlファイルを出力させる
  2. tailwindcssのスクリプトを実行
  3. ブロックエディタの「追加cssクラス」に記載されているクラスがassets/css/style.cssに上書き追加

コード

2025.08.23追加：プレビューでも確認できるように変更しました。

functions.php
//tailwindcssをthemeのスタイルシートに統合する
function enqueue_tailwind_css()
{
  wp_enqueue_style('tailwind', get_template_directory_uri() . '/assets/css/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_tailwind_css');

// 固定ページデータを取得しhtmlに格納
function post_html($post_id)
{
  $post = get_post($post_id);
  $slug = $post->post_name;
  $id = $post->ID;
  $content = $post->post_content;
  
  $html_content = $content;
  $filename = get_template_directory() . "/src/html/" . $id . ".html";
  file_put_contents($filename, $html_content);

  if (strpos($slug, '__trashed') == true) {
    unlink($filename);
  }

  $cmd = 'npx @tailwindcss/cli -i '. get_template_directory() . '/src/style.css -o ' . get_template_directory() . '/assets/css/style.css';
  exec($cmd);

}
add_action('save_post_page', 'post_html');

// auto save時に実行
function auto_html($new_autosave) {
  $slug = $new_autosave['post_name'];
  $id = $new_autosave['post_parent'];
  $content = $new_autosave['post_content'];
  
  $post = get_post($id);
  $post_type = $post->post_type;

  if ($post_type !== 'page') return $new_autosave;
  
  $html_content = $content;
  $filename = get_template_directory() . "/src/html/" . $id . ".html";
  file_put_contents($filename, $html_content);

  $cmd = 'npx @tailwindcss/cli -i ' . get_template_directory() . '/src/style.css -o ' . get_template_directory() . '/assets/css/style.css';
  exec($cmd);
}
add_action('wp_creating_autosave', 'auto_html');

// ゴミ箱に移動したら格納しているhtmlも削除する
function del_html($post_id)
{
  $post = get_post($post_id);
  $post_type = $post->post_type;
  $id = $post->ID;

  if ($post_type !== 'page') return $post_id;

  $filename = get_template_directory() . "/src/html/" . $id . ".html";
  unlink($filename);
}
add_action('wp_trash_post', 'del_html');
旧コード
functions.php
// 固定ページデータを取得しhtmlに格納
function post_html($post_id)
{
  // 情報を取得
  $post = get_post($post_id);
  $slug = $post->post_name;
  $id = $post->ID;
  $content = $post->post_content;

  // 出力するhtml関連
  $html_content = $content;
  $filename = get_template_directory() . "/src/html/" . $id . ".html";
  file_put_contents($filename, $html_content);
  
  // 編集画面からゴミ箱に移動させた場合の処理用
  if(strpos($slug, '__trashed') !== false) {
    unlink($filename);
  }

  // tailwindcssのスクリプト
  $cmd = 'npx @tailwindcss/cli -i '. get_template_directory() . '/src/style.css -o ' . get_template_directory() . '/assets/css/style.css';
  exec($cmd);
}
add_action('save_post_page', 'post_html');

// ゴミ箱に移動したら格納しているhtmlも削除
function del_html($post_id)
{
  $post = get_post($post_id);
  $post_type = $post->post_type;
  $id = $post->ID;

  if ($post_type !== 'page') return $post_id;

  $filename = get_template_directory() . "/src/html/" . $id . ".html";
  unlink($filename);
}
add_action('wp_trash_post', 'del_html');

課題

  • themeディレクトリ内がカオスになる & データ容量が大きくなる
  • 保存する毎にスクリプトが実行されるので、保存に少し時間がかかるようになる
  • exec() と file_put_contents() の権限設定の問題
    ※これをクリアしてたらサーバー上でも動くと思うけど検証する時間がない
  • セキュリティのリスク考えたらexec() を WP-CLI コマンド経由で実行したほうがいい
    ※localだからとりあえず良いかと思ってexec() で実行してる

Discussion