WordPressにiOSアプリのアイコン付きアフィリエイトバナーを表示するスクリプトを作ってみたよ橋本技研ブログ売れるホームページ研究所、橋本技研の技術系備忘録ブログ。ショッピングカートシステムの制作などが得意です。WordpressWordPressに、iOSアプリのアフィリエイトバナーを貼る場合、以下のようなAppStoreのバッジリンクならば簡単に貼ることができますが、アイコン付きのバナーを貼ろうとすると苦労します。出力されるアイコン付きのバナーは、JavaScriptで動的にiframeを差し込む方法で実装されています。Wordpressの記事にJavaScriptのコードを張り付けても動作しないため、残念ながらアイコン付きのバナーは表示されません。そこで今回は、Wordpressでも簡単にアイコン付きのバナーを表示できるJavaScriptを書いてみましたよ。紹介したいアプリを検索してアイコンをクリックすると、アフィリエイト用のバナーが表示されますので、そのバナーをWordpressの記事に貼り付けます。赤枠内のコードを記事欄にコピペすれば、以下のようなバナーが表示されるようになります。このコードにはJavaScriptは含まれていませんので、Wordpressでも問題なく表示されます。このアフィリエイトバナーには、アイコン付きバナーを表示するために必要な情報がすべて含まれていますので、JavaScriptを使ってアイコン付きのバナーに差し替えることにします。作り方の詳細ははしょりまして、いきなりスクリプトを提示させていただきますが、以下のコードを実行すればアイコン付きバナーに切り替わります。(スマホとパソコンで、バナーのサイズが自動的に変わるようになっています。JavaScript」というプラグインを使用してみました。JavaScript」プラグインをインストールすると、外観メニューに「拡張javaScript」というメニューが追加されますので、それをクリックします。編集ボックスに、上記のスクリプトをコピペして、「変更を保存」ボタンを押せば完了です。すべてのページにこのスクリプトが自動的に挿入されるようになります。先程のバナーを貼ったページを再読み込みすると、なんということでしょう、AppStoreの黒いバナーがアイコン付きに変わったではありませんか。道案内さんこのスクリプトを使って、サクサクとアプリ紹介の記事を書いてくださいね。お役に立てましたら幸いです。bagooon橋本たかし★ホームページの制作(デザイン・コーディング・プログラミング)に加え、ネットショップの販売促進に関するアドバイスも致します。20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。プログラミングの経験は30年以上。PHP、Ruby、Perl、JavaScript、Vue、Nuxt.JS、MySQL、Elasticsearch、サーバー構築、Dockerなど、幅広く対応します。bagooon.comシェアするツイートフォローする@HashimotoSubaru関連記事JavaScriptで、電話番号を半角数字のみに加工する関数を作ってみた最近、Node.jsでウェブサービスを作ることが多いです。ユーザーが入力した電話番号は、半角数字や全角数字、ハイフンや括弧の有無な...記事を読むcheerioを使ってhtmlのimgタグを相対パスに変換して出力した話htmlソースを読み込み、ソース中のimgのパスを相対パスに変換したい。ブラウザ上であれば、jQueryあたりでサクッとできるのだ...記事を読むブラウザ上のボタンをクリックすると、Illustratorで指定したファイルが開くようにする方法ブラウザにはセキュリティを確保するために様々な制約があります。日付や通貨表示のフィルタを日本語表記に対応させる方法AngularJSには、便利なフィルタが用意されています。使ったサービスを制作しているのですが、その中で使用するnpmパッケージにバグが見つかりました。reCAPTCHAを設置して不正なアクセスから防御する今、「ウェブサイト制作をぐっと楽にするウェブサービス」を制作している。ng-clickのイベント伝播を停止する方法イベントハンドラng-clickを設定したオブジェクトが重なっている場合、重なった部分をクリックすると手前のオブジェクトから順にイベントが発...記事を読む複数店舗で運用するブログ(WordPress)を、記事ごとに店舗情報が表示されるようカスタマイズしてみました複数の店舗で運営するブログを制作中です。「変更を保存」致しましたが記事下に表示するようにしたのですが(アプリのアイコン無し)でした。ご教授頂けましたら幸いです、宜しくお願いいたします。AMご質問くださいましてありがとうございます。LinkMakerが出力するURLの形式が変わったみたいです。15行目を以下のように書き換えてみてください。{※当ページのソースも書き換えました。AMありがとうございました。無事に表示されるようになりました。コメントをキャンセルメールアドレスが公開されることはありません。サイトをVarnishを使って爆速化した話。Composeでお手軽に利用してみた。