1. TOP
  2. wordpress
  3. ワードプレスのカスタムフィールドを使って画像を切り替える

ワードプレスのカスタムフィールドを使って画像を切り替える

 2012/06/12 wordpress
この記事は約 5 分で読めます。 20 Views

今回のホームページの製作依頼は西宮にある外車の中古車屋さんです。
これまでは、そこそこHTMLの知識がある方がDreamweaverを使ってこまめに更新していました。
ただ、自動車は様々な装備などがあります。
それを画像のチェックボックスをを使って「あり」「なし」をわかりやすく表示していました。

今回はワードプレスでホームページをリニューアルするので、チェックしたら画像を切り替えるようにしてくれとの要望でカスタムフィールドを使って切り替えるようにしました。
まずは「」と「」このような画像を用意します。
カスタムフィールドはプラグインを使いました。(カスタムフィールドテンプレート)

こんな感じで、中古車の装備があるならチェックしてもらいます。

チェックボックスを使った表示は中古車の個別ページだけに表示するのでsingle.phpを変更します。
カテゴリごとに個別ページのテンプレートを用意して振り分けます。

3,4行目でカテゴリIDが4,5,6,7,8,9に属する場合はsingle-sharyou.phpを使うようにしています。
他のカテゴリもそれそれテンプレートを用意して振り分けています。
in_categoryでは指定したカテゴリに属する場合に、is_categoryは指定したカテゴリにある場合にテンプレートを振り分けます。
複数のカテゴリに属する場合などは「in_category」と「is_category」を使い分けます。

画像を切り替えるif文をsingle-sharyou.phpに書きます。
今回はtableの中で使っています。

2行目で「AT」のカスタムフィールドに値があるかどうか見ています。
値があれば3行目でチェックの入った画像を表示させて、値がなければ5行目でチェックのない画像を表示させます。
9行目ではもう一度値があるかどうか見て、あればカスタムフィールドの値「AT」をデフォルトの色(今回は#000 黒)で表示し、値がない場合はグレーアウト(#bbb)させます。
これをカスタムフィールドのチェックボックスを用意した装備全てに対して書いてあげれば完成です。

こんな感じになりました。
先日、説明に行きましたが好評のようです(^^)

関連する投稿:


\ SNSでシェアしよう! /

集客特化型ホームページの制作は愛媛県の魁文堂の注目記事を受け取ろう

NO IMAGE

この記事が気に入ったら
いいね!しよう

集客特化型ホームページの制作は愛媛県の魁文堂の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

能瀬 耀

この人が書いた記事  記事一覧

  • NEC ValueStar VW770/L PC-VW770LS6R の分解修理、ハードディスク交換

  • 集客が倍増するホームページ

  • ランサムウェアのファイルを復元(RannohDecryptor.exeの使い方)

  • ホームページの集客(売り上げ)改善のポイント

関連記事

  • WordPress4.2 Powell アップデート

  • Fast Image Insert Plugin で画像の並び替え

  • WordPress3.0RC日本語版をインストールしてみた

  • WordPressの移設…違うドメインにWordPressを移す

  • WordPress3.1で大きく変わった所(プラグイン、設定、ネットワークなど)

  • WordPressのサーバー引越し(CoreServer→さくらインターネット)