WordPressプラグインにVue（Vite）を組み込む構成とビルド手順まとめ

WordPress にちょっとしたツールを埋め込みたいとき、フロントエンドだけで完結するものであれば、Vue を使うと実装が楽になる。
一方で、Vue のプロジェクト構成やビルド成果物をそのまま WordPress に持ち込むのは少し扱いづらい。

Vue で作ったツールを WordPress プラグインとして組み込み、ショートコードで使えるようにするまでの手順をまとめた。

やりたいこと

Vue で作成したツールを WordPress 上で動作させる
ツールは WordPress プラグインとして管理する
ツールは ショートコードで呼び出して使用する
Vue ツールは フロントエンドのみで完結させる（DB・Ajax・サーバーサイド処理は行わない）
Vue は 事前にビルドし、 WordPress では ビルド後の JS / CSS のみを読み込む
管理画面や設定画面は作らない（自分用・小規模用途を想定）

Vueでツールを作成する

プロジェクトを作成

npm create vite@latest sample-tool -- --template vue

プロジェクト作成時に質問されるので答えていく
「rolldown-vite」機能を使うかどうか？→No
パッケージをインストールしてサーバーを立ち上げるか？→Yes

│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes

不要ファイルを消す

public/vite.svg
src/assets/vue.svg
src/components/HelloWorld.vue
src/style.css

空のフォルダは削除してもOK

修正

import { createApp } from "vue";
import App from "./App.vue";

// Vue をマウントするための data 属性名
const MOUNT_ATTR = "sample-tool";

document.querySelectorAll(`[data-${MOUNT_ATTR}]`).forEach((el) => {
    createApp(App).mount(el);
});

MOUNT_ATTRをツール名に合わせて変更する

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>Test</title>
    </head>
    <body>
        <!-- WordPressで出力される想定のDOM -->
        <div data-sample-tool></div>

        <script type="module" src="/src/main.js"></script>
    </body>
</html>

data-sample-toolは、‘data-‘ + MOUNT_ATTR に変更する

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [vue()],
    build: {
        outDir: "dist",
        emptyOutDir: true,
        rollupOptions: {
            input: "src/main.js",
            output: {
                format: "iife",
                entryFileNames: "main.js",
            },
        },
    },
});

ビルドの設定（出力ファイルをmain.jsにする）

ツールを作成する

サンプル用にテキストの出力と数字をカウントアップする簡単なもの

<template>
  <div>
    <p>このテキストは Vue で出力されています</p>
    <button @click="count++">カウント: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<style scoped>
p {
  font-weight: bold;
}
button {
  margin-top: 8px;
}
</style>

動作確認する

Vite で立ち上げた開発サーバー上で、ツールの動作を確認をする。

npm run dev

ブラウザで以下の URL にアクセス
ツールの UI（テキストやボタンなど）が正しく動作するかを確認
※ポート番号は Vite のバージョンや環境によって変わることがあります
http://localhost:5173/

ビルドする

ツールの実行ファイルを出力する

npm run build

dist/main.js

が作成される

WordPressのプラグインを作成

プラグイン名：SampleTool

最終的な構成は以下の通り

sample-tool/
├─ sample-tool.php    ← プラグイン本体
└─ dist/
   └─ main.js         ← ビルド済 Vue JS

各ファイルを作成する

プラグインのファルダ名をプラグイン本体ファイル名は必ず同じにする。
フォルダ名：sample-tool/
プラグイン本体ファイル名：sample-tool.php

プラグイン本体の作成

コードをツールに合わせて編集する

固定ヘッダーの変更（プラグイン名、説明、バージョン、制作者）
$version の変更（固定ヘッダーのバージョンと統一する）
$slug の変更（VueのMOUNT_ATTRと統一する）
$shortcode の変更

※ バージョンアップ時は、固定ヘッダーのVersion と $version のみ変更する

<?php

/**
 * Plugin Name: SampleTool
 * Description: Vue製ツールをWordPressで動かすサンプル
 * Version: 1.0.0
 * Author: 制作者
 */

if (!defined('ABSPATH')) {
    exit;
}

