[掲載日] ([更新日] ) この記事は約 4 分で読めます

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

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

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

有名書籍が初月無料で読み放題

オーディオブックが初月無料。

有名書籍が1か月読み放題です。
読書より簡単に勉強できる、聞く本オーディオブック

苦手だった読書も苦手だった勉強も
これなら今日からできる!

今すぐ無料で読書体験する

コード

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

[php]
<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>
[/php]

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

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

[php]<p>◆書き出し(必須) <span class="count1">0</span>文字<br />[text* category01 placeholder "カテゴリー名"]</p>
<p>[text* title00 placeholder "記事のタイトル"]</p>
<p>[textarea* bun00 id:content1 placeholder "書き出し"]</p>
<p>◆小見出し <span class="count2">0</span>文字<br />[text title01 placeholder "小見出し"]</p>
<p>[textarea bun01 id:content2 placeholder "コンテンツ本文"]</p>
<p>◆小見出し <span class="count3">0</span>文字<br />[text title02 placeholder "小見出し"]</p>
<p> [textarea bun02 id:content3 placeholder "コンテンツ本文"]</p>
<p>◆まとめ(必須) <span class="count4">0</span>文字<br />[text* title03 placeholder "小見出し・まとめ"]</p>
<p> [textarea* bun03 id:content4 placeholder "まとめ本文"]</p>
<p>◆お名前(必須)<br />[text* name01 placeholder "お名前"]</p>
<p>◆メール(必須)<br />[email* mail01 placeholder "メールアドレス"]</p>
<p>[submit "送信"]</p>
[/php]

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

ポイント

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

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

まとめ

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

ダウンロードする

参考サイト

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

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

アバター
gotacさん

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

[2014/10/25]
    アバター
    ラクザネットさん

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

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

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

    [2014/10/27]

コメントをする

メールアドレスは公開されませんのでご安心下さい。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください