当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

ポチップの使い方/商品リンクの作成方法を画像付きで解説

アイキャッチ/ポチップ ブログ運営
ブログ運営
記事内に広告が含まれています
スポンサーリンク

この記事ではポチップの基本的な使い方について解説します。

New 2024.05 インライン画像・インラインリンク機能が追加されました。

ポチップは簡単かつ迅速に商品リンクを作成できるワードプレスプラグイン。

このようなリンクがあっという間に作れます。

Amazon・楽天市場・Yahoo!の商品リンクの他に、自由にカスタムリンクも追加OK!

直感的な操作が多くとても使いやすいので、物販アフィリエイトをしたい方はご覧くださいね。

ポチップの設定方法を知りたい方はこちら

特に ポチップのAmazonアソシエイトで商品検索する方法 は分かりにくいため、こちらの記事で先に確認しておくことをおすすめします。

ワードプレスプラグイン/Pochipp(ポチップ)

  • 商品リンク簡単作成
  • セール機能表示
  • らくらくデザイン
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

ポチップは、基本的にブロックエディタ内で商品検索からリンク設置までをすべて同じ画面(投稿編集画面)でおこないます。この記事を書く画面でリンク作成できるのが時短になるポイントのひとつ。

商品リンクを作成するには以下の4パターンがあります。

どの方法を選択する場合でも、後述する「商品登録が必要な機能」を使うために、商品はポチップに登録しておくことをおすすめします。

①投稿編集画面で検索して商品リンクを作成する

まず、都度検索して商品リンクを作る方法です。

  • Step1
    「ポチップ」ブロックを選択

    投稿編集画面で段落の「+」をクリックし、ブロックメニューから「ポチップ」を選択します。

  • Step2
    商品を検索する

    「商品を検索する」ボタンをクリックすると画面が切り替わります。

    1. 検索したいショップのタブをクリック
    2. 商品キーワードを入力
    3. 検索(右側の虫めがねのアイコンをクリック)
    ポチップ/操作イメージ
  • Step3
    表示したい商品を選択する

    キーワードにヒットした商品がいくつか表示されるので、リンクを作りたい商品を選んで「この商品をクリック」をクリックします。

  • Step4
    必要に応じて各ショップでも検索する

    特定の商品をリンクに指定したい場合は、すべてのショップで商品検索をおこないます。

    検索しないショップでは、商品キーワードの検索結果ページが表示されます。

    特定の商品を指定せず、すべて検索結果ページにすることもできます。(リンク先をすべて検索結果ページにするに✓チェックを入れます)

    「検索結果ページ」はキーワードを入れて検索したとき、ヒットした複数の商品が表示されるページだよ。

  • Complete
    完成

    商品リンクが設置されます。

商品データをポチップ管理画面に登録する」ボタンをクリックすることで、この画面から商品を登録することもできます。(※自動リンク切れチェック機能を使うには登録が必要)

②先に登録し、商品を呼び出す

次に、先に登録した商品を呼び出す方法。(こちらがおススメ)

ポチップ管理画面に登録する
  • Step1
    ポチップの管理画面で商品リンクを新規作成する

    新規投稿を追加(新規作成)」をクリックすると画面が表示されます。

    1. 検索したいショップのタブをクリック
    2. 商品キーワードを入力
    3. 検索(右側の虫めがねのアイコンをクリック)
    4. 「この商品を選択」ボタンをクリックします。
  • Step2
    必要に応じて各ショップでも検索する

    特定の商品をリンクに指定したい場合はすべてのショップで商品検索をおこないます。

    検索しないショップでは、商品キーワードの検索結果ページが表示されます。

    特定の商品を指定せず、すべて検索結果ページにすることもできます。(リンク先をすべて検索結果ページにするに✓チェックを入れます)

    検索結果ページ」はキーワードを入れて検索したとき、ヒットした複数の商品が表示されるページだよ。

  • Step3
    選択した商品を登録

    検索設定を終えたら画面右上の「公開」をクリックします。

    公開した商品は「ポチップ管理」から商品を確認できます。

