こんな方に読んでほしい
[記事の内容]

今回は、文字数制限についての解説になります。
「タイトルを1行で収めたい」、「本文の冒頭だけ表示させたい」など、そのような際に使用すると便利です。

上記のように、1行と2行でレイアウト(高さ)崩れず場合もあります。
そのような時にも文字数制限が役立ちます。

今回は、mb_substrを使います。
その間に「タイトル・本文」を出力させるコードは以下のようになります。
| the_title() | タイトルを出力させます。 |
|---|---|
| the_content() | 本文を出力させます。 |
上記のコードは文字数制限がない為、入力した文字数だけホームページ上に表示します。
mb_substrは、主に4つの指定が可能になります。
「文字列」・「開始文字数」・「取得文字数」・「文字フォーマット」になります。
以下のようになります。
<?php echo mb_substr([文字列],[開始文字数],[取得文字数],[文字フォーマット]); ?>
// ↓ に置き換え
<?php echo mb_substr($post->post_title,0,10,'UTF-8'); ?>
$post->post_titleを指定しタイトルを出力させます。
「0,10」は、開始文字数を「0」とし、取得文字数を「15文字まで」出力させます。
上記のコードの場合は、省略記号がありません。
文字数制限10に対して省略記号を表示させます、10文字以降は省略記号が表示します。
以下のようになります。
// 10文字以降「...」を表示
<?php echo mb_substr($post->post_title,0,10,'UTF-8'). '...'; ?>
// 10文字以降「続きを読む」を表示
<?php echo mb_substr($post->post_title,0,10,'UTF-8'). '[続きを読む]'; ?>
. '〇〇';を追加します。
今回は「…」と「続きを読む」を表示させてみました。
イメージは以下のようになります。

上記では、文字数制限と省略記号について解説してきました。
現状では全ての記事に対してタイトルは省略記号が表示します。
条件分岐をすることによって、10文字以降は省略記号が表示、10文字以内は省略記号なしで表示させます。
以下のようになります。
<?php
if(mb_strlen($post->post_title, 'UTF-8')>10){
$title= mb_substr($post->post_title, 0, 10, 'UTF-8');
echo $title.'...';
}else{
echo $post->post_title;
}
?>
次に本文の文字数制限について解説します。
上記で解説した$post->post_titleを次のように変更します。
$post->post_contentに置き換えてください。
また、strip_tagsを追加します。
「strip_tags」とは、文字列に含まれるHTML、PHPタグを取り除きます。
以下のようになります。
// 40文字以降「...」を表示
<?php echo mb_substr(strip_tags($post-> post_content),0,40) . '...'; ?>
今回は「40文字」以降は省略記号の表示指定をしています。
タイトルと同様に、現状では全ての記事に対して本文は省略記号が表示します。
本文に関しても条件分岐の指定が可能になります。
条件分岐をすることによって、40文字以降は省略記号が表示、40文字以内は省略記号なしで表示させます。
以下のようになります。
<?php
if(mb_strlen(get_the_excerpt(), 'UTF-8')>40){
$excerpt= mb_substr(get_the_excerpt(), 0, 40);
echo $excerpt.'...';
}else{
echo get_the_excerpt();
}
?>
先ほどはpost_contentを指定していましたが、
条件分岐では、get_the_excerpt()を使用します。

今回はこれで以上です。
mb_substrを使用します。$. '〇〇';を追加します。$post->post_titleはタイトルを出力します。$post->post_contentはタイトルを本文します。post_contentをget_the_excerpt()に置き換えしましょう。2025.10.17
2025.10.17
2025.10.15
2025.08.16
2025.08.13
2025.08.12
2023.06.15
2022.06.30
2020.03.22
2020.03.06

© 2025 shu-naka-blog