WordPressの自作テーマに更新機能を追加する［theme-update-checker］

このブログではWordPressのテーマとして「AFFINGER5」を使用しています。（記事執筆時点）
テーマ自体の完成度が高く、そのままでも使用できますが、少しでも自分色を出したいので細かなカスタマイズを行っています。

直接テーマに手を加えると、ちょっとしたミスで画面が真っ白になったりする可能性があるため、リスク軽減のために子テーマをローカル環境でカスタマイズした後に、本番環境に適用する運用を行っています。

ここで問題になるのが本番環境への適用です。公式テーマのように更新画面からの更新ができないため、カスタマイズ後に手動でテーマをアップロードする必要があります。

しかし、すでに同名のテーマが存在するためインストールに失敗してしまいます。

アップロード済みのテーマを一度削除して、再度アップロードでもよいのですが、面倒なので公式テーマのように簡単に更新できる方法はないかと調べていたらありました！

それが今回紹介する「theme-update-checker」です。
これを導入することで公式テーマのように更新ページに通知が届きボタン一つで更新できるようになります。導入も非常に簡単です。

今回はAFFINGER5の子テーマを例に導入の手順を解説していきます。

ライブラリのダウンロードと配置

まずは下記のサイトから必要なライブラリをダウンロードします。

【ダウンロード】
https://w-shadow.com/blog/2011/06/02/automatic-updates-for-commercial-themes/

ページ上部の［Download］-［Client library］をクリックするとダウンロードできます。

ダウンロードした「theme-updates.zip」を解凍し、中の「theme-update-checker.php」を更新機能を追加したいWordPressテーマのフォルダ直下に配置します。（style.cssやfunctions.phpと同じディレクトリに置きます。）

jsonファイルの準備

更新に必要な情報を記述したJSONファイルを作成します。

テキストエディタを開き、下記のコードをコピーします。自身の環境に合わせて記述内容を修正していきます。

【version】
テーマの最新バージョンを記述します。style.cssのVersion番号と一致している必要があります。前回のバージョンよりも大きい数値にしておく必要があります。

【details_url】
サンプルページのURLを記述します。特に必要ない場合は空白でも構いません。
特にない場合は適当に設定しましょう。（自身のブログのトップページとか）

【download_url】
テーマのダウンロード先URLを記述します。
ダウンロード先はパブリックな場所である必要があります。

私の場合はこんな感じです。あわせて style.css のバージョン表記を合わせておきます。
後で更新の確認を行うため、style.css のバージョン ＜ JSONファイルのバージョンにしておきましょう。

テキスト(.txt)で保存した後に拡張子を「.json」に変更します。JSONファイルをパブリックな場所に配置します。管理がしやすいように【download_url】と同じ場所に置くのがおすすめです。

以上でJSONファイルの準備は完了です。

functions.phpへの追加

更新機能を追加したいテーマの「functions.php」に以下のコードを追加します。自身の環境に合わせて記述内容を修正していきます。

【テーマの名前】
WordPressテーマの名称を記述します。

【jsonファイルのURL】
先ほど作成したjsonファイルの格納先URLを記述します。

私の場合はこんな感じです。

以上でfunctions.phpの準備は完了です。

更新の準備

導入できたかを確認するための準備をします。

導入した初回のみ、既存のテーマを削除して、手動でアップロードする必要があります。
これはインストール済みのテーマには更新機能がないためです。

更新機能を追加したテーマをZIPファイルに圧縮し、WordPressからテーマをアップロードしてください。

バージョン番号が想定しているものと一致しているか確認しましょう。

更新機能の確認を行うために、更新するテーマファイルをダウンロード先にアップロードします。
この時、style.css のバージョンをJSONファイルのバージョンと合わせておきます。（手動でアップロードしたバージョン ＜ 更新するバージョンになっているはずです。）

更新の確認

WordPressの［ダッシュボード］－［更新］ページでテーマの更新通知が表示されているかを確認します。

通知がない場合はページ上部の「もう一度確認する」ボタンをクリックしてみてください。
通知が来ない場合は、何度か押していると通知が来るはずです。