SPONSOR
WP プラグイン

AmazonJSの設定と使い方

SPONSOR
SPONSOR
sponsor

AmazonJS

アマゾンの商品を画像とともに紹介、リンクできるプラグインです。見栄えもいいですし。簡単に商品をリンクできます。一度設定すると使い方は簡単です。

  • AmazonJSのインストールと有効化

プラグインの新規追加の検索窓でAmazonJSを検索し、インストール後、有効化します。

sponsor

Amazon JS の設定

次の2つを設定します。

  • アソシエイトタグの設定
  • Product Advertising APIの設定

アソシエイトタグの設定

「Amazon.co.jp」にアソシエイトタグを入力します。

アソシエイトタグは、Amazon アソシエイトウェブサイトの右上にあるアソシエイトIDです。

アソシエイトIDは、〇〇〇-22

「Amazon.co.jp」に〇〇〇-22を入力します。これで、Amazon JS の設定は終わりです。

Product Advertising APIの設定

Amazon JS のProduct Advertising APIの設定画面で取得したアクセスキー ID とシークレットアクセスキーを入力します。

アクセスキーの取得については、下に記載します。

sponsor

Amazon Product Advertising APIアカウントの作成

Amazon Product Advertising APIアカウントを作成します。このアカウントはAmazonアソシエイトとは違います。

ここから作成するへ

Amazon JS

ここから作成をクリックすると、Product Advertising API のページが開きます。アカウント作成に進みます。アカウント作成のボタンをクリックします。

アカウント作成

  1. My e-mail address is にメールアドレスを入力
  2. 新規の場合は「I am a new customer」にチェックを入れる
  3. 新規登録へ進む
Amazon JS
sponsor

アクセスキーを取得

登録が終わる、またはログインすると次の画面が表示されます。

Manage Your Accountをクリック

Amazon JS

こちらのリンクからをクリックするとログイン画面になり、再度ログインします。

Amazon JS

セキュリティ認証情報画面へ進む

Amazon JS

アクセスキー(アクセスキー ID とシークレットアクセスキー)をクリックすると、アクセスキー ID とシークレットアクセスキーが表示され、Download Key Fileでアクセスキー情報が記載されたファイルがダウンロードできます。

sponsor

Amazon JS の使い方

ここからは簡単です。エディッタにamazonのアイコンができています。

  1. amazonのアイコンをクリック
  2. 検索窓に掲載する商品名などを入れる
  3. 掲載したい商品を選択する
  4. 掲載するスタイルを選び挿入する

AmazonJSのアイコン(ボタン)

Amazon JS

ブロックエディッタ(Gutenberg)でのAmazonJSのアイコン(ボタン)については下記に記載しています。

Auralum 壁紙 白 レンガ柄で検索

Amazon JS

ASIN/URLで検索

もし検索窓で検索して希望のものが見つからない場合は、ASINやURLでも検索可能です。ASINは商品のページの登録情報に記載されています。

ASIN が掲載されている商品ページ

商品のページの下方に商品情報があり、そこに登録情報が掲載されています。

Amazon JS
sponsor

Amazon JS でのアマゾンの写真付き紹介例

下の画像のように紹介され、アマゾンの商品のページにリンクされます。

Amazon JS
sponsor

AmazonJSをブロックエディッタ(Gutenberg)で利用する

「クラシック」で利用

ブロックエディッタのフォーマットで「クラシック」を選びます。AmazonJSのアイコン(ボタン)があります。

Amazon JS

「クラシック版の段落」で利用

ブロックエディッタの一般で「クラシック版の段落」を選択します。AmazonJSのアイコン(ボタン)があります。

Amazon JS
sponsor

ブロックエディッタ(Gutenberg)と旧エディッタ 両方を利用する

プラグイン「Classic Editor」を利用すると、旧エディッタのAmazonJSのアイコン(ボタン)が表示されるようになります。

また旧エディッタとブロックエディッタの両方を切り替えて使えます。

メディアを追加のボタンの横にAmazonJSのアイコン(ボタン)が表示される

Amazon JS

プラグイン「Classic Editor」

「Classic Editor」はWordPressの公式のプラグインです。

以前のエディターに依存したプラグインを使用したりといったことが可能になります。

「Classic Editor」をインストールすると、「設定→投稿設定」で次の選択ができるようになります。

Classic Editor の設定

Classic Editor

ブロックエディッタ(Gutenberg)から旧エディッタに切り替える

右上のメニューを開き、プラグインの欄の「旧エディッターに切り替え」をクリックすると旧エディッターで表示されます。

Classic Editor

旧エディッターから ブロックエディッタ(Gutenberg)に切り替える

アイキャッチ画像の下に「エディッター」という項目があり、「ブロックエディッターに切り替える」をクリックすると切り替わります。

Classic Editor
sponsor

Amazon JS の設定画面で警告が出た場合の手順

設定画面で警告が出ている時は次の手順に移ります。

警告の内容は以下の通りで、指示の通りにフォルダを作ります。

警告、キャッシュディレクトリが存在しません
書き込み可能なディレクトリを/wp-content/cache/amazonjs/ に作成してください

キャッシュディレクトリ

指示の通りにキャッシュディレクトリを作ります。この場合、FTPソフトを利用します。

  1. wp-contentnを開く
  2. フォルダ「cache」があるか確認し、なければ作成する
  3. フォルダ「cache」の中にフォルダ「amazonjs」を作成する
  4. 「amazonjs」のパーミッションを777にする

フォルダを右クリックして「属性の変更」をクリックし、777に変更する

これで設定画面の警告が消えていると思います。

SPONSOR
ゆきを
SPONSOR