WordPress GutenbergでAmazon JSの商品リンクを貼る力技

※2018/11/29追記:2018年11月にリリースされたAmazonJS v0.9において、Gutenbergの「クラシック」(『Classic』)からTinyMCE相当のエディタを呼び出し、エディタ内でAmazon JSの機能を使用できるようになりました。

以下は2018年8月時点の投稿です。


新エディタ「Gutenberg」導入後のWordPress環境で、記事内に「Amazon JS」の商品リンクを挿入するゴリ押しの解決方法です。

スポンサーリンク

状況

2018年8月に公開されたWordPress 4.9.8より、今後導入される新しいエディタ「Gutenberg」か、旧来のエディタ(TinyMCE)を維持する「Classic Editor」の導入を促すメッセージが表示されるようになりました。

現時点では一部に怪しい挙動が見られるものの、Gutenbergではブロック構造を基本とする新たな記事投稿の仕組みが採用され、既存ページビルダー系プラグインのようなページ作成が可能になっています。

しかし、TinyMCEを拡張するタイプのプラグインとの互換性は考慮されておらず、TinyMCEでは表示されていたAmazonアソシエイトのリンクを挿入するプラグイン「Amazon JS」のボタンがGutenbergでは表示されない状態となりました。

対応策

Amazon JS自体が最後の更新から2年ほど経っており、別のプラグインへの置き換えも検討していた所でしたが、Gutenberg内でAmazon JSのリンクを貼り付ける急場しのぎの方法として下記のブックマークレットを作成しました。

ブラウザのブックマークに登録して利用できます。

Amazon JSショートコード作成(Amazon商品ページ)

ASIN抽出パターン参考:https://regexr.com/3gk2s

コード

記事のタイトルを「力技」とした通り、Amazon JSの検索機能のようにProduct Advertising APIを使うものではなく、Amazonの商品ページで使用する前提のものです。

javascript:
(function(){
  asin=location.href.match(/(?:dp|product|ASIN)\/(B[A-Z0-9]{9})/);
  name=document.getElementById('title').firstElementChild.textContent.trim();
  prompt('AmazonJS%20Code','[amazonjs%20asin="'+asin[1]+'"%20locale="JP"%20title="'+name+'"]');
}
)();

Amazonの商品ページで実行するとURLからASINを、ページの内容から商品名を取得し、Amazon JSでショートコードを貼り付ける際に出力されるものと同様の

amazonjs asin="ASIN" locale="JP" title="商品名"

のショートコードを表示します。

コピーしたショートコードをGutenbergの「ショートコード」ブロックに貼り付けて公開すれば、投稿された記事にはこれまでと同様にAmazon JSの商品リンクが表示されます。

あくまでもGutenberg環境で編集画面から呼び出せないAmazon JSの商品リンクを無理やり記事に入れるために作成したものなので、参考程度にご笑覧下さい。

その他の方法

当ブログでは先日、テーマを「Cocoon」に変更しましたが、Cocoonの標準機能として実装されているショートコードによる商品リンクの表示を簡単に行うために、「naenote.net」のNAEさんがブックマークレットを作成されています。

こちらはより広い商品からの情報取得が可能なようなので、こちらのコードをAmazon JS用に書き換えて利用したほうがいいかもしれません。

余談

移行先として検討していたAmazon公式の『Amazon Associates Link Builder』も現時点ではGutenbergで利用できないようです。