プラグイン【WordPress Popular Posts】をカスタマイズしていろんな情報を表示させる
最終更新日: Update!!
「WordPress Popular Posts」はWordPressサイトの人気投稿記事を閲覧数と合わせてリスト表示ができる、とても便利なプラグインです。特にコードを書かなくてもデフォルトのウィジェットに組み合わせて使うことにより簡単ですぐに実装することができます。
さらに、テンプレート内やfunctions.phpファイルに直接コードを書くことで、より細かくカスタマイズすることも可能です。今回はそのカスタマイズ例をまとめていきたいと思います。
いかがでしょうか、直接コードを書くのは少しハードルが高いですが、カスタムフィールドなどの値も表示できるのでかなり使える範囲が広がるかと思います。ぜひお試しください! (参考) 人気記事を表示する「WordPress Popular Posts」でカスタムフィールドの値を出力する
ウィジェットを使って手軽に使用する
まずは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>
いかがでしょうか、直接コードを書くのは少しハードルが高いですが、カスタムフィールドなどの値も表示できるのでかなり使える範囲が広がるかと思います。ぜひお試しください! (参考) 人気記事を表示する「WordPress Popular Posts」でカスタムフィールドの値を出力する
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories