第7回：商品・サービスページに、関連する「お客様の声」をWordPressで自動表示する方法-「A4」1枚販促アンケート広告作成アドバイザー協会-公式

24時間以内に
ご返信いたします
＊土日祝は除く

メニューを開く: HOME; 実践勉強会・セミナーに参加する; アドバイザーに講師として来てもらう; アドバイザーのコンサルティングを受ける; アドバイザーの資格を取得する; 成功事例集; 参加者の声; 勉強会レポート; よくある質問; インタビュー; メディア掲載; 公式ブログ

第7回：商品・サービスページに、関連する「お客様の声」をWordPressで自動表示する方法

投稿日：2026.11.05

「A4」1枚アンケート広告作成アドバイザー東京支部の比嘉と申します。
普段はホームページ制作やシステム制作などを行ってます。
中でも、WordPressを使ったホームページ構築や、販促のシステム構築などを得意としており、当「A4」1枚販促アンケート広告作成アドバイザー協会の方でも「販促アンケートPOP自動作成システム」や「オンライン広告原稿作成システム」なども制作させて頂いてます。

はじめに

第5回の記事では、「A4」1枚アンケートから集めたお客様の声を、悩み別に探せるWordPressの一覧ページを作る方法をご紹介しました。

「集客」「費用」「時間」などのボタンを設置して、訪問者が自分と似た悩みを持っていたお客様の声を探せる仕組みです。

その記事の最後で、次回は商品・サービスページに関連するお客様の声を自動表示する方法をご紹介すると予告していました。

第6回では紙のアンケートを自動で下書き保存する方法を先にご紹介しましたが、今回は第5回の続きに戻ります。

これまで作ってきたタグを、もう少し使ってみたいと思います。

例えば、ホームページに「集客支援サービス」のページがあったとします。

そのページを見ている人に、「集客」で悩んでいたお客様の声も一緒に見てもらえたらどうでしょうか。

サービスの説明を読んだあと、そのサービスを利用した人がどんな感想を持っているのかも確認できます。

今回は、そんな表示方法をWordPressで作っていきます。

今回できるようになること

今回作るのは、商品・サービスページに関連するお客様の声を自動で表示する仕組みです。

例えば「集客支援サービス」のページなら、次のようなイメージです。

サービスの説明の下などに、

「このサービスに関連するお客様の声」

という欄を設けて、「集客」タグが付いているお客様の声を3件表示します。

表示されたタイトルをクリックすると、それぞれのお客様の声のページへ移動できます。

ここで便利なのが、新しいお客様の声を追加したときです。

新しく公開したお客様の声にも「集客」タグが付いていれば、表示対象に自動で加わります。

サービスページを毎回編集して、お客様の声へのリンクを追加する必要はありません。

最初に一度設定しておけば、あとはWordPressに登録されているお客様の声を使って表示してくれます。

第4回・第5回で付けたタグを使います

ここで、これまでの流れを簡単に振り返っておきます。

第4回では、「A4」1枚アンケートの回答をAIで分類して、WordPressの投稿にタグを付ける仕組みを作りました。

購入前の悩みであるQ1からは、「集客」「売上」「費用」「時間」などのタグを付けています。

第5回では、そのタグを使って、訪問者が悩み別にお客様の声を探せるようにしました。

今回は、同じタグを商品・サービスページで使います。

例えば、

集客支援サービスのページには「集客」タグのお客様の声
費用に関する説明ページには「費用」タグのお客様の声
業務改善サービスのページには「時間」タグのお客様の声

といった表示が考えられます。

これまでのお客様の声にタグが付いていれば、今回のために新しく分類し直す必要はありません。

WordPressの「ショートコード」を使います

今回も、できるだけ設定しやすい方法にしたいと思います。

そこで使うのが、WordPressのショートコードという機能です。

ショートコードは、短いコードをページに入れることで、あらかじめ用意した処理を呼び出せる仕組みです。

例えば今回なら、商品・サービスページの表示したい場所に、

[a4_customer_voices tag="concern-attracting-customers" count="3"]

と入力します。

これだけで、「集客」タグが付いたお客様の声を新しい順に3件表示するようにします。

