【WordPress】「VK Filter Search PRO」と「Advanced Custom Fields」を使って人気順の「ソート機能」を実装してみた!

「VK Filter Search PRO」には、最近実装された「並び順」を変更する「ソート機能」があります。
このソート機能、標準では「公開日」「更新日」「タイトル」の降順と昇順の並び替えしかできないようになっています。

しかし、項目の最後に「カスタムフィールド」という項目があることを発見しました。
もしかすると、「Advanced Custom Fields(ACF)」と合わせて設定した上で、閲覧数のカウンターを実装すれば「人気順」のソートを作れるのではないか?と思い、試してみました!

目次

完成形のイメージ

「VK Filter Search PRO」のダウンロードとインストール

「VK Filter Search PRO」を事前に購入していることが前提条件になります。
まだ、購入されていない方は、ご購入が必要です。
https://www.vektor-inc.co.jp/service/wordpress-plugins/vk-filter-search-pro/

まずは「VK Filter Search PRO」をダウンロードします。
https://vws.vektor-inc.co.jp/my-account」にアクセスし、アカウント情報を入力し、ログイン。

「ダウンロード」ページに移動すると、購入済みの商品一覧が表示されます。
「VK Filter Search PRO」のプラグインファイルをダウンロードします。

導入するWebサイトの「WordPress」ダッシュボードに移動します。
「プラグイン」>「新規追加」を開きます。「プラグインのアップロード」をクリックして、先ほどダウンロードしたプラグインを導入します。

インストールが完了したら、「プラグインを有効化」します。プラグインの一覧に上記の画像のように表示されれば、有効化されています。

「Advanced Custom Fields」のインストール

続いて、「Advanced Custom Fields」をインストールします。

「Advanced Custom Fields」と検索欄に入力します。すると、ACFが表示されるので、「今すぐインストール」をクリックします。
インストールが完了したら、「有効化」をクリックします。

プラグインのインストールは以上で完了です。

「Advanced Custom Fields」の設定

設定はこちらのサイトを参考にさせていただいています。

続いて、「Advanced Custom Fields」の設定をかけていきます。
メニューから「カスタムフィールド」>「新規追加」をクリック。

新しいフィールドグループを作成していきます。
入力する内容は以下のようにします。

タイトル:「VK検索用」(※任意)
フィールドラベル:「ページビュー」
フィールド名:「pv」
フィールドタイプ:「数値」
デフォルト値:「0」

また、今回は対象を「投稿」にします。
フィールドグループのルールは「投稿タイプ」「等しい」「投稿」を設定しておきます。

入力ができたら、「更新」をクリックします。

「function.php」の設定

WordPressの子テーマに「function.php」をコピーし、以下構文を追加します。
(※今回は「SWELL」で設定しています。)

googleなどのクロールがカウントされないように無効化しています。

/* クロールカウントの無効化 */ 
function is_bot() {
  $ua = $_SERVER['HTTP_USER_AGENT'];
  $bot = array(
    'googlebot',
    'msnbot',
    'yahoo',
  );
  foreach( $bot as $bot ) {
    if (stripos( $ua, $bot ) !== false){
      return true;
    }
  }
  return false;
}

「single.php」の編集

WordPressの子テーマに「single.php」をコピーし、以下構文を追加します。

	// 	ACFの「PV」カウント
	if( !is_user_logged_in() && !is_bot() ) {
		$pv = get_field('pv');
		$pv++;
		update_field('pv', $pv);
	}

実際に編集します。
(※今回は「SWELL」で設定しています。)

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

get_header();
while ( have_posts() ) :
	the_post();

	$SETTING = SWELL_Theme::get_setting();
	$the_id  = get_the_ID();

	// シェアボタンを隠すかどうか
	$show_share_btns = get_post_meta( $the_id, 'swell_meta_hide_sharebtn', true ) !== '1';

?>
<main id="main_content" class="l-mainContent l-article">
	<article class="l-mainContent__inner">
		<?php
			do_action( 'swell_before_post_head', $the_id );

・・・・・
<?php
if ( ! defined( 'ABSPATH' ) ) exit;

get_header();
while ( have_posts() ) :
	the_post();

	$SETTING = SWELL_Theme::get_setting();
	$the_id  = get_the_ID();

	// シェアボタンを隠すかどうか
	$show_share_btns = get_post_meta( $the_id, 'swell_meta_hide_sharebtn', true ) !== '1';

	// 	ACFの「PV」カウント
	if( !is_user_logged_in() && !is_bot() ) {
		$pv = get_field('pv');
		$pv++;
		update_field('pv', $pv);
	}

?>
<main id="main_content" class="l-mainContent l-article">
	<article class="l-mainContent__inner">
		<?php
			do_action( 'swell_before_post_head', $the_id );

以上で準備は完了です!
まずは、ページビューした時にカウントされるかを確認して、おきましょう。
(WordPressにログインしている状態ではカウントされないため、気をつけてください。)

「VK Filter Search PRO」の設定

検索フォームを設置し、「Search Result Single Order」を追加します。
「並び順」が追加されます。右側の「新規オプション項目追加」をクリック。

カスタムフィールドの「pv」を選択。
以下の画像の通りに選びます。

実際にソートをかけてみる

あとは、検索フォームを設置して、実際にソートをかけるだけです!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次