WordPress Popular Posts を使用して個別記事にPV数を表示する方法

個別記事にプレビュー数を表示しても、それはただのアクセント程度にしかならないと思いますが、、、
アクセントならアクセントらしく見た目を整えてみましょう♪

ウィジェットを使用して個別記事にプレビュー数を表示する

phpファイルを準備する

テキストエディタに、以下のコードを入力して[ wpp_get_views.php ]という名前で保存し、テーマのfunctions.php があるディレクトリにアップロードします。
[highlight_php]<?php if ( function_exists ( ‘wpp_get_views’ ) ) { echo ‘<span class=”wpp-views2″>’ . wpp_get_views ( get_the_ID() ) . ‘ views</span>’; } ?>[/highlight_php]
ルクセリタスを使用している場合だと、子テーマの中、ということになりますので
wp-content/themes/luxech　の中に保存してください。

functions.phpに追記する

子テーマの functions.php に以下のコードを記述します。（3行目が今回のファイル名）
[highlight_php]/* PHPをウィジェットで動かす */
add_filter( ‘widget_text’, function( $ret ) {
$php_file = ‘wpp_get_views’;

if( strpos( $ret, ‘[‘ . $php_file . ‘]’ ) !== false ) {
add_shortcode( $php_file, function() use ( $php_file ) {
get_template_part( $php_file );
});

ob_start();
do_shortcode( ‘[‘ . $php_file . ‘]’ );
$ret = ob_get_clean();
}

return $ret;
}, 99 );[/highlight_php]

尚、上記コードの書き方は、ルクセリタスの作者である るなさん のブログよりお借りしました。
参考WordPress でプラグイン使わずにウィジェットで PHP コード動かす

ウィジェットを追加する

記事下にテキストウィジェットを追加し、以下のように入力します。
[highlight_markup][wpp_get_views][/highlight_markup]

CSSで整える

子テーマのスタイルシートに以下のコードを追加します。
Font Awesome 4 の場合
[highlight_css]/* views */
.wpp-views2{
font-size: 110%;
color: #24890d;
float: right;
}
.wpp-views2:before {
font-family: FontAwesome;
content: “\f080”;
margin-right: 2px;
}[/highlight_css]

Font Awesome 5 の場合
[highlight_css]/* views */
.wpp-views2{
font-size: 110%;
color: #24890d;
float: right;
}
.wpp-views2:before {
font-family: “Font Awesome 5 Free”;
content: “\f080”;
margin-right: 2px;
}[/highlight_css]

設置例

以上で完成です！
ウィジェットを使用していますので、誰でも簡単に設置が可能です。
こことまったく同じにならないよう、色やフォントアイコンを変更してお試しください♪