目次（クリックで開きます）
最近有名ブロガーさんたちがブログの全記事にPVを表示させているみたいなので僕もやってみました。
一応このブログはWordPressで運営しているのでsingle.phpというところをちょっといじれば簡単にできます。特にWordPressテーマ「ストーク」
を使っている人はこれから書くコードをコピペするだけで簡単にできます。
いや〜、自分の読まれていない記事とかみられるの恥ずかしいな笑
今回の記事ではphpというプログラミング言語で書かれたファイルをいじります。変に書き間違えるとブログが正常に動かなくなることもあります。PHPファイルをいじる前には必ずバックアップを取るようにしてください。
また当サイトではこの件に関して責任は負えませんので自己責任でお願いします。
準備１：まずはWordPress Popular Postsというプラグインをインストールしてください
これは結構有名なプラグインだと思います。僕も全記事にPVを表示しようと考える前からすでにインストールしていました。
このプラグインをインストールすることで各記事のPVをカウントしてくれます。
僕のこのブログのサイドバーの「人気記事です」ってやつもこのプラグインで作られています。
右側にあるサイドバーです。
が、このWordPress Popular Postsだけではこの記事の目的である全記事にPVを表示することができません。
ここからこのプラグインの機能（関数）を使って記事内にPVを表示させる方法を書いていきます。
準備２：FTPクライアントソフトをインストールする
今回はわかりやすいように僕と同じ環境で作業してもらうためにCyberduckという名前のソフトをインストールしてください。
関連サイト：Cyberduck 配布サイト
このソフトを使うことで自分のブログが格納されているサーバーの中のファイルを覗くことができます。
準備３：visual studio codeをインストールする
このテキストエディタがあることでコードがとても読みやすくなります。
例えばMacに付属しているテキストエディタで今回いじるphpのコードを読み込ませるとこんな感じになります。
今回作業するPHPファイルをMac標準のテキストエディタで開いた場合
っで同じファイルをvisual studio codeで読み込ませるとこんな感じになります。
同じファイルをVisual Codeで開いた場合
見やすやが全然違いますね。
phpの開始部分やコメント部分が色分けされて見やすくなるので是非ダウンロードしておく事をおすすめします。
visual studio codeのサイトからダウンロード
準備４：single.phpを子テーマにコピーする
子テーマにsingle.phpをコピーします。
親テーマにあるsingle.phpをコピーして子テーマにコピーしてください。
子テーマについてはStorkのサイトがわかりやすいので参考にしてください。
参考サイト：子テーマのダウンロード・導入
ここまでで準備の方はオッケーです。それでは早速phpファイルをいじっていきましょう。
まずは各記事の先頭にPVを表示させてみましょう
実際にやってみるとこんな感じになります。
それではやっていきましょう。
single.phpというファイルをいじる
各記事の設定はsingle.phpというファイルに書かれています。（ストークの場合）
なのでまずこのファイルを先ほどダウンロードしてもらったCyberduckで探します。
大体の人は
wp-content/themes/jstork か
wp-content/themes/jstork_custom
の中にあると思います。
見つけたらこの画像のように右クリックしてvisual studio codeに読み込ませましょう。
右クリックしてVisual Codeで開く
するとこんな感じの画面になるので
白く囲んだ部分にコピーしてください。
白い線で囲んだ部分に
<?php /*pv数を表示する*/ if ( function_exists ( 'wpp_get_views' ) ) { echo '<span class="wpp-views">' . wpp_get_views ( get_the_ID() ) . '</span> views'; } ?>
このコードをコピペしてください。
そしてそのままvisual studio codeを閉じると「保存しますか？」と聞いてくるので保存してください。
そしたらブラウザでブログを開いてみてください。
するとこんな感じで先頭にPVが表示されます。
タイトル上にPVが表示されます。
こんな感じでタイトル上にPVが表示されます。
次にトップページでの各記事にPVを表示する
次にトップページをいじっていきます。
ここからはもう完全にwordpressのテーマがStorkであることを前提になります。
まずStorkのトップページって
- シンプル
- カード
- マガジン
- ビッグ
の４つがあります。
Storkのカスタマイズの画面
画像の通り僕はPCではカード型、スマートフォンではシンプル型を使用しています。なので今回はこの通りに説明させてもらいます。
まずPCのカード型から
PCカード型のレイアウトは「part_archive_card.php」と言うphpファイルでできています。なのでこのファイルをstorkのフォルダから子テーマにコピーしてください。やり方は先ほどと同じです。
コピーしたらまた先ほどと同じようにVisual Codeで開いてください。
そしたら下の画像の部分に同じPHPのコードをコピーしてください。
この部分にコピーしてください
白く囲った部分です。
コピーして保存したらサイトを更新してください。
カード型の場合こんな感じに表示されます。
PCのカード型にPVが表示された。
次にスマートフォンのシンプル型についてやっていきます。
スマートフォンのシンプル型は「parts_archive_simple.php」というファイルをいじります。
今までと同じようにStorkから子テーマにファイルをコピーしてください。そしてVisual Codeで開いてください。
そしたら下の画像の部分に今までと同じPHPのコードをコピーしてください。
この部分にコピーしてください。
これでまた保存した後にサイトを更新してください。そうするとこんな感じになります。
スマートフォンサイトにもPVが表示された。
こんな感じですね〜。
試しに開いたページを再読み込みしてみるとPVが１増えると思います。
以上です。
僕も使っているWordPressテーマ「ストーク」
はとても使いやすくブログ初心者にもオススメです。
無料のテーマにも良いものもありますが、それのカスタマイズに時間をかけて記事をかけないのは本末転倒ですので一考して見てはどうでしょう？
