はてなブログからWordPressに移行してきました。初の投稿はWordPressの使い方についてです。
移行初心者だからこそつまづいたポイントがあり、今回はその解決方法に関するご紹介です。
この記事ではAPI連携なしでAmazonアソシエイト(アフィリエイト)リンクを使いたい方、また旧エディターではなくブロックエディターでAmazonアソシエイト(アフィリエイト)リンクを貼りたい方におすすめです。これを応用してブログカードの「Pz-LinkCard」もブロックエディター上で挿入する方法をご紹介します。
もし他にいい解決方法がありましたら、コメント頂けますと幸いです。
それでは早速本題に入ります。
有名なWordPressプラグイン「Amazon JS」が使えない
「Amazonアソシエイト プラグイン」と検索すると上位に引っかかってくる解説ブログは、大半が旧エディターの編集用のプラグインである「Amazon JS」ばかりでした。またこのプラグインでは旧エディターの編集ができないようで、ブロックエディターと切り替えながらの作業を要することが正直めんどくさくない？と思ったのと、初めたての人が使えないという問題にぶつかったのきっかけでした。
まず大前提として、WordPressのプラグイン「Amazon JS」はPA-API連携が必要ですので、Amazonアソシエイトとして承認されていなければ使うことはできません。さらにこのAPI連携のプラグインは承認だけではなく、直近で売上実績がない、実績が一定以上ないとこのAPI連携ができないということがわかりました。
なお、Amazon JS以外でもAPI連携が必要なプラグインは全て使えません。この問題の原因については既に多くのブログで取り上げられていますので今回は改めて説明はしません。
また「Amazon JS」のもう一つの問題点として旧エディターでの編集が必須（ブロックエディターが使えない）という問題点も解決しています。この応用でブログカードを挿入で切るけど、旧エディターでの編集が必須のプラグインである「Pz-LinkCard」についてもブロックエディター上で編集が可能となりますのでその方法についても解説したいと思います。
そのためWordPressに移行してきたばかりで、Amazon JS」に代表されるAPI連携が必要なプラグインが使えない場合やブロックエディターだけで編集したい場合に活用できます。
API連携なしのAmazonアソシエイトリンクの貼り方
このAPI連携なしでAmazonアソシエイト（アフィリエイト）リンクを貼るのに、「No API Amazon Affiliate」というプラグインを使います。このプラグインではショートコードを使って、アフィリエイトリンクを貼ることができます。ブロックエディターでは「/」を入力するとポップアップするメニューから選ぶことができます。
このような見た目のプラグインです。
ショートコード
インストールが完了するとサイドメニューに出てきます。
そしてマウスオーバーすると設定画面として「Ajustes」、「Apariencia」、「Ayuda」、「Productos Amazon」の４つが出てきます。どこの国の言葉（スペイン語？）かわかりませんが、翻訳機も反応しない部分があるので自力で確認しました。
No API Amazon Affiliateの設定方法
「Ajustes」の設定
この画面では国、AmazonアソシエイトIDを設定します。
「Tienda de Amazon por defecto」のプルダウンから「(JP)Japon」を選択します。次に右側に「Amazon Japon」が記載してある行に自分のAmazonアソシエイトID（Amazonアソシエイトログイン後、右上に表示されているID）を入力します。最後に「変更を保存」を押せばこの画面の設定完了です。
「Apariencia」の設定
この画面は簡単に言えば埋め込みのバナーリンクの外観の設定です。
実際に埋め込みのバナーリンクがあった方がわかりやすいので、一般的な横長の長方形のバナーリンクを作成しました。
↓↓
この埋め込みのバナーの外観設定がこの「Apariencia」でできます。
設定画面は先ほどの埋め込みバナーのように各種最低限設定に必要な入力、設定箇所に赤字でコメントを書いています。参考にしながら設定してみてください。同じように設定いただくと上のバナーのようになります。
なお、この埋め込みバナー設定では価格、割引率の表示設定もできますが、どこかで価格設定は規約違反という記事を見たことがあるので私は表示設定をしておりません。もし表示させる場合は自己責任でお願いします。
投稿画面でのリンクの貼り方
これで設定は完了です。次は投稿編集画面での実際のリンクの貼り方の説明となります。
リンクの貼り方は「Ayuda」という画面を見ます。この画面では投稿編集画面での実際のリンクの貼り方、リンク作成時に使うAmazonのASIN（商品コード）、バナーの形の指定コードについて記載されています。
この抜粋画面にはショートコードで[ ]で囲った「naaa asin=”AISNコードが入ります”」と設定するとバナーが作成できることが説明されています。
ASINコードについては、先ほど貼った埋め込みリンクのバナーで説明します。
https://www.amazon.co.jp/dp/B08LYC4LYC?ref_=cm_sw_r_cp_ud_dp_Q8H7ZAY9V717214T000S
このURL内の「/dp/B08LYC4LYC?re」の赤字にした部分です。「/dp/」の後に続く英数字のコードで「?」までと覚えてください。ちなみに国コード（「-JP」）の指定も必要となります。そのためこの場合、ASINコード＋「-JP」で「B08LYC4LYC-JP」となります。
次に埋め込みリンクのバナーの形の指定方法が説明されています。
基本的に使うのはこのような横長の長方形のものだと思います。この場合はASINコードの後に「template=”horizontal”」と入力すればいいことがわかります。
これで投稿画面での設定方法もわかりましたので実際にブロックエディターで編集します。
まずショートコードのブロックを挿入します。「ショートコードをここに入力」という欄に「Ayuda」に書いてあったコードの記載方法に従って、入力します。
最初に例として作った埋め込みのバナーはこのようなショートコードになります。
もう一度埋め込みのバナーを貼ります。
これで完成です。
このように「No API Amazon Affiliate」を利用すれば、API連携する必要も、旧エディターを使う必要もありません。また商品検索もAmazonのサイトで確認し、ASINコードだけ確認すればすぐにできます。
このようにテンプレート化させて、メモ帳に貼り付けておけばショートコードの作成も楽です。
「naaa asin=”ASINコード-JP” template=”horizontal”」*「」を[ ]にする
以上、ここまでがAPI連携なしでAmazonアソシエイト（アフィリエイト）リンクを貼る方法でした。
最後にこのショートコードを利用して、ブロックエディターを利用した（旧エディターを使わずに）プラグイン「Pz-LinkCard」でブログカードを作る方法を説明ます。
ブロックエディターを使って「Pz-LinkCard」でブログカードを作る方法
これは簡単です。この「Pz-LinkCard」でブログカードを作るときに旧エディター上ではショートコードが生成されています。そのテンプレートを利用して、ブロックエディター上で同じようにショートコードを作ればブログカードができるという方法です。
そのテンプレートを利用してブロックエディターでブログカードを作りました。
このブログカードのショートコードです。
つまりblogcard url=”URLが入ります”(*使うときは[ ]で囲う)がこのブログカードを作る際のテンプレートとなります。ちなみにURLの”の後に半角スペースを開けて「content=」と要約文を入れるとその内容が表示できます。
これでAmazonアソシエイト（アフィリエイト）リンクもブログカードもブロックエディターのみで作ることができるようになりました。
旧エディターとブロックエディターを行き来して編集すると無効になることもありますので、どちらか一方で編集した方が無駄な手間になりませんし、ブロックエディターのみで編集したい方はぜひご活用ください。
（追記）
Twitterでコメントいただきまして、cocoonをお使いの方はこのショートコード設定がうまくいかないようです。ちなみにcocoonをお使いの方はcocoonに搭載されているブログカードのブロックをお使いになられればこの方法を使わずにリンクをきれいに貼ることができます。
この記事が参考になったよという方はぜひフォローをお願い致します。
このブログではFiiO製品の最新情報・最速レビューを中心に記事を書いています。その他ライフスタイルDXをコンセプトにオーディオ、PS5、DIY/ジャンク修理などの役立つ情報発信しています。またツイッターではブログ記事にはない最新情報もツイートしています。
