Vue.jsを使ってWordPressプラグインを作る

Webのフロントエンドで何か手の込んだものを作ろうとするとき、最近はVue.jsが使われることが多いようです。
ちょうど、WordPressプラグインで手の込んだものを作るお仕事ができたので、ちょっと調査しつつプラグイン作成の入口くらいまでをまとめておこうと思います。

WP-CLIでプラグインの雛形を作る

Vue.jsと直接の関係があるわけではないのですが、WordPressを使っていろいろ作業する際にWP-CLIを使うことが多いです。プラグインの雛形もWP-CLIで作ることができます

wp scaffold plugin wp-vue-plugin

これでプラグインの雛形が出来ますので、ひとまず有効化して、WordPressサイトでプラグインを動作させます。

wp plugin activate wp-vue-plugin

wp-content/plugins/wp-vue-plugin/wp-vue-plugin.phpには、こんなコードができています。

<?php
/**
 * Plugin Name:     WP Vue Plugin
 * Plugin URI:      https://vivinko.com
 * Description:     Vue.jsプラグインのサンプルです
 * Author:          INOUE, Ken'ichi
 * Author URI:      https://vivinko.com
 * Text Domain:     wp-vue-plugin
 * Domain Path:     /languages
 * Version:         0.1.0
 *
 * @package         Wp_Vue_Plugin
 */

// Your code starts here.

Vue.jsの有効化

Vue.jsはひとまずCDNを使うことにします。また、今後JavaScriptコードを書くJSファイルが必要になりますので、プラグインディレクトリ配下のjs/app.jsを作成することとして、このような関数を作成し、wp_enqueue_scriptsに登録します。

function wvp_load_vue()
{
    wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js', array(), false, true);
    wp_enqueue_script('wvp-vue', plugins_url('wp-vue-plugin').'/js/app.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'wvp_load_vue');

ショートコードの作成

今回のプラグインは今後の開発の入口的なものなので、極めて単純なショートコードを作成します。

function wvp_favorites()
{
    $str .= '<div id="wvp_star">';
    $str .= '{{ star }}';
    $str .= '</div>';
    echo $str;
}
add_shortcode('wvp_star', 'wvp_star');

wvp_starというショートコードを呼び出すと、wvp_starというIDのdivエレメントを作成し、その中でVue.jsによるデータバインディングを行います。

app.jsの作成

js/app.jsは下記のとおり。先ほどのdivエレメントには{{ star }}というMustache構文がありますので、その部分を「★」に置き換えます。

var star = new Vue({
    el: "#wvp_star",
    data() {
        return {
            star: "★",
        };
    },
});

あとは、テーマファイルなどでショートコードを呼び出すと、このように★が表示されます。

ここまで出来れば、WordPressプラグイン上でのVue.jsが使用できています。あとは、どんどん開発していきましょう！