<?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(); ?>

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');
});

// 遷移完了したとき
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
    });
  }
});