WordPressで投稿一覧に閲覧数を表示する

技術,WordPress,カスタマイズ

WordPressの投稿一覧画面で、各投稿のビュー数を表示する方法を調べてみました。プラグインを入れる方法もありますが、今回はPHPをいじりました。

前提

当サイトではWordPressのテーマとしてLuxeritasを使用しています。以下のファイル名などのパスは利用しているテーマによって変わりますので、適宜読み替えてください。

また、Luxeritasは親テーマと子テーマに分かれていますが、メンテナンス性を考えて子テーマの方を変更しています。

また、レンタルサーバにあるWordPress本番環境とは別に、手元の端末上にテスト環境を作ってあるため、まずはこちらで作業して確認してから、本番環境に反映するようにしています。

閲覧数の表示方法

閲覧数を表示するためにはどうすればよいのか、Google先生に聞いてみました。色々出てきましたが、以下を参考にさせていただきました。

こちらにもありますが、プラグインを使う方法と、PHPを使ってカスタマイズする方法があります。プラグインでサクッとやってもよかったのですが、今回はPHPにしました。

その結果、以下のように閲覧数が表示されるようになりました。

投稿一覧画面での閲覧数表示
投稿一覧画面での閲覧数表示

function.phpの編集

上記サイトのfunction.phpに記述する、となっているものを追加します。が、WordPressの管理画面（外観＞テーマエディタ）から書き換えます。もし、ファイル更新時にエラーが出て保存できないようであれば、当該ファイルを直接編集します。前後にコメントを入れていますが、中身は上記サイトで紹介されているコードのままです。

// 以下サイトを参考
//  -> https://laptopreneur.net/wordpress-%E8%A8%98%E4%BA%8B-%E9%96%B2%E8%A6%A7%E6%95%B0/

// // BEGIN // //
// ページビュー数のカウンターのセット
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);
    }
}
// ページビュー数を取得する
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';
}
// 管理画面に閲覧数項目を追加する
add_filter( 'manage_pages_columns', 'count_add_column' );
add_filter( 'manage_posts_columns', 'count_add_column' );
function count_add_column( $columns ) {
    $columns['views'] = '閲覧数';
    return $columns;
}
 
// 管理画面にページビュー数を表示する
add_action( 'manage_pages_custom_column' , 'count_add_column_data', 10, 2 );
add_action( 'manage_posts_custom_column' , 'count_add_column_data', 10, 2 );
function count_add_column_data( $column, $post_id ) {
    switch ( $column ) {
        case 'views' :
                        echo getPostViews($post_id);
            break;
    }
}
 
// 閲覧数項目を並び替えれる要素にする
add_filter( 'manage_edit-page_sortable_columns', 'column_views_sortable' );
add_filter( 'manage_edit-post_sortable_columns', 'column_views_sortable' );
function column_views_sortable( $newcolumn ) {
    $columns['views'] = 'views';
    return $columns;
}
 
// ページビュー数で並び替えるようにリクエストを送る
add_filter( 'request', 'sort_views_column' );
function sort_views_column( $vars )
{
    if ( isset( $vars['orderby'] ) && 'views' == $vars['orderby'] ) {
        $vars = array_merge( $vars, array(
            'meta_key' => 'post_views_count', //Custom field key
            'orderby' => 'meta_value_num') //Custom field value (number)
        );
    }
    return $vars;
}
// // END // //

Luxeritasの様に親子が分かれているテーマの場合は、親テーマではなく、子テーマの方を編集します。親テーマを編集してしまうと、テーマのアップデートがあった際に、おそらく変更部分が上書きされて元に戻ってしまいます。

memo

自分の場合、最初に編集しようとした際にはエラーが出たので直接ファイルを修正しましたが、あとで試してみると問題なく更新できました。この辺りは少々謎です。

single.php、page.phpの編集

続いて、上記サイトにあるsingle.phpやpage.phpの編集です。どちらも同じ内容でかまいません。また、場所もどこでも良さそうなので、末尾にコメント付きで追加しました。

ただ、子テーマの方には当該PHPファイルが存在しません。なので、親テーマからコピーしてきます。これはおそらく管理画面ではできない様に思うので、WordPressインストール先を直接いじりました。

WPを入れたところのwp-content/themes/luxech/に移動している前提で、「cp ../luxeritas/page.php . 」てな感じでコピーします。single.phpも同様です。

その上で、末尾に以下を追加しました。これにより、各ページを表示する際にfunction.phpにあるsetPostViews関数が呼び出され、各記事のメタ情報に閲覧数を記録する様です。

//一覧にビュー数を表示する（以下を参考）
// -> https://laptopreneur.net/wordpress-%E8%A8%98%E4%BA%8B-%E9%96%B2%E8%A6%A7%E6%95%B0/
<?php setPostViews(get_the_ID()); ?>

あとは、投稿一覧画面や、実際の投稿されたページが正しく表示されることを確認します。

本番への反映

自分の場合はテスト環境で作業しているので、本番環境へ反映する必要があります。直接、本番環境を修正している場合は不要です。

反映と言っても、Luxeritasの子テーマバックアップ機能を使ってバックアップを取った上で、それを本番環境のテーマ画面からインストールするだけです。

memo

もっとも、何かの表紙でウィジェットの設定がおかしくなってしまい、直す羽目になりました。テスト環境があるので、そちらの設定と見比べながら直しました。

更なる改造は大失敗

ここで止めておけばよかったのですが、更なる改造をして大失敗しました。

テーマが親子で分かれているのですが、親テーマ側で上で書き換えたファイルが更新された場合にどうなるか。そこはよくできていて、子テーマ側のファイルが優先される様にはなっています。

でもですよ、それはそれで問題がある気がします。親テーマ側でアップデートされていても、子テーマ側のファイルが優先されるため、親テーマ側の別ファイルがこちらで修正したファイルの元ファイルも新しいものであることを前提としたものになっている可能性もなくはないです。モジュール同士は疎結合であるべきなので、それはそれで問題な気もしますが、できれば親テーマ側の変更が自動的に子テーマに反映されてほしい。

というわけで、PHPの機能であるrequireを使用して、親テーマ側のsingle.phpを子テーマ側のsingle.phpで読み込んで、親テーマの修正が自動反映されないかな、と。

が、これは大失敗。投稿の表示の際に致命的なエラーが出て止まってしまいました。やはり、にわかでいじるのはよくないですね。慌てて元に戻しました。

技術PHP,WordPress,カスタマイズ

Posted by woinary