WordPressプラグイン「Custom Field Suite（CFS）」を使って、テキストエリア形式のフィールドに文字数入力制限とカウンター機能を追加する方法をご紹介します。このカスタマイズにより、ユーザーは設定した文字数を超えないようにしつつ、入力済みの文字数をリアルタイムで確認できるようになります。さらに、CFSが付与するクラス名のルールを理解することで、特定のフィールドにスタイルやスクリプトを適用する方法も解説します。
Custom Field Suiteでのクラス名ルール
CFSで生成されるフィールドには、次のようなクラス名が自動的に付与され、フィールドの種類や名前に応じて分類されます：
- field：CFSで生成されたすべてのフィールドに共通で付与される基本的なクラスです。
- field-フィールド名：フィールド名がクラス名として反映されます。例えば、フィールド名が「content」の場合、クラス名は
field-contentになります。このクラス名を使うことで、特定のフィールドにスタイルやスクリプトを適用しやすくなります。 - cfs_フィールドタイプ：フィールドの種類に基づいたクラスです。例えば、テキストエリア形式のフィールドには
cfs_textareaが追加されます。これにより、フィールドのタイプごとにカスタマイズが可能です。
例：テキストエリアフィールドのDOM構造
以下は、CFSで作成されたテキストエリア形式のフィールドのDOM構造の例です：
<div class="field field-content cfs_textarea">
<textarea name="cfs[input][7][0][8][0][13][value][]" class="textarea" rows="4">テキスト内容</textarea>
</div>この構造では、以下のクラス名が付与されています：
- field：すべてのCFSフィールドに共通のクラス
- field-content：フィールド名「content」に基づいて生成されたクラス
- cfs_textarea：テキストエリア形式を表すクラス
これらのクラス名のルールを理解することで、必要なスタイルやスクリプトをフィールドごとに適用しやすくなります。
入力制限と文字数カウンターの実装コード
次に、ページ読み込み時に指定のテキストエリアに最大文字数を設定し、入力した文字数をリアルタイムで表示するスクリプトを実装します。さらに、動的に追加された要素にも適用するために、MutationObserverを使用します。以下のコードをWordPressのfunctions.phpに追加してください。
/**
* Custom Field Suite
* テキストエリア形式フィールドの入力制御
*/
function custom_textarea_char_limit_script()
{
echo '
<script>
document.addEventListener("DOMContentLoaded", function() {
var maxChars = 100; // 制限文字数を設定
function applyCharLimit(textarea) {
var currentLength = textarea.value.length; // 現在の入力済み文字数を取得
var counter = document.createElement("div");
counter.className = "char-counter";
counter.textContent = currentLength + " / " + maxChars; // 初期表示の文字数を設定
textarea.parentNode.appendChild(counter);
textarea.addEventListener("input", function() {
currentLength = textarea.value.length;
counter.textContent = currentLength + " / " + maxChars;
if (currentLength > maxChars) {
textarea.value = textarea.value.substring(0, maxChars);
counter.textContent = maxChars + " / " + maxChars;
}
});
}
// 初期のテキストエリアに適用
var textareas = document.querySelectorAll(".field-content .textarea");
textareas.forEach(applyCharLimit);
// 新しく追加された要素に対応するためのMutationObserver
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && node.matches(".field-content .textarea")) {
applyCharLimit(node);
} else if (node.nodeType === 1) {
var newTextareas = node.querySelectorAll(".field-content .textarea");
newTextareas.forEach(applyCharLimit);
}
});
});
});
// body要素の子要素の追加/変更を監視
observer.observe(document.body, { childList: true, subtree: true });
});
</script>';
}
add_action('admin_footer', 'custom_textarea_char_limit_script');コードの解説
- 文字数の設定:
maxCharsに制限文字数（この例では100）を設定します。 - applyCharLimit関数: 各テキストエリアに文字数カウンターを追加するための関数です。カウンターは、テキストエリアの下に現在の文字数と最大文字数を表示します。入力イベントが発生するたびに、入力文字数を更新し、設定した最大文字数を超える場合は自動的にカットします。
- 初期設定:
.field-content .textareaクラスを持つすべてのテキストエリアに対してapplyCharLimitを実行し、カウンターを追加します。 - MutationObserver: ページ内のDOM変化を監視し、動的に追加されたテキストエリアにもカウンターを適用します。特に、フォームが動的に追加される場合や変更が行われる場合に役立ちます。
まとめ
このコードを追加することで、CFSのテキストエリア形式フィールドに対して簡単に文字数入力制限とカウンター機能を実装できます。また、CFSのクラス名ルールを理解することで、特定のフィールドやフィールドタイプに的確にスタイルやスクリプトを適用できるようになります。動的に追加されるフィールドにも対応可能なため、柔軟なカスタマイズが可能です。
コメント