WordPressテーマ Affinger6は、多種類のカスタムボタンが組み込まれていますが、殆どがURLリンクにジャンプする仕様になっています。 このため、Affinger6のボタンでは、呼び出したいfunction（関数）をonclickで実行することが容易ではありません。
そこで、Affinger6のカスタムボタンの中から「ミニ」ボタンに、後から説明するonclick属性を付与するショートコードで囲むことで、このショートコードで囲まれた「ミニ」ボタンをクリック（タップ）すればfunction（関数）が実行できる様になりボタンの利用範囲が広がります。
「ミニ」ボタンを使った、実際の動作を見る(DEMO)
DEMO
ボタンをクリックすることで「アラート」メッセージを表示するデモです。 「アラート」ボタンを押してみてください。
このボタンは、以下のショートコードで実現しています。 赤文字が今回作成したショートコード【BTN_with_onclick】で、青文字が（下の備考に示す）Affinger6の「ミニ」ボタンを構成するショートコードです。
shortcode [BTN_with_onclick onclick="alert('「アラート」ボタンがクリックされました！')" mystyle="margin:0 auto;"] [st-mybutton-mini url="#" title="アラート" rel="" 〜中略〜 beacon=""] [/BTN_with_onclick]赤文字ショートコードの説明
BTN_with_onclick ：今回作ったショートコード名です。
onclick ：ダブルクォーテーションで囲まれた部分にalert関数（JavaScriptの組み込み関数）を使い『alert('「アラート」ボタンがクリックされました！'』を記述することで、ボタンのクリックが引き金で「アラート」メッセージが表示されます。
mystyle ：「 margin:0 auto; 」を記述することで、ボタン位置が中央に配置されます。 又、「 line-height:☓☓px ; 」を指定することで、ボタン高さを調整できます。
WordPress のビジュアルエディタで、「タグ」> 「カスタムボタン」 > 「ミニ」 ＞ ５種類の「ボタン」の一つを選択すると、「ミニ」ボタンのショートコードが下の様に挿入されます。 下のショートコードは、「詳しくはコチラ（レッド）」を選択した場合です。
「ミニ」ボタン・レッド
ー ショートコード ー
[st-mybutton-mini url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#ef5350" bgcolor_top="" bordercolor="" borderwidth="" borderradius="5" fontsize="" fontweight="" fontawesome_after="fa-angle-right" shadow="#f44336" ref="" beacon=""]
ショートコードのオプション説明
- url="#" ：頁内のアンカー先 または、リンク先のURL
- title="詳しくはコチラ" ：ボタンに表示するテキスト
- rel="" ：通常は無指定、relation（関係を示す）
- fontawesome="" ：Webアイコンをタイトルの（前）に設置
- target="_blank" ：アンダーバーを削除するとリンク先が新しいWindowで開く
- color="#fff" ：タイトル（テキスト）の文字色
- bgcolor="#ef5350" ：ボタンの背景色
- bgcolor_top="" ：背景色（上）
- bordercolor="" ：境界線の色
- borderwidth="" ：境界線の幅 px
- borderradius="5" ：角Rの指定
- fontsize="" ：タイトルの文字サイズ（％）文字サイズに合わせてボタンサイズも変化
- fontweight="" ：文字強調でboldを指定 デフォルトはnormal
- fontawesome_after="fa-angle-right" ：Webアイコンをタイトルの（後）に設置
- shadow="#f44336" ：影色指定
- ref="" ：on でキラリと光るアニメ指定
- beacon="" ：計測用imgを出力する属性（URL指定）
「ミニ」ボタンにonclick属性を付与する囲みショートコードを作る
point
1
予備知識
- 「ミニ」ボタンを対象にした理由：
Chromeの検証で、「ミニ」ボタンの要素を調べると、シンプルな<span>タグで構成されているため、ショートコードを作成する時にモディファイし易いので。 - 「ミニ」ボタンのaタブ（リンク機能）を停止させるには：
aタブに対して、CSSを操作するjQuery（10行目）を用いて、pointer-eventsプロパティをnoneに設定する。 更にtabindexを-1にセットする。（参考にさせて頂いたURL：https://qumeru.com/magazine/389） - onclick属性を付与するHTMLコードとjQuery script：
下に示す様に、「ミニ」ボタンのショートコード（４行目）をonclick属性を付けた<div>タブで包むことで見かけ上「ミニ」ボタンにonclick属性が付与されます。 10行目のコードは、「ミニ」ボタンのaタブのリンク機能を無効化するjQueryコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- width: fit-content;で、「ミニ」ボタンの横幅サイズで要素を包む --> <div class="nolink" style="width: fit-content;" onclick="ここにfunction（関数）又は関数名を記述"> [「ミニ」ボタンのショートコード] </div> <!-- aタブのリンクを無効化するため、jQueryでCSSを操作します --> <script> $('div.nolink a').css('pointer-events', 'none').attr('tabindex', -1); </script> |
point
2
ショートコードの作成
上記のHTMLとjQueryをショートコード化するに当たり、Post Snippets プラグインを使えば簡単です。 Post SnippetsプラグインをWordpressにインストールして有効化します。 Post Snippetsプラグインの使い方は、「小技・事例集」を参照してください。
Post Snippets（バージョンは3.1.6） 設定画面は以下の通りで、エリアに番号を振った部分に従って説明します。
① にショートコードの名称を記入します。 今回は、BTN_with_onclick にしました。
② にHTMLコードとjQuery（下記）を記述します。
10行目の{content}を記述することで、囲み型ショートコードになります。 囲み型ショートコードの間に「ミニ」ボタンのショートコードを記述することで、見かけ上「ミニ」ボタンにonclick属性が付与されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- width: fit-content;で、「ミニ」ボタンの横幅サイズで要素を包む --> <div class="nolink" style="width: fit-content;{mystyle}" onclick="{onclick}"> {content} </div> <!-- aタブのリンクを無効化するため、jQueryでCSSを操作します --> <script> $('div.nolink a').css('pointer-events', 'none').attr('tabindex', -1); </script> |
③ のVariables:変数（オプション）にコメントを記載します。
{ }で囲まれた{onclick}と{mystyle}が変数です。 ③に「onclick=functionを記述,mystyle=styleを記述」と記載します。
④ にショートコード化するので、レ点を入れます。 ⑤ にはPHPを使っていないので無記入のままです。
⑥ にショートコードの簡単な説明を記載します。 参考として以下を記載
⑥に記載する（例）「ミニ」ボタンにonclick属性を付与する囲みショートコードです。終点に[/BTN_with_onclick]を付けること。 onclick属性：例 alert('「アラート」ボタンがクリックされました！') mystyle：例として、margin:0 auto 等を記述
完成したショートコードを使うには、ビジュアルエディタから「Post Snippets」ボタンをクリックして、「BTN_with_onclick」を選択すると、編集領域に以下のショートコードが挿入されます。
shortcode [BTN_with_onclick onclick="functionを記述" mystyle="styleを記述"] ーーーー 下の様に「ミニ」ボタンをサンドイッチさせて使います。 [BTN_with_onclick onclick="functionを記述" mystyle="styleを記述"][ミニ・ボタンショートコード][/BTN_with_onclick]
注意：「BTN_with_onclick」ショートコードは、「ミニ」ボタン専用です。 他のカスタムボタンで使うとデザインが崩れます。
スポンサーリンク
【BTN_with_onclick】ショートコードを使った例（参考）
最後にW3schoolが提供しているW3.JS HTML Sort（javascriptライブラリ）faunction（関数）を利用した例を示します。
【BTN_with_onclick】のonclickにW3.JS HTML Sort 関数を組込むことで、カスタムボタン「ミニ」を使用した「都市名」「緯度」ボタンが昇順・降順（トグル動作）でソート（並び替え）します。
| Helsinki | 60.32°N |
| Oslo | 59.94°N |
| Stockholm | 59.35°N |
| Berlin | 52.47°N |
| Sapporo | 43.06°N |
| Rome | 41.89°N |
| Madrid | 40.41°N |
| Tokyo | 35.68°N |
以上、カスタムボタン「ミニ」にonclick属性を付与する囲みショートコードの作成紹介でした。 Affinger6をお使いの方のご参考になればと思います。
-
-
Affinger5（WordPressテーマ） カスタムボタン・ミニの位置（余白）調整方法
以上、Affinger5（WordPressテーマ） カスタムボタン・ミニの位置（余白）調整方法でした。 ご参考にして頂ければと思います。