プラグインAmazonJSをカスタマイズ

2017/06/17
ブログの記事内にアマゾンの商品リンクを簡単に挿入することができる便利なプラグイン「AmazonJS」。
商品のタイトルなどテキスト部分をカスタマイズしました。

これ。(↓)こういう商品リンクが、記事作成画面で簡単に入れられて便利♪

amazonJS_before

でも、う〜ん...ちょっとテキストの色やなんかを変えたいなぁ。。
と思ったので、カスタマイズすることにした。

方法は『amazonjs.js』と『amazonjs.css』という2つのファイルを編集する。
WordPress管理画面の「プラグイン」のページで編集してもよし、またはファイルをPCで開いて編集してそれからアップロードしてもよし。但し、どちらにしても元のファイルをコピーしてちゃんとバックアップを取っておくべし。(私は後者の方法を用いた)



■ AmazonJSのテキスト部分をカスタマイズ ■


1.『amazonjs.js』を編集する

・WordPress内のフォルダ「plugins」→「amazonjs」→「js」と進むと『amazonjs.js』がある。ファイルを開き、このタグ(↓)を・・・
'<h4>',linkTemplate,'</h4>',

・全てこれ(↓)に書きかえる。(全部で5つある)
'<span class="amznjs_title">',linkTemplate,'</span>',
<h4><span>に置きかえるのは、<h4>は見出しタグなので都合がよくないから...らしい。(←いつもながらよくわかってないヒト)

2. 次に『amazonjs.css』を編集する

・「amazonjs」→「css」の中の『amazonjs.css』を開き一番上にこれ(↓)を追加する。
/* Amazonjs Title */
.amznjs_title {
 font-size: 18px;
 font-weight: normal;
 line-height: 1.4;
}

・そして、これら(↓)の「color」も好みの色に変える。
.amazonjs_item
.amazonjs_info
.amazonjs_price

・Amazonアイコンのアドレス部分(↓)も書きかえる。これを・・・
white url(../images/amazonjs.png) no-repeat right bottom;

・このように書きかえる。(↓)
white url("img/amazonjs.png") no-repeat right bottom;
img」というのは、私が使用しているテーマ内のイメージを格納してあるフォルダの名前。
テーマによって「images」だったりと、同じではない。


3. 編集した『amazonjs.js』と『amazonjs.css』を使用しているテーマのフォルダ内に保存する。
wordpress」→「wp-content」→「themes」→「テーマのフォルダ

4. Amazonアイコンの画像をコピーして、テーマのイメージフォルダの中に保存する。
Amazonアイコンとはこれのこと。(↓)
amazonアイコン
画像ファイルを移動させずコピーしたのは『amazonjs.js』と『amazonjs.css』の2つのファイルもプラグインとテーマとの2ヶ所にあるのだから、画像もそれがいいかなと思ったから。

カスタマイズの方法をぐぐっていたら、このAmazonアイコンを消す方法なんかもあったけど、このマークがあれば、それがアマゾンの商品であることが一目瞭然だから、私はあった方がいいと思う。どこへのリンクかわからないものを、私自身は安易にクリックしようとは思わないし...。

5. AmazonJS の設定を変更する。

(1)WordPress管理画面で「設定」→「AmazonJS」と進み設定画面を開く。
(2)一番下の『カスタマイズ』の2つの項目両方にチェックを入れ変更を保存する。

amzonJS設定

それぞれの項目の下に書かれているアドレス(↓)がファイルの場所を示している。
- - - - - - - - - - - - - -
(http://ブログアドレス/wp-content/themes/テーマ名/amazonja.css)
(http://ブログアドレス/wp-content/themes/テーマ名/amazonja.js)

これにて完了。


What a poser! / MSVG

この商品リンク、最新のデータが出るところが優れものなんだけど、しかしいくら広告が優れものでも、広告を出す場所(私のブログ)があかんとダメなのよ。とほほ。。