Pocket

WordPressでは記事文章の表示方法を自由にカスタマイズ出来ますが、なかでもトップページに記事の抜粋を並べたり、長い文章を適当な文字数でカットして「続きを読む」を表示させたいとこなど結構あるのではないでしょうか?

20140623_01

最も簡単な方法は、Moreタグ(<!–more–>)を投稿記事の任意の場所に挿入するやり方ですが、毎回記事投稿するたびにMoreタグを挿入するは案外面倒だったりするのではないかと思います。

そこで、Moreタグを挿入しなくても指定した文字数をオーバーした場合には「続きを読む」リンクが自動で挿入される簡単な方法をご紹介したいと思います。

 

前提条件として、WordPressをインストールすると標準で入っている『WP Multibyte Patch』というプラグインを有効化しておく必要があります。

20140623_02

WordPressをマルチバイト環境(日本語)でお使いの方ならば大抵このプラグインを有効化していると思いますが、WordPressに正しく日本語の文字数をカウントしてもらうためには、このプラグインを有効化しておくことが必要になります。

 

STEP1 テーマファイルを修正する

まずは、テーマディレクトリ内(「wp-content」の中の「themes」の中の自分が有効化しているテーマ内)の「content.php」の54行目付近の

この部分を、

に書き換えて上書き保存をします。

以下のソースコードはテーマ「TwentyFourteen」のcontent.phpの54行目付近の書き換え前と書き換え後の内容になります。

▼書き換え前

▼書き換え後

 

 

STEP2 function.phpにコードを追加する

テーマディレクトリ内(「wp-content」の中の「themes」の中の自分が有効化しているテーマ内)の「functions.php」に以下のコードを追加してみましょう。

上記サンプルコードでは、「続きを読む」に詳細ページへのリンクがつくように設定していますが、単純に「…」としたい場合には、3行目のmy_excerpt_more関数を以下のように書き換えます。

また、カットする文字数については、7行目の「$cut = 80」という箇所で設定されているので、130文字以上をカットしたい場合には「$cut = 130」と設定内容の変更をしてみてください。

 

以上で、投稿時に自動的に記事を抜粋表示し、その後に「続きを読む」を表示する設定は完了です。
WordPress初心者の方でも10分~15分程度で設定できると思いますので、上記コードをそのままコピーしてお使いいただければと思います。

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。