【SANGO】アフィリエイトリンクカードを作成する【カスタマイズ】

「SANGO(wordpress)の他サイトへのリンクカードをアフィリエイトのリンクカードのようにカスタマイズしたい。

もともとのデザイン

\今回作ったものはこんな感じ!/

他リンクカードのプログラムを用いて作成します。もともとの他リンクカード自体をカスタマイズするわけではないので、使い分けることが可能です。

フレン

アフィリエイトのテキストと料金(もしくは一言を添える!)ことで、今までのボタン以外のアフィリエイトリンクができます(´∀`*)
注意
他のカスタマイズを公開している方々も言っていますが、カスタマイズは自己責任でお願いいたします。

SANGOカスタマイズ準備

今回の手順はこちらです。

手順1
PHPコードのコピペ
sango Childのfunction.phpにコードをコピペします。(PORIPUの方も同じfunction.phpです。
手順2
CSSコードのコピペ
style.cssにコードをコピペします。
手順3
使用するショートコード
こちらのリンクカードを利用する際は、ショートコードで呼び出します。

フレン

コピペだけで済むので、難しいプログラムを打つ必要はありません。

SANGOカスタマイズをしよう!

PHPのコピペ

フレン

SANGO Childのfunction.phpに以下のコードをコピペしてください。
PHP
add_shortcode('sanko2', 'my_othersite_link'); // アフィリエイトカード
function my_othersite_link($atts)
{
  $href = isset($atts['href']) ? esc_url($atts['href']) : null;
  $title = isset($atts['title']) ? esc_attr($atts['title']) : null;
	$rank = isset($atts['rank']) ? esc_attr($atts['rank']) : null;
  $site = isset($atts['site']) ? '<span>' . esc_attr($atts['site']) . '</span>' : "";
  $target = isset($atts['target']) ? 'target="_blank"' : "";
  $rel = isset($atts['rel']) ? ' rel="nofollow noopener noreferrer"' : ' rel="noopener noreferrer"';
  if ($href && $title) { // タイトルとURLがある場合のみ出力
      $output = <<<EOF
  <a class="my-reference reference table" href="{$href}" {$target}{$rel}>
  <span class="tbcell rank1">{$rank}</span>
    <span class="tbcell refttl">Apple</span>// ここの文字(Apple)から他の文字に変えることができます。
    <span class="tbcell refcite">{$title}{$site}</span>
  </a>
EOF;
    return $output;
  } else {
    return '<span class="red">参考記事のタイトルとURLを入力してください</span>';
  }
} 

今回では、WiFiについてのカードになっていますが、 プログラム途中の「Apple」の部分の文字を他の文字に変えることができます。

例えば、「保険」「美容」「スポーツ」など、、

あなたの紹介したいアフィリエイトに合わせて変更してください。

CSSコードのコピペ

フレン

「外観→テーマエディター→style.css(子テーマ)」または、「外観→カスタマイズ→追加CSS」に貼り付けてください。
CSS
/*--------------------------------------
  外部リンク 青
--------------------------------------*/
.my-reference {
    background: #fff;
    box-shadow: none;
    border: 2px solid #E8F5FE;
    padding: 0px;
    position: relative;
    font-weight: 500;
    color: #005bad;/*ページタイトルの色を変更可能*/
	font-weight: 700;
	max-width: 600px;
	margin:2px ;
}
.my-reference:before {
	content: none;
}
.my-reference .rank1{
	color:#fff;/*料金部分の色を変更可能*/
	width: 70px;
	background-color:#005bad;/*1番左側の色を変更可能*/
	text-align: center;
	writing-mode: vertical-rl;
   text-orientation: upright;
}
.my-reference .refttl:before {
    content: "\f5d1";/*好きなアイコンに変更可能*/
}
.my-reference .refttl {
    width: 89px;
    border-right: none;
    background: #E8F5FE;
    padding: 13px;
    color: #005bad;/*WiFi部分の文字色変更可能*/
}
.my-reference .refttl:before {
    color: #005bad;/*WiFi部分の文字色変更可能*/
}
.my-reference .refcite {
    padding-left: 15px;
    line-height: 1.8;
}
.my-reference .refcite span {
    color: #F00;
    font-size: 2em;
	font-weight: 900;
}
.my-reference:hover {
    box-shadow: none;
    color: #5a5a5a;
    background: #E8F5FE;
}
.my-reference:after {
    position: absolute;
    display: flex;
    height: 100%;
    padding: 0px 15px;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    top: 0px;
    right: 0px;
    font-size: 2.8em;
    color: #fff;
    background: #eaedf2;
    align-items: center;
}
@media screen and (max-width: 500px){
.my-reference {
    width: 100%;
}
.my-reference .refcite {
    padding-left: 10px;
    font-size: .8em;
    padding-bottom: 25px;
}
.my-reference .refcite span{
	font-size: 1.3em;
}
.my-reference:after{
	font-size: 1.5em;
}
.my-reference .rank1{
	width: 20px;
}
.my-reference .refttl {
    width: 60px;
}}

今回の他リンクカードは「アイコン」と「カードの色を変更することができます。」

「アイコン」を変更したい方

今回のから別のアイコンに変更することができます。

アイコンを見つける ➡︎ Font awesome

*「unicode」をコピペしましょう。「HTML」ではありません。

 

「カードの色」を変更したい方

カードの色もそれぞれ変更することができます。

色は基本的に数字(16進数)で表されています。色の組み合わせはサルワカさんの配色パターンを参考にされると便利です。

参考 COLORSサルワカ

利用するためのショートコード

実際の記事でこちらのカードを利用するためのショートコードはこちらです。

ショートコード
[sanko2 href="URL" rank="順位" title="ページタイトル" site="サイト名"]

もともとsangoの他リンクカードを用いてこちらのカードを作成したので、一部は同じです。

URL:アフィリエイトリンク

RANK:順位を記入。1位や2位など

TITLE:アフィリエイトテキストもしくは、一言。

SITE:アフィリエイトテキストもしくは、一言。

動作確認をして終了

以上で、カスタマイズは終了です。最後にショートコードを入力して動作確認をしてみましょう。

もし何か、不具合がある方はTwitterで質問をしていただけると答えられます。

フレンのTwitterをフォローする