広告 Affinger・改善

Affinger6のカスタムボタン「ミニ」にonclick属性を付与する囲みショートコードを作る

スポンサーリンク

　

 

カスタムボタン「ミニ」

（基本）

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 ; 」を指定することで、ボタン高さを調整できます。

 

 

「ミニ」ボタンにonclick属性を付与する囲みショートコードを作る

point
1 予備知識

  1. 「ミニ」ボタンを対象にした理由：
    Chromeの検証で、「ミニ」ボタンの要素を調べると、シンプルな<span>タグで構成されているため、ショートコードを作成する時にモディファイし易いので。
  2. 「ミニ」ボタンのaタブ（リンク機能）を停止させるには：
    aタブに対して、CSSを操作するjQuery（10行目）を用いて、pointer-eventsプロパティをnoneに設定する。　更にtabindexを-1にセットする。（参考にさせて頂いたURL：https://qumeru.com/magazine/389）
  3. onclick属性を付与するHTMLコードとjQuery script：
    下に示す様に、「ミニ」ボタンのショートコード（４行目）をonclick属性を付けた<div>タブで包むことで見かけ上「ミニ」ボタンにonclick属性が付与されます。　10行目のコードは、「ミニ」ボタンのaタブのリンク機能を無効化するjQueryコードです。

 

オペレータ
オペレータ
以上のコードをWordpressのテキストエディタ（又はHTMLブロックエディタ）で記述するのは、面倒ですので、上記コードをショートコード化すれば容易に使い回すことができます。

 

point
2 ショートコードの作成

上記のHTMLとjQueryをショートコード化するに当たり、Post Snippets プラグインを使えば簡単です。　Post SnippetsプラグインをWordpressにインストールして有効化します。　Post Snippetsプラグインの使い方は、「小技・事例集」を参照してください。

Post Snippets（バージョンは3.1.6） 設定画面は以下の通りで、番号を振ったエリアに従って説明します。

① にショートコードの名称を記入します。　今回は、BTN_with_onclick にしました。
② にHTMLコードとjQuery（下記）を記述します。

10行目の{content}を記述することで、囲み型ショートコードになります。　囲み型ショートコードの間に「ミニ」ボタンのショートコードを記述することで、見かけ上「ミニ」ボタンにonclick属性が付与されます。

③ のVariables:変数（オプション）にコメントを記載します。

{ }で囲まれた{onclick}と{mystyle} 及び {id_name}が変数です。　③に「onclick=functionを記述,mystyle=styleを記述 ,id_name=btn_onclick」と記載します。

追記：2024/5/10
onclick属性を使わないで、このidで示される要素に対してclickイベントがあった時にファンクションを実行できる様にするために、このショートコードにid属性としてid_name=btn_onclickを追記しました。　この場合は、id_nameは同一ページ内で重複無く一位の名前にすることが必要です。

 

④ にショートコード化するので、レ点を入れます。　⑤ にはPHPを使っていないので無記入のままです。

 

⑥ にショートコードの簡単な説明を記載します。　参考として以下を記載
⑥に記載する（例）
「ミニ」ボタンにonclick属性を付与する囲みショートコードです。終点に[/BTN_with_onclick]を付けること。　onclick属性：例 alert('「アラート」ボタンがクリックされました！')　 mystyle：例として、margin:0 auto 等を記述

 

オペレータ
オペレータ
最後に、Post Snippetsの【Save】ボタンを押して「BTN_with_onclick」ショートコードの完成です。　

完成したショートコードを使うには、ビジュアルエディタから「Post Snippets」ボタンをクリックして、「BTN_with_onclick」を選択すると、編集領域に以下のショートコードが挿入されます。

 shortcode
[BTN_with_onclick onclick="functionを記述" mystyle="styleを記述" id_name="btn_onclick"]
ーーーー
下の様に「ミニ」ボタンにサンドイッチさせて使います。
[BTN_with_onclick onclick="functionを記述" mystyle="styleを記述" id_name="btn_onclick"][ミニ・ボタンショートコード][/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

 

上記、Table表のソート方法について、詳しくは下の記事を見てください。

参 照
Affinger6の「ミニ」ボタンにW3schoolが提供しているW3.JSのソート機能を実装する。

W3schoolsが提供しているW3.JS は、Web 開発プロジェクトを簡素化するために設計された JavaScript ライブラリです。　ライブラリは９つのfunction（関数）が含まれており、 ...

 

以上、カスタムボタン「ミニ」にonclick属性を付与する囲みショートコードの作成紹介でした。　Affinger6をお使いの方のご参考になればと思います。

 

関連記事
Affinger5（WordPressテーマ） カスタムボタン・ミニの位置（余白）調整方法

　 以上、Affinger5（WordPressテーマ） カスタムボタン・ミニの位置（余白）調整方法でした。　ご参考にして頂ければと思います。  

　

スポンサーリンク

　


関連記事 (Tag related)

スポンサーリンク