アトリエロワ

AdoAdvanced Custom Fields のテキストエリアにカウンター

AdoAdvanced Custom Fieldsのテキストエリアに入力した文字数を見ながら調整したい時に使えるカウンター。

functions.phpに下記を記載

●●●●はacfの値

  function acf_add_character_counter() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var field = document.querySelector('[data-name="●●●●●●"] textarea'); 
            if (!field) return;

            var counter = document.createElement("div");
            counter.id = "char-count";
            counter.style.marginTop = "5px";
            field.parentNode.appendChild(counter);

            function updateCounter() {
                counter.textContent = "文字数: " + field.value.length;
            }

            field.addEventListener("input", updateCounter);
            updateCounter(); // 初回表示
        });
    </script>
    <?php
}
add_action('acf/input/admin_footer', 'acf_add_character_counter');

HOME > wordpress設計術 > AdoAdvanced Custom Fields のテキストエリアにカウンター

wordpress設計術

wordpress設計術

+ More