『ここがイヤ！』SWELLの投稿一覧で『文字数が表示されない』の解決法2選

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

おこめちゃん

おい！SWELLの投稿一覧に文字数がないんだけど、そこんとこどうよ？

ひきお

いや、普通に表示させられるぞ？

おこめちゃん

エエっ！！うそん！？どうやんの？

Cocoon（コクーン）のテーマで当たり前と思っていた投稿一覧の『文字数表示』ですが、SWELLでは表示されません。

Cocoonユーザーの中には「文字数表示がないからヤダ！」とSWELLへの乗り換えをためらっている方もいるのでは？

ですが、SWELLでも投稿一覧に文字数を表示させる方法があります。

結論：SWELLで文字表示させる方法は2つ！

表示方法①

ファイルマネージャーにコードを挿入
難易度が高い
プラグイン不要

表示方法②

プラグイン『Code Snippets』を使う
簡単にできる
プラグイン追加が必要

この記事では、SWELLの投稿一覧に文字数を表示さる方法をわかりやすく解説するので、ぜひ参考にしてください。

ひきお

ブログ歴5年、SWELL大好きのひきおがお伝えします。

おこめちゃん

SWELLで文字数を表示させて、記事の管理を楽にしましょう。

SWELL 使ってますか？

良いブログサイトを作るには魅力的なデザインのテーマが必要です

碇ひきお

Cocoon撲滅計画、始動。

おこめちゃん

撲滅させるんかい〜！！

＼本気ブログはSWELLで決まり！／

SWELLのおすすめポイント

データ比較で収益アップ
豊富で多彩なデザイン
作業効率アップ機能満載
サイトスピードアップ
複数サイトで利用可能

＼機能を見てみてね！／

SWELLのデモサイトを見てみる

碇ひきお

エヴァンゲリヲンを見るならU-NEXT。31日間無料。

おこめちゃん

宣伝もするんか〜い！

＼エヴァンゲリヲンをチェック！／

SWELLで文字数を表示させる方法は2つ

ブログテーマのSWELLで投稿画面に『文字数』を表示させる方法は2種類あります。

まずはそれぞれの特徴を確認して、どちらの方法で表示させるか決めましょう。

表示方法①

子テーマのfunctions.phpにコードを追記
難易度が高い
プラグイン不要
中上級者向け

表示方法②

Code Snippetsプラグインを使う
簡単にできる
プラグイン追加が必要
初心者向け

おこめちゃん

結局のところ、どっちがいいの？

ひきお

プラグインを追加するかどうかで判断するといいぞ。

プラグインを追加する方が簡単なので、初心者の方は表示方法②がおすすめです。

SWELLを使いこなして強力なブログサイトを作りましょう。

＞＞＞SWELLの特徴を見てみる

＼本気でブログするならSWELL！／

子テーマのfunctions.phpにコードを追記

SWELLでの文字数を表示させる1つ目の方法はレンタルサーバー（ConoHa WINGやXサーバー）の管理画面にあるファイルマネージャーにコードを追加する方法です。

子テーマの『SWELL CHILD』のファイルマネージャーにコードを挿入すれば、SWELLの投稿一覧画面でも文字数が表示されます。

この方法の最大のメリットはプラグインを追加する必要がないことです。

おこめちゃん

プラグインを追加するとなんかあるんだっけ？

ひきお

プラグインはサイトが重くなって表示が遅くなることがある。

プラグインをたくさん入れていて「これ以上増やしたくない！」というブロガーは、この方法がおすすめです。

ですが失敗すると最悪の場合、管理画面にログインできなくなってしまうので細心の注意を払いましょう。

ひきお

なのでこの方法は初心者よりは中上級者向けといえる。

おこめちゃん

ふーん。じゃあ手順を見てやれそうならやってみようかな？

＞＞＞functions.phpにコードを追記する手順を確認する

ひきお

手順通りやれば間違いないので、ぜひ試してみてくれ。

Code Snippetsプラグインを使う

SWELLでの文字数を表示させる2つ目の方法はCode Snippetsプラグインを使ってコードを挿入して文字数を表示させる方法です。

この方法は、前述したテーマファイルを直接編集する必要が何ので初心者でも安全に文字数を表示させられます。

デメリットとしてはプラグインを追加するためサイトが重くなる、ということです。

おこめちゃん

プラグインを追加するとどれくらい重くなるの？

ひきお

影響は少ないのであまり気にしなくてもいいかもな。

とにかく安全で簡単に文字数を表示させたいというブロガーはCode Snippetsのプラグインを使いましょう。

＞＞＞プラグインCode Snippetsで文字数を表示する手順

functions.phpにコード追記で文字数を表示する手順

プラグインを追加によるサイトスピード悪化を懸念する方は子テーマのfunctions.phpにコードを追記する表示方法①で追加しましょう。

