この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
通常、記事一覧では、文字数を制限して記事を表示します。
続きを読むボタンを押すと、記事の全体が表示されるようなよく見るブログの形です。
今回は続きを読むボタンの文字数を制限する方法について解説します。
PHPのコードを見ながら解説していきます。
[fukidashi]今回はPHPを使った自作テーマをカスタマイズしていきます。[/fukidashi]
今回はPHPを使った自作テーマをカスタマイズしていきます。
今回検証した環境
- WordPressバージョン
- 6.4.2
- インストール済みプラグイン
- WP Multibyte Patch
まず、続きを読むボタンって何？
本ブログ、クローバーWebでも採用していますが、記事の一覧画面で続きを読むボタンを押すと、個別の記事全文が表示される仕組みです。
続きを読むボタンを自動で表示したい
通常は、ブロックエディタでは記事の途中で続きを読むブロックを挿入しないといけません。
でも毎回続きを読むブロックを挿入するのが面倒ではないですか？
ある文字数までがきたら、続きを読むを自動で挿入できる方法がありますので、そのカスタマイズ方法を解説していきます。
カスタマイズの流れ
- the_excerpt()が書かれているphpファイルを開きます。
- the_excerpt()の解説（英語サイト）
- 次項目のコードに変更します。
- 文字数を変更します。
- 省略文字（…などの文字）を変更します。
- class名を変更します。
- 続きを読むの文言を変更します。
では解説していきます。
コードを見ながら解説
コードの全体です。
<?php
if(mb_strlen(get_the_excerpt(), 'UTF-8')>30){
$excerpt= mb_substr(get_the_excerpt(), 0, 30);
echo $excerpt.'...<a class="more-link" href="' .esc_url(get_permalink()). '">続きを読む</a>';
}else{
echo '<a class="more-link" href="' .esc_url(get_permalink()). '">続きを読む</a>';
}
?>上記の流れに沿って解説していきます。
1.the_excerpt()が書かれているphpファイルを開きます。
the_excerpt()が書かれているphpファイルを開いてください。
index.phpに書かれている場合が多いです。
私の場合は、morelink.phpなどの名前でパーツ化し、get_template_part()でインクルードしています。
2.上記のコードに変更します。
私の場合は、the_excerptはアイキャッチ画像のコードの下部分に挿入しています。
3.文字数を変更します。
該当のコード
if(mb_strlen(get_the_excerpt(), 'UTF-8')>30){
$excerpt= mb_substr(get_the_excerpt(), 0, 30);上記の30（２箇所とも）を変更したい文字数に変更します。
何も設定を変えていないデフォルトの状態でしたら、110文字が抜粋されます。
今回はこちらの文字数を変更します。
私は抜粋する文字数が多いかなと思ったので、30文字に変更しましたが、50文字で続きを読むボタンを表示したければ、50に変更します。
4.文字（…などの文字）を変更します。
該当のコード
echo $excerpt.'...<a class="more-link" href="' .esc_url(get_permalink()). '">続きを読む</a>';
上記の…を変更したい文字に変更します。変更するとしても、・・・ぐらいでしょうか。
5.class名を変更します。
該当のコード
echo $excerpt.'...<a class="more-link" href="' .esc_url(get_permalink()). '">続きを読む</a>';
class=”more-link“の”more-link“を変更します。
このままのclass名でも良ければ、変更の必要はありません。
今回は割愛しますが、こちらのclsaa名を使用してaタグをボタン化したり、背景色を変更します。
6.続きを読むの文言を変更します。
該当のコード
echo $excerpt.'...<a class="more-link" href="' .esc_url(get_permalink()). '">続きを読む</a>';
続きを読むの部分を変更します。
例えば、もっと読むや、全文を表示するに変更したらいいかもしれません。
CSSなどで整えたら、本ブログのトップページのような形になります。
本ブログ https://clover-weblog.com/
あとは、サーバーにアップロードしたら完了です。
まとめ
いかがでしたしょうか？
皆さんも良いWordPressライフを〜。ではまたノシ
