【WordPress】HTMLタグを除いた文字数カウントを表示する

当ページのリンクには広告が含まれています。

文字数のカウントを確認するとテキスト以外、特にHTMLタグ内の文字数がとても邪魔です。文字数が多いので実際の数字の確認がしにくい。

これ何とかできないものか・・・と色々ググっていたのですが、ドンピシャがちょっと見つけられなかったので、色々なサイトさんのやり方を組み合わせたらそれっぽいのができたのでこちらで載せてみます。

目次

【完成版】文字数カウント列を追加したもの

実際に文字数列を追加した(投稿一覧画面の右端の方)画像を貼ってみます。

編集前の投稿一覧画面

PV列までしか表示がない状態。

編集後の投稿一覧画面

PV列の右側に「文字数」列が表示されています。実際の数字とは多少ズレますが・・・

編集画面内の「アウトライン」上の数字はHTMLタグを含んだ数字

編集画面の左上の「ドキュメント概観」ボタンを押すと下記のアウトラインから編集中の記事の文字数などが確認できます。今まではこちらで確認していたのですが、こちらだとHTMLタグの文字数まで拾ってしまうのがネック。

HTMLタグの文字数が多いと実際のテキストの文字数の把握がしにくくなる

こちらが実際のアウトライン上の文字数の画面。この中にはカスタムHTML内の文字数もカウントされてしまっています。ですが本来こちらはカウントしてほしくない・・・(1241文字)

こちらが実際にサンプルとして入れたカスタムHTMLです(半角22文字)

カスタムHTMLを削除すると、アウトラインの数字が変わります(1219文字)

文字数の差分が丁度22文字なのでばっちりカウントされていたのが分かると思います。今回は短いコードだったので大したことないのですが、長いリンクだとかなりの誤差になります。

HTMLタグの中の文字数をカウントしない本文文字数を取得したい!

タグ内にリンクコードなどを入れるため、文字数がすごく多く見えてしまいますが、実際はほぼリンクコード・・・なんてこともあったりします。これだと自分が書いたテキストの正確な数が分からないので、何とかしたい。

色々ググった結果、ほぼ私が望んでいた通りの数値が取得できたので手順をまとめます。

functions.phpを変更します。私はSWELLを使用しているので他のテーマを使用している方はPHPの記載場所は別途ご確認ください。

またこちらの記事の内容について当サイトは一切の責任を負いません。自己責任で、必ずバックアップなどを取る、テスト環境で試すなど対策を行ってテストしてください。

テストする際は念の為プラグインなのでテスト環境にしておくのもいいようですよ。私はごり押しましたがで一応戻せるようにはしておきました。

加工前のfunctions.phpのコード画面を全選択→コピー→メモ帳へ貼付け

失敗した場合は再度元のコードを貼り付ければ戻る(はず)でも絶対じゃないので、バックアップ取るのが一番です!

コード編集画面(functions.php)を開く

ちなみにSWELLだと子テーマがあるので、そちらを選択して作業進めています。

STEP
サイドメニューから「外観」→「テーマファイルエディター」を選択

初めてテーマファイルエディターを開こうとすると、警告メッセージみたいなのが出ます。ちゃんと読んで対策してから進めてください。

STEP
開いた画面右側の「編集するテーマを選択」で対象テーマを確認する。

こちらはテーマによって選択するものが違うと思います。私の場合はSWELLだったので、SWELLの子テーマが選択されています。もし親テーマになっていたら子テーマ(CHILD)に直しましょう。

たぶんcocoonとかも子テーマあるはず(以前使っていた記憶)

STEP
右下のテーマファイルから「テーマのための関数」を選択

今回は「function.php」を変更したいのでこちらを選択します。

STEP
以降は入力スペース内の「親テーマのfunctions-phpのあとで読み込みたいコード」の下のコード内に入力する

こちらのコードの中に書いていきます。

add_filter('after_setup_theme',function(){
}, 11);

コメント状態を(行頭の「//」を消す)解除します。

	add_filter('after_setup_theme', function(){

// 1_投稿一覧に文字数列を追加----------
    add_filter('manage_posts_columns', 'add_custom_columns');
    add_action('manage_posts_custom_column', 'output_custom_admin_columns', 10, 2);

    // カラム追加
    function add_custom_columns($columns)
    {
        $columns['content-length'] = '文字数';
        return $columns;
    }

    // 表示設定
    function output_custom_admin_columns($column_name, $post_id)
    {
        // 文字数
        if ($column_name === 'content-length') {
            $content = wp_strip_all_tags(get_the_content(), true);
            apply_filters('the_content', $content);
            echo mb_strlen($content);
		}
	}
// 1_----------------------------------

	}, 11);

コードの部分はこんな感じです。列を追加するコードや文字の取得するコードについて掲載されているサイトさんを参考に混ぜ混ぜしてみました。超初心者作成なので、おかしなところは調整してください。

STEP
画面下の方にある「ファイルの更新」をクリックすると内容が保存されます

コード上の間違いであればこの時点でエラー表示が出てロールバックされます。

気になる関数は自分で簡単に確認ができる

余談ですが、画面の下の方にある「解説:関数名」というドロップダウンから、現在書いてあるコードについて確認することができる。

選択した状態で「調べる」をクリックすると該当コードのリファレンスを開いてくれる。とっても親切!

ちょっと不満を言うならやっぱり英語なので私みたいに日本語以外の長文は呪文に見える・・・という人は素直に翻訳して確認しても大体はわかると思います。

私はもうちょっと英語の理解力あげないとだめよね・・・

まとめ

色々調べたものをもとに自分なりにやってみました。私としては臨んだ結果が出たので満足です。

実際やってみたら全然違うじゃん!てなったらすみませんが諦めて改良してください・・・私の環境でいくつか確認した感じだと多少のずれはあるもののそれほど大きな誤差はないかなと・・・(100文字以下のずれはある)

改行コードなのか?それ以外なのか?ちょっとわかんないですごめんなさい・・・

私のようにWordPressのカスタマイズに余り慣れてない人でもなんとかなったよ!ということで、参考になれば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次