Xeory

Xeory:個別記事のタイトル下にPV数を表示させる方法

xeory-recent-post-thumbnail

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

Xeoryのテーマを有効にすると、管理画面のウィジェットのページには「ページビュー数」というウィジェットが表示されますよね。

実はこれXeoryの中に入っているプラグインがページごとのPV数をカウントして、そのPV数をウィジェットとして表示しているんですが、今回はこの機能を利用して、個別記事のページに「PV数」を表示させる方法を紹介したいと思います。

文章だけだと難しく聞こえるかもしれませんが、コードの編集自体はとてもシンプルです。

カスタマイズ前

↓ Xeoryをインストールしただけの状態

xeory-page-views-before

カスタマイズ後

↓ 個別記事の閲覧数が表示された

xeory-page-views-after

[ad]

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

1. single.php を編集

それでは個別記事のページを表示させている single.php を編集していきましょう。
single.php の30行目付近に以下のコードがあるので、・・・

<div class="post-header-meta">
  <?php bzb_social_buttons();?>
</div>

これを以下のコードで置き換えます。

<div class="post-header-meta">
  <?php bzb_social_buttons();?>
  <p class="page-views"><strong><?php bzb_the_views(); ?></strong> views</p>
</div>

保存して読み込むと、閲覧数+「 views」という文字が表示されるようになります。

views 以外の文字を使いたいという方は、上のコードの views 部分を変更してください。

xeory-page-views-after-1

2. style.css を編集

閲覧数を表示できたので、CSSでスタイリングすれば完成です。

※)CSSコードの追加先は Xeory 本体(親テーマ)のstyle.cssでも子テーマのCSSファイルでも、お好みのファイルで大丈夫です。

.post-title {
    margin-bottom: 18px;
}
.post-header-meta {
    margin-bottom: 18px;
}
.page-views {
    text-align: right;
}

それぞれの記事の閲覧数が太い文字で右側に表示されるようになりました。

xeory-page-views-after-2

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