WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

Amazonなどの商品を簡単かつきれいにカード化してくれるプラグイン「Pochipp」の機能、カスタマイズ方法

公開日:2022(令和4)年5月21日/最終更新日:

WordPressのプラグイン情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

Amazonや楽天市場、Yahooショッピングの商品を掲載する物販アフィリエイトサイトにとって、商品と各社のサイトへのリンクをまとめてカード表示させるのは、より効率よく商品を購入してもらうために必須といえます。

【Pochipp】は何より準日本製(日本の方が作成された)プラグインなので、海外の同種のプラグインと比べて使いやすいくおすすめのプラグインです。

作者様のサイト等で設定方法や使用方法などは本当に親切に書かれていますので、本ページでは主にカスタマイズ(使い勝手の向上等)方法を中心に紹介していきます。

カスタマイズ方法のみをご覧になりたい方はこちらをクリックしてページ後半へジャンプしてください。

【Pochipp】プラグインの用途や機能

以下は実際にこのプラグインで作成した商品カードです。

新エディタグーテンベルクがきちんと機能するテーマを作る。Webページのデザインを「グーテンベルグ」でプレビューできるテーマを作成。モバイルファーストでレスポンジブなサイトの構築。1カラムのレイアウトを最初に、次に大きな画面の2段組みレイアウトを作成。カスタマイズに必要な基礎知識を解説。WordPressのテンプレートタグ、HTMLやスタイルシートのポイントも解説。基礎が身に付くと評判の定番書が最新バージョンに対応!
¥2,860 (2024/09/15 22:47時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す

Amazonアソシエイト、楽天アフィリエイト、Yahooショッピング内に掲載されている商品を簡単に検索してカード化することができます。

検索を行って商品指定をしたアフィリエイトサービスでのみ商品単体ページへのリンクor検索結果ページへのリンクが指定できるようになっているようです。

カードの表示方法などは全体および個別商品で細かく設定できます。

個人的には商品の検索は、商品基本データの変更が少ないAmazonアソシエイトで行ったほうがよいのではないかと感じます

特にAmazonアソシエイトでは古い商品の情報の掲載に対して厳しい部分がありますので、思いがけず規約違反とならないよう商品情報の自動更新は有効にしておいたほうがいいと思います。
参考:商品の紹介で注意すべきことは何ですか?

ただし、Amazonアソシエイトの商品情報を取得するためのapiには取得回数制限があり、多数の商品の更新を一気に行うと情報取得ができないという不具合が出ることもありますから、サイトの仕様や実績等と照らし合わせて調整する必要があると思います。

本ページを最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用(試用)したテスト環境・公式ページなど

この紹介記事作成にあたって、試用(テスト)を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。

テストしたサーバー カラフルボックス
WordPressバージョン6.0
PHPバージョン7.4.27
テストしたテーマHABONE(本サイトでも使用しているオリジナルテーマ)
プラグインバージョン本記事で紹介するために試用したバージョン :1.7.6
公式サイトで配布されている最新バージョン :1.15.0
※バージョンが違うと、仕様が大きく変更となっている可能性があります
テストした日
※本記事の最終更新日であり、実際の試用日とは異なることがあります
公式サイトhttps://wordpress.org/plugins/pochipp/
※wordpress.org上のページへのリンクです
作者サイトhttps://pochipp.com/
※プラグイン制作者の独自ページ(サイト)リンクです

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)
QA AnalyticsQA Analytics

【Pochipp】プラグインの設定画面や表示画面の日本語化と翻訳

【Pochipp】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

【Pochipp】プラグインのインストールと設定方法

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

基本的な設定方法と使用方法

設定や使い方については、作者サイトで詳しく説明されていますし、管理画面上でも本当に親切に説明がされていますので、戸惑うことはないと思います。

プラグインの作者サイトを見る>>

【Pochipp】プラグインのカスタマイズ方法など

このプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。

既知の不具合と思われる現象や手動での対応方法など

