テーマ

front-page.phpを使うテーマテンプレートで「最新の投稿」を表示

front-page.phpにてホームを固定ページにしていると、「最新の記事」を表示する方法がないことに、はたと気づいて方法を調べた。
WordPressのテンプレート呼び出し順序の関係で、front-page.phpファイルがあると、それが最優先となる。
ダッシュボードからの設定よりもファイル構成の方が優先されます。
index.phpを使った「最新の投稿」を表示させる方法はあるのか…さて…?

設定方法

方法はありました。

  1. 中身が空の「固定ページ」を作成
  2. 1.で作った固定ページを「投稿ページ」として表示するよう設定

以上、2ステップです。

1. 固定ページ作成

ダッシュボードから固定ページを作ります、タイトルなどは自由につけて構わないです。
パーマリンクは、WordPressの表示変更をした際に強制的に変更されます。
投稿の中身は空欄としておきます。
latest-page

2. 設定 > 表示設定で「投稿ページ」を設定

デフォルトではこのように、「フロントページの表示」は「最新の投稿」になっているはずです。
options-reading-before

ここを「固定ページ」をチェック。
フロントページ:今回は「About for root」を指定。front-page.phpは、ここの設定にかかわらず優先で表示される。
投稿ページ:先ほど作った「Latest」固定ページを選択。
「変更を保存」
options-reading-after

3. 表示の確認

ダッシュボードの「固定ページ」管理画面へ戻ってみます。
「Latest -投稿ページ」となっています。
pages-after
blog-page-after
これで、パーマリンク blog/ で「最新の投稿」が表示されるようになりました。
当サイトではhttps://autumnsky.jp/blog/となります。
blog-entry

そもそも何をどうしたかったのか?

このサイト…というかこのテーマのフロントページは、固定のfront-page.phpにてページを作っている。
Shirohanadaテーマのフロントページは下図のように、「カスタムメニュー」と「ウィジェット」エリアを設定している。
front-page
これにより、コンテンツへのリンクがダッシュボードから柔軟に構築できる……
のであるが、「最新の投稿」リンクはメニューのカスタマイズからは選べない。
また、月ごとのアーカイブへもカスタムリンクを使うしかないようだ。
customize-menu
しかし、「最新の投稿」はきちんとWordPressの機能でカバーする方法が用意されていました。
若干面倒ですが、テンプレート構成を変更することなく「最新の投稿」表示ができました。

WordPressのテーマを自動デプロイする

WordPressのテーマをGithubにPushするだけで、デプロイできるとのことで試してみた。
コードを書いてからの手間暇が凄く軽減され、予想以上に楽で快適。
5行ほどCSSを変更しただけでも、数クリックで10分以内に本番用WordPressに適用できる。

参考サイト
Github から WordPress のテーマを自動更新するとめちゃくちゃ快適だった。
toro_unit

今回は@Toro_Unitさんの記事の後半、自動デプロイを自サイトに設定した際の手順を紹介します。

自動デプロイに必要な環境

たった二つである。

  1. Githubリポジトリ
  2. WordPressプラグイン:WP-Pusher

Githubでは「Webhooks」という仕組みがあり、リポジトリに変更があった際に、指定のWebサイトへ通知を送ってくれる。
WordPress側でプラグインを入れておいて、その通知を受け取ってテーマを取得&更新する仕組み。
実際の処理としては、Githubが何のリポジトリにどういうコミットがあったか、json形式でPostを投げている。
テーマだけでなくプラグインなどにも使える模様。

WP-Pusherをインストール

WP-Pusherは基本的に、有料で提供されている。
「Pricing」や「Buy Now」が大きく表示されていると思う。
ただし、オープンソースかつ公開プロジェクトに限って無償使用が可能。
Pricingの下の方とかに

For open source code, in public repositories, WP Pusher is 100% free to use. Download it here.

とかあるので、その辺からメールアドレスを入力する画面へ飛ぶ。
そうすると、ダウンロード用アドレスを送ってくれる。
メール記載のアドレスからZipをダウンロードして展開、WordPressへアップロードしてインストール。
有効化したらWP Pusherがダッシュボードに出る。
wp-pusher01
WP-Pusher > Install themeへ移動してリポジトリとか入力する。この辺はTro_Unitさんの記事通り
有料ライセンスならプライベートリポジトリにも使えるのだろうけども、グレーアウトしている。
ちなみにPHP5.4.x以下だとPHPの文法エラーで有効化できなかった。現在PHP5.4系はEOLでサポート終了のため、レンタルサーバーで最新版に変更。さくらインターネットのレンタルサーバーなら「標準のPHP」でOKでしょう。というか、そんな便利システムがあるのに、何故かPHP5.3固定にしていた。

Theme was successfully installed. Go ahead and activate it.

完了したらWP-Pusher > Themesへ移動。
「テーマがインストール済み」とエラーが出たら、一旦該当テーマを削除してインストールするか、Dry runボックスにチェックを入れるんだと思う。(当方では未検証)

Githubの設定

wp-pusher02
WP-Pusher > Themes
ここのPush-to-Deploy:URLへGithubは通知を投げる。
トークンとかあれこれ含めてWP-Pusherが生成してくれている。
これをGithubの方へ登録する。
wp-pusher03
テーマを管理しているリポジトリの
Settings > Webhooks & services > add webhooks
Payload URLにPush-to-Deploy:URLを貼り付けて、保存。

URLはWordPressインストールディレクトリでなく、サイトのルートを指定。
 https://autumnsky.jp/?wppusher-hook&token=xxx
上記のようなURL形式とすること。

設定は以上である。
ここではまってしまったのだが、デフォルトではWordPressのインストールディレクトリを取得することがある。
当サイトではWordPress本体はwordpressディレクトリに配置しているため、

Push-to-Deploy:URL
https://autumnsky.jp/wordpress?wppusher-hook&wppusher-hook&token=xxxx

WP-PusherによるデフォルトがWordPressディレクトリとなり、そのまま貼り付けてもGithubでエラーとなっていた。

Push後の通知状況の確認

それでは、Pushしてみてください。Gitクライアントでは何も起きません。
なので、PushしたらGithubから状況を確認する。
Webhooksに登録したサイトURLが出ている。
他にも登録すればここに表示されるはず。
wp-pusher04
URLをクリックで設定と最新の通知状況が確認できる。
チェックマークはおそらく最新の1件の状況。
先の設定画面の下にRecent Deliveriesがある。
Githubから通知が成功していれば、緑のチェックマークがつく。
Recent Deliveriesの3件のうち、一番下が不成功
(先の宛先URL間違いの時のログ)
wp-pusher05
 
以上である。
私のテーマ作成はWockerというWordPress用仮想化環境をローカルで走らせながら、PHP/CSSを書いている(プリプロセッサはStylus、バージョン管理は当然Git)。従来の方法ではFTPでレンタルサーバーに接続してアップロードとなるが、これは面倒な上に間違えやすそうだ。
自動化しておくと、コードを書いた後が楽で確実なのでちょっとした更新もすぐに反映できる。また、レスポンシブレイアウトの確認も実機から本番用をすぐに見られる。
自動化最高かよ… な気分になれる、メリットしかない。