WP カスタムフィールドで画像を表示する

By Rika on WORDPRESS

現在使用している theme “Options” はカスタムフィールド (Custom Fields) を利用して記事別に画像を表示しています。マガジンライクなテーマは殆どそうみたいです。

今までカテゴリ別にアイコン画像を表示する plugin を使用したことがありますが、それはカテゴリ毎にアイコン画像を呼び込むだけだったので、トップページでもシングルページでも同じものが表示されていました。(それがいいところでもあります。)

カスタムフィールドで画像を表示する場合は、投稿時にカスタムフィールドの値に画像 URL を記入します。

サイズの違う画像のキーを設定しておけば、 Top page はサムネイルでシングルページにはミディアムサイズ、等と使い分けることもできますし、サイドバーの最近の投稿をサムネイル付きで表示できたり、お勧め記事を画像だけで表示、なーんてカスタマイズが自由になり、ちょっとうれしくなりました ;-)

ただ、このテーマのカスタムフィールドの表示は既成のプラグインを使用したもので無く、デフォルトでテーマに組み込まれていて、表示方法も多種に渡っているので、かなり複雑なコードです。

なので、似たようなことを簡単にできるプラグインでの表示を試してみました。

プラグイン自体はかなり昔から普通にあったもので、文字での表示方法の紹介は結構検索すると出てきます。

使用プラグイン

coffee2code.com » Get Custom Field Values
インストール: ごくふつうにダウンロードしたフォルダをアップロード・有効化すると、カスタムフィールドに記入したデータを

<?php echo c2c_get_custom('Value code); ?>

上記を表示したい場所に入れるだけで表示してくれます。
画像の場合は

<img class="class name" src="<?php echo c2c_get_custom('Value code'); ?>" alt="alt" />

altには記事のタイトルを呼び出すコード入れるといいかも。
でも、このままだとカスタムフィールドで画像の値を入れなかった場合altに入れた文字が表示されちゃいます。
IEだと×って出ちゃうから、対処法をどなたか教えてください。
とっても子供じみた対処法ならあるんですが、とても記事には載せられない :P)

カスタムフィールドのキーには、分かりやすい画像の名前がいいと思います。(どれがどのサイズか自分が分かるように)
Thumbnail, Lage Imageなど。大文字と小文字は区別されます。
CSSで画像サイズや位置を調節します。
CSSで設定したサイズと同じサイズをアップロードするときれいです。
投稿時にアップロードした画像を記事には挿入しないで、Wordpress 2.3.3まではFirefoxの右クリックで画像のURLをコピーしてカスタムフィールドの値に貼り付けます。Wordpress 2.5 は Link URL に画像のアドレスが表示されるし、アップロードする画像のサムネイルサイズが指定できるようになったので便利です。
(設定のその他の設定でできます。)

表示例

トップ、アーカイブページ

テーマの投稿記事のタイトルの前に挿入し、小さめに表示してみました。

シングルページ

記事の冒頭に大きめのサムネイルで表示してみました。

P.S
YouTube の動画のアドレスの後尾にある & から後を削除した URL をカスタムフィールドの値に入れると、動画も表示することができます。

you may want to subscribe to my RSS feed. Thanks for visiting!

関連する投稿
Have Your Say

RSS feed

rss rss

Category

TagCloud

ADS

BottomBar