ブログには人気記事のリストが掲載されていることがよくあります。あれは訪問者にブログの強みを知ってもらうという意味でも、とても効果があると思います。
当サイトで利用しているテーマは Stinger8 で、とてもシンプルなテーマですから、当然そのような機能はありません。
そういった場合に人気記事リストを表示する方法としてよく知られているのは、プラグインを使う方法です。
ですが、プラグインは便利な反面でバグを起こしたり、表示速度を落とす原因になったりすると聞きます。
そこで、今回はプラグイン無しで人気記事を掲載する方法を調べて実装してみました。
基本方針
基本的には、WordPressのランキングをプラグインなしでつくる- cage.tokyo という記事を参考にさせていただきます。ただ、そのままコピペさせて頂くと、サイドバーのレイアウトに合いません。そこだけ別に CSS を書かないといけないことになります。
それは面倒です。外に出るのが面倒だったあまりに、周囲には新型コロナにやられたかも知れないと匂わすくらい自分は面倒臭がりです。そんなことはやってられません。（でも、プラグインを使わないという信念は貫きます）
そこで、ウェジットの一項目として加える方法を取ることにしました。
その方法だと追加で CSS を書く必要がありませんからね。では、具体的な手順に入ろうと思います。
function.php にPVをカウントする関数を書く
function.php に以下のコードを追記しました。
// 人気記事出力用関数
function getPostViews($postID){
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
return "0 View";
}
return $count.' Views';
}
// 記事viewカウント用関数
function setPostViews($postID) {
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if($count==''){
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
}else{
$count++;
update_post_meta($postID, $count_key, $count);
}
}
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
ここは cage.tokyo さんのコードを丸パクリさせていただきました。
php や WordPress の関数についてのぼくの知識はかなり貧弱なので、正直言うと何が起こっているのかははっきりとは分かっていません。何となく雰囲気は分かるのですが。
まぁそこは追々勉強していくことにして、先に進みます。
ウェジットに php コードを書き込めるように function.php を編集する
次に以下のコードを function.php に追記します。こちらがウェジットに php コードを書き込むための設定になります。
//ウェジットにphpを書くための関数
function widget_text_exec_php( $widget_text ) {
if( strpos( $widget_text, '<' . '?' ) !== false ) {
ob_start();
eval( '?>' . $widget_text );
$widget_text = ob_get_contents();
ob_end_clean();
}
return $widget_text;
}
add_filter( 'widget_text', 'widget_text_exec_php', 99 );
こちらのコードもぼくが自分で書けるはずもなく、先人のお知恵を参考にさせていただきました。
先ほどのコードは何となくやっていることが分かったんですが、こちらに関しては頭の中で”？”が沢山フヨフヨと浮かんでいます。はっきり言って全く理解していません。
これも勉強しようと思いましたが、本当にする日が来るのだろうか………
サイドバーウェジットに「テキスト」を追加
さて、次はサイドバーウェジットに「テキスト」を追加します。
方法は説明する必要がないほどに簡単です。ですが、一応書いておきます。
WordPress の管理画面で外観＞ウェジットと進みます。
そこでサイドバートップにテキストをドラッグ＆ドロップ。サイドバートップでなくてサイドバーウェジットでも構いません。
追加したテキストエリアに人気記事リストを表示するコードを書き込む
これが最後の工程でした。上で追加したテキストの中身に以下のコードを書き込みます。
<?php
// views post metaで記事のPV情報を取得する
setPostViews(get_the_ID());
$args = array(
'meta_key' => 'post_views_count',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'posts_per_page' => 5 // ← 5件取得
);
?>
<div class="kanren">
<?php
$query = new WP_Query( $args );
if ( $query->have_posts() ):
while ( $query->have_posts() ) :
$query->the_post();
?>
<dl class="clearfix">
<dt>
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumbnail' ); } ?>
</a>
</dt>
<dd>
<div class="blog_info">
<p><?php the_time( 'Y/m/d' ); ?></p>
</div>
<p class="kanren-t">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</p>
<p>
<?php echo getPostViews(get_the_ID()); // 記事閲覧回数表示 ?>
</p>
<div class="smanone2">
<?php //the_excerpt(); //抜粋文 ?>
</div>
</dd>
</dl>
<?php endwhile; ?>
<?php else: ?>
<p>新しい記事はありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
これは Stinger8 に元々備わっている（はずの）newpost.php というファイルのHTML構造に、cage.tokyo さんが公開されているコードを入れ込む形で作りました。newpost.php は新着投稿を表示するためのものです。
これで新着投稿と同じレイアウトで人気記事リストが表示されるようになりました。
以上が当サイトで実装した人気記事リストを表示する手順でした。
コメント