Snow Monkey Formsでチェックボックスの文字にアンカーリンクをつけたくないでしょうか？
通常、Snow Monkey Formsのpチェックボックスにはアンカーリンクをつけることができません。
しかしコードを追加すると、リンクを付けることができます。
プライバシーポリシーなどの同意で使えるテクニックです。
本記事ではそのアンカーリンクをつけるカスタマイズを紹介します。
目次
Snow Monkey Formsでチェックボックスの文字にアンカーリンクをつける方法
やり方は簡単です。
fucntions.phpにコードを入れるだけです。
function enqueue_custom_script() {
wp_add_inline_script('jquery', '
document.addEventListener("DOMContentLoaded", function() {
let labels = document.querySelectorAll(".smf-checkbox-control__label");
labels.forEach(label => {
if (label.textContent.includes("プライバシーポリシーに同意する")) {
label.innerHTML = `<a href="https://motoki-design.co.jp/contact/" target="_blank">プライバシーポリシー</a>に同意する`;
}
});
});
');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');うまくいかない場合
jQueryが読み込まれてないだけなので、読み込む様にしましょう。
function enqueue_custom_script() {
// jQueryを読み込む
wp_enqueue_script('jquery');
wp_add_inline_script('jquery', '
jQuery(document).ready(function($) {
let privacyPolicy = $(".privacy-policy");
if (privacyPolicy.length) {
privacyPolicy.find(".smf-checkbox-control__label").each(function() {
let label = $(this);
if ($.trim(label.text()) === "個人情報の取り扱いについて同意する") {
label.html(`<a href="https://motoki.wpx.jp/kimono-lp/privacy-policy/" target="_blank">個人情報の取り扱いについて</a>に同意する`);
}
});
}
});
');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');
解説です。
｢プライバシーポリシーに同意する｣文字に対して、下記のアンカーリンク付きてテキストを置換しています。
<a href="https://motoki-design.co.jp/contact/" target="_blank">プライバシーポリシー</a>に同意するようするにJavaScriptで強制的に置換しているだけです。
最後に確認しましょう。
青い箇所をクリックするとURLに遷移すると思います。
以上です。
