WEB制作、マーケティングに関する情報をお届けします。

不動産会社や中古車販売サイトなどにある、お気に入りや気になるリストですがユーザービリティやマーケティングを行う上でよく使う手法です。
今回はワードプレスとクッキー、非同期通信を使用してお気に入り、気になるリストを作成する方法を紹介します。

コードを紹介

functions.phpに記載

お気に入りを登録するフック

function add_to_favorites() {
    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;

    if ($post_id > 0) {
        $favorite_posts = isset($_COOKIE['favorite_posts']) ? json_decode(stripslashes($_COOKIE['favorite_posts']), true) : array();

        if (!in_array($post_id, $favorite_posts)) {
            $favorite_posts[] = $post_id;
            setcookie('favorite_posts', json_encode($favorite_posts), time() + 7 * DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
            wp_send_json_success('投稿がお気に入りに追加されました。');
        } else {
            wp_send_json_error('この投稿はすでにお気に入りに追加されています。');
        }
    } else {
        wp_send_json_error('無効な投稿IDです。');
    }

    wp_die();
}
add_action('wp_ajax_nopriv_add_to_favorites', 'add_to_favorites');

お気に入りの投稿を表示するフック

function display_favorite_posts() {
    $favorite_posts = isset($_COOKIE['favorite_posts']) ? json_decode(stripslashes($_COOKIE['favorite_posts']), true) : array();

    if (empty($favorite_posts)) {
        return '<p>お気に入りの投稿はありません。</p>';
    }

    $output = '<ul class="my_favorite_list">';
    foreach ($favorite_posts as $post_id) {
        $post = get_post($post_id);
        $permalink = get_permalink($post_id);
        $title = get_the_title($post_id);
        $thumbnail_url = get_the_post_thumbnail_url($post_id, 'thumbnail');

        if (!$thumbnail_url) {
            $thumbnail_url = 'サムネイルのURL';
        }
        $output .= '<li><a href="' . esc_url($permalink) . '"><img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr($title) . '">' . esc_html($title) . '</a></li>';
    }
    $output .= '</ul>';

    return $output;
}
add_shortcode('favorite_posts_list', 'display_favorite_posts');

お気に入りボタンの設置(PHPファイル)

テンプレートファイルなどのループ内や任意の場所に以下のようにお気に入り追加ボタンを設置します。

<button class="my_favorite_btn" data-postid="<?php echo get_the_ID(); ?>">お気に入りに追加する</button>

Javascript

jQuery(document).ready(function($) {
    // お気に入り追加ボタンのクリックイベント
    $('.my_favorite_btn').on('click', function() {
        var post_id = $(this).data('postid'); // data属性から投稿IDを取得

        // Ajaxリクエスト
        $.ajax({
            url: favoriteData.ajax_url, // admin-ajax.php のURL
            type: 'POST',
            data: {
                action: 'add_to_favorites',
                post_id: post_id
            },
            success: function(response) {
                if (response.success) {
                    alert(response.data); // 成功メッセージ
                } else {
                    alert(response.data); // エラーメッセージ
                }
            }
        });
    });
});

コードを解説

PHP

functions.phpに処理を書いていきます。

お気に入りを登録するフック

以下で関数を作成します。

function add_to_favorites() {}

以下でJavaScriptからPOSTリクエストを送った際に投稿IDを取得します。

$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;

投稿IDが空かどうかを分岐しています。
空の場合はエラーを返します。

if ($post_id > 0) {
} else {
    wp_send_json_error('無効な投稿IDです。');
}

投稿IDがあった場合の処理を書いていきます。
現在のCookieからお気に入りリストを取得します。

$favorite_posts = isset($_COOKIE['favorite_posts']) ? json_decode(stripslashes($_COOKIE['favorite_posts']), true) : array();

投稿からお気に入りにすでに登録されているかどうかを判断してあればエラーを返します。
お気に入りに登録されていなければ投稿IDをsetcookie()でCookieに保存します。
以下の例では7日間有効にしています。

if ($post_id > 0) {
    // 現在のCookieのお気に入りリストを取得
    $favorite_posts = isset($_COOKIE['favorite_posts']) ? json_decode(stripslashes($_COOKIE['favorite_posts']), true) : array();

    // 投稿が既にお気に入りに追加されていない場合
    if (!in_array($post_id, $favorite_posts)) {
        $favorite_posts[] = $post_id;

        // Cookieに新しいリストを保存（7日間有効）
        setcookie('favorite_posts', json_encode($favorite_posts), time() + 7 * DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);

        // 成功メッセージを返す
        wp_send_json_success('投稿がお気に入りに追加されました。');
    } else {
        wp_send_json_error('この投稿はすでにお気に入りに追加されています。');
    }
} else {
    wp_send_json_error('無効な投稿IDです。');
}

リクエストが正常に処理できない場合の処理も入れておきます。

wp_die();

最後にフックを呼び出す処理を書きます。

add_action('wp_ajax_nopriv_add_to_favorites', 'add_to_favorites');

お気に入りの投稿を表示するフック

以下でフックを作成します。

function display_favorite_posts() {

Cookieからお気に入りリストを取得します。

$favorite_posts = isset($_COOKIE['favorite_posts']) ? json_decode(stripslashes($_COOKIE['favorite_posts']), true) : array();

お気に入りリストがない場合は処理を中断してエラーを出します。

if (empty($favorite_posts)) {
    return '<p>お気に入りの投稿はありません。</p>';
}

お気に入りリストがある場合はHTMLを生成します。

$output = '<ul class="my_favorite_list">';
foreach ($favorite_posts as $post_id) {
    $post = get_post($post_id);
    $permalink = get_permalink($post_id);
    $title = get_the_title($post_id);
    $thumbnail_url = get_the_post_thumbnail_url($post_id, 'thumbnail');

    if (!$thumbnail_url) {
        $thumbnail_url = 'サムネイルのURL';
    }

    $output .= '<li><a href="' . esc_url($permalink) . '"><img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr($title) . '">' . esc_html($title) . '</a></li>';
}
$output .= '</ul>';
return $output;

最後にショートコードを登録します。

add_shortcode('favorite_posts_list', 'display_favorite_posts');

JavaScript

ボタンクリック時に実行します。

jQuery(document).ready(function($) {
    $('.my_favorite_btn').on('click', function() {
    });
});

ボタンのdata属性に投稿IDが入っていますので取得します。

var post_id = $(this).data('postid');

Ajaxリクエストを送ります。
urlはワードプレスのadminajax.phpのURLです。
typeにPOST、dataでフック名、投稿IDを送ります。
成功した場合に処理を書いています。

$.ajax({
    url: favoriteData.ajax_url, // admin-ajax.php のURL
    type: 'POST',
    data: {
        action: 'add_to_favorites',
        post_id: post_id
    },
    success: function(response) {
        if (response.success) {
            alert(response.data); // 成功メッセージ
        } else {
            alert(response.data); // エラーメッセージ
        }
    }
});

まとめ

以上、『ワードプレスでお気に入りを投稿を実装する方法』でした。
不動産サイトや中古車サイトでは投稿の点数が多くなりやすくユーザーがお気に入りを登録できるようにするとユーザビリティはもちろんのことコンバージョンも上がりやすくなります。
特に今回紹介した方法はCookieを使用していることから会員登録も不要ですので機能自体の活用へのハードルが大きく下がります。
ぜひ、ご参考ください。