【自由にカスタムフィールドの値を出力する】 | WordPress Popular Posts フルカスタマイズ

最終更新日:  |  web関連, WordPressカスタマイズ, 記事一覧

ワードプレスでカスタマイズしている人は、殆どの人がWordPress Popular Postsというランキングを出力出来るプラグインを使用していると思う。

これの便利なところは期間を限定してランキングを付けられるところ。
ただ、カスタマイズでの出力面にかなりの難があり、既存のショートコードや管理画面での設定では思ったように出力が出来なくて悩んでいる人が多いかと思う。
今回、私が悩んだのは自身で作ったカスタムフィールドの値を出力したいと思ったが元々ある機能ではそれが叶わない。
自由自在にhtmlタグも入れたし、classもつけたい。
かといって、無駄なプラグインも入れたくなかった為、自身でカスタマイズすることにしました。

思ったように好きな値を出力できるプログラムが出来たので、同じように悩んでいる人の為と、自身が忘れた時の為に備忘録として記事にしたいと思う。

 

まずはfunctions.phpの書き込みから。

今回のポイントとしては、
$output = ‘   ‘;
の中のhtmlコードと、カスタムフィールドの値をget_post_metaで呼び出すところ。
それからサムネイルについてですが、自身でファンクションに書き込んだ自動トリミングした画像を引っ張ってくるところですね。

赤文字のところが今回の重要なプログラムです。
青文字
のところが自身で定義した値の部分なので書き換えてください。
$output = ‘   ‘;の中のhtmlタグとclassについてですが、一定のルールはありますが、好きなように変更してokです。

<?php
//アイキャッチの自動トリミング設定(いくらでも増やせるが、その分容量とりますので程々に)
//※デバイスのサイズに合わせて読み込みするサイズを変更し最適化なものにすることによって検索エンジンに嫌われないようにする(スコアを上げる)
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
add_image_size( 'pc_single_thumbnails', 800, 500, true );
add_image_size( 'pc_list_thumbnails', 608, 380, true );
add_image_size( 'main_thumbnails', 480, 300, true );
add_image_size( 'mobile_list_thumbnails', 240, 180, true );
}
//ここからポピュラーポストのカスタマイズ設定
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, 'main_thumbnails' );
$custom_sex = get_post_meta($p->id, 'sex', true);//カスタムフィールド「性別」呼び出し格納
$custom_shop = get_post_meta($p->id, 'shop', true);//カスタムフィールド「店舗」呼び出し格納
$custom_price = get_post_meta($p->id, 'non_tax', true);//カスタムフィールド「値段」呼び出し格納
$custom_id= $p->id;
//$excerpt = get_post_field( post_content, $p->id, display );
$output = '
<li class="box">
<article class="clearfix">
<a href="' . get_the_permalink($p->id) . '">
<div class="imgbox">
<img src="' . $thumbnail_img[0] . '" title="' . esc_attr($p->title) . '" class="rank_thumbnail" width="100%">
</div>
<div class="textbox clearfix">
<h4>'. $p->title.'</h4>
<p class="price">&yen;&nbsp;'. $custom_price .'</p>//カスタムフィールド「値段」出力
<ul class="clearfix">
<li class="store-icon">'. $custom_shop .'</li>//カスタムフィールド「店舗」出力
<li class="number-icon">'. $custom_id .'</li>//記事のID呼び出し
<li class="sex-icon">'. $custom_sex .'</li>//カスタムフィールド「性別」出力
</ul>
</div>
</a>
</article>
</li>
';
return $output;
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );
?>

続いて呼び出し(呼び出したいphpファイルに書き込んでください)


<?php
if (function_exists('wpp_get_mostpopular')){
$arg = array (
'range' => 'daily', /*集計期間の設定(daily,weekly,monthly)*/
'order_by' => 'views',//閲覧数で集計
'stats_views' => '0',//閲覧数表示 1=表示、0=非表示
'post_type' => 'dog,cats',//ポストタイプを指定
'title_length' => '25',//表示させるタイトル文字数
//'excerpt_length' => '44',//抜粋文字数
'limit' => 3, //表示数
);
wpp_get_mostpopular($arg);
}
?>

excerpt(記事本文)についてですが、今回思うように文字数制限をかけられなかったので、出力を諦めました。
またこちらの件も解決できたら追記したいと思います。