Espied カスタム:オリジナルのランディングテンプレート

前回、Espiedの子テーマを作る準備をしました。実際にテーマとしてアップロードしてもすでに使用できる状態ではあります(特に何も変わりませんが・・)

トップページの体裁を変える

Espied のポートフォリオのリスト表示は、グリッド表示が魅力的だよね。これをトップページにして、ポートフォリオをアピールしたいと思います。

その実現方法は、フロントページに指定した固定ページのテンプレートに「ポートフォリオページテンプレート」を使うことで実現できます。

ようするに、固定ページに適用できるテンプレートに、ポートフォリオをグリッド表示する仕掛けが埋め込まれているっていうことですね。

具体的には Espiedテーマの
page-templates/portfolio-page.php
です。

というわけですから、このファイルを参考にして、子テーマに新しいテンプレートを追加すれば良さそうですね。

フロントページ用子テーマテンプレート「ランディングページ」

実現したいことは・・・

  • 自由に編集できるセクションを設ける
  • もちろん、ポートフォリオをデフォルトEspiedのように並べる
  • ブログ(post)の最新記事も並べる

です。

色々はしょって恐縮ですが、以下のようなソースコードになりました。

https://github.com/yambal/Yambal-Espied/tree/landing/yambalespied

単純に、Espied の portfolio-page.php をコピペして、必要な機能を追加したものになっています。
ポイントだけ紹介しますね。

yambal-content-portfolio-01.php

5-12行目:BODDYにクラスを追加しています。
もともとEspied の portfolio-page.php を使用した時に付加されるクラスを足してるんです。なぜかというと、これらのクラスを判定して 親Espied のポートフォリオ周りの Javascript が動作しているからです。

21-37行目:フツーにページの内容を表示します。
トップページの最上部セクションをコントロールできるようになるので、色々使い方が広がるでしょう。

39-42行目:ポートフォリオを表示します。なんだか使いまわしで便利な気がしたので、ショートコード化してみました。ショートコード内容については function.php に追加していますが、Espied からそのまま抜き出した内容になっています。

44-58行目:最新の投稿をリストします。今回目指しているサイトは、ポートフォリオ押しで、ブログ投稿については控えめにしようと思ってます。

おおまかにはイイ感じです

標準 Espied ではちょっと物足らない点を、子テーマとしてカスタマイズしました。このように、子テーマは安全に配布テーマをカスタムする良い手段です。

  • 親テーマがアップデートされても、その変更が失われることはありません。
  • 膨大なコードを再利用でき、コストも低い。
  • 親テーマの模範的なコードを観察し、学ぶことができます。

さて次回からは、さらに自分の好みに近づけていきます。