当サイトのWordPressカスタマイズポイント9～画像拡大表示
続いてテンプレートですが、テンプレートのページは数が多いので、固定ページにまとめてしまうと後から編集が必要になった時に、探すのが大変ですし、通常投稿だと以前書いたように、カテゴリーを間違える誤投稿の危険があります。
これらを考えると、必然的にカスタム投稿タイプにして分けることにしました。
テンプレートの仕様を決める
それで問題は1つのテンプレート毎に色違いがあって、テンプレートの拡大画像を表示するとなると、各色で個別のページが必要になります。
リニューアル前は、
- テンプレート一覧
- そのテンプレートの色一覧
- 個別ページ
という形でしたが、いちいち3の個別のページに行くのはユーザビリティが悪いですし、スマートな方法ではないので、2の「そのテンプレートの色一覧」のページでクリックすると、拡大画像が表示されるようにすることにしました。
テンプレートの実装方法を決める
仕様が決まれば、次にどうやって実装するかですが、実装する方法はいろいろありますが、今回はライトボックス（linghtbox）というメジャーな方法を使うことにしました。
ライトボックスはネットショップの商品詳細ページなどでよく使われている画像をクリックすると、周りグレーになり、拡大画像が表示される『あれ』です。
これをどうやってWordpressに組み込むかですが、今回は「lightpop」というプラグインを使用。
サムネイル画像の大きさを調整して、無事ライトボックスを組み込みました。
詳しくはこちらをご覧ください→テンプレート17（テンプレートの画像をクリックすると、拡大画像が表示されます）
アーカイブページを作る
個別ページはライトボックスを使って完成させたら、次は1の『テンプレート一覧（アーカイブ）』ページの作成です。
WordPressは、カスタム投稿タイプのアーカイブ（一覧）ページとして、archive.phpを使うのですが、通常投稿もこのファイルを使うので、カスタム投稿タイプと通常投稿のアーカイブページの形が違う場合は、別にarchive.phpを作ってあげなければなりませんので、通常のarchive.phpは通常投稿にあてて、テンプレートに専用のファイルをあてることにしました。
この辺りはお客様にとってはどうでもいいことかと思いますが、一応解説すると、archive-【カスタム投稿タイプのスラッグ】.phpで、そのカスタム投稿タイプのアーカイブをカスタマイズすることができます。
それで本題に戻りますが、テンプレートの一覧ページは、テキストだけでなく、書くテンプレートのイメージ（サムネイル）画像も必要になります。
そこで、『このテンプレートはこの画像を一覧で表示』という風にしなくてはならないので、各テンプレートを投稿する時にアイキャッチ画像を指定して、一覧ページで表示するようにしました。
ちなみに、このアイキャッチ画像はWordpressがデフォルトの状態では使用できないので、functions.phpをカスタマイズして、アイキャッチ画像を設定できるようにしています。
これで、テンプレートページが完成です。
このような形でテンプレートのページを作りましたが、ライトボックスを使うことで、我ながら今風でかっこいいページになったと思います（笑）
ライトボックスを使うと、head部分に数行付け足さなくてはならないので、今まであまり使いませんでしたが、限られたスペースで、拡大画像まで伝えられるので、選択肢としてはアリだと思います。
次回はソーシャルメディアボタンの設置について書きたいと思います。
