2026年7月8日

WordPressのVue.jsでシングルページアプリを作る方法

カスタマイズ

はじめに

この記事では、WordPressとVue.jsを使用して効率的なシングルページアプリケーション（SPA）を作成する方法を詳しく紹介します。SPAはユーザーの体験を向上させ、リソース使用量を削減するための重要なアプローチです。また、Vue.jsは直感的で柔軟なJavaScriptフレームワークであり、WordPressと組み合わせることで強力なウェブアプリケーションを開発することができます。

症状・背景

このテーマが必要になる主な場面:

よりインタラクティブでレスポンシブなユーザー体験を提供したい場合
ユーザーの動的なデータ操作やコンテンツ更新が求められる場合
WordPressプラグインによる機能拡張に制限があると感じている場合
動的UI要素やアニメーション効果を追加したい場合

手順・設定方法

ステップ1: Vue.jsのインストールとセットアップ

# WordPress環境にNode.jsをインストールする（事前にインストール済みであれば不要）
sudo apt-get update
sudo apt-get install nodejs npm

# Vue CLIをグローバルにインストール
npm install -g @vue/cli

# WordPressのテーマディレクトリ内に新しいVueプロジェクトを作成
vue create wp-vue-project

ステップ2: WordPressとの統合設定

# テーマ内のpublic/distフォルダにビルド済みのVue.jsアプリを配置するためのスクリプトを作成
npm run build --output-path=../public/dist/

# WordPressのfunctions.phpファイルでwp_enqueue_scriptを使用してVue.jsアプリを読み込む
function enqueue_vue_app() {
    wp_enqueue_script('vue-app', get_template_directory_uri().'/dist/vue-app.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_vue_app');

ステップ3: Vue.jsでSPAの機能を拡張

# WordPressページまたはポストデータを使用してVueコンポーネントを作成するためのAPIエンドポイントを設定
function get_page_data() {
    global $wpdb;
    $page_id = $_GET['id'];
    $post_data = $wpdb->get_row($wpdb->prepare('SELECT * FROM '.$wpdb->prefix.'posts WHERE ID=%d', $page_id));
    echo json_encode($post_data);
}
add_action( 'wp_ajax_get_page_data', 'get_page_data' );
add_action( 'wp_ajax_nopriv_get_page_data', 'get_page_data' );

# Vue.js内でこのエンドポイントを呼び出してページデータを取得
axios.get('/wp-admin/admin-ajax.php?action=get_page_data&id=' + pageId).then(response => {
    this.pageData = response.data;
});

ステップ4: デプロイとトラブルシュート

# WordPressのテーマフォルダにビルドしたVueアプリをデプロイするためのGitHub Actionsワークフローを作成
name: Deploy Vue SPA to WP Theme Folder
on:
  push:
    branches: [ main ]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'
      - run: npm install && npm run build --output-path=../public/dist/

注意事項

実装前のテスト: デプロイ前に詳細なテストを実施し、すべての機能が正常に動作することを確認してください。
セキュリティ上の注意: WordPressとVue.js間でデータを安全にやり取りするためには、API認証やクロスサイトスクリプト(CSS)対策などのセキュアな通信を確立することが重要です。
パフォーマンス/運用上の注意: SPAの効率性は適切なキャッシュ設定とリソース最適化によって最大化されます。これには、CDNの使用やCSS/JSファイルの結合などが含まれます。

まとめ

1. Vue.jsインストール: Node.js環境を準備し、Vue CLIを使用して新しいプロジェクトを作成します。

2. 統合設定: WordPressとVue.jsアプリケーションを連携させるためのスクリプトとAPIエンドポイントを設定します。

3. SPA機能拡張: データ操作やアニメーション効果などの動的なUI要素を追加します。

4. デプロイ: GitHub ActionsのようなCI/CDツールを使用して、ビルド済みのVueアプリケーションをWordPressテーマフォルダにデプロイします。

Post Views: 10