AmazonJS
アマゾンの商品を画像とともに紹介、リンクできるプラグインです。見栄えもいいですし。簡単に商品をリンクできます。一度設定すると使い方は簡単です。
- AmazonJSのインストールと有効化
プラグインの新規追加の検索窓でAmazonJSを検索し、インストール後、有効化します。
Amazon JS の設定
次の２つを設定します。
- アソシエイトタグの設定
- Product Advertising APIの設定
アソシエイトタグの設定
「Amazon.co.jp」にアソシエイトタグを入力します。
アソシエイトタグは、Amazon アソシエイトウェブサイトの右上にあるアソシエイトIDです。
「Amazon.co.jp」に〇〇〇-22を入力します。これで、Amazon JS の設定は終わりです。
Product Advertising APIの設定
Amazon JS のProduct Advertising APIの設定画面で取得したアクセスキー ID とシークレットアクセスキーを入力します。
アクセスキーの取得については、下に記載します。
Amazon Product Advertising APIアカウントの作成
Amazon Product Advertising APIアカウントを作成します。このアカウントはAmazonアソシエイトとは違います。
ここから作成するへ
ここから作成をクリックすると、Product Advertising API のページが開きます。アカウント作成に進みます。アカウント作成のボタンをクリックします。
アカウント作成
- My e-mail address is にメールアドレスを入力
- 新規の場合は「I am a new customer」にチェックを入れる
- 新規登録へ進む
アクセスキーを取得
登録が終わる、またはログインすると次の画面が表示されます。
Manage Your Accountをクリック
こちらのリンクからをクリックするとログイン画面になり、再度ログインします。
セキュリティ認証情報画面へ進む
アクセスキー（アクセスキー ID とシークレットアクセスキー）をクリックすると、アクセスキー ID とシークレットアクセスキーが表示され、Download Key Fileでアクセスキー情報が記載されたファイルがダウンロードできます。
Amazon JS の使い方
ここからは簡単です。エディッタにamazonのアイコンができています。
- amazonのアイコンをクリック
- 検索窓に掲載する商品名などを入れる
- 掲載したい商品を選択する
- 掲載するスタイルを選び挿入する
AmazonJSのアイコン（ボタン）
ブロックエディッタ（Gutenberg）でのAmazonJSのアイコン（ボタン）については下記に記載しています。
Auralum 壁紙 白 レンガ柄で検索
ASIN/URLで検索
もし検索窓で検索して希望のものが見つからない場合は、ASINやURLでも検索可能です。ASINは商品のページの登録情報に記載されています。
ASIN が掲載されている商品ページ
商品のページの下方に商品情報があり、そこに登録情報が掲載されています。
Amazon JS でのアマゾンの写真付き紹介例
下の画像のように紹介され、アマゾンの商品のページにリンクされます。
AmazonJSをブロックエディッタ（Gutenberg）で利用する
「クラシック」で利用
ブロックエディッタのフォーマットで「クラシック」を選びます。AmazonJSのアイコン（ボタン）があります。
「クラシック版の段落」で利用
ブロックエディッタの一般で「クラシック版の段落」を選択します。AmazonJSのアイコン（ボタン）があります。
ブロックエディッタ（Gutenberg）と旧エディッタ 両方を利用する
プラグイン「Classic Editor」を利用すると、旧エディッタのAmazonJSのアイコン（ボタン）が表示されるようになります。
また旧エディッタとブロックエディッタの両方を切り替えて使えます。
メディアを追加のボタンの横にAmazonJSのアイコン（ボタン）が表示される
プラグイン「Classic Editor」
「Classic Editor」はWordPressの公式のプラグインです。
以前のエディターに依存したプラグインを使用したりといったことが可能になります。
「Classic Editor」をインストールすると、「設定→投稿設定」で次の選択ができるようになります。
Classic Editor の設定
ブロックエディッタ（Gutenberg）から旧エディッタに切り替える
右上のメニューを開き、プラグインの欄の「旧エディッターに切り替え」をクリックすると旧エディッターで表示されます。
旧エディッターから ブロックエディッタ（Gutenberg）に切り替える
アイキャッチ画像の下に「エディッター」という項目があり、「ブロックエディッターに切り替える」をクリックすると切り替わります。
Amazon JS の設定画面で警告が出た場合の手順
設定画面で警告が出ている時は次の手順に移ります。
警告の内容は以下の通りで、指示の通りにフォルダを作ります。
警告、キャッシュディレクトリが存在しません
書き込み可能なディレクトリを/wp-content/cache/amazonjs/ に作成してください
キャッシュディレクトリ
指示の通りにキャッシュディレクトリを作ります。この場合、FTPソフトを利用します。
- wp-contentnを開く
- フォルダ「cache」があるか確認し、なければ作成する
- フォルダ「cache」の中にフォルダ「amazonjs」を作成する
- 「amazonjs」のパーミッションを777にする
フォルダを右クリックして「属性の変更」をクリックし、777に変更する
これで設定画面の警告が消えていると思います。