登録した商品を呼び出す
  • Step4
    登録した商品を呼び出す

    投稿編集画面でポチップブロックの「登録済み商品を検索」から商品を選択して呼び出します。

  • Step5
    表示したい商品を選択する

    登録済みの商品一覧が表示されるので、リンクを作りたい商品を選んで「この商品を選択」をクリックします。

  • Complete
    完成

    登録した商品のリンクが設置されます。

右側に表示されるサイドバーで、ある程度表示する内容をカスタマイズできるので必要に応じて設定しましょう。

ポチップ/設定
設定できること
  • 全デバイスでリンクを縦並び表示にする
  • 商品タイトルの上書き
  • 各リンクの個別非表示設定
  • カスタムボタンの非表示設定
  • クリック率計測のON/OFF(計測できるのはPochipp Pro機能です)

③カスタムリンクを追加する

続いて、設置した商品リンクにさらにお好みでリンクボタンを追加する方法。

Amazon、楽天、Yahoo!の他に2つまでリンクを追加可能。

この機能があるだけでポチップを使う意味があります!

ポチップ/カスタム

ポチップ管理画面で登録した商品を選択すると、下にカスタムボタンの設定項目があります。

ここでリンク先URL・表示するテキストを入力するだけ!

追加できるカスタムリンクは2個まで。十分ですね。

実に簡単で素晴らしい!

リンク先URL

カスタムボタンに入力できるURLは「https」から始まる一般のURLのみです。

<a>から始まるアフィリエイトリンクはカスタムボタンには使えません。ポチップリンクと並べることはできませんが、テキストリンクにするかアフィリエイトリンク対応のボタンを使いましょう。

  • SWELL:SWELLボタン
  • Cocoon:囲みボタン…等

公式 ポチップでカスタムリンクを作成する方法

④ショートコードを利用してリンクを作成する

また、ポチップはブロックエディタ専用なのですが、実はショートコードを使って商品リンクを呼び出すこともできるんです。

ブロックエディタが使えないウィジェット等でのポチップ表示が可能になります。

ショートコードでリンクを作成する方法
  • Step1
    functions.phpにコードを追加する

    ウィジェットでショートコードを使うためのコードを、テーマのための関数(functions.php)に一行追加します

    add_filter( 'widget_text', 'do_shortcode' );
    テーマがCocoonの場合

    Cocoonの場合は『Cocoon Child』(子テーマ)

    外観→テーマファイルエディター→テーマのための関数(functions.php)に追加。

    これでショートコードが使える状態になりました。

  • Step2
    ポチップの管理IDを確認する
    1. ポチップ管理→商品を登録
    2. 管理IDを確認する

    ポチップ管理IDは「ポチップ管理」ページの一覧テーブル右側『ID欄』で確認できます。

  • Step3
    ウィジェット(カスタムHTML)にショートコードを記述する

    ここまで準備ができたらショートコードを記述します。

    ショートコードの書き方
    [ pochipp id="1234567890" ]

    ショートコードは簡単[ pochipp id=”ここに数字を入れます” ]

  • 完成

例)ウィジェット(カスタムHTML)で使用する場合

ウィジェットといったブロックエディタが使えないところでショートコードが活躍します。

必要があれば表示するカテゴリーを選択しましょう。(表示設定はCocoon機能)

ショートコードに商品IDを入れるだけなので、当サイトもウィジェットを使って記事下に商品リンクを表示させています。ありがたい!

公式 ポチップの商品リンクをショートコードで呼び出す方法

スポンサーリンク

表などに便利!ポチップではインライン機能が使える

ポチップではインライン機能があり、文章の途中テーブルの中など、簡単にポチップのインラインリンクを設置できます。

2024.05 インライン画像・インラインリンク機能が追加されましたPost

