プラグイン【WordPress Popular Posts】をカスタマイズしていろんな情報を表示させる
WordPress「WordPress Popular Posts」はWordPressサイトの人気投稿記事を閲覧数と合わせてリスト表示ができる、とても便利なプラグインです。特にコードを書かなくてもデフォルトのウィジェットに組み合わせて使うことにより簡単ですぐに実装することができます。
さらに、テンプレート内やfunctions.phpファイルに直接コードを書くことで、より細かくカスタマイズすることも可能です。今回はそのカスタマイズ例をまとめていきたいと思います。
ウィジェットを使って手軽に使用する
まずはWordPressのウィジェット機能を使って簡単に早く実装する方法です。ウィジェット機能を使うことで管理画面から表示設定を行うことができます。ただし、あらかじめ用意されている設定項目の範囲になるので少し柔軟性に欠けます。でも普通のブログであれば特に不自由することはないかと思います。
【functions.php】
<?php register_sidebar(); // サイドバーウィジェット追加 ?>
【sample-template.php】（一部抜粋）
<ul> <?php dynamic_sidebar(); // ウィジェットのサイドバーを出力 ?> </ul>
上記のコードをそれぞれファイルに記述しウィジェットを有効化させ、WordPress Popular Postsの設定を行えるようにします。管理画面の「外観」→「ウィジェット」のページを開くと、利用可能のウィジェットの中にWordPress Popular Postsが追加されています。「サイトバー」に追加すると、ウィジェットの細かな設定ができるようになります。
ソースコードを記述して細部までカスタマイズする
次は少し難易度が高いですが、ソースコードを記述することで色々な設定を行い、細部までカスタマイズしていく方法です。たとえば記事が属するタクソノミーのタームやカスタムフィールドの値なども出力することができます。コードの方はfunction.phpと出力するテンプレートに記述していきます。
【functions.php】
// アイキャッチ画像の有効化
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
add_image_size( 'wpp_thumbnails', 80, 80, true );
}
// WordPress Popular Postsカスタマイズ
function my_custom_popular_post( $post_html, $p, $instance ) {
$thumbnail_id = get_post_thumbnail_id( $p->id);
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id, 'wpp_thumbnails' );
$taxonomy_01 = get_the_term_list( $p->id, 'taxonomy_01_slug', '', '', ' ／ '); // タクソノミ−1のタームを出力
$taxonomy_02 = get_the_term_list( $p->id, 'taxonomy_02_slug', '', ' ',' ／ '); // タクソノミ−2のタームを出力
$custom_field_01 = get_post_meta($p->id, 'cf_01_slug', true); // カスタムフィールド1の内容を出力
$custom_field_02 = get_post_meta($p->id, 'cf_02_slug', true); // カスタムフィールド2の内容を出力
$views = wpp_get_views( $p->id, 'monthly', true);
$custom_id= $p->id;
$output = '
<li>
<div>
<img src="' . $thumbnail_img[0] .'" width="80">
</div>
<div>
<a href="'. get_the_permalink($p->id) . '"><h1>'. $p->title.'</h1></a>
<div>' . $taxonomy_01 . $taxonomy_02 . $taxonomy_03 . $custom_field_01 . $custom_field_02'</div>
<span>' . $views . ' Views</span>
</div>
</li>
';
return $output;
}
add_filter( 'wpp_post', 'my_custom_popular_post', 10, 3 );
【sample-template.php】（一部抜粋）
<ul> <?php $wpp = array ( 'range' => 'monthly', // 集計期間 'limit' => 5, // 表示数 'post_type' => 'posts', // 対象の投稿タイプ 'title_length' => '50', // タイトルの文字数上限 'stats_comments' => '0', // コメント表示有無 'stats_views' => '1', // 閲覧数表示有無 'order_by' => 'views' // 表示順序 ); ?> <?php wpp_get_mostpopular($wpp_leaders); ?> </ul>
これで以下のようにHTMLへ出力されます。
<ul> <li> <div><img src="[サムネイル画像パス]" width="80"></div> <a href="[記事パーマリンクURL]"><h1>記事タイトル</h1></a> <div>ターム1 ／ ターム2 ／ カスタムフィールド1の内容 ／ カスタムフィールド2の内容</div> <span>[閲覧数カウント] Views</span> </li> </ul>
いかがでしょうか、直接コードを書くのは少しハードルが高いですが、カスタムフィールドなどの値も表示できるのでかなり使える範囲が広がるかと思います。ぜひお試しください！
-
-
この記事を書いた人オガワ シンヤ
DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。
制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら
デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。
ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。
コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。
