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

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

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

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

無料パソコンスクール講座
WordPress・SEO・プログラミング

あなたに以下のことで 悩んでないだろうか?

  • 「フリーランスになりたいけど稼げるか不安だ」
  • 「クラウドソーシングや営業して稼げるか不安だ」
  • 「転職で必要になり困っている」
  • 「スマホはあるけどパソコンが古くて不安だ」
  • 「広告やLINEからの集客を得たい」
  • 「仕事でグラフや資料制作を思うように作れない」
  • 「プログラミングを学習して副業したいけど不安だ」
  • 「副業をはじめたが、いっこうに成果がでない」
  • 「退職してノートパソコンだけで収入を得たい」
  • 「何がわからないかわからない状態が続き何度も挫折した」
  • 「在宅で稼げるようになりたい」
  • 「副業で収入を得たい」

そんなお悩みのあなたにこそ 取得して頂きたい内容です!

このメディアを運営している制作・プログラミング相談のプロが
全て無料で相談と学習できるように
無料スクールのメルマガ講座を開設しました。

いまなら、先着300部限定で無料プレゼント付です。

コード

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

[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