インラインリンクの作り方

  • Step1
    ポチップに商品を登録

    「ポチップ管理」にインライン機能で表示したい商品を登録する(インライン機能を使うには必ず登録する必要があります

  • Step2
    作りたいリンクの種類を選択

    リンクを置きたい場所で、ツールバー→ポチップアイコンをクリック→作りたいリンクの種類を選択(クリック)します。

    • インラインボタン
    • インラインリンク(テキストリンクです)
    • インライン画像

  • Step3
    商品とリンク先を選択

    表示したい商品とリンク先を選択します。

    1. キーワードで商品を検索
    2. 置きたいリンク先を選択

    商品名の検索は頭文字か一部分でもOK。うまく商品が表示されないときは検索する文字をできるだけ短くする、または一文字消すと出てくることがあります。

    Amazon楽天Yahoo!メルカリからクリックして選択します。

基本的にこの3ステップだけでOK!必要に応じてテーブルを作成します。

実際にテーブル(表)の中にインラインリンクを配置するとこんな感じ。インライン画像インラインリンク、インラインボタンを組み合わせてすべて使ってみました!

インラインボタンは改行して3つのボタンを置いています。なかなかよさげじゃないですか?

商品画像おすすめリンク
インライン画像

インラインリンク
けっきょく、よはく。余白を活かしたデザインレイアウトの本
インラインボタン
Amazon
楽天
Yahoo

実際にインライン機能を使った記事

当サイトでもインライン機能を使っています。実際のページをチェックしてみてくださいね。

個人的には、インライン画像にAmazonが使えて嬉しい!

公式 ポチップのインライン機能を使用する方法

インラインボタンのデザイン設定

インラインボタンのデザイン設定は管理画面のポチップ設定でできます。

ダッシュボード→「ポチップ設定」→「基本設定」→「インラインボタンのデザイン設定」

ここで設定できる項目は3点です。

  1. ボタンスタイル
  2. ボタンの丸み
  3. ボタン幅

変更すると上にプレビューが反映されるので、確認しながらお好みで設定しましょう。

「各ボタンの色」でインラインボタンの色を変更できます。

詳しい使い方はポチップ公式をご覧ください。

公式 ポチップのインラインボタン機能を使用する方法

インラインボタンの色を個別設定するカスタマイズ

また、インラインボタンの色は何個設置しても同色(インラインボタンに設定した色)になります。

これをカスタマイズすることで個別に分けることができます。

例えば、Amazon、楽天、Yahooのインラインボタンを置いたとき、ポチップ設定で設定した個別のボタンカラーが反映されます。

ポチップカスマイズの記事で紹介していますのでご利用ください。

スポンサーリンク

ポチップ商品登録が必要/インライン機能と自動リンク切れチェック機能

ポチップでは商品登録が必須な機能があります。

  • インライン機能
  • 自動リンク切れチェック機能

インライン機能

ポチップ管理に登録している商品から選択して、インラインリンクを作成します。

自動リンク切れチェック機能

また、ポチップ管理に登録している場合のみリンク切れチェックがおこなわれます。(投稿画面のみ表示されている場合には使えません)

他にも検索時の条件があります。

  • リンク切れがチェックされるのは「検索元」のリンクのみ(個別に詳細リンクを貼っている場合のリンク切れ検知は現在行なえません)
  • 現在リンク切れチェックが行えるのはAmazon API楽天APIで検索した商品のみ(Pochipp Assist、ヤフー経由で検索した商品ではリンク切れの検知はできません)

例えば、ポチップアシストを利用した検索だと自動リンク切れチェック機能は使えないので注意。

ポチップの管理画面では「チェックなし」とグレーで表示されます。

条件があっても自動リンク切れチェック機能は便利なのでぜひ利用したいところです。リンク切れはポチップの管理画面で確認できますよ。

自動リンク切れチェックについてはポチップ公式ページをご覧ください。

スポンサーリンク

ポチップでセール情報を表示する方法

ポチップではセール情報をボタンの上に表示する機能があります。

ポチップ/セール

楽天とYahoo!の定期的なセール情報を自動で表示してくれる他、自分で文面の設定もできます。

公式 ポチップを使って商品にセール情報を出す方法

Pochipp
(無料版)
PochippPro
(有料版)
定例セール  
手動設定  
自動取得  
複数セール設定  

定期的なセールの自動表示方法

自動で表示されるセール
  • 楽天5と0のつく日キャンペーン
  • Yahoo!ショッピング:5のつく日キャンペーン
  1. 「管理画面」→「ポチップ設定」→「セール」のタブを開きます
  2. 「定期的なキャンペーン」の項目にそれぞれチェックするだけ

セール情報の設定手順

  • Step1
    「管理画面」→「ポチップ設定」→「セール」のタブを開く

    (PochippProでセールの自動取得を有効化する場合はここでチェックします)

  • Step2
    セール情報を入力

    それぞれセール名、期間を入力します。

    (この画面はPochippPro版のため表示が少し異なります)

セール情報はセールごとに自分で毎回入力するのは手間のかかる作業です。

PochippPro(有料版)ならすべて自動取得・自動表示!!

個人的に有料版最大のメリットなのでぜひご検討ください。

セール表示の漏れがなくなりますよ。

スポンサーリンク

ポチップのスタイル、レイアウトをカスタマイズする方法

イメージ画像

ポチップではボタンのスタイル、レイアウトを管理画面上で簡単にカスタマイズできます。

設定方法:「ポチップ設定」→「基本設定」

ポチップ設定の主な設定項目
  • ボックスのレイアウト、スタイル設定
  • リンクボタンのスタイル、色変更
  • 価格の表示・非表示設定
  • 各ボタンの表示テキスト
  • 商品リンク先を別タブで開くかどうか

公式 ポチップでカスタマイズできる6つの便利機能を紹介 で詳しい設定が確認できますのでご確認ください。

ボックスのデザイン設定 New

ポチップv.1.13.2のアップデート情報Post

レイアウト(PC)に「画像ビッグ」が追加されました。商品画像を大きく表示できるので便利ですね!

オススメは以下の設定です。

設定項目選択できる項目
レイアウト(PC)●ビッグ(ボタンが横幅ぴったり並びます)
レイアウト(モバイル)●縦並び
画像の配置●左
ボタンスタイル●標準
ボタンの丸み●四角
ボタン幅(PC)●自動フィット
ボタン幅(モバイル)●一列幅
商品の価格表示●表示

設定を変更するとプレビュー画像で確認できるので、ここはお好みのデザインで問題ありません。

各ボタンの表示テキストと色

また各ボタンの表示テキストと色もここで設定できます。

「Amazon」→「Amazonでチェック」といった変更をしたり、ボタンの色をサイトの配色と合わせるといったことも簡単にできてしまいます。

その他、ポチップのカスタマイズについてをこちらにまとめています。リンクボタンの並べ方など、細かいこだわりがある方向け。

ポチップでメルカリアンバサダーのリンクを作成できるようになりました New

2023年11月、ポチップではメルカリアンバサダーのリンクを簡単に作成することができるようになりました。

手順は以下の2ステップ。

  1. メルカリアンバサダーに登録する
  2. メルカリアンバサダーのIDをポチップ設定に登録する

メルカリの非表示機能については、メルカリ設定画面からまとめて設定ができるようになっています!

開発されているひろさんのポスト

詳しくはこちらをご覧ください。

公式 メルカリアンバサダーのID取得・設定方法

まとめ/快適なポチップライフで売り上げアップを目指しましょう

以上が、ポチップの基本的な使い方です。

ポチップを使用することで、手軽に商品リンクを作成しアフィリエイト収益を上げることができます。ぜひ、このプラグインを利用して効果的なコンテンツ作成をしましょう。

プラグインのアップデートや新機能の追加がある場合は、公式サイトをご確認ください。

ポチップの設定、インストール方法はこちら。

また、売上アップの工夫満載 Pochipp Proについて、機能、インストール、設定方法をより詳しくこちらの記事で解説しているのでご覧ください。

\Proならセール情報が自動表示/

ワードプレスプラグイン/Pochipp(ポチップ)

  • 商品リンク簡単作成
  • セール機能表示
  • らくらくデザイン
よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました