IT WEBサービス

YARPPでカスタムフィールド指定画像をサムネイル表示

Wordpres上で関連記事をピックアップ&リンクしてくれるYARPP。リスト表示やサムネイル表示があってとても便利です。

趣味のサイトでは記事が画像ベースとなっているため、サムネイル表示を取り入れようと思ったのですが、YARPPでは関連記事をサムネイル表示するにはアイキャッチ指定する必要があるようです。
しかし、この趣味サイトではAutoFocusというテーマを使っている都合上、アイキャッチ登録はせずにカスタムフィールドを使っていました。
yarpp02

YARPPを改造しよう

YARPPではサムネイル表示をする時に、関連記事にアイキャッチ指定がない場合はデフォルト画像を表示します。
yarpp01

しかし、サイトの方では上記の通りカスタムフィールド(実際のフィールド名は’image_url’)を使っているため、個別記事のサムネイルが表示できません。
そこでYARPPの改造を行いました。

template_thumbnails.php 改造前

$post_thumbnail_html = '';
if ( has_post_thumbnail() ) {
    if ( $this->diagnostic_generate_thumbnails() )
        $this->ensure_resized_post_thumbnail( get_the_ID(), $dimensions );
    $post_thumbnail_html = get_the_post_thumbnail( null, $dimensions['size'] );
}       
if ( trim($post_thumbnail_html) != '' )
    $output .= $post_thumbnail_html;
else
    $output .= '<span class="yarpp-thumbnail-default"><img src="' . esc_url($thumbnails_default) . '"/></span>';

$output .= '<span class="yarpp-thumbnail-title">' . get_the_title() . '</span>';
$output .= '</a>' . "\n";

template_thumbnails.php改造後

$post_thumbnail_html = '';
if ( has_post_thumbnail() ) {
    if ( $this->diagnostic_generate_thumbnails() )
        $this->ensure_resized_post_thumbnail( get_the_ID(), $dimensions );
    $post_thumbnail_html = get_the_post_thumbnail( null, $dimensions['size'] );
}
$meta = get_post_meta(get_the_ID(), 'image_url', true);

if ( trim($post_thumbnail_html) != '' )
    $output .= $post_thumbnail_html;
else if(!empty($meta))
    $output .= '<span class="yarpp-thumbnail-default"><img src="' . esc_url($meta) . '"/></span>';
else    
    $output .= '<span class="yarpp-thumbnail-default"><img src="' . esc_url($thumbnails_default) . '"/></span>';

$output .= '<span class="yarpp-thumbnail-title">' . get_the_date('d m月 Y') . '</span>';
$output .= '</a>' . "\n";

改造は出来るだけ小規模で済ませたかったので、記事に応じて’$output’を書きかえることにしました。’$thumbnails_default’や’$post_thumbnail_html’を書きかえることも検討しましたが、上書き後の再読み込み(カスタム画像後にデフォルト画像を表示するケース)や画像サイズやスタイルを自前で指定する必要があったので避けました。

39行目で指定記事のカスタムフィールドを取得するテンプレート’get_post_meta()’を利用して、該当カスタムフィールドの値を取得しています。codexにもありますが、引数は’記事ID’,’カスタムフィールド名’,’単一か否か’になります。今回は指定フィールド名の単一の値が欲しかったので、それぞれ’image_url’,’true’としています。

43行目では取得したカスタムフィールド値が空かどうかを判定しています。フィールドそのものが無かったり、値が設定されていなかったりするからです。どうせならURLとして正しいか判定しろと言われそうですが、趣味としてそこまで求めませんので未実施です。

48行目ではサムネイルタイトルを変更しています。通常は記事タイトルが適用されるのですが、サイトの運用上タイトル表示は上手くないので、投稿日時表示に切り替えました。繰り返し日時を表示するために’the_date()’ではなく’get_the_date()’を利用しています。

改造後の注意点

以上でYARPPのサムネイルにカスタムフィールド値(URL)を適用する改造は終了です。今後の注意点ですが、YARPPの更新があった際に、むやみに更新しないことです。Wordpressの更新機能を使ってしまうと改造内容がオジャンです。バックアップを取り、更新があった際には改造内容を反映できるようにしておきましょう。

ABOUT ME
Nozomu.Kon
トータルソフトウェアコーディネーターがあなたのお困りを即時に解決!