商品リンクを作成するツールはいくつかありますが、自由度が高く報酬アップがのぞめるということで「kattene(カッテネ)」が注目されて関連した記事も多く見られるようになっています。
しかしkatteneは自由度が高い反面、操作が面倒という声もあり、特に慣れない人には導入の障害になっているということもあるかと思います。
私、yo-kanはコピペのドラッグがへたくそで、ちょっとストレスに感じたことがありました。
ここでは、ちょっとしたエクセルの表を使うことで、WordPressにリンクを貼る時のミスや煩わしさを軽減できた方法をご紹介します。
この記事は、katteneのプラグインと初期設定が終わっていることを前提にした改善手法のご紹介です。
ここではkatteneの導入については説明していませんのでご了承ください。
katteneの問題
katteneには多くのメリットがあり、それが注目されている理由でもありますが、ほぼ唯一の弱点が「操作が面倒なこと」です。
多くの商品リンク作成ツールは、商品名を入力すると自動でリンクを作ってくれますが、katteneは全て自分で入力しなければなりません。
入力自体はコピペで済むのですが、貼り付けをミス( 【 】が残っていたり、” ” を消してしまったり)した場合はちょっと面倒です。
また他のツールでリンク先を自動で作成してくれるのに対し、katteneはいちいちリンク先を自分で探すのが面倒という声もありました。
考え方
「唯一の弱点が面倒なこと」としましたが、面倒な中にも二つの要素があることがわかりました。
それぞれについて、
①URLなどのコピペ:
コピー元、コピー先両方の範囲指定が簡単で間違わなければワンタッチでいける。
②リンク先を探す手間:
自動でリンク作成してもらってもリンク先がアンマッチのことはある。
そうなったら結局自分で探して作成する。
・・・どうせ確認するなら自分でリンク先を探しても同じ。
リンク先に簡単にアクセスできれば確認を兼ねることで無駄手間感が減る。
という二つの考えから、「手間を無くすのではなく軽くする」というコンセプトにしました。
とにかく結果が知りたいという場合はこちらへどうぞ
表計算シート
必要なところだけエクセルのシートに貼り付け、それらを計算式で組み合わせて、計算結果だけをワードプレスのHTMLに貼り付けるというものを作成しました。
作成した表はこんな感じになります。
実際に使用したイメージです。
タイトルは「エクセル」になっていますが、この表は Googleスプレッドシート です。
この使い方ではGoogleスプレッドシートとエクセルの差はありません。
コードを分解する
左は、公開されているkatteneのコードです。
赤文字のところをユーザーが書き換えて使用します。
ここではこの部分を「ワイルドカード」にして、他の固定部と数式で組み合わせるということをします。
下はコードの分解イメージです。
メインのAmazonのところを例にとると、このように「データを入力する赤の部分」とその前後、5個のブロックの集合になります。
これを
=①&【画像】&②&【タイトル】&③&【説明】&④&【メインのURL】&⑤
という式で連続表示させます。
ここでキモになるのは、【タイトル】【説明】【URL】の後にある「” 」と「,」をどこにくっつけるかということと、共通部分も「引用セルにしなければならない」ということです。
共通部分はできれば引用しない方がシンプルにできるのですが、「”」があると「文字入力」との違いが認識されず計算式が分断されてしまうのであえて別セルに入れて引用することにする必要があります。
いまさら説明することではないと思いますが、「,」は命令を繋ぐところにあるので、当然不要なところに残っていてはコードが成立しないでリンクを表示することができません。
【タイトル】【説明】【URL】の後にある「” 」についても、文法としては前にある「” 」とセットになりますが、エクセルの式が成立しなくなるので、「” ,」とセットで次のブロックの先頭に付けています。
考え方が決まったら、次は全てのコードをエクセルのセルにいれる単位で分解します。
貼付用URL
前述の分解の考え方でコードを分解します。
左は分解位置で改行だけしたもの。
右はエクセルのセル単位で分けたものです。
[kattene]
{
"image": "
【画像URL】
",
"title": "
【タイトル】
",
"description": "
【説明】
",
"sites": [
{
"color": "orange",
"url": "
【メインのURL】
",
"label": "Amazon",
"main": "true"
},
{
"color": "red",
"url": "
【商品のURL】
",
"label": "楽天"
},
{
"color": "blue",
"url": "
【商品のURL】
",
"label": "Yahoo!"
},
{
"color": "green",
"url": "
【商品のURL】
",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "
【商品のURL】
",
"label": "audiobook"
}
]
}
[/kattene]
[kattene]
{
"image": "
【画像URL】
",
"title": "
【タイトル】
",
"description": "
【説明】
",
"sites": [
{
"color": "orange",
"url": "
【メインのURL】
",
"label": "Amazon",
"main": "true"
},
{
"color": "red",
"url": "
【商品のURL】
",
"label": "楽天"
},
{
"color": "blue",
"url": "
【商品のURL】
",
"label": "Yahoo!"
},
{
"color": "green",
"url": "
【商品のURL】
",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "
【商品のURL】
",
"label": "audiobook"
}
]
}
[/kattene]
ちょっと数が多いですが、このように分割されました。
これをエクセルのシートに入れてみます。
ここで重要なのは、1ブロックを1セルに入れるということです。
改行単位でセルを分けてしまうと、連結する式の収集がつかなくなってしまいます。
前記のブロックごとに分けたコードは、そのまま全部をコピペすれば1セルに収まるはずです。
もしコピペをしても1セルに入らないようならやり直してください。
=B1&B2&B3&B4&B5&B6&B7&B8&B9&B10&B11&B12&B13&B14&B15&B16&B17&B18
これをこの式で連続表示させればコードが作成されます。
上の式を「B20」に貼り付けた結果がこれです。
B1からB18のセルに入力されている内容が1文になっているのがわかります。
ちなみに、自分で使うときは「Amazon」「楽天」「Yahoo!」がメインで、その他という形になるので、順番を入れ替えて作成してあります。
使用イメージ(もしもアフィリエイト)
表示ができることまでは確認できましたので、実際にデータを入れてみます。
このサイトでは、Amazonと楽天は もしもアフィリエイト を経由しています。
アフィリエイトについては、直接提携できればそれでも良いですが、Amazonの審査が厳しくなっていることと、W報酬とかプレミアム報酬といった追加報酬もあることから、もしもアフィリエイトにしています。
では実際に作業に入ります。
対象はこれにしてみます。
品名の「ねんどろいど 原神 旅人」をタイトルに貼り付けます。
今このサイトではAmazonも楽天も「もしもアフィリエイト」経由になっていますので、
もしもアフィリエイトの商品リンクを開き、カテゴリーに商品名を入れます。
商品名を入力して検索すると目的の商品が見つかります。
対象の商品が見つかったので、「商品リンクを作る」をクリック。
「リンクカード」に貼られる画像のサイズとしては中あたりがちょうど良いので、中を選択し
右クリックから画像アドレスのコピーとリンクのアドレスをコピーをそれぞれ下の赤枠のところに貼り付けます。
B20のセルに表示されているコードが書き換わっているのがわかります。
このコードをカスタムHTMLに貼り付けます。
イメージ通りの「商品リンクカード」が表示されました。
ボタンはデフォルトの5個が表示されていますが、リンクの設定はAmazonしかしていないので、Amazon以外のボタンを押すとエラーになります。
(このまま放置するとGoogleから異常の通知が来ます)
お手軽便利というからには、HTMLの編集をせず、エクセルの操作だけでこのように設定していないボタンを表示しないようにしなければ「誇大タイトル」ですね。
中締め
「誇大タイトル」を批判した直後で申し訳ありませんが、
画像が大きくて数が多いのが影響しているだけですが、ちょっと長くなってきたので、基本的なエクセルでの使い方と動作確認ができたところでひと息つかせていただきます。
エクセルを使いこなせる方ならここをきっかけに色々カスタマイズできると思いますが、次回この続きを実際に自分で使っている形で説明をしようと思います。
次は実用に耐えるものをわかりやすくお伝えすべきですので、しばしお時間をいただいて記事の構成を見直そうと思います。
続きはこちら
「作ってみました」の記事はさすがによくわかります。
Kattene導入はぜひこちらを参考に。
katteneはASPを選びませんが、使い勝手の良さでいちおしです。