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ファイルにタグを追記します。
※非常にデリケートなファイルなので、必ずコピーしてバックアップを取ってから触るほうが絶対安全です。うっかり不要なスペースなど入れたら画面が真っ白になりますので。
- // 抜粋の文字数を20文字に変更する
- function wpdocs_custom_excerpt_length( $length ) {
- return 20; // ここの数字を変えるだけ
- }
- add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );
上記のように、returnのあとの数字を好きなものに変えたらOKです。
[…]を【続きを読む】に変更
- // 「続きを読む」に変更
- function new_excerpt_more( $more ) {
- return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">【続きを読む】</a>';
- }
- add_filter( 'excerpt_more', 'new_excerpt_more' );
その他の装飾
【続きを読む】をもう少し装飾したければ文字まわりにクラスを追記して、style.cssなどのCSSファイル側に装飾をすればOKです。
functions.phpの【続きを読む】を下記に変更
<span class=”tuzuki”>続きを読む</span>
CSSファイル（style.cssなど）に追記
- .tuzuki {
- background-color: #000; /*背景色を黒*/
- color: #fff; /*文字色を白*/
- padding: 5px; /*文字と背景色に余白*/
- border-radius: 5px; /*背景の角を丸くする*/
- }
実際の表示はこんな感じです。他の色にしたければ、背景色を好きなカラーコードに変更します。
続きを読むまとめ
記事詳細ページに「続きを読む」ボタンを設置すると、押すのにひと手間かかって離脱率が上がることもあるようですが、トップページで全文表示されていたら縦にズラっと長すぎますしね。タイトルだけ表示するか、もしくは抜粋でキリのいい文字数で読まれやすいように調整しながら文字数を決めるのが良いと思います。
[公開日] 2023年3月30日 / [最終更新日] 2023年4月8日 / カテゴリー：WEBデザイン,WordPress
同じカテゴリーの記事
-
ブログが続かないときのネタ収集方法とコツお店や会社のブログを集客のために書こうと最初は意気込んでいたものの、３日とたたず続かない・・・書くことが無いし、何を書け [続きを読む]
-
WEBデザイナーが印刷物制作・入稿に注意することWEBデザインの業務と印刷物のグラフィックデザインの仕事を同時進行で制作していると、うっかりミスが出やすいので自戒を込め [続きを読む]
-
スマホで簡単撮影！ホームページ用の写真の撮り方お店や仕事用のホームページで写真が必要だけど、何で撮影すればいいの？ デジカメ？一眼レフ？ と悩まれるかたは多いと思いま [続きを読む]
-
ホームページに載せる写真を撮るおすすめカメラは何がいい？ホームページに掲載する写真ですが、手持ちの資料が揃わないことも多く撮影が必要になることもあります。そんな時に撮影するカメ [続きを読む]
最新の投稿
2024年08月30日
2024年08月09日
2024年07月16日
2024年07月16日
2024年07月10日
カテゴリー
アーカイブ
