WordPressで自作テーマを作る際にCSSフレームワークは使っていますか❓
弊社ではBootstrapを使っていましたが、最近はTailwindCssです。
そのTailwindCssのメリットを存分に活かすための開発環境をWordpress配下に構築することが難しかったのですが、試行錯誤の末に良い構成ができました。
読者の皆様にも使っていただきたいです❗
使い方が良くわからなかったりする場合はコメントください。
ディレクトリ構成
wordpress-vite-tailwindcss/
│
├── .gitignore # Git除外設定
├── README.md # プロジェクト説明書
├── package.json # NPMパッケージ管理
├── vite.config.js # Vite設定ファイル
├── tailwind.config.cjs # Tailwind CSS設定
├── tailwind_config.css # Tailwind追加設定
├── main.js # メインJavaScriptエントリーポイント
├── main.scss # メインSassスタイルシート
├── style.css # WordPressテーマ情報
├── functions.php # WordPress関数・Vite統合
├── index.php # メインテンプレート
├── header.php # ヘッダーテンプレート
├── footer.php # フッターテンプレート
├── single.php # 個別投稿テンプレート
└── page.php # 固定ページテンプレート重要ファイルだけ紹介していきますので、使ってみたい方はGitHUBリポジトリからクローンしてください。
vite.config.js
7行目のconst themePathをあなたの環境に合わせてください。
import { defineConfig } from "vite";
import liveReload from 'vite-plugin-live-reload';
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
import path from "path";
const themePath = '/wp-content/themes/wordpress_vite_tailwind';
const assets = process.env.NODE_ENV === 'development' ? '/' : '/dist/';
export default defineConfig ( {
plugins: [
liveReload( __dirname + '/**/*.php' ),
],
root: '',
base: process.env.NODE_ENV === 'development' ? './' : '/dist/',
build: {
outDir: path.resolve( __dirname, './dist' ),
emptyOutDir: true,
manifest: true,
target: 'es2018',
rollupOptions: {
input: {
main: path.resolve( __dirname + '/main.js' )
},
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: ( { name } ) => {
if ( /\.css$/.test( name ?? '' ) ) {
return 'assets/[name].[ext]';
}
if ( /\.js$/.test( name ?? '' ) ) {
return 'assets/[name].[ext]';
}
return 'assets/[name].[ext]';
}
},
},
assetsInlineLimit: 0,
minify: true,
write: true,
},
server: {
cors: true,
strictPort: true,
port: 3000,
https: false,
hmr: {
host: 'localhost'
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `$base-dir: '` + themePath + assets + `';`,
},
},
postcss: {
plugins: [
tailwindcss,
autoprefixer,
],
}
},
} );
functions.php
5行目がポイントです。trueだと開発モードでリアルタイムコンパイル中のファイルを見に行くので、ビルドしたファイルを見に行ってほしい場合はfalseにしてください。
<?php
/**
* VITE
*/
define( "IS_VITE_DEVELOPMENT", true );
define( 'JS_LOAD_IN_FOOTER', true ) ;
define( 'JS_DEPENDENCY', array() ) ; // array( 'jquery' ) as example
define( 'DIST_DEF', 'dist' );
define( 'DIST_URI', get_template_directory_uri() . '/' . DIST_DEF );
define( 'DIST_PATH', get_template_directory() . '/' . DIST_DEF );
define('VITE_SERVER', 'http://localhost:3000');
define('VITE_ENTRY_POINT', '/main.js');
function cors_http_header() {
header( "Access-Control-Allow-Origin: *" );
}
add_action( 'send_headers', 'cors_http_header' );
add_action( 'wp_enqueue_scripts', function() {
if ( defined( 'IS_VITE_DEVELOPMENT') && IS_VITE_DEVELOPMENT === true ) {
function vite_head_module_hook() {
echo '<script type="module" crossorigin src="' . VITE_SERVER . VITE_ENTRY_POINT . '"></script>';
}
add_action( 'wp_footer', 'vite_head_module_hook' );
} else {
$manifest = json_decode( file_get_contents( DIST_PATH . '/manifest.json'), true );
if ( is_array( $manifest ) ) {
$manifest_key = array_keys( $manifest );
if ( isset( $manifest_key[0] ) ) {
foreach( @$manifest["main.css"] as $css_file ) {
wp_enqueue_style( 'main', DIST_URI . '/' . $css_file );
}
$js_file = @$manifest["main.js"]['file'];
if ( ! empty( $js_file ) ) {
wp_enqueue_script( 'main', DIST_URI . '/' . $js_file, JS_DEPENDENCY, '', JS_LOAD_IN_FOOTER );
}
}
}
}
} );