WordPress + SEO プラグイン + Vue.js で PHP をほぼ書かずに WordPress テーマを作った

この記事は、 SYSKEN Advent Calendar 2018 の7日目の記事です。

縣です。…はい。えっと、都道府県の県に系譜の系で縣です。…いや、それで一文字です。ちゃんと言うと県の旧字なんですよ。…え、分かるんですか。

今回は個人のブログ「縣雑記帳」のテーマの作り方について少々述べたいと思います。

目次

  1. Vue.js で WordPress テーマを作るまでに至った経緯
  2. コードサンプル
  3. 最後に

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 のソースコードです。

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

 

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

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

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

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

3 最後に

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

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

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


コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください