簡単操作！アフィリエイトリンク作成ツールを作った

2023年3月25日2023年4月11日

アフィリエイトリンク作成ツールを作った。

もしもアフィリエイトのかんたんリンクっぽいやつだけど、AMPでも表示できる！

なぜつくったか

はじめは、もしもアフェリエイトのかんたんリンクをつかうつもりだった。しかし、かんたんリンクを使うと、画像が表示されない。理由が分からない。

調べていると、かんたんリンクは広告ブロックの入った環境で表示されないとか、AMP環境で表示されない、といった情報を得たので、どうせなら自分でつくってしまおうとかんがえた。

とはいっても、プログラミングに詳しいわけではないので、以前に使ったことがあり、ブラウザ上で動作するなでしこ3をつかうことにした。

かんたんリンクはスクリプトをつかうけど、この方法はつかわないので、サイトの軽量化にも貢献する…はず。

やり方

今回はWordPressで動かす方法を紹介する。なでしこ3の中身はJavascriptなので、WordPressでなくても動くだろう。

まず、cssを追加する。cssのコードはOhYeah toこさんのものをお借りした。

AMP対応（もしもかんたんリンク対応策も）の、顛末記 | OhYeah to こ

WordPressのAMP対応策と、AMP対応でもしもかんたんリンクが消えてしまう件の対応策を記事にしました。

https://8bees.net/wordpressのamp対応策


/** Box部分 **/
div.Shpng_box {
　margin: 0;
　padding: 20px;
　background-color: #fff;
　border: 1px solid #ccc;
　width: 100%;
　height: auto;
　display: flex;
　flex-wrap: no-wrap;
}
div.Shpng_box div.Shpng_img {
　position: relative;
　width: 160px;
　height: 160px;
　float: left;
　padding-right: 20px;
　flex-grow: 0;
}
div.Shpng_box div.Shpng_info {
　width: 100%;
　flex-grow: 1;
}

/** ボタン部分 **/
.Shpng_btn{
　float: left;
　margin-right: 1em;
　font-size: 14px;
}

.Shpng_btn a {
　display: flex;
　justify-content: space-between;
　align-items: center;
　position: relative;
　margin: 0 auto;
　padding: 0.6em 0.8em;
　width: 200px;
　color: white;
　font-weight: 700;
　background-color: darkorange;
　border-radius: 0.8vh;
}

.Shpng_btn a:hover {
　text-decoration: none;
　color: white;
　background-color: orange;
}

次に、functions.phpにこれを追加する。

/* アフェリメニュー追加 */
function affiliate_link_menu() {
?>
<meta charset="utf-8"><body>
<br><br><br><br><br><br><br><br><br>
<div class="affiliate_link_genereate">
Amazon URL: <input type="url" name="url" id="url" /><br>
タイトル: <input type="text" name="text" id="title" /><br>
<button id="決定ボタン">決定</button><br>
結果: <input type="text" name="result" id="result" onclick="this.select()"　/>
</div>
<script type="なでしこ">
「#決定ボタン」をクリックした時には
 「#url」からテキスト取得して、初期リンクに代入。
 「#title」からテキスト取得して、検索ワードに代入。
 初期リンクの「ref=」まで切り取って、初期リンクに代入
 初期リンクをURLエンコードして、リンクに代入。
 検索ワードをURLエンコードして、検索ワードURLに代入。
 検索ワードURLの「%」を「%25」に置換して、検索ワードURLに代入。
 
 アマゾンに「https://af.moshimo.com/af/c/click?a_id=(ここにコピペ)&url=」&リンクを代入。
 楽天に「https://af.moshimo.com/af/c/click?a_id=(ここにコピペ)&url=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2F」&検索ワードURLを代入。
 Yahooに「https://af.moshimo.com/af/c/click?a_id=(ここにコピペ)&url=https%3A%2F%2Fshopping.yahoo.co.jp%2Fsearch%3Ffirst%3D1%26p%3D」&検索ワードURLを代入。
 
 初期リンクで0から「/B」を文字検索して、dp文字数に代入。
 初期リンクで(dp文字数+1)から「/」を文字検索して、ref文字数に代入。
 初期リンクで(dp文字数+1)から(ref文字数-dp文字数-1)文字抜出し。　

 画像URLに「https://images-na.ssl-images-amazon.com/images/P/」&それ&「.09.MZZZZZZZ」を代入。 

 「<div class="Shpng_box"><div class="Shpng_img"><img src="」&画像URL&「" /></div><div class="Shpng_info"><p>」&検索ワード&「</p><div class="Shpng_btn"><a href="」&アマゾン&「">Amazonで見る <i class="fa fa-chevron-right"></i></a></div><div class="Shpng_btn"><a href="」&楽天&「">楽天で見る <i class="fa fa-chevron-right"></i></a></div><div class="Shpng_btn"><a href="」&Yahoo&「">Yahoo! ショッピングで見る <i class="fa fa-chevron-right"></i></a></div></div></div>」を結果に代入。
 「#result」に、結果をテキスト設定。
ここまで
</script>
<style>
#result{
　　display: inline-block;
　　width: 100%;
　　padding: 10px;
　　border: 1px solid #999;
　　box-sizing: border-box;
　　background: #f2f2f2;
　　margin: 0.5em 0;
　　line-height: 1.5;
　　height: 6em;
}
</style>

<!-- なでしこエンジン -->
<script defer src='https://nadesi.com/v3/cdn.php?v=3.1.21&f=release/wnako3.js&run'></script>
<?php
}
function affiliate_link_menus () {
 add_menu_page('アフェリエイトリンク作成', 'アフェリエイトリンク作成', 'manage_options', 'affiliate_link_menu', 'affiliate_link_menu');
}
add_action ( 'admin_menu', 'affiliate_link_menus' );

コードがきたないことは、気にしちゃいけない。

もしもアフェリエイトからa_idやらp_idやらを入手する必要がある。