joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

wordpressの記事一覧で個々の記事のcontentテキストの文字数をプラグインで制限する

投稿日:2017年2月22日 更新日:



概要

みんさんこんにちはcandleです。
最近、wordpress案件でしばらくの間フリーのテーマを使う事があったのですが、
フリーのもの多くは記事一覧で個々の記事の内容を全て展開する
「the_content」
を使用しており、非常に見づらいです。

だからといって、フリーのテーマを編集するのは面倒なので、
それをAdvanced Excerpt プラグインを使って一覧で表示する文字数を制限して見やすくします。

サンプルではフリーの「twentyeleven」を使います。

こんな感じになります

Before

After


前提

適当なwordpressがある


Advanced Excerptのインストール

管理画面の、左メニューから「プラグイン」→「新規追加」を押します。

右上の検索ボックスに「Advanced Excerpt」を入力します。
「今すぐインストール」ボタンを押します。

インストールが終わったらプラグインを有効化します。

インストールが終わりました。

設定をする

プラグイン一覧で、advanced excerptの「Settings」をクリックします。

ここからの設定は、あくまで参考程度にどうぞ。
「Excerpt Length」を 「100」にしてプルダウンメニューの「Words」を「 Characters」に変更します。

「Finish」はExactで良いのですが、どうやらバイトでカウントしているらしく、
日本語のような2バイト1文字では文字化けしてしまいます。
Wordだと表示される文字数にばらつきが出てしまいます。この辺はあまりうまくいきませんね。

「Read More Link」にチェックを入れて、テキストボックスに「続きを読む」と入力します。


カットされた記事のテキストの末尾に「続きを読む」というリンクを設置してくれます。

最後に、記事中のタグを削除するかという項目があります。私はタグは削除したほうが見やすいと思うので、設定します。
「Strip Tags」の「Remove all tags except the following」にチェックを入れます。
もしも、例外的に適応したいタグがあれば、チェックを入れるとそのタグだけ例外的に表示されます。

基本的な設定は以上です。
一番下の「Save Changes」ボタンを押して保存しましょう。


実際に確認する

実際にtwentyelevenで見てみると文字を制限する前がこの画像

Before

文字数を減らしたものがこちら

After

文字数が減って、スッキリしましたね。文字化けがきにならなくはないですが。

まとめ

一番良い解決方法はテーマをいじることですが、パパっと簡単に変更したい場合はこの方法もありですね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

vagrant1.8で共通の.vagrant.dにあるinsecure_private_keyプライベートキーを使用する

概要 みなさんこんにちはcandleです。今回はvagrantのプライベートキーの指定の仕方です。 vagrantは1.7か1.8でそれぞれのvagrantディレトリの中に生成されるプライベートキーを …

wordpressでタイトルに縦線をいれるならall in one seo packを使うと便利

概要 みなさんこんにちはcandleです。今回はwordpressのタイトルに縦棒を入れる方法を紹介します。 wordpresは特にプラグインを入れないとハイフン区切りのタイトルになります。 ホーム「 …

redmineにclose button pluginを入れて終了したチケットをボタン1つで閉じる

概要 みなさんこんにちはcandleです。今回はとても便利なチケットを終了させるボタンを、表示できるプラグンの導入の仕方を紹介します。 チケットは一般に以下のコマンドのみチケット詳細で表示されています …

VirtualBoxにubuntu13.10desktop版をインストールする

概要 みなさんこんにちは、candleです。今回はVirtualBoxにubuntu13.10をインストールしてみましょう。 VirtualBoxは一般にVM(バーチャルマシーン)と言われるもので、O …

emacsのReactの開発をrjsx-modeで行う

English 日本語 概要 みなさんこんにちはcandleです。 今回はemacsのreact開発用のメージャーモードのrjsx-modeを導入してみたいと思います。 Reactの開発はこれまで、w …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー