Cocoonでアフィリエイトタグを改変せずにリンクをボタン化するカスタマイズ

無料WordPressテーマ「Cocoon」では、リンク（aタグ）をボタン化する機能がβ版として提供されています。

参考 記事作成に使える拡張スタイル。ボタン編。 | Cocoon

便利な機能なんですが、こちらaタグにclass属性を追加することでボタン化するしくみになっているため、タグ改変が規約で禁止されているアフィリエイトリンクには使えません。

そこで、タグを改変せずにボタン化できるようにしてみたので、カスタマイズの方法を紹介します。

 

※追記：2018/09/20

公式で同等の機能が追加されました。本記事のものと若干デザインが異なりますが、気にならない方は本家を使うと良いかと思います。

参考 Cocoon 1.2.1公開。囲みボタン拡張スタイル追加。 | Cocoon

仕上がりイメージ

Cocoonに組み込まれているボタン（中）のスタイリングを利用しつつ、

• ボタンのサイズ調整
• 中央寄せ
• 矢印マーク追加

しています。

カスタマイズの方法

HTMLの準備

<div class="aligncenter">
 <div class="btn btn-m btn-red">
  ここにタグ
 </div>
</div>

上記HTMLを、AddQuickTagに登録しておきます。

参考 AddQuicktag — WordPress プラグイン

今回は赤を使っているのでbtn-redクラスをつけていますが、他の色を使いたい場合は、下記記事を参考にクラス名を変えてください。（青ならbtn-blueなど）

参考 記事作成に使える拡張スタイル。ボタン編。 | Cocoon

CSSの準備

.aligncenter {
 text-align:center;
 margin:0 auto;
}
div.btn a {
 color:white;
 text-decoration:none;
}
div.btn:hover a,
div.btn a:hover{
 color:black;
 text-decoration:none;
 transition:all .5s ease;
}
div.btn p {
 margin:0;
}
div.btn-m {
 width:70%;
 min-width:250px;
 padding:14px 30px;
}
div.btn-m:after {
 content:"\f105";
 position:absolute;
 right:0;
 top:50%;
 margin-top:-.5em;
 font-size: 2em;
}

上記CSSを子テーマのstyle.cssに追記します。

実際の使い方

1. AddQuickTagでボタンを挿入
2. 「HTML挿入」でボタンの中にアフィリエイトタグを挿入
3. もともとあった「ここにタグ」の文字を削除

こうすると最終的に

<div class="aligncenter">
 <div class="btn btn-m btn-red">
  <a href="XXX">XXX</a><img src="XXX">
 </div>
</div>

のような形になるので、アフィリエイトタグを改変しないままボタン化できます。

まとめ：ボタンのご利用は計画的に

以上、Cocoonのボタン機能を少しカスタマイズしてタグ改変禁止なアフィリエイトリンクをボタン化させてみました。

もちろん、ボタンだからといって必ずしもクリック率が上がるわけではありません。クリック解析などを通じて、定量的に判断すべきです。

とはいえ選択肢が多いに越したことはないので、ボタンが使いたい方はぜひカスタマイズしてみてください。