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

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>';
  }
} 

/*--------------------------------------
  外部リンク　青
--------------------------------------*/
.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;/*１番左側の色を変更可能*/
	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;
}}

  
  順位
    WiFi
    ページタイトルサイト名