tagは表示したいタグを指定する部分で、countは表示件数です。

費用に関するお客様の声なら、タグの指定を変えます。

[a4_customer_voices tag="concern-cost" count="3"]

もちろん、表示する件数も変更できます。

同じ仕組みを使いながら、ページごとに表示内容を変えられるわけです。

今回使うもの

今回は、WordPressだけで設定します。

GoogleフォームやGemini APIの設定を新しく行う必要はありません。

また、お客様の声には、これまでの記事で使ってきたカテゴリーとタグが設定されていることを前提にしています。

コードの登録には「Code Snippets」というWordPressプラグインを使います。

このプラグインは、テーマのファイルを直接編集しなくても、PHPのコードをWordPressに追加できるものです。

無料版でも、今回使うPHPコードの登録ができます。

公式ページはこちらです。

Code Snippets

すでにCode Snippetsを使っている方は、そのまま利用できます。

なお、WordPressの標準的な「投稿」にお客様の声を登録している場合を対象としています。独自の投稿タイプで管理している場合は、コードの調整が必要です。

ステップ1：Code Snippetsをインストールする

WordPressの管理画面を開きます。

左側のメニューから「プラグイン」の「新規プラグインを追加」をクリックします。

検索欄に、

Code Snippets

と入力してください。

該当するプラグインが表示されたら、「今すぐインストール」をクリックし、その後「有効化」します。

有効化すると、管理画面にスニペットを管理するメニューが追加されます。

ステップ2：新しいコードを登録する

Code Snippetsの管理画面から、新しいスニペットを追加します。

今回はPHPのコードを登録するので、PHPスニペットを選びます。

名前は分かりやすく、

関連するお客様の声を自動表示

などにしておくとよいと思います。

コードの入力欄には、次のコードを貼り付けます。

今回使用するコード


// ==================================================
// 自分の環境に合わせて変更する部分
// ==================================================

// 「お客様の声」カテゴリーのID
// 12は例です。自分のサイトのIDに変更してください。
define('A4_VOICE_CATEGORY_ID', 12);


// ==================================================
// 関連するお客様の声を表示する
// ==================================================

function a4_customer_voices_shortcode($atts) {

    // ショートコードの設定を取得
    $atts = shortcode_atts(
        array(
            'tag'   => '',
            'count' => 3
        ),
        $atts,
        'a4_customer_voices'
    );

    // 表示するタグ
    $tag_slug = sanitize_title($atts['tag']);

    // 表示件数（1～10件）
    $count = max(
        1,
        min(10, absint($atts['count']))
    );

    // カテゴリーID
    $category_id = A4_VOICE_CATEGORY_ID;

    // タグが指定されていなければ表示しない
    if (empty($tag_slug) || empty($category_id)) {
        return '';
    }

    // 条件に合うお客様の声を検索
    $voices = new WP_Query(
        array(
            'post_type'           => 'post',
            'post_status'         => 'publish',
            'posts_per_page'      => $count,
            'category__in'       => array($category_id),
            'tag_slug__in'       => array($tag_slug),
            'orderby'            => 'date',
            'order'              => 'DESC',
            'ignore_sticky_posts' => true,
            'no_found_rows'      => true
        )
    );

    // 該当するお客様の声がなければ非表示
    if (!$voices->have_posts()) {
        return '';
    }

    // 表示する枠を作成
    $html = '<div style="
        border:1px solid #dddddd;
        border-radius:10px;
        padding:20px;
        margin:25px 0;
        background:#ffffff;
    ">';

    $html .= '<h3 style="
        margin:0 0 20px;
        font-size:20px;
    ">このサービスに関連するお客様の声</h3>';

    // お客様の声を順番に表示
    while ($voices->have_posts()) {

        $voices->the_post();

        $title = get_the_title();
        $url   = get_permalink();

        // 抜粋文を取得
        $excerpt = wp_trim_words(
            wp_strip_all_tags(get_the_excerpt()),
            60,
            '…'
        );

        $html .= '<div style="
            border-top:1px solid #eeeeee;
            padding:15px 0;
        ">';

        // 投稿タイトルとリンク
        $html .= '<h4 style="
            margin:0 0 8px;
            font-size:17px;
        ">';

        $html .= '<a href="' .
            esc_url($url) .
            '">';

        $html .= esc_html($title);

        $html .= '</a></h4>';

        // 抜粋文
        if (!empty($excerpt)) {
            $html .= '<p style="
                margin:0;
                line-height:1.8;
            ">';

            $html .= esc_html($excerpt);

            $html .= '</p>';
        }

        $html .= '</div>';
    }

    // 投稿データを元に戻す
    wp_reset_postdata();

    $html .= '</div>';

    return $html;
}


