ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

人気記事を表示する「WordPress Popular Posts」でカスタムフィールドの値を出力する

ワードプレスで人気記事を表示する「WordPress Popular Posts」でカスタムフィールドの値をfunctions.phpをカスタマイズして表示する方法です。

人気記事を表示するプラグイン「WordPress Popular Posts」の人気記事表示でカスタムフィールドの値も出力する方法です。

ウェジェットで人気記事を表示させている場合

「WordPress Popular Posts」にカスタムフィールドの出力を追加するプラグイン「WPP Customize」を使うと簡単です。

プラグインではカスタムフィールド、サムネイルなども出力できます。

使用方法はプラグイン配布先で詳しく解説されています。
WPP Customize

コードを記載して人気記事を表示させている場合

functions.phpをカスタマイズして、カスタムフィールド、サムネイル、タームなどを出力させます。

以前はコアファイルをカスタマイズしていたのですが「黒ブタBLOG」さんのサイトを参考に、functions.phpを下記のコードにカスタマイズ。

■functions.php

<?php
function my_custom_single_popular_post( $post_html, $p, $instance ){
$thumbnail_id = get_post_thumbnail_id( $p->id);//サムネイル取得
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' );//サムネイル表示サイズ
$custom_sex = get_post_meta($p->id, 'cf_test1', true);//カスタムフィールド
$custom_shop = get_post_meta($p->id, 'cf_test2', true);//カスタムフィールド
$custom_sakka = get_the_term_list( $p->id, 'ct_test3', '', '', '');//ターム
$custom_id= $p->id;
//$excerpt = get_post_field( post_content, $p->id, display );
$output = '
<li>
<a href="' . get_the_permalink($p->id) . '">
<figure><img src="' . $thumbnail_img[0] . '" title="' . esc_attr($p->title) . '" class="thumbnail"></figure>
</a>
<div>
<h3>'. $p->title.'</h3>
<div class="test3">'. $ct_test3 .'</div>//ターム「ct_test3」出力
<p>'. $cf_test1 .'</p>//カスタムフィールド「cf_test1」出力
<p>'. $cf_test1 .'</p>//カスタムフィールド「cf_test2」出力
</div>
</li>
';
return $output;
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );
?>

タームにはリンクが自動的に挿入されてしまいますが、リンクが不要な場合は下記のコードにします。

<?php
function get_the_term_list_nolink( $id = 0, $taxonomy, $before = '', $sep = '', $after = '' ) {
 $terms = get_the_terms( $id, $taxonomy );
 if ( is_wp_error( $terms ) )
 return $terms;
 if ( empty( $terms ) )
 return false;
 foreach ( $terms as $term ) {
 $term_names[] = $term->name ;
 }
 return $before . join( $sep, $term_names ) . $after;
}
function my_custom_single_popular_post( $post_html, $p, $instance ){
$thumbnail_id = get_post_thumbnail_id( $p->id);//サムネイル取得
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' );//サムネイル表示サイズ
$custom_sex = get_post_meta($p->id, 'cf_test1', true);//カスタムフィールド
$custom_shop = get_post_meta($p->id, 'cf_test2', true);//カスタムフィールド
$custom_sakka = get_the_term_list( $p->id, 'ct_test3', '<span>', '</span><span>', '</span>');//ターム
$custom_id= $p->id;
//$excerpt = get_post_field( post_content, $p->id, display );
$output = '
<li>
<a href="' . get_the_permalink($p->id) . '">
<figure><img src="' . $thumbnail_img[0] . '" title="' . esc_attr($p->title) . '" class="thumbnail"></figure>
<div>
<h3>'. $p->title.'</h3>
<div class="test3">'. $ct_test3 .'</div>//ターム「ct_test3」出力
<p>'. $cf_test1 .'</p>//カスタムフィールド「cf_test1」出力
<p>'. $cf_test1 .'</p>//カスタムフィールド「cf_test2」出力
</div>
</li>
';
return $output;
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );
?>

人気記事を表示させる

functions.phpをカスタマイズしたら、人気記事を表示させる箇所に下記を記載すれば表示されます。

<?php
if (function_exists('wpp_get_mostpopular')){
$arg = array (
'range' => 'daily',//集計の期間(daily,weekly,monthly)
'order_by' => 'avg',//集計方法(avg,views)
'stats_views' => '0',//閲覧数を表示(非表示0、表示1)
'post_type' => 'post',//ポストタイプ
'title_length' => '25',//タイトルの文字数制限
'limit' => 5, //表示件数
'thumbnail_width' => '140',//サムネイルの幅
'thumbnail_height' => '100',//サムネイルの高さ
'wpp_start' => "<ul>", // リストの開始タグ
'wpp_end' => "</ul>", // リストの終了タグ
);
wpp_get_mostpopular($arg);
}
?>

以上で完了です。
ワードプレスでECサイトや、飲食、ショップサイトを作っている場合は便利になるかと思いますよ。

新しい記事

東京のWEB制作会社イッティ