この記事は2年以上前に書かれた記事です。現状にそぐわないかもなのでご注意を。

カスタムフィールドを使いやすくして投稿機能を拡張する

2.カスタムフィールドの値を表示側に出力する

カスタムフィールドから登録した値は、そのままでは表示側には何も表示されません。
これらの値を表示するには、テンプレートをカスタムする必要があります。

素の WordPress ではフィールド値の出力は少し面倒なので、Get Custom Fielde Values というプラグイン を使います。
このプラグインを使うと、c2c_get_custom(‘key’)?で各キーの値を出力できるようになります。

これを使って、上記キーに登録した値を利用して、『投稿した画像を表示してクリックするとURLにジャンプ』をテンプレートに挿入するには

<a href="<?php echo c2c_get_custom('cool_url'); ?>">
<img src="/wp/wp-content/uploads/<?php echo c2c_get_custom('cool_image'); ?>.<?php echo c2c_get_custom('cool_img_fmt'); ?>" />
</a>

をテンプレートに挿入します。

このテンプレートにより、投稿したカスタムフィールドを元に出力されるソースは、

<a href="http://labrid.jp/wp">
<img src="/wp/wp-content/uploads/labrid-top.png" />
</a>

となります。

テンプレートの編集経験があるなら簡単ですね。
こんな具合に、テンプレートをカスタムすることで、各キーの値を出力できます。

このようにして、拡張したカスタムフィールドから登録した値全てを表示したのが、Cool Design の詳細画面になります。

次に、このキー&値を利用して、カテゴリートップ(記事一覧画面)に、アップロードした画像のサムネイル画像を表示するようにしてみます。

WordPress では、画像アップロード時に、『(画像名)-150×150.(拡張子)』という名前のサムネイルが自動で作られます。
※150×150 は、管理画面で設定したサムネイル画像のサイズ

このサムネイルを表示するため、カテゴリートップ用テンプレートに、以下を挿入します。

<a href="<?php the_permalink() ?>">
<img src="/wp/wp-content/uploads/<?php echo c2c_get_custom('cool_image'); ?>-150x150.<?php echo c2c_get_custom('cool_img_fmt'); ?>" />
</a>

このタグによって出力されるソースはこう↓なります。

<a href="http://labrid.jp/wp/archives/407">
<img src="/wp/wp-content/uploads/labrid-top-150x150.jpg" />
</a>

このようにして、サムネイルと、任意の値を出力したのが、Cool Design の記事一覧画面になります。

(参考までに)Cool Design の親カテゴリ『実験室』では、何のカスタムもせず、他の記事一覧画面と同じテンプレートを使用して、同記事を表示しています。

・・・・・

いかがでしょうか?
Wordpress の機能の中で比較的わかりにくいカスタムフィールドですが、それは高い汎用性を保持するためなのだと、今はわかります。
管理者の工夫次第で、利用方法は無限に広がりそうですね。

・・・・・
非常に長くなりましたが、WPビギナーYAMADAによる、カスタムフィールドの利用方法の説明でした。
もっといいやり方がある!という方は、コメントなりトラバなりで教えていただけるとYAMADAはうれしく思います。

スポンサーリンク