// ショートコードとして登録
add_shortcode(
    'a4_customer_voices',
    'a4_customer_voices_shortcode'
);

Code SnippetsのPHPスニペットに貼り付ける場合、先頭の<?phpは不要です。

コードを貼り付けたら、保存して有効化します。

実行場所を選択する画面がある場合は、通常のサイト表示で実行できる設定にしてください。

コードの追加前には、念のためWordPressのバックアップを取っておくと安心です。

ステップ3：カテゴリーIDを確認する

今回、コード内で変更するのは主にカテゴリーIDの部分です。


define('A4_VOICE_CATEGORY_ID', 12);

ここにある12は説明用の数字です。

自分のWordPressで使用している「お客様の声」カテゴリーのIDに変更してください。

第3回、第4回、第6回で使ったカテゴリーIDと同じものです。

カテゴリーIDを確認するには、WordPressの管理画面で「投稿」の「カテゴリー」を開きます。

「お客様の声」カテゴリーの編集画面を開くと、URLに次のような部分があります。

tag_ID=12

この数字がカテゴリーIDです。

例えばカテゴリーIDが25なら、


define('A4_VOICE_CATEGORY_ID', 25);

に変更します。

なぜカテゴリーも指定するのか

第5回では、タグ別の一覧ページを利用しました。

ただ、WordPressのタグは通常のブログ記事にも付けられるため、同じタグを使っていると、お客様の声以外の記事が表示される可能性があります。

今回は「お客様の声」カテゴリーに入っている投稿だけを対象にします。

「集客」タグが付いていても、通常のブログ記事は表示しないという設定です。

ステップ4：商品・サービスページにショートコードを設置する

コードの設定が終わったら、実際に商品・サービスページへ設置します。

今回は「集客支援サービス」のページに表示する例で進めます。

WordPressの管理画面から、該当する固定ページを編集してください。

ブロックエディターを使っている場合は、表示したい場所に「ショートコード」ブロックを追加します。

そこに、次のコードを入力します。

[a4_customer_voices tag="concern-attracting-customers" count="3"]

入力したら、ページを保存します。

これで設置は完了です。

ページを開くと、「集客」タグが付いたお客様の声が新しい順に3件表示されます。

ステップ5：実際の表示を確認する

設定した商品・サービスページを開いてみてください。

例えば「集客」タグのお客様の声が3件登録されている場合、次のような表示になります。

表示されるのは、

「このサービスに関連するお客様の声」という見出し
お客様の声の投稿タイトル
投稿の抜粋文

です。

タイトルをクリックすると、そのお客様の声の個別ページへ移動します。

投稿タイトルや抜粋文は、これまでの第3回、第4回、第6回で作ってきたものをそのまま使えます。

なお、画像の例は完成イメージです。実際の文字の大きさや余白などは、使用しているWordPressテーマによって多少変わります。

別の商品・サービスページにも設置してみる

今回のコードは、ページごとに作り直す必要はありません。

ショートコードのタグ部分を変えるだけで、別のお客様の声を表示できます。

例えば、費用について説明しているページなら、

[a4_customer_voices tag="concern-cost" count="3"]

時間短縮に関係するサービスのページなら、

[a4_customer_voices tag="concern-time" count="3"]

という形です。

第4回で設定した「購入前の悩み」タグ

これまでの連載と同じ設定を使っている場合は、次のタグを指定できます。

悩み	ショートコードで指定するタグ
集客	`concern-attracting-customers`
売上	`concern-sales`
費用	`concern-cost`
時間	`concern-time`
操作方法	`concern-operation`
品質	`concern-quality`
信頼	`concern-trust`
その他の悩み	`concern-other`