WordPress|Amazon、楽天などのアフィリエイト・リンクを自作

本記事は、WordPress 5.4 Gutenberg(グーテンベルク)エディタ環境で動作確認しています。

WordPress の記事内でアフィリエイト・リンクを貼って商品を紹介する場合、果たしてどのようにリンクを埋め込むのがベストなのでしょうか。

たとえば、Amazon のみのリンクであれば、「Amazon アソシエイツ」公式ののツールを使えば、デザインの良し悪しは別として専用のコードを簡単に取得できるので、それを貼るだけで良いかもしれませんが、1つの商品に対して、楽天Yahoo!ショッピングなど複数のアフィリエイト・リンクを含めたい場合は少し厄介です。

プラグインを利用する方法

この場合、よく紹介されているのが、プラグインを使用する方法ですが、楽天やYahooショッピングは日本のサービスのため、これに完全に対応するプラグインは結局日本製のプラグインに限定され、選択肢が限られますし、将来的に APIの仕様変更などで機能が制限される不安もあります。

ASPのリンク作成ツール

最近では、「もしもアフィリエイト」や「バリューコマース」などのASP(Affiliate Service Provider)でも、複数のリンク生成ツールを提供しているので、これからアフィリエイトを始める人は最初からそれらのサービスを利用するのも良いでしょう。ちなみに僕は10年以上前からバリューコマースを使ってます。

アフィリエイトリンク作成ツール(Web版)

また、「ヨメレバカエレバ」などWebベースでのアフィリエイトリンク作成サービスもありますが、Amazonの商品が検索できないということ、アフィリエイト・コードをCookieで保存しているため、Cookieを削除したらまた最初から入力しなおさないとならないなど、決して使いやすいとは言えません。

完成予想イメージ

そこで今回は、「たまにアフィリエイトリンクを貼る程度で、少しくらいのコピペ作業なら全然問題ない」という人向けに、自作でアフィリエイトリンクを貼る方法を紹介します。下記がデザインイメージです。

CSSファイルにコード追加

まずは下記のCSSコードを style.css など、使用中のCSSファイルに追加します。モバイル用のメディアクエリも追加しておくので必要に応じてスクリーンサイズを変更するなど適当に調整してください。

style.css
/* #################################### */
/* ###### アフィリエイト リンク ####### */
/* #################################### */
.af_wrap{
	border: 1px solid #d1d1d1;
	background-color: #f9f9f9;
	padding: 10px;
	margin-top: 1em;
	margin-bottom: 1em;
	display: flex;
	justify-content: space-between;
	border-radius: 5px;
}
.af_img{
	flex-basis: 20%;
	min-width: 10%;
	padding: 1% 2%;
	box-sizing: border-box;
	text-align: center;
	position: relative;
}
	.af_img img{
		display: inline-block;
		margin: auto;
	}
	/* Amazon の画像リンクに含まれる 1px の画像によるスペースを除去 */
	.af_img > img{
		position: absolute;
	}

.af_content{
	flex-basis: 80%;
	padding: 1% 2%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
	.af_title,
	.af_opt,
	.af_desc{
		margin-bottom: 0.6em;
	}

	.af_title{
		font-size: 120%;
		font-weight: bold;
	}
	.af_opt{
		color: #9ea0a0;
		font-size: 90%;
	}
	.af_desc{
	}
	.af_btn_wrap{
		margin-top: auto;
		display: flex;
		flex-wrap: wrap;
	}
	.af_btn_wrap .af_btn{
		width: 12em;
		margin: 0 5px;
		border-radius: 5px;
		text-align: center;
	}
	.af_btn_wrap .af_btn a{
		display: block;
		padding: 5px 5px;
		margin-bottom: 4px;
		text-decoration: none;
		color: #fff;
	}
		.af_btn_wrap .af_btn a:hover{
			color: #fff;
			opacity: 0.75;
		}
		.af_btn_wrap .af_btn a::before{
			margin-right: 0.4em;
		}
		.af_btn.amazon a{
			background-color: #ffa724;
		}
		.af_btn.rakuten a{
			background-color: #bf0000;
		}
		.af_btn.yahoo a{
			background-color: #ff0033;
		}

/*##############################################################*/
/* for Mobile */
/*##############################################################*/
@media only screen and (max-width: 479px) {

.af_wrap{
	flex-direction: column;
}
.af_img{
	flex-basis: auto;
	padding: 3% 2%;
}
	.af_img img{
		max-width: 30%;
	}
.af_content{
	flex-basis: auto;
}
	.af_btn_wrap{
		justify-content: space-between;
	}

}/* end of media query */

再利用ブロックにHTMLコードを追加

下記のHTMLコードがアフィリエイト・リンク用のテンプレートとなりますので、このコードをGutenbergエディタの「再利用ブロック」に追加します。

<div class="af_wrap">
	<div class="af_img">
		<!-- 商品画像リンクをココに丸ごとゴソっと -->
		_____PRODUCT_IMG_____
	</div>
	<div class="af_content">
		<div class="af_title">
			<a href="_____URL_____" target="_blank">_____PRODUCT_TITLE_____</a>
		</div>
		<div class="af_opt">
			<!-- 例:著者/hidepooh *不要ならタグ削除-->
			_____PRODUCT_AUTHOR_____
		</div>
		<div class="af_desc">
		_____PRODUCT_DESC_____
		</div>
		<div class="af_btn_wrap">
			<div class="af_btn amazon"><a href="_____URL_____" target="_blank">Amazon</a></div>
			<div class="af_btn rakuten"><a href="_____URL_____" target="_blank">楽天</a></div>
			<div class="af_btn yahoo"><a href="_____URL_____" target="_blank">Yahooショッピング</a></div>
		</div>
	</div>
</div>

再利用ブロックへの追加方法

念のため再利用ブロックへの追加方法を書いておきます。投稿ページから、下記の手順で追加します。

カスタムHTML]をクリック

上のコードを張り付け[再利用ブロックに追加]をクリック

好きなブロック名を付けて[保存

再利用可能]セクションに保存したブロックが追加されました

保存した再利用ブロックの使い方

ブロックの追加]→[再利用可能]から、保存したブロック(今回の例では Affiliate Link)をクリック

保存したブロックが呼び出されるので、[詳細設定]をクリックしてメニューを表示

通常のブロックへ変換]をクリック

これを忘れると保存済みのテンプレートが更新されてしまうので注意!

テンプレート内のリンクやタイトルを希望の内容に書き換えます

関連サイト紹介

参考までに、アフィリエイトに関する関連サイトをいくつか紹介しておきます。

アフィリエイト・リンク作成プラグイン

プラグインでサクッと簡単にリンクを追加したい人にオススメ。made in 日本の有名プラグインです。どちらもGutenbergエディタに対応しています。

アフィリエイト・プロバイダー(ASP)

この記事を書いた人

日本では主にUNIXサーバーの構築、運用などに携わり、2006年に仕事を辞めてカナダに来てそのまま永住。

カナダでは、日本からカナダに留学や永住、ビジネスで渡航する人たちのサポートを行う傍ら、専門分野+趣味でもあるWeb制作、運用を継続しながら、最近では写真/動画撮影、動画制作、モーショングラフィックなど、新しい分野のスキルアップに励んでいます。

Peas Code は、僕が過去の経験の中で学んだことを、特定の分野に限定せず公開していくことを目的としています。中にはコードに見えてしまうような意味不明な僕独自の理論も含まれますが、知っていると平和になれると言う意味で、Peas(peace → peas) Code と名付けました。これが意味不明か・・・。

僕について、もうちょっと詳細を知りたいという変わった人は[About me]を見てください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です