今回はクライアントからの要望で、アクセスカウンターを実装したのでそのまとめ。
(アナリティクス実装してるので関係者は見れますよ、とはお伝えしたんですが、外部から来た人に見えるようにしてほしいとのご要望だったので)
ここ最近は、カウンターのついているサイトをあまり見かけなかったのですが、需要あるんだなぁと驚きました。
私も昔はテキストサイトを運営していたので、カウンターと言われるとキリ番文化を思い出して、結構懐かしく感じます。
コピペで実装できるようにしておいたので、ご活用ください！
(ワードプレステーマCocoonを使用していることが前提です)
カウンター実装までの経緯
できるだけ簡単に実装したいなと思って、手始めにプラグインを探したんですが、開発終了してたり、いいデザインのがなかったりでなかなか「これだ！」というのが見つからず。
無料のカウンターも考えましたが、万が一変な広告が表示されると困るので、それならもう作るしかないなと。
何か簡単にできる方法を、と考えたときに、私が使っているワードプレステーマCocoonには、管理者が見れるカウンターがついているじゃないかということに気づきまして!(^^)!
これを外部から見れるように流用してみようという結論にたどり着きました。
今回作るカウンターはシンプルなもので、表示はトップページのみ、表示項目は本日、週、月、全体でCocoonに元から表示されているものを流用します。表示項目を減らしたい場合は該当箇所のソースを削ってください。
やり方は、ショートコードにアクセス数を表示するためのPHPを記載(※)、カウンターを表示したい箇所でカスタムHTMLを使います。
※カスタムHTMLでPHPが使えないためショートコードを利用します。
まず、Cocoonのアクセス数の表示があるファイルを探しました。
Cocoon: admin-pv.php (tmp/admin-pv.php)の10行目から記載がありました。
//PVエリアの表示
if (is_admin_panel_pv_area_visible()): ?>
<div class="admin-pv">
<span class="admin-pv-by">
<?php if (get_admin_panel_pv_type() == THEME_NAME): ?>
by <?php echo THEME_NAME_CAMEL; ?>
<?php else: ?>
by Jetpack
<?php endif ?>
</span>
<?php ob_start(); ?>
<span class="fa fa-bar-chart fa-fw" aria-hidden="true"></span>
<span class="today-pv">
<span class="today-pv-label"><?php _e( '本日:', THEME_NAME ) ?></span>
<span class="today-pv-count"><?php echo get_todays_pv(); ?></span>
</span>
<span class="week-pv">
<span class="week-pv-label"><?php _e( '週:', THEME_NAME ) ?></span>
<span class="week-pv-count"><?php echo get_last_7days_pv(); ?></span>
</span>
<span class="month-pv">
<span class="month-pv-label"><?php _e( '月:', THEME_NAME ) ?></span>
<span class="month-pv-count"><?php echo get_last_30days_pv(); ?></span>
</span>
<span class="all-pv">
<span class="all-pv-label"><?php _e( '全体:', THEME_NAME ) ?></span>
<span class="all-pv-count"><?php echo get_all_pv(); ?></span>
</span>
<?php echo minify_html(ob_get_clean()); ?>
<?php //Jetpackチャート表示
if ((get_admin_panel_pv_type() == 'jetpack')
//Jetpackが有効の場合
&& is_jetpack_stats_module_active()
//投稿・固定ページの場合
&& is_singular()) {
echo '<span class="jetpack-page"><a href="'.admin_url().'admin.php?page=stats&view=post&post='.get_the_ID().'"title="'.__( 'Jetpackの統計', THEME_NAME ).'" target="_blank" rel="noopener noreferrer"><span class="fa fa-line-chart" aria-hidden="true"></span></a></span>';
} ?>
</div>
<?php endif ?>これを外部から見えるように直して記述すれば実装できそうです！
カウンター表示用のショートコードを作る(コピペ可)
ショートコードの実装
カスタムHTMLではPHPが使えないため、今回はショートコードとして実装します。
Cocoon Child: Theme Functions (functions.php)
//以下に子テーマ用の関数を書く の下に、以下のコードを記載します。
//以下に子テーマ用の関数を書く
//↓ここから下をコピペ
//アクセスカウンター
function index_counter() {
return '
<span class="fa fa-child" aria-hidden="true"></span>
<span class="today-pv">
<span class="today-pv-label">本日:</span>
<span class="today-pv-count">'.get_todays_pv().'</span>
</span>
<span class="week-pv">
<span class="week-pv-label">週:</span>
<span class="week-pv-count">'.get_last_7days_pv().'</span>
</span>
<span class="month-pv">
<span class="month-pv-label">月:</span>
<span class="month-pv-count">'.get_last_30days_pv().'</span>
</span>
<span class="all-pv">
<span class="all-pv-label">全体:</span>
<span class="all-pv-count">'.get_all_pv().'</span>
</span>
';
}
add_shortcode('index_counter', 'index_counter');※ショートコードを実装するついでに、アクセス数の前のアイコンもからに変更してみました。
これで下記のショートコードでアクセス数が表示できるようになりました。
[index_counter]こんな感じで表示されます→ 本日: 3 週: 10 月: 51 全体: 1459
カウンターを表示させる
今回はフッターにカウンターを表示したいので、ウィジェット→フッター左→カスタムHTMLに以下を記載します。
訪問者数<br>
[index_counter]
ウィジェットの表示→「チェック・入力したページで表示」
「トップページのみ」にチェックを入れるのをお忘れなく！
これでひとまず実装完了です。
※このページの下部にもカウンターを設置したので見てみてください。
ついでに、ディスプレイの横幅が834px以下だと非表示になるようだったのでCSSで調整しました。
Cocoon Child: Stylesheet (style.css)
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
.front-top-page .footer-widgets{
display: block;
text-align: center;
margin-bottom: -72px;
}
}その他見た目が気になる場合は、CSSを使って好みに変更したらいいかなと思います。
おまけ:ヒントになりそうなもの
今回はCocoonのアクセスカウンターをそのまま使用しましたが、昨日の人数等の表示をしたい場合は、データベースの中のwp_cocoon_accessesにアクセス数のデータがあるので、そこから引っ張ってこれば実装できるんじゃないかなと思います。
コメント