1 Vue.js で WordPress テーマを作るまでに至った経緯

1.1 個人ブログの開設と CMS 決め

自分のブログを開設するにあたり「オープンソースで」「テーマの編集が容易である」要素を満たした CMS は WordPress しかなかったのでそれで決定。

1.2 PHP を書かない自作テーマの作成

ここで、 Web フロントエンドの勉強を兼ねたテーマ開発をしたいと思っていた私は、どうにか PHP を書かずにテーマが作れないものかと画策します。

いやー PHP 書きたくありません。 PHP を書きたくないというよりは WordPress テーマの煩雑な関数群を扱いたくないです。

1.3 SEO 対策

WordPress は REST API を提供していたので、 home.php 等のテーマテンプレートファイルにいくらかテンプレートを記述したら後は Vue.js をフレームワークとした JavaScript を読み込んでレンダリングさせるだけ、という大まかなプロセスは頭に浮かんでいました。

そこで問題になるのが SEO 対策。通常の WordPress テーマならプリレンダリングを行うので気にする必要は無かったのですが、今回の構成では Google 等のクローラーがテンプレートを要求して渡された HTML にはまだ記事本文がレンダリングされていません。

さあどうしましょう。と、ここで一役買うのが All in One SEO Pack 。

例として Google クローラーは以下の meta タグをサポートしています。

<meta name="description" content="ページの説明" />

<title>ページのタイトル</title>

この meta タグを両方出力できる WordPress の機能と All in One SEO Pack があれば他に PHP コード要らないじゃん。決定！

2 コードサンプル

というわけで Vue.js をフロントエンドフレームワークとして作成した WordPress テーマの一例として、 home.php のソースコードです。

	<?php
	define('STATIC_URI', get_template_directory_uri() . '/static');
	?>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="<?php echo STATIC_URI ?>/css/home.css" />
	<?php wp_head(); ?>
	</head>
	<body <?php body_class(); ?>>
	<div id="home">
	<home></home>
	</div>
	<?php wp_footer(); ?>
	<script type="application/javascript">
	const WORDPRESS_API_URL = '<?php echo get_rest_url(); ?>';
	</script>
	<script src="<?php echo STATIC_URI ?>/js/home.js"></script>
	</body>
	</html>

view raw

home.php

hosted with ❤ by GitHub

※<home></home>は Vue.js のコンポーネントです。

…なんだこの短さは。後のコーディングは全て Vue.js でできるなんて夢のようです。

なお、全てレンダリングが終了した時の画面がこちらです。

何も差し支えありません。

ああ、テーマのソースコードはライセンス上見せろと言われたら見せます。

3 最後に

ああ、あなたも WordPress の関数は扱いたくないんですか。はたまた PHP には昏いのでしょうか。でも大丈夫。プラグインを駆使すれば SEO 問題も解決してフロントエンドの言語で書けるようになります。いちいち慮る必要もありません。まあ、悪く言えばプラグイン依存のテーマにはなっちゃうんですけど。

しかし、よくよく考えればこいつ前の記事で散々堅牢性を説いておきながら JavaScript 書いてんじゃん。動的型付け言語の代表格じゃねえか。こういう時だけ銀行の営業部よろしく都合良く手の平返すのな。

明日はぐらたんの投稿です。彼も部の精鋭です故、さぞ高尚な記事を書いてくれるものと期待しております。