カスタムフィールドの値を元に画像表示

例えばカスタムフィールドの名前を「system_name」とし、値に「MovableType」や「WordPress」というテキストを入力して、フロント側に表示することはできますが、「MovableType」や「WordPress」というテキストの代わりに、個々に割り当てた代替画像を用いたいという場合もあると思います。

例えば以下のような感じで、「MovableType」や「WordPress」というテキストの代わりに、それぞれのロゴを表示してみます。

20130908-1

以下のようなコードを wp-content/themes/twentytwelve/content.php に挿入すると実現できます。
‘name’ と ‘url’ に、カスタムフィールドの名前と、使用する画像のURLの組み合わせを定義します。
画像のURL定義部分をコピペして増やしてもらえれば、表示画像がいくつでも対応できると思います。

<?php
    // 画像のURL定義1
    $arrRet[] = array(
                    'name' =>  'MovableType',
                    'url' => 'http://www.sixapart.jp/movabletype/news/mtapp_logo_white.jpg'
    );
    // 画像のURL定義2
    $arrRet[] = array(
                    'name' => 'WordPress',
                    'url' => 'http://s.wordpress.org/about/images/logos/wordpress-logo-textonly-rgb.png'
    );
    // 画像表示ロジック
    $system_name = get_post_meta($post->ID, 'system_name', true);
    foreach($arrRet as $val){
        if($system_name == $val['name']){
            echo '<img src="' . $val['url'] . '" />';
        }
    }
?>

うまくいかなかったらまた見直しますので、コメントお願いします。

カテゴリー: 未分類   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

* Copy This Password *

* Type Or Paste Password Here *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>