Let's create! WordPressサイト制作とメンテ/エラー対応から、PHP/CSS/javascriptプログラミング、動画・音・イラスト等制作まで扱うコラム

WordPress記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

更新: 2024/02/16 2202文字

今回は、WordPressの文字を出力する関数についてです。 レイアウトをいじったら、ちょっと文字がスカスカするところが出てしまいました。これをPHPや、WP組み込みファンクションなどをいじって調整できるのか?さっそく挑戦してみたいと思います。

今回のエディット内容と押さえておきたい関数

今回やりたいエディット~本文からの抜粋表示の文字数を少し増やす

このサイトのpcビューです。元のテーマはstinger5でしたが、いろいろカスタマイズしました。先日、横幅を広げたところ、表示できるスペースが空いてしまい、記事一覧のタイトル下あたりに最初の何文字かが出ていたところがスカスカになりました

ここにもう少し文字を入れて、一覧ページで『サムネ・タイトル・抜粋文字多め』で、内容がある程度伝わり、個別投稿ページを見てもらいやすくしたいと思います。

押さえておきたいWordPressの『the_excerpt()』(抜粋表示)

まず、上記のことをやるにあたって、WordPressの抜粋表示ファンクションがあることがわかりました(the excerpt)。

記事全部出すときには『<?php the_content(); ?>』(ただし<!–more–>タグより前)、抜粋で冒頭の一部を表示するときには『<?php the_excerpt(); ?>』と書くとのことです(WordPress Codexより)。

これは、テーマによって表記が異なる場合がありますが、『一覧ページでサムネ・タイトル・記事から抜粋』を表示するテーマでは利用されています。 (例:テーマKrusze。条件分岐によって本文か抜粋文を返す。)

stinger5で、一覧ページの抜粋文字数を調整する(少し増やす)

stinger5には『itiran.php』という分かりやすいファイルがあった!

『itiran.php』を見たところです。これめちゃめちゃわかりやすいですね(笑) 図のようにサムネを出すところ、リンクと記事タイトル出すところ、記事情報のdiv内に日付やカテゴリ・タグを出すところなどがあります。

このページに、先ほど述べた、抜粋文を表示する関数『the_excerpt()』というのがありました。文字数まではこの『itiran.php』ファイルで制御していないようです。さて、どこにあるんでしょうか???

このテーマでは日本語で『itiran.php』みたいにわかりやすく書いています。海外や、公式テーマ(Twenty〇〇〇)などでは、『archive.php』という名前になっていることが多いので押さえておいてください。

『functions.php』内に、抜粋文字数を制御してるとこ発見

で、適当にfunctions.phpをのぞいていたところ、それっぽい記述を発見しました。

function custom_excerpt_length( $length ) {
return 40;
}

というコードのところです。この『return 40;』で、40文字しか出ていなかったわけです。少し記述を多くしたかったので『return 80;』に書き換えました。『custom_excerpt_length』というのが、このテーマでつくってあったファンクション名で、『excerpt_lengthにフィルターフックをかける』という形で変更します

『excerpt_lengthフィルター』では、抜粋文字数のほか『read moreリンク(続きを読む、みたいなリンク)』『 […] のような、抜粋最後の三点リーダーの変更』もできますので、こちらもチェックしてください。

やってみた結果

このとおり、無事に一覧ページでも抜粋文字数を増やすことができました。サムネイル・タイトル・記事抜粋文で見るかどうかを判断していただけるわけです。場合によっては『文字数120文字』とか『あえて表示しない』みたいなエディットもできるわけです。

あとがき・まとめ

  • WordPressの『the_excerpt()』は、投稿の抜粋表示
  • excerpt_lengthにフィルターフックをかけて、抜粋文字数を変更可能
  • excerpt_lengthにフィルターでは、read moreリンクや最後の三点リーダーも変更できる

まとめるとこんな感じでしょうか。一覧の抜粋表示あたりはカスタマイズしやすいので、機会があったらぜひやってみてください。


【カテゴリ】- WordPressファンクションetc
【タグ】- , ,

関連記事