wordpress カスタムフィールド・抜粋の文字数カウント

ワードプレスを使用しています。
カスタムフィールドでテキストボックスを表示しているのですが、そこに入力した文字数をリアルタイムに数えさせることはできますか？

また、「抜粋」の入力欄を表示し、手打ちしています。
これも文字数を数えたいのですが、表示させる方法はありませんか？

いろいろな書き方で調べてみたのですが、抜粋については、「文字数を制限する方法」しか出てこず困っています。
あくまでも入力しながら、今何文字打ってあるのかが知りたいです。

No.3 ベストアンサー 回答者： de_viant 回答日時： 2018/10/27 10:07

ポストタイプで判定させないと他のページでエラーになるようなので、記事投稿画面で動くようにコードを修正しました。

//Wordpress投稿画面のタイトル文字数をカウントする
function count_title_characters() {
global $post_type;
if ($post_type == 'post') {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//in_selの文字数をカウントしてout_selに出力する
function count_characters( in_sel, out_sel ) {
$(out_sel).html( $(in_sel).val().length );
}

//表示エリアを出力--#postexcerpt .inside
//管理画面でIDやclassがどう付けられているか確認してみてください
$('#postexcerpt .inside').after('<table style="width:100%;font-size:12px;color:#666;background-color:#f7f7f7;padding:1px 2px;border:1px solid #ccc;"><tbody><tr><td>文字数<span class="wp-title-count" style="margin-left:5px;">0</span></td></tr></tbody></table>');

//ページ表示時に数える
//カウントする場所--#excerpt、その数字を書き込む場所--.wp-title-count
count_characters( '#excerpt', '.wp-title-count' );

//入力フォーム変更時に数える
$('#excerpt').bind("keydown keyup keypress change",function() {
count_characters( '#excerpt', '.wp-title-count' );
});

});
</script><?php
}}
add_action( 'admin_head-post-new.php', 'count_title_characters' );
add_action( 'admin_head-post.php', 'count_title_characters' );

この回答へのお礼

ありがとうございます！
諸事情で動作確認がまだなのですが、触れるようになったらすぐにやってみます！

内部コード？ショートコードというんでしょうか？で抜粋を指定しないといけないと思っていたのですが、html側のidを指定すればいいんですね。
カスタムフィールドについても教えていただいたものを参考に頑張ってみようと思います。

回答ありがとうございましたm(_ _)m

お礼日時：2018/10/29 13:53

No.2 回答者： de_viant 回答日時： 2018/10/26 21:25

ある程度コードが読めないとカスタマイズは難しいと思います。

（意味まで理解しなくても大丈夫だと思います。わたしもあまり理解していません）

「カスタムフィールド」でも「抜粋」でも紹介したサイトのコードをカスタマイズすれば可能だと思います。とりあえず、「カスタムフィールド」をどうやって設置したかわからないので、「抜粋」の方のコードを載せておきます。（ただ、環境によっては違うかもしれませんので、なので、コードは読めた……）
以下のコードをfunctions.phpへ書き込んでください。

function count_title_characters() {?>
<script type="text/javascript">
jQuery(document).ready(function($) {
//in_selの文字数をカウントしてout_selに出力する
function count_characters( in_sel, out_sel ) {
$(out_sel).html( $(in_sel).val().length );
}

//表示エリアを出力--#postexcerpt .inside
//管理画面でIDやclassがどう付けられているか確認してみてください
$('#postexcerpt .inside').after('<table style="width:100%;font-size:12px;color:#666;background-color:#f7f7f7;padding:1px 2px;border:1px solid #ccc;"><tbody><tr><td>文字数<span class="wp-title-count" style="margin-left:5px;">0</span></td></tr></tbody></table>');

//ページ表示時に数える
//カウントする場所--#excerpt、その数字を書き込む場所--.wp-title-count
count_characters( '#excerpt', '.wp-title-count' );

//入力フォーム変更時に数える
$('#excerpt').bind("keydown keyup keypress change",function() {
count_characters( '#excerpt', '.wp-title-count' );
});

});
</script><?php
}
add_action( 'admin_head-post-new.php', 'count_title_characters' );
add_action( 'admin_head-post.php', 'count_title_characters' );

CSSを変更すれば表示方法は変更できます。

ポイントになるのは、「カウントする場所」「それを表示する場所」このIDやクラスがわかれば、上のコードのその部分を変更すれば応用できます。

「抜粋」の場合、「カウントする場所」は
<textarea row="1" cols="40" name="excerpt" id="excerpt"></textarea>
なので、id="excerpt"で#excerptとなります。
「それを表示する場所」は、同じように見ていって、#excerpt .insideとなります。
（これは、試行錯誤でこの結果を得ました。javascriptがバッテイングすることがあるので……）

No.1 回答者： de_viant 回答日時： 2018/10/25 23:04

以下が参考になるのでは。

WP管理画面でタイトル文字数カウンターを表示するカスタマイズ方法
ttps://nelog.jp/wordpress-title-char-counter

この回答へのお礼

回答ありがとうございます。
こちら拝見済でして、他の頁にもタイトルの文字数をカウントする方法はあるのですが、
カスタムフィールドの文字数や抜粋の文字数を数える方法が見つからず質問させていただきました。
応用して自分でというのは無理そうです…

どこをどう変えたらいいかなどわかる方いらっしゃれば教えていただきたいです

お礼日時：2018/10/26 10:01