PHPを一切書かなくて済む、Vue.js製のWordPressテーマを作りました

📄概要

• タイトルの通り。
• テーマを導入するだけで、余計な設定無しで、いつも通りVue.jsのサイトを作る感覚でサイトが完成できるようにしました

⌚経緯

• Wordpressのオリジナルサイト作成を依頼されたが、PHPはあんまり書きたくない書けないので、楽をする方法を探す
• Vue.jsのアプリ制作ならある程度経験済なので、それだけで完結させたい
• 方法を調べていくと実現可能だったので、WordPressテーマとして配布し、みんなもラクできるようにしました

できたものはこちらになります
[Github] Vue Wordpress simple starter theme

📝要件

クライアントさんに以下の要件でサイトを作って欲しいと言われたのがそもそもの発端。

• 基本的にページは弄れなくてよいが、お知らせ等変更が必要な部分のみWordPressで管理したい
  • 納品後は別の方が管理するため、管理面の容易さを考え、レンタルサーバーを借りて、そこで完結させたい。つまりSSRもSSGもできな・・・くもないがめんどい。
  • クライアントさんがそこまでITに強くない為、できれば編集可能部分以外は、むしろ編集できないように
• 固定ページ部分を https://hogehoge.com/content/ みたいにサブディレクトリに分離して置くのはナシ
• SEOは最低限あればよい。

🔍既存手法など

• VueWordPress Theme Starter
  これでいいじゃん。と思ったのだが、導入しただけではエラーが出てしまい、追加で色々設定が必要。
  実は今回のテーマの作成は、エラーを解消するため色々弄り回してなんとなく動くようになり、仕組みを理解した所で、
  (使えるところだけ流用して新しく作ったほうが取り回しも良くなるのでは・・・？)
  という結論に至ったことに端を発している
• Vue.wordpress
  パーマリンクの柔軟な設定、SEO対策、その他様々な機能が詰め込まれている高機能テーマだが、
  更新が長い間止まっている上に、これもやはり導入しただけでは動かない。

双方共に目指すところは同じだが、長期間メンテされておらず、各種依存ライブラリのバージョンもかなり古くなっている為、そのまま使用することは出来なかった。
他にも山ほどあったが、数年前にWordPress x Vueのテーマづくりブームがあったのかと思うくらい、同じ時期以降メンテされていない。

一応参考のために githubの検索結果 を貼り付けておく。

🚩目指したもの

• とにかく導入からデプロイまでを簡単にすること
  • 3ステップで開発が開始できるように
    • リポジトリをクローンしてthemeディレクトリに放り込む
    • npm install -> npm run watch
    • WordPressにてテーマを有効化
  • npm run build でデプロイ用のディレクトリを一発生成
• 開発の効率化
  できるだけ余計なことを考えずに開発に専念できるようにする為、以下の要素を加えた。
  • ホットリロード
  • 固定ページや記事ページ等をvue-router側で制御し、特別な設定無しで表示できるように
  • ページ/記事のプレビューページの実装
  • Vuetify の導入
    (いらなかったかも。必要なければすぐ消せるしまあいいかということで導入)

📑要素説明

工夫点など。

デプロイ用のディレクトリ自動生成機能

開発時に必要な、ESlintやらwebpackやらの設定ファイルや、ブラックホールより重いnode_modules は、本番サーバにあっても容量を圧迫するだけである。
WordPressをある程度触っている人ならどのファイルがサーバに必要か理解できるが、このテーマが目指しているのは

• 簡単に
• 余計なことを考えずに

である。
そのため、npm run build でビルド後、サーバに上げるべきファイルのみをまとめるようにした。
白目を剥きながら最強のサイトを作り上げたら、白目を剥いたままビルドし、生成されたディレクトリをサーバのthemesディレクトリに放り込めばデプロイ完了である。

ホットリロード

webpackの機能でホットリロードは出来るが、例えば私のように local でwordpressのローカル環境を立てて開発をするような場合だと、ブラウザリロードがどうにも上手く行かないという問題が起きた。
調べてみると Browsersync というライブラリが便利そうだったので、こちらを導入する。

監視対象のファイルにphpファイルととVue.jsのビルド先の /dist を指定し、

/webpack/plugins/browser-sync.js

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = new BrowserSyncPlugin({
  files: ['*.php', 'dist'],
  logLevel: 'silent',
  reloadDelay: 0,
});

vue.config.js に開発時にwebpackのプラグインとして読み込ませる。

vue.config.js

const SETTINGS = require('./settings');

const webpackPlugins = [];
if (process.env.NODE_ENV === 'development') {
  webpackPlugins.push(require('./webpack/plugins/browser-sync'));
}

module.exports = {
  configureWebpack: {
    plugins: webpackPlugins,
  },
}

最後に、ブラウザに表示させるフッター部分にBrowsersyncのコードを仕組めば完了である。

footer.php

<?php wp_footer(); ?>
<?php if ( preg_match("/(.*.local|.*.loc|localhost:.*)/i", $_SERVER['HTTP_HOST']) ) : ?>
	<!-- HMR Reloader -->
	<script id="__bs_script__">
		//<![CDATA[
      document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.14'><\/script>".replace("HOST", location.hostname));
		//]]>
	</script>
<?php endif; ?>
</body>

</html>

こうしてサクッとホットリロードが実現できる。
高度な技術をもって様々な問題をバリバリ解決する人はもちろん凄いが、こういうかゆい所に手が届く、便利なライブラリを作る方々は本当に尊敬している。感謝しかない。

SEO対策

要件にあったように、SSRもSSGも出来ないので、SPAで実装している。
ご存知の通り、SPAだとSEOの面で不利な面はあるが、ある程度対策を行った。
むしろ、WordPressのテーマ上に作成しているので、PHP側を弄ることでアクセス開始されたページにmeta情報をつけることが出来る。

この辺りも参考になった。
wordpress で SNS や SEO に優しい簡単 SPA 作り

その他

README を参照のこと。

🍜雑感

• SPAとWordPressのいいとこ取りは達成できたように思う。
• SSGやらheadlessCMSやらが流行っている中で、とっつきやすさや資料の多さ、そしてシェアがあるという安心感等、WordPressが優位な点もまだまだある
• やはり出来ることなら、Webサーバを用意してSSRしたり、JAMStack構成にした方が考えることは少ないと感じる。
• カスタムフィールド等にはまだ対応できていない。
  そういうのに対応しようとすると、やはりPHPを触らざるを得ない
• 短期間でエイヤッと作ったため、考慮すべき点はまだまだある。
  徐々に改善していく予定。ツッコミどころがあればご指摘お願いいたします。