SANGOにはたくさんの種類のボタンが用意されています。これらのボタンは、リンクタグに対して、クラス名を追加することで装飾が施されています。
ボタンの挿入方法と種類一覧
しかし、一部のアフィリエイトサービスではリンクタグの改変が禁止されている場合があります。もし、アフィリエイトリンクを触れることなく、SANGOデフォルトのボタンを使いたい場合には、どうすれば良いのでしょうか。
目次
SANGOでアフィリエイトリンクを改変することなくボタンを利用する方法
この方法を使うには、少しだけ準備（カスタマイズ）が必要になります。このカスタマイズを行っても、デフォルトのボタンには影響はなく、これまで通りボタンは挿入できます。
はじめる前に：子テーマを導入しておくのがおすすめ
子テーマを導入しておくと、今後テーマのアップデートがあった際にカスタマイズ内容が上書きされてしまう心配がなくなります。
WordPressの子テーマとは？安全にカスタマイズを行う方法
また、カスタマイズの前に、ファイルのバックアップを取っておきましょう。
準備1：functions.phpにコードを貼り付け
アフィリエイトボタン用の新しいショートコードを使用できるようにするために、子テーマのfunctions.phpに以下のコードを貼り付けます。
/*アフィリエイト用ボタン*/
add_shortcode('afbtn','sng_insert_btn_af');
function sng_insert_btn_af($atts , $content = null) {
if(!(isset($atts) && $content)) return "";
$href = (isset($atts['href'])) ? 'href="'.esc_url($atts['href']).'"' : null;
$class = (isset($atts['class'])) ? esc_attr($atts['class']) : null;
$target = (isset($atts['target']) && $atts['target'] == "_blank") ? ' target="_blank"' : "";
$rel = (isset($atts['rel']) && $atts['rel'] == "nofollow") ? ' rel="nofollow"' : "";
$yoko = (isset($atts['0']) && $atts['0'] == "yoko") ? "yoko" : null;
$output = <<<EOF
<div class="btn2 {$class}">{$content}</div>
EOF;
return $output;
}
/*END アフィリエイト用ボタン*/準備2：style.cssに専用のCSSを貼り付け
続いて、子テーマのstyle.cssに以下のCSSをまるっと貼り付けます。なるべく軽くするために、余白や改行は消しています。
/*アフィリエイトボタン用CSS*/
#inner-content .btn2{padding:0;margin:.5em .5em .5em 0}#inner-content .btn2 a{display:block;padding:.4em .8em}#inner-content .btn2 a:hover{display:block;text-decoration:none}.btn2.btntext a {color: inherit;}#inner-content .btn2.raised a{color:#fff}.btn2.flat1 a{color:#00bcd4}.btn2.flat1 a:hover{color:#fff}.btn2.flat2 a{color:#67c5ff}.btn2.flat2 a:hover{color:#fff}.btn2.flat3 a,.btn2.flat4 a,.btn2.flat5 a{color:#67c5ff}.btn2.flat4 a:hover{color:#679efd}.btn2.flat5 a:hover{color:#fff}.btn2.flat6 a{color:#668ad8}.btn2.flat6 a:hover{color:#fff}.btn2.flat7 a{color:#67c5ff}.btn2.flat8 a{color:#00bcd4}.btn2.flat9 a{color:#fff}.btn2.flat10 a{color:#ffa000}.btn2.flat10 a:hover{color:#fff}.btn2.flat11 a{color:#668ad8}.btn2.cubic1 a,.btn2.grad1 a,.btn2.grad2 a,.btn2.grad3 a,.btn2.grad4 a{color:#fff}#inner-content .btn2.emboss a{color:rgba(0,0,0,.4)}.btn2.text3d.blue-bc a{color:#4f9df4}.btn2.text3d.red-bc a{color:#f88080}.btn2.text3d.green-bc a{color:#90d581}.btn2.cubic2 a,.btn2.cubic3 a{color:#fff}.btn2 img{visibility:hidden;display:block;width:0;height:0;}/*END アフィリエイトボタン用CSS*/以上で準備は完了です。それではアフィリエイトリンクをボタン化してみましょう。
挿入手順1：投稿編集画面でアフィリエイトリンクを貼り付け
テキストエディタを開き、いつも通りアフィリエイトリンクを挿入します。
挿入手順2：アフィリエイトリンクをショートコード「afbtn」ではさむ
次にそのアフィリエイトリンクを、新しいボタンのショートコードではさみます。新しいショートコード名はafbtn。通常のボタンショートコード（btn）とボタン種類の指定の仕方は全く同じです。
[afbtn class="ボタン種類"]
ここにアフィリエイトリンク
[/afbtn]
例えば、メインカラーを背景色とした浮き出しボタンを使いたいときは、以下のようにします。
[afbtn class="raised main-bc strong"]
ここにアフィリエイトリンク
[/afbtn]
まとめ
まとめると以下のようになります。
- ショートコード名は
btnではなくafbtnに - ボタン種類の指定の仕方は、どちらも同じ
- afbtnショートコードの中にアフィリエイトリンクを入れる
ボタン挿入例
下のようにテキストエディタで指定すると…
プレビューで見ると、下のように表示されます。
正直言って、少し面倒ですね・・・。通常のボタンはこれまで通り使えるので、改変禁止のアフィリエイトリンクをどうしてもボタンにしたいときに上の方法を活用すれば良いかと思います。
アフィボタンをクリックしたときに別タブで開きたい
お世話になっております。 [center] [afbtn class="raised main-bc strong" target="_blank" rel="nofollow"] アフィリンク [/afbtn] [/center] 上記のように設定したのですが、クリックしても別タブで開きません。対処法をご教示いただけますと幸いです。
グーテンベルクでアフィリエイトボタンをつくりたい
いつもお世話になっております。 グーテンベルクにすでに移行しているものなのですが、グーテンで作成できるボタンでアフィリリンクを改変せずにボタンを作成することは可能でしょうか？ もしできない場合は、上記の方法で同じように作成できますか？ 一度貼り付けをしておこなってみたのですが、うまくいかず・・方法を教えて頂けると大変助かります。どうぞよろしくお願いいたします。
ボタンの横幅のサイズを大きくしたい
いつもお世話になっております。 SANGOのアフィリエイトリンクのボタンをこちらの記事通り行いましたが、ボタンの横幅のサイズが小さいため、横幅を大きくしたいと思っていますが、CSSの記述をどのように行えばよいでしょうか？お忙しい所、恐れいりますが、時間のある時に教えていただけると助かります。ちなみに、ブロックエディターで記事を書いています。 ※サイトは非表示でお願いします。
afbtn前後の空のｐタグを消したい
お忙しいところすみません。 afbtnショートコード使用しているのですが、 どうしても前後に空のpタグが入ってしましまいます。 場所は記載URL目次3の直前になります。 以前Wordpressの自動成型だという回答がありましたので 以下調べて試したのですがどれもうまくいきませんでした。 functions.phpにて①全体のwpautopを無効にしても効かず、 ②afbtnショートコードに対してp…
アフィリエイトボタンの文字色を変えたい
「アフィリエイトリンクを改変せずにボタンを使う方法」を読んで、アフィボタンを設置できました。 そのアフィボタンの文字色が、リンク色になっているのですが、 リンク色はそのままにして、アフィボタンの中の文字色を白に変えたいです。 （＊リンク色＝カスタマイズ＞色 で設定できるリンク色） やり方を教えていただけませんでしょうか。よろしくお願いいたします。
子テーマのfunctions.phpにコードが貼り付けられない
いつもお世話になっております。 上記準備１の通り、子テーマのfunctions.php（外観→テーマエディター→テーマのための関数）にコードを貼り付け、「ファイルを更新」をクリックしたところ、『致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。SFTP を使うなど、他の手段で PHP ファイルの変更をアップロードする必要があります。』と表示され、更新され…
アフィリエイトリンクボタンの上下に余白が入る
こんにちは。 いつもお世話になっております。 ほかの方の質問と回答も読ませていただきました。 改変にならないリンクボタンを挿入したところ、リンクボタンの上下に余白が入ります。 brなども勝手に入ってなかったのですが、どのように対処すればよいでしょうか？ どうぞよろしくお願いいたします。
ボタン下の余白が変
サイト非公開でお願いします。 7月11日の質問者様と同様に、スマホから見るとボタンの下に無駄な余白が生じてしまいます。 CSSとPHPはコピペしただけです。
アフィリエイトリンクを改変せず、ボタンを横並び2列にしたい
いつもお世話になっております アフィリエイトリンクを改変せず、ボタンを横並び2列にしたい場合はどうしたらいいでしょうか？
ご返信ありがとうございます。 こちらでもスマホから飛ぶことが確認できました。 ご丁寧に対応いただきありがとうございます。
いつもお世話になっております。 アフィリエイトリンクですが、文字や画像に設定する場合は通常の［link］ボタンから挿入で機能しますよね？ ASP画像バナーの場合も、テキストにコードコピペで大丈夫ですよね？ ちょっと気になりましたので、確認させていただきました。 どうぞよろしくお願いいたします。