LINE2019.11.20こんにちは「おれんじ」です。WordPressテーマ「Cocoon」のAmazon商品リンクショートコードは自由度が高く、オプション設定により自分好みの商品リンクが作成できます。手入力で設定するのはさすがに面倒くさいですよね。オプションの種類はCocoonの公式サイトで確認できますが、わたしには多過ぎて覚えられません。Amazon商品リンクショートコードの使い方。サンプルコード満載で解説。Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。wp-cocoon.comという訳で、自分用にAmazon商品リンクのオプションを簡単に設定してショートコードを作成できるページを作りました。自分用なのでページ自体は非公開にしていますが、ここで公開する内容をコピペしてちょっと修正すれば使えますので、Cocoonを使ってる場合は参考にしてください。ショートコードを展開して、ソースコードも取得できるようにしています。ソースコードで貼っておけば、30日間Amazonの売上が発生せずPA-APIを利用できなくなっても、商品リンクは使い続けられるというメリットがありますからね。以下の条件を満たしている必要があります。要するにCocoon用のショートコードが動作する状態です。(ページの本文)ショートコード作成ページとして、Amazon商品リンクのオプション設定用フォームと結果の出力エリアがあるページを作成します。わたしの場合は非公開の固定ページに作成しました。HTMLのお作法が良くわかっていないで作ったので、詳しい方が見たら苦笑いするかもしれませんが......自分用に動けばOKということにして、ページの本文を以下のように設定します。readonly></textarea></p></div>一行目の「action="/php/amazon_link.php"」の部分に、この先の工程で作成するPHPファイルのパスを記載する必要があります。ここでは「amazon_link.php」というファイル名でPHPファイルを作成して、サーバ上のドメイン直下にある「php」というフォルダに設置したときの記載となっています。PHPファイルの作成後、環境に合った記載に変更してください。ショートコードとソースコードの出力用テキストエリアは、タップするとコードがすべて選択されるようにしました。本格的にCSSで装飾したい場合は、余計なstyleが設定されまくっているので、上手いこと作り直してください。書き上げたあとにカスタムCSS欄に気づきましたよ。Editor」を使っているので、テキストエディタで本文に記載しました。「Gutenberg」を使っている場合は、カスタムHTMLブロックに記載すれば良いかと思います。因みに非公開ページにしておく場合、使用するときはWordPressにログインした状態で使うことになります。カスタムJavaScriptショートコード作成ページのフォームから送信されたデータをPHPに渡して、処理結果を受け取るためのJavaScriptです。この先で作成するブックマークレットを使用した際に、ASINとキーワードを受け取る処理も一緒に書いてしましょう。ショートコード作成ページのカスタムJavaScript欄に以下を設定します。}}();投稿の編集画面にあるカスタムjavascript欄に入力してください。コード作成用のPHPファイルフォームから送信された設定値を基にショートコードの作成を行うPHPを記載したファイルの作成です。ショートコードと展開したソースコードをJavaScriptに返却します。テキストエディタに以下を記載して拡張子「.php」で保存してください。exit();ショートコードの展開を行うためにWordPressの「wp-load.php」を読み込む必要があります。最初の「require_once('../wp/wp-load.php');」のパス部分を環境に合った記載に変更してください。ここで作成したPHPファイルのパスがショートコード作成ページの本文に、送信先として記載されている必要があります。ここではショートコード作成ページの本文に記載したとおり「amazon_link.php」というファイル名にして、サーバ上のドメイン直下にある「php」というフォルダに設置します。ブックマークレットの作成ここまででAmazon商品リンクの取得ページは動作しますが、ショートコードで必須となるASINと大抵は必要なキーワードを簡単に取得できるようにブックマークレットを作成しましょう。ブックマークレットの作成については、以下のサイト様の情報を参考にさせて頂きました。CocoonのAmazon商品リンクショートコードをボタン一発で作成するブックマークレットを作ったCocoonのAmazon商品紹介用ショートコードを自動作成するブックマークレットを作りました。カエレバやヨメレバのかわりにCocoonの機能を使う人は便利かと思います。Chromeなどのブラウザで適当なページをブックマークに登録して、登録したブックマークのURLを以下のコードに書き換えてください。Error('ASINが取得できませんでした。'https://orange-antenna.com/amazon-link/';」のアドレス部分を、あなたのショートコード作成用ページのアドレスに変更してください。Amazonの商品ページでブックマークレットを実行すると、商品のASINが取得されてショートコード作成用ページが展開します。キーワードについては、ページ内で文字列を選択していない場合は商品名、選択していれば選択中の文字列を取得します。ショートコード作成用ページが展開する際、取得したASINとキーワードがテキストエリアに入力された状態になっているので、あとは必要であればオプションを設定をしてショートコードを取得してください。おわりにカエレバからCocoonのショートコードに移行後、Cocoonの商品リンクは便利だけど面倒だと思っていました。そのため最低限のオプションしか使わない運用をしていましたが、このショートコード作成用ページを作ることで自由自在に商品リンクを作成できるようになりました。機能ですから、今後も工夫して便利にCocoonを使っていきたいですね。※お知らせ楽天ポイント計算済みの価格で商品検索できるページを作成しました。LINEスポンサーリンク楽天ポイントの計算って分かりづらいですよね?「楽天市場」のポイントって実際にどれだけお得なのかわかりづらいですよね?本ブログでは、検索結果の商品一覧に「購入時に付与されるポイントを差し引いた金額」を表示することで、実質価格がひと目でわかる楽天検索ページを公開しています。検索結果からは、そのまま楽天の商品ページに移動できるようになっていて、Amazon検索も可能なので、ぜひ利用してください。Stick」の使用感2017.05.09友達・同僚へのプレゼントにトロフィーをおすすめする3つの理由と選び方2018.05.16敬老の日や長寿祝いに子供の絵を使ってプレゼントを作ろう2018.05.20。