ボタンの上に指アイコンを表示する機能

ページ遷移高速化（pjax）を使っていても消えないようにする

SWELL設定の高速化にある「ページ遷移高速化」をオンにしていると、ページを移動したときにJavaScriptが読み直されません。指アイコンをJavaScriptで付ける作りだと、2ページ目以降でアイコンが出なくなります。ここは実際にぶつかりやすい箇所です。

そこで表示はCSSを主体にし、JavaScriptは必要な箇所に限ったうえで、ページの中身が入れ替わったことを検知して付け直す形にします。同じ要素に二重に付かないよう、処理済みの印を見てから動かします。

// 同じ要素を二度処理しない（何度呼ばれても結果が変わらないようにする）
function apply(root) {
  root.querySelectorAll('[data-fgi]').forEach(function (el) {
    if (el.dataset.fgiReady) return;   // 処理済みなら飛ばす
    el.appendChild(makeIcon());
    el.dataset.fgiReady = '1';
  });
}

// pjaxやAjaxで中身が差し替わったら付け直す
new MutationObserver(function () { apply(document); })
  .observe(document.body, { childList: true, subtree: true });

テーマ側の装飾とぶつからないようにする

SWELLボタンは矢印やアイコンの表示に、CSSの疑似要素（::before / ::after）を使っています。同じ場所を指アイコンでも使うと、テーマ側の装飾を消してしまったり、逆に指アイコンが出なくなったりします。

そのため指アイコンは疑似要素ではなく、専用の要素を1つ重ねる形にします。クラス名にも他とかぶらない接頭辞を付けて、他のプラグインのCSSと打ち消し合わないようにします。

お問い合わせフォームの送信ボタンは作りが違う

お問い合わせフォームの送信ボタンは <input type="submit"> という要素で、この要素の中には他のものを入れられない決まりになっています。CSSだけでは指アイコンを重ねられません。

対象に含める場合は、送信ボタンの外側に入れ物を1つ作ってから重ねます。フォームの送信動作には手を入れないので、送信できなくなることはありません。上の一覧で実際に動かして確かめていただけます。

WordPress本体やPHPのバージョンに依存させない

この機能は外部との通信をしません。データベースにも表を作りません。WordPress本体やPHPのバージョンによって書き方が変わるような処理を持たせないので、本体やPHPの更新で動かなくなる可能性は低く抑えられます。

とはいえゼロとは申し上げられないので、納品後3ヶ月の無償保守は、SWELLやWordPressの更新で不具合が出た場合も含めてお受けします。