WooCommerce 用 Klaviyo レビューのインストール方法
このページで学べること
WooCommerce ストアに Klaviyo レビューをインストールして、レビュー ウィジェットを追加する方法をご確認ください。開始に必要なすべての手順については、Klaviyo レビューのスタートガイドをご覧ください。
始める前に
WooCommerce 用 Klaviyo レビューのインストール方法は 4 つあります。適切な方法は、技術的な知識のレベルと WordPress の設定によって異なります。以下のフローチャートを使用して、最適なインストール方法を選択してください。
インストール方法を選択する際は、次の点を考慮してください：
- コレクションページへの星評価の追加は、2 つのインストール方法（ビジュアルエディター付きプラグインとショートコード）のみサポートされています。
- Wordpress でのエディターアクセス権限のレベルを確認してください。すべてのユーザーが、ウェブサイトのテーマファイルを直接編集できるとは限りません。functions.php ファイルまたは同様のファイルにアクセスできない場合は、他の方法のいずれかを使用してください。
- これらの方法のいくつかでは、Wordpress サイトに別のプラグインを追加する必要があります。以下の手順ではコードスニペットプラグインを参照していますが、Klaviyo は特定のプラグインを推奨しておらず、プラグインに関連するトラブルシューティングのサポートもできません。
適切なインストール手順を選択したら、該当する手順に進んでください。
次の方法で WooCommerce 用 Klaviyo レビューをインストールする方法をご覧ください：
利用可能なレビューウィジェット
Klaviyo レビューをインストールすると、ストアにレビューウィジェットが表示され、評価とレビューの詳細が表示されます。
- スター評価ウィジェット
特定の商品に対する現在のスター評価を表示します。多くの場合、商品ページまたはコレクションページで、商品の名前の下に追加されます。
- 商品レビュー ウィジェット
商品が受け取ったすべての評価の内訳を示すグラフ、レビューと一緒に送信されたユーザー画像、および商品が受け取った最も一般的なフィードバックを表示します。
その下には、公開済みのすべてのレビューとお客様からの質問のリストに加え、検索バー、レビュー フィルター、［レビューを書く］ボタン、［質問する］ボタンが表示されます。
このウィジェットは通常、商品ページの下部付近に追加されます。
- 注目のレビューカルーセルウィジェット
すべての商品から注目レビューを表示します。これはホームページ、単独のレビューページ、またはサイト内の任意の場所に掲載できます。このウィジェットで注目表示するレビューを選択することもできます。可能であれば、顧客が送信した画像が各レビューに添付されます。画像が送信されていない場合は、商品の画像が使用されます。
- SEO / すべてのレビューのウィジェット
すべての商品にわたるすべてのレビューを 1 つのページに表示します。このウィジェットを使用して SEO を改善し、見込み顧客が現在の顧客に好評な点を確認できる 1 か所を提供します。このウィジェットは、サイト上の独立した レビュー ページに追加されることがほとんどです。
プラグインをインストールし、ビジュアル テーマ エディタを使用します
ビジュアルテーマエディターを使用してサイトに Klaviyo レビューのウィジェットを追加するには、まずテーマ内でこれらのドラッグ＆ドロップブロックを読み込むためのコードを追加する必要があります。コードスニペット などのツールを使用してこれらのブロックのソースコードを追加し、その後ビジュアルテーマエディターを使用して Klaviyo レビューのウィジェットをテーマにドラッグ＆ドロップできます。
レビュー ウィジェットのソースコードを追加
これらの手順では、コードスニペットプラグインがすでにインストールされていることを前提としていますが、代わりに別のプラグインを使用することもできます。
- WordPress のサイドバーから [Snippets] > [新規追加] を選択します。
- Enter title here フィールドで、スニペットに「Klaviyo Reviews Widgets Code」のような、わかりやすい名前を付けます。
- Code セクションの Functions (PHP) タブで、以下のコードスニペットを追加します。
- [変更を保存して有効化] をクリックします。
レビュー ウィジェットのソースコード
function register_klaviyo_reviews_blocks() {
// Register the blocks
register_block_type( 'klaviyo/product-reviews', array(
'editor_script' => 'klaviyo-block-editor-script',
'render_callback' => 'render_klaviyo_product_reviews',
));
register_block_type( 'klaviyo/product-star-ratings', array(
'editor_script' => 'klaviyo-block-editor-script',
'render_callback' => 'render_klaviyo_star_ratings',
));
register_block_type( 'klaviyo/featured-reviews', array(
'editor_script' => 'klaviyo-block-editor-script',
'render_callback' => 'render_klaviyo_featured_reviews',
));
register_block_type( 'klaviyo/all-reviews', array(
'editor_script' => 'klaviyo-block-editor-script',
'render_callback' => 'render_klaviyo_all_reviews',
));
}
add_action( 'init', 'register_klaviyo_reviews_blocks' );
function enqueue_klaviyo_block_editor_assets() {
// Register and enqueue the logo image
wp_register_script(
'klaviyo-block-editor-script',
false,
array( 'wp-blocks', 'wp-element', 'wp-editor' ),
false,
true
);
$logo_url = plugins_url( 'img/klaviyo-logo.png', 'klaviyo/klaviyo.php' );
wp_add_inline_script( 'klaviyo-block-editor-script', '
( function( blocks, element ) {
var el = element.createElement;
// Add custom category
blocks.updateCategory( "widgets", {
slug: "klaviyo",
title: "Klaviyo",
icon: el("img", { src: "' . $logo_url . '", style: { width: "20px", height: "20px" } })
} );
blocks.registerBlockType( "klaviyo/product-reviews", {
title: "Klaviyo Product Reviews",
icon: "admin-comments",
category: "klaviyo",
edit: function() {
return el(
"div",
{ className: "klaviyo-product-reviews" },
"Klaviyo Product Reviews will be displayed here"
);
},
save: function() {
return null;
},
});
blocks.registerBlockType( "klaviyo/product-star-ratings", {
title: "Klaviyo Star Ratings",
icon: "star-filled",
category: "klaviyo",
edit: function() {
return el(
"div",
{ className: "klaviyo-product-star-ratings" },
"Klaviyo Product Star Ratings will be displayed here"
);
},
save: function() {
return null;
},
});
blocks.registerBlockType( "klaviyo/featured-reviews", {
title: "Klaviyo Featured Reviews",
icon: "admin-post",
category: "klaviyo",
edit: function() {
return el(
"div",
{ className: "klaviyo-featured-reviews" },
"Klaviyo Featured Reviews will be displayed here"
);
},
save: function() {
return null;
},
});
blocks.registerBlockType( "klaviyo/all-reviews", {
title: "Klaviyo All Reviews",
icon: "admin-page",
category: "klaviyo",
edit: function() {
return el(
"div",
{ className: "klaviyo-all-reviews" },
"Klaviyo All Reviews will be displayed here"
);
},
save: function() {
return null;
},
});
} )(
window.wp.blocks,
window.wp.element
);
' );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_klaviyo_block_editor_assets' );
// Callback functions to render the blocks
function render_klaviyo_product_reviews( $attributes, $content ) {
global $product;
if ( is_product() && isset($product) ) {
return "<div id='klaviyo-reviews-all' data-id='" . esc_attr($product->get_id()) . "'></div>";
}
}
function render_klaviyo_star_ratings( $attributes, $content ) {
global $product;
if (isset($product)) {
return "<div class='klaviyo-star-rating-widget' data-id='" . esc_attr($product->get_id()) . "'></div>";
}
}
function render_klaviyo_featured_reviews( $attributes, $content ) {
return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function render_klaviyo_all_reviews( $attributes, $content ) {
return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}Klaviyo レビュー プラグインを追加する
- [外観] > [エディター]に進みます。
- [テンプレート] を選択します。
- 単一商品 テンプレートを選択します。名前が少し異なる場合がありますのでご注意ください。
- [+] をクリックしてブロック メニューを開きます。
- ブロックメニューの Klaviyoセクションに移動します。
- Klaviyo レビューのウィジェットをテーマにドラッグ＆ドロップします。
- [保存] をクリックします。
コレクションの星評価ウィジェットを追加
- [外観] > [エディター]に進みます。
- [テンプレート] を選択します。
- 商品のコレクションが含まれるページを選択してください。
- [+] をクリックしてブロック メニューを開きます。
- ブロックメニューの Klaviyo セクションに移動します。
- コレクション内の任意の商品に 星評価 ウィジェットをドラッグしてください。
- [保存] をクリックします。
必要に応じて、以下のコードスニペットを使用して星評価ウィジェットを中央揃えにします。YOUR_PAGE_ID プレースホルダーは、コレクション ページのページ ID に置き換える必要があることにご注意ください。ページ ID の見つけ方をご覧ください。
.page-id-YOUR_PAGE_ID
.klaviyo-star-rating-widget {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}プラグインをインストールし、コードでウィジェットを追加する
この方法を使用すると、WooCommerce の ビジュアルフックの配置に基づいて、サイトにウィジェットが追加されます。そのため、商品ページに WooCommerce ウィジェットがない場合は、別のインストールオプションを使用する必要があります。
このプロセスでは、テーマファイルを直接編集せずにサイトにコードを追加できるよう、サードパーティのコードスニペット ツールを追加する必要があります。コードスニペット などのツールを使用して、これらのウィジェットのコードを追加できます。
レビュー ウィジェットのソースコードを追加
この手順では、コードスニペット プラグインがすでにインストールされていることを前提としていますが、代わりに別のプラグインを使用することもできます。
- WordPress のサイドバーから [Snippets] > [新規追加] を選択します。
- Enter title here フィールドで、スニペットに「Klaviyo Reviews Widgets Code」のような、わかりやすい名前を付けます。
- コード セクションの Functions (PHP) タブで、以下のコードスニペットを追加してください。
- [変更を保存して有効化] をクリックします。
使用する予定の各ウィジェットに対して、コードスニペットをインストールする必要があります。以下のセクションでは、各ウィジェットのコードについて説明します。
商品レビューウィジェットのコードスニペット
サイト上のウィジェットの場所を調整するには、add_action 関数で ('woocommerce_after_single_product_summary') の location と (15) の priority を編集してください。
function klaviyo_add_product_reviews_widget() {
global $product;
if (is_product() && isset($product)) {
$product_id = $product->get_id();
echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>";
}
}
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);星評価ウィジェットのコードスニペット
サイト上のウィジェットの場所を調整するには、add_action 関数で ('woocommerce_single_product_summary') の location と (6) の priority を編集してください。
function klaviyo_add_product_star_ratings_widget() {
global $product;
if (is_product() && isset($product)) {
$product_id = $product->get_id();
echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>";
}
}
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);追加の任意コードスニペット
これらのコードスニペットを使用して、任意のウィジェットをサイト内の任意の場所に追加します。これらは特定ページの HTML に追加する必要があります。functions.php ファイルには追加できません。
SEO ウィジェット
<div id='klaviyo-reviews-all' data-id='all'></div>
注目レビューのカルーセルウィジェット
<div id='klaviyo-featured-reviews-carousel'></div>
ショートコードを追加
このプロセスでは、まずテーマ ファイルでショートコードを登録し、次にサイト上の任意の場所にショートコードを挿入します。
これを完了するには、まずサードパーティのコードスニペットツールを追加して、テーマファイルを直接編集せずにサイトへコードを追加できるようにする必要があります。コードスニペット などのツールを使用して、これらのウィジェットのコードを追加できます。
ショートコードを登録し、ウィジェットを追加します。
この手順では、コードスニペット プラグインをすでにインストールしていることを前提としていますが、代わりに別のプラグインを使用することもできます。
- WordPress のサイドバーから [Snippets] > [新規追加] を選択します。
- Enter title here フィールドで、スニペットに「Klaviyo Reviews Widgets Code」のような、わかりやすい名前を付けます。
- コード セクションの Functions (PHP) タブで、以下のコードスニペットを追加してください。
- [変更を保存して有効化] をクリックします。
- ウィジェットを表示したいページに、各ウィジェットのショートコードを追加します。
コードスニペットとショートコード
商品レビューウィジェット
コードスニペット（Functions（PHP）タブに追加）：
function klaviyo_add_product_reviews_widget() {
global $product;
if (isset($product)) {
$product_id = $product->get_id();
$tag = "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>";
return $tag;
}
}
add_shortcode('klaviyo-reviews-all', 'klaviyo_add_product_reviews_widget');ショートコード： [klaviyo-reviews-all]
星評価ウィジェット
コードスニペット（Functions（PHP）タブに追加）：
function klaviyo_add_product_star_ratings_widget() {
global $product;
if (isset($product)) {
$product_id = $product->get_id();
$tag = "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>";
return $tag;
}
}
add_shortcode('klaviyo_star_rating', 'klaviyo_add_product_star_ratings_widget');ショートコード: [klaviyo_star_rating]
コレクション内のすべてのアイテムの星評価を表示するにはコレクションページに、このショートコードを追加します。単一商品の星評価を表示するには商品ページに追加します。
SEO / すべてのレビュー＆注目のカルーセルウィジェット
コードスニペット（Functions（PHP）タブに追加）：
function klaviyo_add_featured_reviews_widget() {
return "<div id='klaviyo-featured-reviews-carousel'></div>";
}
function klaviyo_add_all_reviews_widget() {
return "<div id='fulfilled-reviews-all' data-id='all'></div>";
}ショートコード: [klaviyo-featured-reviews-carousel]
ショートコード: [fulfilled-reviews-all]
テーマ ファイルを直接変更する
Wordpress インスタンスの functions.php ファイルにアクセスできる場合は、以下のコードスニペットを使用してレビュー ウィジェットを追加してください。
これらの手順は、Wordpress PHP の経験がある開発者向けです。Wordpress PHP に詳しくない場合は、別の方法を使用してください。
商品レビューウィジェットのコードスニペット
// create a function that renders a dynamic div with the correct product ID
function klaviyo_add_product_reviews_widget() {
global $product;
if (is_product() && isset($product)) {
$product_id = $product->get_id();
echo "<div id='klaviyo-reviews-all' data-id='{$product_id}'></div>";
}
}
// place the widget after the single product summary
add_action('woocommerce_after_single_product_summary', 'klaviyo_add_product_reviews_widget', 15);星評価ウィジェットのコードスニペット
// create a function that renders a dynamic div with the correct product ID
function klaviyo_add_product_star_ratings_widget() {
global $product;
if (is_product() && isset($product)) {
$product_id = $product->get_id();
echo "<div class='klaviyo-star-rating-widget' data-id='{$product_id}'></div>";
}
}
// place the widget after the single product summary
add_action('woocommerce_single_product_summary', 'klaviyo_add_product_star_ratings_widget', 6);追加の任意コードスニペット
これらのコードスニペットを追加して、オプションのウィジェットをサイト上の任意の場所に追加します。これらは特定のページの HTML に追加する必要があり、functions.php ファイルには追加できないことに注意してください。
SEO / 全レビューウィジェット
<div id='klaviyo-reviews-all' data-id='all'></div>
注目レビューのカルーセルウィジェット
<div id='klaviyo-featured-reviews-carousel'></div>
達成できること
これらの手順を完了すると、Klaviyo レビューのウィジェットがオンラインストアに表示されます。
その他のリソース
- Klaviyoレビュースタートガイド
顧客からのフィードバックを収集し、ポジティブなレビューを見込み客と共有できるように、レビューの設定方法を確認します。
- Klaviyo レビューのフローでお客様にレビューを依頼する方法
Klaviyo で主要なフローを設定し、顧客レビューの獲得を開始する方法を学びましょう。