現在このサイトでも使用させていただいている中で、今後解決されるといいなぁと感じる部分について列記しておきます(私の環境だけで発生しているのかもしれません)。

  • ポチップ管理上にある商品が検索に引っかからないときがある
  • ポチップ管理上にある商品の検索件数の設定ができるとありがたい
  • 商品カテゴリーの設定と各商品への付加ができるものの、ポチップ管理画面上にカテゴリー情報がない
  • ポチップ管理画面上にある使用ページで紐づいていないときがある
  • 商品検索画面の表示順を指定できるといい(現状何を基準にしてるんだろう...)

「ポチップ管理」画面上に商品カテゴリーを表示させる

前述したように、の段階では、ポチップ管理画面に商品カテゴリーが表示されません。

テーマのfunctions.phpへ以下のコードを追加することで、下図のように「商品カテゴリー」列が表示されるようになり、かつ、カテゴリーをクリックすれば絞り込めるようになります。

Amazonなどの商品を簡単かつきれいにカード化してくれるプラグイン「Pochipp」の機能、カスタマイズ方法|Knowledge Base
/***** ポチップ管理画面に商品カテゴリー列を追加 *****/
function ha_pochipptaxonomy_args( $args, $taxonomy ) {
    // Target "pochipp_cat"
    if ( 'pochipp_cat' !== $taxonomy ) {
        return $args;
    }
    // Set Show Admin Column
    $args['show_admin_column'] = true;
    // Return
    return $args;
}
add_filter( 'register_taxonomy_args', 'ha_pochipptaxonomy_args', 10, 2 );

これについては、inc/register_tax.phpへ一行追記すれば表示されるようになるものの、そこは今後アップデートされることを願いたいと思います。

クレジット情報(使用プラグイン情報)を表示しないようにする

Pochippで生成したカードには、右下にPochippを使用していることを示すクレジット情報が表示されます。

特にリンクが埋め込まれていたりすることもないので気にならない方はそのままでいいと思いますが、以下のデザインコードを子テーマのCSSまたはテーマカスタマイザーの追加CSSへ追加することで非表示にできます。

/***** ポチップのクレジットを非表示にする *****/
.pochipp-box .pochipp-box__logo span {
    display: none;
}
.pochipp-box .pochipp-box__logo img {
    display: none;
}

公式ページおよび作者ページを確認したところ、禁止と明記されていませんでしたので、非表示にすることに問題はないと思われますが、非表示の措置を行うかどうかは自己判断または作者へ問い合わせたうえでお願いします

商品情報のリンク切れがわかるようにする

更新時に商品の取得ができなくなり、商品が表示されない、リンク先の商品がなく成果が上がらないなどといった不都合が発生する可能性がありますから、確認は必要でしょう。

しかしながら、現在、このプラグインには、検索した商品のリンクが切れているかどうかの判断機能はありませんから他のプラグインを併用して解決するようにします。

リンク切れのチェックには「Broken Link Checker」を使用します。

このプラグインは本来本文などに含まれる内部・外部リンクをチェックしてメールや管理画面で知らせてくれるプラグインで、「ポチップ管理」に登録した商品情報を含めることができます。

プラグインをインストール&有効化後、以下のようにして設定します。

  1. 管理画面から「設定」→「リンクチェッカー」をクリック
  2. 「含まれるリンクを探す」タブをクリック
  3. 一覧の中から「ポチップ管理」をチェックして保存

これでエラーがあればメールや管理画面で確認できます。

リンクエラーチェックの動作を保証するものではありません

この方法でリンク切れのチェックをする場合、投稿編集画面からポチップで商品を埋め込む際に「商品データをポチップ管理画面に登録する」をクリックして、ポチップ管理画面の一覧へ追加することが必要です。

ログインしているユーザーの誤クリックを防止する

複数の人で管理しているサイトなどでは、知らない間にリンクをクリックしてしまうことも少なくありません。

誤クリックによってアカウント凍結などとならないよう、ログインしているユーザーに対してカード内のボタンをクリックできないようにするには、以下のコードをテーマのfucntions.phpへ追加します。

function ha_pochipp_logged_in_user_prevent_click_btn(){
	if(is_user_logged_in()){
		echo "<style>
		a.pochipp-box__btn {
		pointer-events: none;
		}
		</style>";
	}
}
add_action('wp_head','ha_pochipp_logged_in_user_prevent_click_btn');

