Xeoryのトップページ記事一覧にPV数を表示させる方法

今回の記事では、バズ部さんが無料で公開してくれているWordPressテーマ：XeoryBase のトップページをカスタマイズしてみたいと思います。

前回、個別記事のページに閲覧数を表示させる方法を紹介しましたが、ここではトップページの記事一覧に、それぞれの記事ごとのPV数を表示させる方法を紹介していきます。

「それぞれの記事」、「PV数」と言うと難しく聞こえるかもしれませんが、コードの編集自体はとてもシンプルです。

カスタマイズ前

↓ トップページの記事一覧（moreタグを入れなかったので、記事全文が表示されています）

↓ 記事一覧を全て抜粋表示にして、それぞれの記事の閲覧数も表示

↓ 閲覧数を右側に移動

[ad]

今回はPHPファイルを編集するので、バックアップを取ってから作業するようにして下さい。
画面が真っ白になることもあるので、PHPコードのミスには要注意です。

それでは、トップページを表示させている index.php を編集して、それぞれの記事のPV数を表示させていきましょう。

index.php の51行目付近に以下のコードがあるので、

<?php the_content('続きを読む'); ?>

これを下のコードで置き換えます。
（閲覧数の表示と一緒に記事一覧を抜粋表示にする）

<?php the_excerpt(); ?>
<p class="page-views"><strong><?php bzb_the_views(); ?></strong> views</p>

保存・更新すると、PV数が表示されるようになりました。
たまたまですけど、抜粋表示にして開き気味だったサムネイルと抜粋文字の余白が埋まっていますね。

もちろん他の記事も、それぞれのPV数が表示されています。
（サイト全体を縮小しているので、若干文字が大きく表示されています）

PV数を表示させることができたので、今度はCSSファイルを編集してPV数を右寄せしていきます。

Xeory本体（親テーマ）の style.css ファイルや、子テーマのCSSファイルなど、お使いのCSSファイルに以下のコードを追加すると、、、

.page-views {
    text-align: right;
}

閲覧数が右寄せされました。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。