WordPressで閲覧履歴と問い合わせへの導線を作る

WordPressで閲覧履歴ページを作成して、問い合わせフォームへの導線にする方法を紹介します。

閲覧履歴ページはこちら

クッキーをセット

get_headerアクションにフックして、クッキーをセットします。

function my_set_cookie() {
  if ( is_singular('post') ) {
    $post_id = get_queried_object_id();
    $expires = time() + 60 * 60 * 24 * 7;
    if ( isset($_COOKIE['browsing_history']) ) {
      $browsing_histories = explode(':', $_COOKIE['browsing_history']);
      
      // 既に閲覧履歴に存在する場合は一旦削除
      if ( in_array($post_id, $browsing_histories) ) {
        $index = array_search($post_id, $browsing_histories);
        array_splice($browsing_histories, $index, 1);
      }
      
      // 先頭に追加
      array_unshift($browsing_histories, $post_id);
      
      // 一定数以上の場合末尾から削除
      if ( 10 < count($browsing_histories) ) {
        array_pop($browsing_histories);
      }
      
      $browsing_history = implode(':', $browsing_histories);
      setcookie('browsing_history', $browsing_history, $expires, '/');
      
    } else {
      setcookie('browsing_history', $post_id, $expires, '/');
    }
  }
}
add_action('get_header', 'my_set_cookie');

テンプレートを作る

続いて、テンプレートを作成します。

<?php
  if ( isset($_COOKIE['browsing_history']) ) :
    $browsing_histories = explode(':', $_COOKIE['browsing_history']);
    $args = array(
      'post__in' => $browsing_histories,
      'orderby' => 'post__in'
    );
    $the_query = new WP_Query($args);
    if ( $the_query->have_posts() ) :
?>
<div class="p-history">
<?php
      while ( $the_query->have_posts() ) :
        $the_query->the_post();
?>
  <div class="p-history__item">
    <div class="p-history__img">
<?php
        if ( has_post_thumbnail() ) {
          the_post_thumbnail();
        }
?>
    </div>
    <div class="p-history__text">
      <div class="p-history__title"><?php the_title(); ?></div>
      <div class="p-history__link">
        <a href="<?php the_permalink(); ?>"><i class="fas fa-angle-double-right"></i>この記事を読む</a>
      </div>
      <div class="p-history__link">
        <a href="<?php echo esc_url(add_query_arg('article_id', get_the_ID(), get_permalink(get_page_by_path('contact-article')->ID))); ?> "><i class="fas fa-angle-double-right"></i>この記事に関して問い合わせる</a>
      </div>
    </div>
  </div>
<?php
      endwhile;
      wp_reset_postdata();
?>
</div>
<?php
    endif;
  endif;

フォームを作る

最後に、フォームを作ります。今回はContact Form 7を使いました。
記事一覧の出力と初期値の設定はフックを使います。

function my_wpcf7_custom_form_tag_article( $tag ) {
  do {
    if ( empty($tag) ) break;
    if ( $tag['name'] != 'article' ) break;
    
    $args = array(
      'posts_per_page' => -1,
    );
    $articles = get_posts($args);
    if ( empty($articles) ) break;
    
    $url_param = '';
    if ( !empty($_GET['article_id']) && !is_array($_GET['article_id']) && is_numeric($_GET['article_id']) ) {
      $url_param = sanitize_text_field($_GET['article_id']);
    }
    
    $i = 1;
    foreach ( $articles as $article ) {
       $tag['values'][] = $article->ID;
       $tag['labels'][] = $article->post_title;
       if ( $article->ID == $url_param ) {
         $tag['options'][] = 'default:' . $i;
       }
       $i++;
    }
  }
  while ( FALSE );
  
  return $tag;
}
add_filter('wpcf7_form_tag', 'my_wpcf7_custom_form_tag_article', 10);

以上で実装完了です。

コメント