更新日2015/07/31 この記事は約 1 分で読めます。

WordPress contactform7 に文字数カウントを実装してライターやスタッフ向けに制作する方法

wordpress

あなたは「ライターやスタッフさん向けに文字数をカウントしたい」と思ったことはありませんか?
しかも、Wordpressのcontactform7を使って簡単にカウント出来たらなと思ったこともありませんか?

わたしはありました。
ライターさん向けに、ライターさんが書いた文字数が表示出来たらいいなと。
Wordpressにログインすれば表示されますが、決まったフォームに入力してもらう型式の時は、とくに必要になるんじゃないでしょうか?

コード

探したらありましたので、
ご紹介と若干改良したものをダウンロード出来るようにしておきましたのでご活用下さい。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#content1,#content2,#content3,#content4').bind('keyup',function(){
        for ( num=1; num<=4; num++ ) {
            var thisValueLength = $("#content" + num).val().replace(/\s+/g,'').length;
            $(".count" + num).html(thisValueLength);
        }
    });
});
</script>

今回は4つのテキストフィールドと4つのタイトルを使います。

次にcontactform7 に行き以下をコピペして下さい。

<p>◆書き出し(必須) <span class="count1">0</span>文字<br /></p>
<p></p>
<p>[textarea* bun00 id:content1 placeholder "書き出し"]</p>
<p>◆小見出し <span class="count2">0</span>文字<br /></p>
<p>[textarea bun01 id:content2 placeholder "コンテンツ本文"]</p>
<p>◆小見出し <span class="count3">0</span>文字<br /></p>
<p> [textarea bun02  id:content3 placeholder "コンテンツ本文"]</p>
<p>◆まとめ(必須) <span class="count4">0</span>文字<br /></p>
<p> [textarea* bun03 id:content4 placeholder "まとめ本文"]</p>
<p>◆お名前(必須)<br /></p>
<p>◆メール(必須)<br />[email* mail01 placeholder "メールアドレス"]</p>
<p>[submit "送信"]</p>

ショートコードが混ざってしまいWordpress上だと上手く表示出来ないのでダウンロードファイルを参考にして下さい。

ポイント

#content1 と id:content1 と count1 が1セットになります。
数を増やしたい場合はなどはこの数字を増やして下さい。

Wordpress contactform7 に文字数カウントを実装

まとめ

ライターさんやスタッフさんだけでなく他にも使い方あるかも知れませんね。

ダウンロードする

参考サイト

参考にさせていただいたサイトをご紹介します。
http://wataame.sumomo.ne.jp/archives/2589

「WordPress contactform7 に文字数カウントを実装してライターやスタッフ向けに制作する方法」への2件のコメント

  1. gotac より:

    こちらの方法はスマートフォン対応されていますでしょうか。
    手持ちのiPhone6では文字数がカウントされませんでした。
    ご報告まで

    1. ご連絡ありがとう御座います。
      iphoneで該当ページの動作確認したところ動作しております。
      同様にipadでも動作致します。

      この例題では、タイトルをカウントしません。
      そのため本文のみのカウントになります。

      可能であれば、動作確認されてたURLをご提示いただけると調査可能です。

WordPress contactform7 に文字数カウントを実装してライターやスタッフ向けに制作する方法へコメントをする

※メールアドレスは公開されません。