あまり初心者向けの方法とは言えませんが、プラグインを追加する必要がないのがメリットです。

ここでは子テーマのfunctions.phpにコードを追加する手順を3ステップで解説します。

テーマにコードを追加する手順

親テーマに追加してしまうとアップデートの際にそれまで行ったカスタマイズが全て失われてしまうでの注意しましょう。

STEP

ファイルマネージャーを開く

まずはConoHa Wingの管理画面でファイルマネージャーを開きましょう。

WING
サイト管理
ファイルマネージャー

の順番でクリックしましょう。

ファイルマネージャーは別タブで開きます。

ひきお

ファイルマネージャーを開いたらfunctions.phpにコード追加するぞ。

STEP

swell_childのfunctions.phpを開く

別タブでファイルマネージャーが開くので次は以下の順番でクリックしていきます。

public_html
サイトのURL
wp-content
themes
swell_child
functions.php

「サイトのURL」は文字数を表示させるサイトのURLを選択して下さい。

ひきお

ここで開くファイルを間違えないように注意してくれ。

次のステップでfunctions.phpをクリックしてコードを追加編集します。

STEP

コードを追加して保存

functions.phpのファイルは『右クリック』をして以下の手順で開きます。

functions.phpを右クリック
ファイルを編集
ACE Editor

ファイルを開いたら以下のコードを貼り付けます。

// 投稿一覧に「文字数」カラムを追加する
function add_post_columns_word_count($columns) {
$columns['word_count'] = '文字数'; // カラム名を追加
return $columns;
}
add_filter('manage_posts_columns', 'add_post_columns_word_count');
// 「文字数」カラムに本文から計算した文字数を表示する
function add_post_columns_word_count_content($column_name, $post_id) {
if ($column_name === 'word_count') {
$post_content = get_post_field('post_content', $post_id); // 本文取得
$plain_text = strip_tags($post_content); // HTMLタグ除去
$word_count = mb_strlen($plain_text); // マルチバイト文字対応でカウント
echo esc_html($word_count);
}
}
add_action('manage_posts_custom_column', 'add_post_columns_word_count_content', 10, 2);

コードをコピペする
保存して閉じる

ファイルマネージャーに保存できたらSWELLの投稿一覧を確認しましょう。

おこめちゃん

普段、あまりいじらない場所だから気をつけて試してね。

＼本気ブログはSWELLで決まり！／

SWELLのおすすめポイント

データ比較で収益アップ
豊富で多彩なデザイン
作業効率アップ機能満載
サイトスピードアップ
複数サイトで利用可能

＼機能を見てみてね！／

SWELLのデモサイトを見てみる

プラグインCode Snippetsで文字数を表示する手順

ひきお

プラグインCode Snippetsで表示させる手順を紹介するぞ。

おこめちゃん

初心者の方はコチラの手順がおすすめネ！

プラグインで文字数を表示させる手順

プラグインを追加＆有効化
Code Snippetsで新規追加
コード挿入とアクティベート＆保存

STEP

プラグインを追加＆有効化

まずはプラグインCode Snippetsを追加していきます。

外観→プラグインを追加の順番でクリックしましょう。

「プラグインを追加」の画面になったら検索窓に『Code Snippets』と入力します。

Code Snippetsが表示されるので『今すぐインストール』をクリックしてインストールしましょう。

インストールが完了すると『有効化』のボタンになるのでクリックしましょう。

おこめちゃん

プラグインの追加は簡単だね！

ひきお

テーマファイルをいじる必要がないから安心だ。

STEP

Code Snippetsで新規追加

Code Snippetsが有効化できるとダッシュボードのサイドバーに『スニペット』が追加されます。

スニペット→新規追加の順でクリックしましょう。

新規追加の画面を開くと以下の画面になります。

ひきお

最後にコードを追加するればOK。

STEP

コード挿入とアクティベート＆保存

最後に以下のコードをコピペすればSWELLでも文字数を表示させることができます。

＼このコードをコピペしよう！／

// 投稿一覧に「文字数」カラムを追加する
function add_post_columns_word_count($columns) {
$columns['word_count'] = '文字数'; // カラム名を追加
return $columns;
}
add_filter('manage_posts_columns', 'add_post_columns_word_count');
// 「文字数」カラムに本文から計算した文字数を表示する
function add_post_columns_word_count_content($column_name, $post_id) {
if ($column_name === 'word_count') {
$post_content = get_post_field('post_content', $post_id); // 本文取得
$plain_text = strip_tags($post_content); // HTMLタグ除去
$word_count = mb_strlen($plain_text); // マルチバイト文字対応でカウント
echo esc_html($word_count);
}
}
add_action('manage_posts_custom_column', 'add_post_columns_word_count_content', 10, 2);

コードをコピーしたら下記の枠にペーストします。