WordPressの[…]を【続きを読む】に表示・抜粋文字数を変更する方法

PHPのバージョンを上げたら、投稿の抜粋を表示するPHPタグで下記のようなエラーが出ました。

Warning: Undefined variable $post in(〜テーマ内の位置)
Warning: Attempt to read property “ID” on null in(〜テーマ内の位置)

カスタマイズしたPHPの書き方が最新バージョンに対応していなかったので、WordPressの公式テンプレートタグをもとに修正していきます。

デフォルトでは抜粋の長さは 55文字なので、これを20文字に変更してみます。表示文字数は好きなように変えられますので、視認性と各ホームページに合うように設定します。

20文字に短く変更

WordPressテーマ内のfunctions.phpファイルにタグを追記します。
※非常にデリケートなファイルなので、必ずコピーしてバックアップを取ってから触るほうが絶対安全です。うっかり不要なスペースなど入れたら画面が真っ白になりますので。

  1. // 抜粋の文字数を20文字に変更する
  2. function wpdocs_custom_excerpt_length( $length ) {
  3.     return 20; // ここの数字を変えるだけ
  4. }
  5. add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

上記のように、returnのあとの数字を好きなものに変えたらOKです。

[…]を【続きを読む】に変更

  1. // 「続きを読む」に変更
  2. function new_excerpt_more( $more ) {
  3.     return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">【続きを読む】</a>';
  4. }
  5. add_filter( 'excerpt_more', 'new_excerpt_more' );

その他の装飾

【続きを読む】をもう少し装飾したければ文字まわりにクラスを追記して、style.cssなどのCSSファイル側に装飾をすればOKです。

functions.phpの【続きを読む】を下記に変更

<span class=”tuzuki”>続きを読む</span>

CSSファイル(style.cssなど)に追記

  1. .tuzuki {
  2.     background-color: #000; /*背景色を黒*/
  3.     color: #fff; /*文字色を白*/
  4.     padding: 5px; /*文字と背景色に余白*/
  5.     border-radius: 5px; /*背景の角を丸くする*/
  6. }

実際の表示はこんな感じです。他の色にしたければ、背景色を好きなカラーコードに変更します。

続きを読む

まとめ

記事詳細ページに「続きを読む」ボタンを設置すると、押すのにひと手間かかって離脱率が上がることもあるようですが、トップページで全文表示されていたら縦にズラっと長すぎますしね。タイトルだけ表示するか、もしくは抜粋でキリのいい文字数で読まれやすいように調整しながら文字数を決めるのが良いと思います。

[公開日] 2023年3月30日 / [最終更新日] 2023年4月8日 / カテゴリー:WEBデザイン,WordPress講座


トップ

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBデザイナー・グラフィックデザイナー・マーケター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
FacebookXInstagram

同じカテゴリーの記事