投稿編集画面でのボタンクリックを禁止する

あまり気にする必要もないとは思いますが、特にAmazonでは誤クリックに対して厳しい印象があるので、一応編集画面上でボタンをクリックできないほうがいいかも..と感じる方は以下のコードをfunctions.phpへ追加します。

/***** 編集画面でボタンクリックを禁止する *****/
function ha_noclick_pochipp_editor_btn(){
	echo '<style>
	.pochipp-box__btnwrap a {
    pointer-events: none;
}
	</style>';
}
add_action('admin_head','ha_noclick_pochipp_editor_btn');

これにより、ポチップ管理からの編集でもボタンのクリックが無効になりますが、編集画面下部の「ボタンリンク先」リンクから同じURLへのアクセスができるので問題はないでしょう

ブロックが存在するときだけCSSが出力されるようにする

このプラグインは、全ページに「pochipp-front」というIDのCSSと、「pochipp-vcdal」というIDのJSファイルを読み込むリンクが出力されます。

いずれもそれほど影響のある量のファイルではないものの、ページの表示速度に少なからず影響が出る可能性がありますから、必要のない(ブロックのない)ページでは以下のコードを使って読み込まなくすることもできます。

jsの「pochipp-vcdal」に関しては、直接読み込みされていてコントロールできないため、ここではCSSのみをコントロールするコードとして紹介します

このカスタマイズはテーマのfunctions.phpへの追記を行いますので、相応のスキルと問題が起きた場合の対処ができることが前提となります。

まずは、特定のブロックが存在するかどうかでの条件分岐(メモ)を参考に、再利用ブロックも含めたブロックの中から特定のブロックの有無を判別する関数を作ります。

ブロック判別関数が追加できたら、その下へ以下のコードを追加します。

/***** 一旦PochippのCSSとスクリプトを停止 *****/
function ha_pochipp_dequeue_css_script(){
	wp_dequeue_style( 'pochipp-front' );
}
add_action('wp_enqueue_scripts','ha_pochipp_dequeue_css_script',9998);

/***** Pochippブロックがある場合のみ有効にする *****/
function ha_pochipp_block_use(){
if(ha_enhanced_has_block( 'pochipp/linkbox' )){

	wp_enqueue_style( 'pochipp-front' );
}
}
add_action('wp_enqueue_scripts','ha_pochipp_block_use',9999);

上記のコードは、前半で一旦CSSの読み込みを無効にし、後半でブロックがあるときだけ読み込みを有効にするというもので、ブロックの名前(上記ではpochipp/linkboxの部分)とCSSのIDがわかればこのプラグインに限らず同じような制御ができます。

よりクリックされやすくするための一工夫

Pochippのカード表示では、商品タイトルの下に本の著者やメーカー名などが表示されるようになっています。

この項目は、「タイトル下」という項目で自由に変更できるようになっており、この部分は自動更新をONにしていても上書きされることはありません。

新エディタグーテンベルクがきちんと機能するテーマを作る。Webページのデザインを「グーテンベルグ」でプレビューできるテーマを作成。モバイルファーストでレスポンジブなサイトの構築。1カラムのレイアウトを最初に、次に大きな画面の2段組みレイアウトを作成。カスタマイズに必要な基礎知識を解説。WordPressのテンプレートタグ、HTMLやスタイルシートのポイントも解説。基礎が身に付くと評判の定番書が最新バージョンに対応!
¥2,860 (2024/09/15 22:47時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す

実際にPochippを使用して表示している上のカード表示のように、タイトル下の部分へ独自の文章を入れたり、商品検索したページに書かれている内容の一部をコピーするなどして説明書きを追加することで、よりクリックされやすくなるかもしれません。

このページの更新履歴

更新日更新内容
2022年 5月21日本ページを公開しました
2022年 5月25日投稿(固定ページ)編集画面での誤クリック防止用CSSコードを追記しました
2022年 6月 1日よりクリックされやすくする一工夫を追加しました
\楽天ポイント4倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す
著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahooショッピングで探す