// プラグインバージョン
$version   = '1.0.0';
// ツール識別用スラッグ＆マウントdata属性名（Vueと統一する）
$slug      = 'asset-management-prompt';
// ショートコード名
$shortcode = 'asset_management_prompt';

/**
 * ショートコード
 */
add_shortcode($shortcode, function () use ($slug) {
    return '<div data-' . esc_attr($slug) . '></div>';
});

/**
 * JS 読み込み
 */
add_action('wp_enqueue_scripts', function () use ($slug, $version) {
    wp_enqueue_script(
        $slug,
        plugin_dir_url(__FILE__) . 'dist/main.js',
        [],
        $version,
        true
    );
});

Vueの実行ファイルを追加

ビルドしたファイルをツール内にコピーする

dist/main.js

sample-tool内にdistフォルダごとコピペでOK

プラグインをインストールする

プラグインをZIP化する

作成したプラグインフォルダをZIPファイルする。

対象フォルダ：sample-tool

MacでZIP化する場合（ターミナル）

zip -r sample-tool.zip sample-tool -x "*.DS_Store"

※ .DS_Store を除外してZIP化

それ以外の場合（Windows / Linux）

フォルダを右クリックして 「ZIPに圧縮」（または同等の操作）
ZIP化したフォルダの中に sample-tool ディレクトリが直接入っている状態にする

WordPressにプラグインをインストールする

WordPressの管理画面から、以下の手順でインストールする。

管理画面 → プラグイン
プラグインを追加 をクリック
プラグインのアップロード を選択
作成した sample-tool.zip を選択してアップロード
インストール完了後、有効化

まとめ

今回の構成では、以下を重視した。

Vue は 完全にフロントエンド専用 と割り切る
WordPress 側は
- ショートコード登録
- JS の読み込みだけを担当する
ビルド後の成果物（dist/main.js）のみをプラグインに含める

結果として、

WordPress プラグインとしてはシンプル
Vue 側は通常の開発フロー（Vite）を維持

という、ちょうどいい落とし所になったと思う。

「自分用に Vue 製の小さなツールを WordPress で動かしたい」という用途では、今後もこの形をベースにしていく予定。

便利な自動化スクリプト

ここまでの手順は、シェルスクリプトでまとめて自動化した。

Vite + Vue プロジェクトの作成から、WordPress プラグイン雛形の生成までを 1コマンドで実行。

Vite + Vue プロジェクトを作成
初期ファイルを最小構成に整理
WordPress プラグイン雛形を同時に生成

使用方法

ツール名：sample-tool

git clone https://github.com/momo-chicken/moglog-create-vite-wp-tool.git
cd moglog-create-vite-wp-tool
bash create-vite-wp-tool.sh sample-tool

詳細な使い方やオプションについては、GitHub の README を参照

GitHub

GitHub – momo-chicken/moglog-create-vite-wp-tool: Vite + Vue で WordPress 埋め込み用ツールを作成する… Vite + Vue で WordPress 埋め込み用ツールを作成するシェルスクリプト. Contribute to momo-chicken/moglog-create-vite-wp-tool development by creating an account on …

WordPressプラグインにVue（Vite）を組み込む構成とビルド手順まとめ

やりたいこと

Vueでツールを作成する

プロジェクトを作成

不要ファイルを消す

修正

ツールを作成する

動作確認する

ビルドする

WordPressのプラグインを作成

各ファイルを作成する

プラグイン本体の作成

Vueの実行ファイルを追加

プラグインをインストールする

プラグインをZIP化する

WordPressにプラグインをインストールする

まとめ

便利な自動化スクリプト

使用方法

コメント

コメントするコメントをキャンセル

WordPressプラグインにVue（Vite）を組み込む構成とビルド手順まとめ

やりたいこと

Vueでツールを作成する

プロジェクトを作成

不要ファイルを消す

修正

ツールを作成する

動作確認する

ビルドする

WordPressのプラグインを作成

各ファイルを作成する

プラグイン本体の作成

Vueの実行ファイルを追加

プラグインをインストールする

プラグインをZIP化する

WordPressにプラグインをインストールする

まとめ

便利な自動化スクリプト

使用方法

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル