当テーマには、ビジュアルエディターからリンク用のボタンを挿入できます。
v1.2.1から、より手軽にボタン機能を使える「囲みボタン」スタイルも追加しました。
囲みボタン機能の使い方。アフィリエイトタグ利用向き。
手軽にボタンリンクを作成できる、囲み型ボタンスタイルの利用方法です。
wp-cocoon.com
2022.09.23
この機能はaリンクタグボタンに対してhref属性が入らなかったりするのでβ版機能となっています。
＼エックスサーバー開発のWordPressテーマ／
スタイル拡張例
以下は、表示サンプルとコードです。
レッド
<a class="btn btn-red">ボタンテキスト</a> <a class="btn btn-red btn-m">ボタンテキスト</a> <a class="btn btn-red btn-l">ボタンテキスト</a>
ピンク
<a class="btn btn-pink">ボタンテキスト</a> <a class="btn btn-pink btn-m">ボタンテキスト</a> <a class="btn btn-pink btn-l">ボタンテキスト</a>
パープル
<a class="btn btn-purple">ボタンテキスト</a> <a class="btn btn-purple btn-m">ボタンテキスト</a> <a class="btn btn-purple btn-l">ボタンテキスト</a>
ディープパープル
<a class="btn btn-deep">ボタンテキスト</a> <a class="btn btn-deep btn-m">ボタンテキスト</a> <a class="btn btn-deep btn-l">ボタンテキスト</a>
インディゴ[紺色]
<a class="btn btn-indigo">ボタンテキスト</a> <a class="btn btn-indigo btn-m">ボタンテキスト</a> <a class="btn btn-indigo btn-l">ボタンテキスト</a>
ブルー
<a class="btn btn-blue">ボタンテキスト</a> <a class="btn btn-blue btn-m">ボタンテキスト</a> <a class="btn btn-blue btn-l">ボタンテキスト</a>
ライトブルー
<a class="btn btn-light-blue">ボタンテキスト</a> <a class="btn btn-light-blue btn-m">ボタンテキスト</a> <a class="btn btn-light-blue btn-l">ボタンテキスト</a>
シアン
<a class="btn btn-cyan">ボタンテキスト</a> <a class="btn btn-cyan btn-m">ボタンテキスト</a> <a class="btn btn-cyan btn-l">ボタンテキスト</a>
ティール[緑色がかった青]
<a class="btn btn-teal">ボタンテキスト</a> <a class="btn btn-teal btn-m">ボタンテキスト</a> <a class="btn btn-teal btn-l">ボタンテキスト</a>
グリーン
<a class="btn btn-green">ボタンテキスト</a> <a class="btn btn-green btn-m">ボタンテキスト</a> <a class="btn btn-green btn-l">ボタンテキスト</a>
ライトグリーン
<a class="btn btn-light-green">ボタンテキスト</a> <a class="btn btn-light-green btn-m">ボタンテキスト</a> <a class="btn btn-light-green btn-l">ボタンテキスト</a>
ライム
<a class="btn btn-lime">ボタンテキスト</a> <a class="btn btn-lime btn-m">ボタンテキスト</a> <a class="btn btn-lime btn-l">ボタンテキスト</a>
イエロー
<a class="btn btn-yellow">ボタンテキスト</a> <a class="btn btn-yellow btn-m">ボタンテキスト</a> <a class="btn btn-yellow btn-l">ボタンテキスト</a>
アンバー[琥珀色]
<a class="btn btn-amber">ボタンテキスト</a> <a class="btn btn-amber btn-m">ボタンテキスト</a> <a class="btn btn-amber btn-l">ボタンテキスト</a>
オレンジ
<a class="btn btn-orange">ボタンテキスト</a> <a class="btn btn-orange btn-m">ボタンテキスト</a> <a class="btn btn-orange btn-l">ボタンテキスト</a>
ディープオレンジ
<a class="btn btn-deep-orange">ボタンテキスト</a> <a class="btn btn-deep-orange btn-m">ボタンテキスト</a> <a class="btn btn-deep-orange btn-l">ボタンテキスト</a>
ブラウン
<a class="btn btn-brown">ボタンテキスト</a> <a class="btn btn-brown btn-m">ボタンテキスト</a> <a class="btn btn-brown btn-l">ボタンテキスト</a>
グレー
<a class="btn btn-grey">ボタンテキスト</a> <a class="btn btn-grey btn-m">ボタンテキスト</a> <a class="btn btn-grey btn-l">ボタンテキスト</a>
リンクは自前で
上記のように、このボタン拡張スタイル機能は、href属性やtarget属性を持ちません。
ですので、テキストエディター側で以下のように属性を入力する必要があります。
<a class="btn btn-red btn-l" href="https://nelog.jp/" target="_blank">作者のサイトへ</a>
これを実際に表示させると、以下のようになります。
こういった難点があることから、今のところβ版機能となっています。いろいろ調べたけど、スタイルドロップダウンリストでは属性は追加できないっぽい。
使いどころ
ボタンの使いどころとしては、やはりコンバージョンページへの誘導が一般的かと思います。
大ボタンは大きいので、通常リンクよりは目に留まる確率が高いかと思います。
ただ、「ボタンを使ったからCV率が良い」かどうかは、しっかりと効果を確認の上ご利用ください。
