Contents
Vue.jsとWordPressの統合方法を具体的な実装例で解説
WordPress開発者やフロントエンドエンジニアにとって、Vue.jsとWordPressを連携させる技術的課題は日々増えており、特にパフォーマンス最適化やセキュリティ対策が重要です。本記事では、実践的なコードサンプルを交えながら、テーマ内での導入手順からREST API連携までを段階的に解説します。記事内の記述をもとにローカル環境で試すことで、プロジェクトに応用いただけるでしょう。
WordPressテーマ内でのVue.js導入手順
WordPressテーマにVue.jsを組み込む際は、CDN経由の導入やnpmインストールという選択肢があります。どちらも簡単な実装が可能ですが、用途に応じて使い分ける必要があります。
Vue.jsの導入方法
以下にVue.jsを導入する2つの主な方法について説明します。
- CDN経由での導入（簡易）
- HTMLファイル内で直接読み込む方法です。
html
- npmインストール（推奨）
- プロジェクト構成が複雑な場合や、バンドルツールを使用する際にはnpm経由が適しています。
bash
npm install vue@3
導入方法はプロジェクト規模に応じて選択してください。特に大規模なテーマ開発ではnpmインストールを推奨します。
テーマ内のテンプレート構成
WordPressのテーマファイル（例: single.php）内でVueコンポーネントを使うには、以下の手順を行います。
- Vue本体と必要なライブラリを読み込む
- HTML要素にIDを設定（例:
<div id="app">...</div>） - JavaScriptでVueインスタンスを作成
具体的なコード例：
|
1 2 3 4 5 6 7 8 |
<!-- single.php内 --> <div id="vue-app"> <h1>{{ post.title }}</h1> <p>{{ post.content }}</p> </div> <script src="/js/vue-init.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// js/vue-init.js const { createApp } = Vue; createApp({ data() { return { post: { title: 'こんにちは、Vue!', content: 'WordPressとVueの統合が可能です。' } }; } }).mount('#vue-app'); |
このようにして、テーマ内にVueを組み込むことで、動的なUI構築が可能になります。
WP REST APIとVue.jsの連携方法
WordPressはWP REST APIを通じて、外部からのデータ操作を簡単に実現できます。Vue.jsアプリケーションからREST APIを呼び出すには、axiosやfetch APIを使用します。
APIエンドポイントの取得
WordPressで投稿情報を取得する際は、以下のURLが基本になります。
|
1 2 |
https://{your-site-url}/wp-json/wp/v2/posts |
このURLにアクセスすると、JSON形式で投稿データが返されます。具体的には以下のような構造です：
|
1 2 3 4 5 6 7 8 9 10 |
{ "id": 1, "title": { "rendered": "記事のタイトル" }, "content": { "rendered": "<p>本文</p>" } } |
データフェッチ処理の実装
以下は、Vue.jsとaxiosを使用したデータ取得例です。
インストール:
|
1 2 |
npm install axios |
コード例:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { createApp } from 'vue'; import axios from 'axios'; const app = createApp({ data() { return { posts: [] }; }, mounted() { this.fetchPosts(); }, methods: { async fetchPosts() { try { const res = await axios.get('https://{your-site-url}/wp-json/wp/v2/posts'); this.posts = res.data; } catch (error) { console.error('Error fetching posts:', error); } } } }); app.mount('#vue-app'); |
このようにして、Vue.jsで取得した投稿データを表示させることで、動的なコンテンツ構築が可能です。
パフォーマンス最適化ポイント
Vue.jsとWordPressの統合では、クライアントサイドレンダリングの制御やコードバンドルの最適化が重要です。以下に具体的な対策を紹介します。
クライアントサイドレンダリングの制御
- Lazy loading: Vueコンポーネントを必要時まで読み込まない方式。
javascript
import { defineAsyncComponent } from 'vue';
const LazyComponent = defineAsyncComponent(() =>
import('./components/LazyComponent.vue')
);
- コードスプリッティング: WebpackやViteを使って、必要なファイルのみをバンドル。
- Webpack:
splitChunksで動的インポート - Vite:
import()で遅延読み込み
コードバンドルの最適化
| 最適化方法 | 説明 |
|---|---|
| モジュールバンドル | webpack/Viteにより、不要なモジュールを除外。 |
| イメージ圧縮 | WordPressで画像サイズを調整し、軽量化。 |
| CDN利用 | 静的リソースはCDN経由で配信し、ロード速度改善。 |
これらの施策を実施することで、ページの読み込み速度が向上します。
セキュリティ考慮事項
REST APIを通じた通信では、CORS設定やXSS対策などが重要です。
CORS設定のベストプラクティス
WordPress側でCORSを有効化するには、wp-config.phpに以下を追加します（※誤った記述修正済み）：
|
1 2 |
define('FS_METHOD', 'ftpext'); |
ただし、この定義はファイルシステムの操作方法に関連し、CORS設定には直接関与しません。正しいCORS設定には以下が含まれます。
blockquote: CORS（クロスドメインリソース共有）を有効化するには、WordPressの
.htaccessに以下の内容を追加します:
|
1 2 3 |
Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, POST, OPTIONS" |
また、jQueryやaxiosを使用する際は、セキュリティヘッダ（Access-Control-Allow-Originなど）を適切に設定してください。
XSS対策とデータ衛生
- HTMLエスケープ:
v-preディレクティブなどで、動的に挿入されるHTMLを安全に表示。
vue
- セキュリティフィルター: WordPressの
esc_html()やsanitize_text_field()を使用してデータのクリーンアップ。
上記のような対策により、ユーザー入力による攻撃リスクを軽減できます。
実装例に基づくローカル環境構築ガイド
記事に掲載したコードサンプルを基に、ローカル環境で実装してみましょう。以下の手順でプロジェクトを作成し、VueとWordPressの連携を再現可能です。
開発環境の準備
- WordPressをローカルで起動（XAMPPやDockerなど）
- Vue CLIまたはViteでフロントエンド開発環境を構築
- テーマファイルにVueコンポーネントを埋め込み
プロジェクト作成例:
|
1 2 3 4 5 |
# Vue CLIを使用してプロジェクトを作成 vue create vue-wordpress-integration # WordPressのテーマディレクトリにvue-init.js等を配置 |
本番環境へのデプロイ手順
-
ビルドコマンドで静的ファイルを出力
bash
npm run build -
wp-content/themes/your-theme/js以下にビルド結果をコピー - WordPressのテーマ設定でJavaScriptの読み込みを有効化
このようにして、ローカルで構築した環境を本番環境にも適用できます。
記事のまとめ
- 導入段階: Vue.jsはCDNまたはnpm経由で導入できる
- API連携: axiosやfetch APIでREST APIからデータ取得可能
- パフォーマンス最適化: Lazy loading、コードスプリッティングが効果的
- セキュリティ対策: CORS設定とXSS対策の実装が必要
- ローカル環境構築: Vue CLIやViteを使って簡単に再現可能
Vue.jsとWordPressの統合は、動的なUI開発を可能にしながら、既存のコンテンツ管理機能を活かしたソリューションとして適しています。記事内のコードサンプルを参考に、ご自身のプロジェクトで試してみてください。