Advanced Custom Fieldsで作成したカスタムフィールドで、入力している文字数が現在●文字かをリアルタイムでカウントするjavascriptを自作しました。
私の場合は、SEOタイトルやSEOディスクリプションの設定でカスタムフィールドを追加しているので、文字数カウントは必須です。
カスタムフィールドのリアルタイムカウントとは、下記の画像のように入力文字がカウントできます。
Advanced Custom Fieldsの設定では文字数制限はできますが、カウントが出来ないのでjavascriptで自作しました。
カスタムフィールド文字数リアルタイムカウントのjavascript
[swpm_protected custom_msg=’ここから先の閲覧にはログインが必要です。ナレッジの会員登録がまだの方はナレッジについてをご確認くださいませ。’]まず、カスタムフィールドを設定します。
次にカスタムフィールドを反映した場所を確認して、デベロッパーツールで、フィールドのid名を調べます。
今回の画像の例だと、下記のid=”acf-field_62cd3bdfdfe52″のacf-field_62cd3bdfdfe52 のことです。
<input type="text" id="acf-field_62cd3bdfdfe52" name="acf[field_62cd3bdfdfe52]"></input>続いてjavascriptがこちらです
// ローディング後にしないと、先にこちらのコードが読まれてidが見つかりませんエラーになる
window.addEventListener('load', () => {
const acfTextCount_Number = (acfNumber) => {
// 下記でACFで付与された入力部分のinputのidを取得。idは入力部分によって変わるので毎回導入の際はプラグインでフィールド設置後に作業する
let aaa = document.getElementById(acfNumber);
// フィールドの入力部分はvalueの内容なのでvalueを取得してvalueのlength(文字数)をカウント
let count = aaa.value.length
// 下記で任意のforが入ったlabelを指定 ※今回はidとforが同じなので同じ単位
let hoge = document.querySelector('label[for=' + acfNumber +']');
console.log(hoge)
// 下記でlabel下にspanタグでid名を付けた「0文字」のテキストを追加（spanにした理由はインライン要素にして横並びをしたい為）
let counttext = document.createElement('span');
counttext.style.marginLeft = '30px';// styleはご自由に
counttext.setAttribute("id", "counttext_id" + acfNumber);
counttext.innerHTML = count + '文字';
hoge.appendChild(counttext);
// onkeyupでリアルタイムに反応
aaa.onkeyup = function(){
let count = aaa.value.length
// 下記で追加したpタグのidを指定して、その文章をリアルタイムの文字数カウントに変更
let bbb = document.getElementById("counttext_id" + acfNumber);
bbb.innerHTML = count + '文字';
}
}
acfTextCount_Number('acf-field_62cd3bdfdfe52');//ここに調べたカスタムフィールドのid名を記載
});
続いて先ほどjavascriptを投稿ページや固定ページの編集画面に呼び出す為に、functions.phpに下記を記載
//-----------投稿の編集と新規投稿画面でのみ読み込むスクリプト-----------//
function acf_textcount_enqueue($hook_suffix)
{
if ('post.php' === $hook_suffix || 'post-new.php' === $hook_suffix) {
wp_enqueue_script('custom_js', get_template_directory_uri() . '/afc-count.js', array('jquery'));//afc-count.jsの部分はjavascriptを記載したファイル名に変更してください。
}
}
add_action('admin_enqueue_scripts', 'acf_textcount_enqueue');これで設定は完了です。
文字数カウントが表示されない・カウントされないなどの場合は、下記が考えられます。
・afcのid名が間違っている
・functions.phpでjavascriptを呼び出すファイル名が間違っている。または階層が間違っている。
以上です。
カスタムフィールドを設置するプラグインではトップクラスに人気のAdvanced Custom Fieldsなのに、結構需要がありそうな入力文字数リアルタイムカウントが調べても出てこなかったので自作しました。
[/swpm_protected]
