Barba.jsでPjaxした際にWordPress Popular Postsがカウントされるようにする

Barba.js を使った際、WordPress Popular Postsがカウントされなかったので、自分でカウントする処理を書いてみました。

マークアップ


<?php get_header(); ?>

<div id="barba-wrapper">
  <div class="barba-container">
    <article class="post" data-id="<?php the_ID(); ?>">
      記事部分...
    </article>
  </div>
</div>

<?php get_footer(); ?>

実際にはもっと複雑だと思いますが、分かりやすくするために簡略化しています。ポイントは data-id という部分で、ここに 投稿ID を表示させておきます。投稿ID は、WordPreess Popular Postsでカウントする際に必要な情報なので data- 属性で指定しておきます。

ajaxに必要な情報を変数化しておく

WordPress Popular Postsは ajax を使って JS 経由で閲覧数をカウントしています。その際に必要なパラメーターをJSで使えるようにする必要があります。


add_action('wp_enqueue_scripts', function() {
  // Barba.jsのカスタマイズなどを行うJSファイル
  wp_enqueue_script('bundle', get_template_directory_uri().'/bundle.js', [], null, true);
  // bundle.jsの読み込みよりも前にインラインスクリプトを挿入する
  wp_add_inline_script('bundle',
    "var ajaxUrl = '" . admin_url('admin-ajax.php') . "', nonce = '" . wp_create_nonce('wpp-token') . "';",
  'before');
});

JSファイルは wp_enqueue_scripts アクションフックを使って挿入します。bundle.js はBarba.jsなどの処理を書いたJSファイルで、それよりも前に ajaxUrlnonce 情報を挿入しています。

Barba.jsのイベントを使って処理する


// 遷移完了したとき
Barba.Dispatcher.on('transitionCompleted', function() {
  // 初回アクセス時は処理しない
  if (Barba.HistoryManager.history.length === 1) {
    return;
  }

  // data-id属性があるとき
  if ($('[data-id]').length) {
    // ajaxでカウントする処理
    $.ajax({
      type: 'POST',
      url: ajaxUrl,
      data: {
        action: 'update_views_ajax',
        token: nonce,
        wpp_id: $('[data-id]').attr('data-id')
      },
      timeout: 10000
    });
  }
});

色々方法はありますが、こんな感じで処理することによってWordPress Popular Postsのカウントを行うことができます。