無料相談・お問い合わせ
ブログを移転しました。
移転先 札幌のホームページ制作・Wordpressのハルリのブログ
Haluri Blog

当サイトのWordPressカスタマイズポイント9~画像拡大表示

2013年 2月9日  Wordpress

続いてテンプレートですが、テンプレートのページは数が多いので、固定ページにまとめてしまうと後から編集が必要になった時に、探すのが大変ですし、通常投稿だと以前書いたように、カテゴリーを間違える誤投稿の危険があります。

これらを考えると、必然的にカスタム投稿タイプにして分けることにしました。

 

 

テンプレートの仕様を決める

それで問題は1つのテンプレート毎に色違いがあって、テンプレートの拡大画像を表示するとなると、各色で個別のページが必要になります。

リニューアル前は、

  1. テンプレート一覧
  2. そのテンプレートの色一覧
  3. 個別ページ

という形でしたが、いちいち3の個別のページに行くのはユーザビリティが悪いですし、スマートな方法ではないので、2の「そのテンプレートの色一覧」のページでクリックすると、拡大画像が表示されるようにすることにしました。

 

 

テンプレートの実装方法を決める

仕様が決まれば、次にどうやって実装するかですが、実装する方法はいろいろありますが、今回はライトボックス(linghtbox)というメジャーな方法を使うことにしました。

ライトボックスはネットショップの商品詳細ページなどでよく使われている画像をクリックすると、周りグレーになり、拡大画像が表示される『あれ』です。

これをどうやってWordpressに組み込むかですが、今回は「lightpop」というプラグインを使用。

サムネイル画像の大きさを調整して、無事ライトボックスを組み込みました。

詳しくはこちらをご覧ください→テンプレート17(テンプレートの画像をクリックすると、拡大画像が表示されます)

 

 

アーカイブページを作る

個別ページはライトボックスを使って完成させたら、次は1の『テンプレート一覧(アーカイブ)』ページの作成です。

WordPressは、カスタム投稿タイプのアーカイブ(一覧)ページとして、archive.phpを使うのですが、通常投稿もこのファイルを使うので、カスタム投稿タイプと通常投稿のアーカイブページの形が違う場合は、別にarchive.phpを作ってあげなければなりませんので、通常のarchive.phpは通常投稿にあてて、テンプレートに専用のファイルをあてることにしました。

この辺りはお客様にとってはどうでもいいことかと思いますが、一応解説すると、archive-【カスタム投稿タイプのスラッグ】.phpで、そのカスタム投稿タイプのアーカイブをカスタマイズすることができます。

それで本題に戻りますが、テンプレートの一覧ページは、テキストだけでなく、書くテンプレートのイメージ(サムネイル)画像も必要になります。

そこで、『このテンプレートはこの画像を一覧で表示』という風にしなくてはならないので、各テンプレートを投稿する時にアイキャッチ画像を指定して、一覧ページで表示するようにしました。

ちなみに、このアイキャッチ画像はWordpressがデフォルトの状態では使用できないので、functions.phpをカスタマイズして、アイキャッチ画像を設定できるようにしています。

これで、テンプレートページが完成です。

 

 

このような形でテンプレートのページを作りましたが、ライトボックスを使うことで、我ながら今風でかっこいいページになったと思います(笑)

ライトボックスを使うと、head部分に数行付け足さなくてはならないので、今まであまり使いませんでしたが、限られたスペースで、拡大画像まで伝えられるので、選択肢としてはアリだと思います。

次回はソーシャルメディアボタンの設置について書きたいと思います。

  • このエントリーをはてなブックマークに追加


Facebookページにご参加ください

ホームページの作成やSEO対策、Wordpress、WEBマーケティングなど、様々なタメになる情報を配信しています。Facebookページへの参加は下の『いいね!』ボタンをクリックしてください。

関連記事

人気記事

コメント

お名前

コメント本文


pagetop