WordPressで日本語の文字数制限を適切に設定する方法：mb_strimwidthとmb_strlenの違い

WordPressでテキストの表示数を制限する時の数値は注意が必要です。
文字数制限をかける場合、mb_strimwidth 関数をよく使います。

例えば今回作成したものはこんな感じになりなます。

これを作成する時にカテゴリーを１０文字まで表示にしたかったので

 <span><?php echo mb_strimwidth($category->name, 0, 10, '...'); ?></span>

1	<span><?php echo mb_strimwidth($category->name, 0, 10, '...'); ?></span>

と記述しました。

結果は３文字で…しか表示されなかった。

コードはこんな感じで書きました

<div class="works-inner">
  <div class="image-outsideboder-lists">
    <?php
    // カスタム投稿タイプ 'blog' からランダムに3記事取得
    $args = array(
      'post_type' => 'blog',
      'posts_per_page' => 3,
      'orderby' => 'rand'
    );
    $random_posts = new WP_Query($args);

    if ($random_posts->have_posts()) :
      while ($random_posts->have_posts()) : $random_posts->the_post();
        // カテゴリーのサムネイル画像を取得
        $categories = get_the_terms(get_the_ID(), 'blog_category');
        $thumbnail_url = '';

        if (!empty($categories)) {
          $category = $categories[0]; // 最初のカテゴリーを取得
          $thumbnail_id = get_term_meta($category->term_id, 'thumbnail', true);
          if ($thumbnail_id) {
            // カテゴリーのサムネイル画像がある場合
            $thumbnail_url = wp_get_attachment_image_url($thumbnail_id, 'full');
          }
        }
    ?>
        <div class="work-item three-works works-detail">
          <a class="works-link" href="<?php the_permalink(); ?>">
            <div class="content-image work-image">
              <div class="border top"></div>
              <div class="border right"></div>
              <div class="border bottom"></div>
              <div class="border left"></div>
              <?php if ($thumbnail_url) : ?>
                <img src="<?php echo esc_url($thumbnail_url); ?>" alt="<?php echo esc_attr($category->name); ?>">
              <?php elseif (has_post_thumbnail()) : ?>
                <?php the_post_thumbnail('full'); ?>
              <?php else : ?>
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/white_back.png" alt="No Image">
              <?php endif; ?>
            </div>
            <div class="project-text-top">
              <span><?php echo get_the_date('Y.m.d'); ?></span>
              <span><?php echo mb_strimwidth($category->name, 0, 30, '...'); ?></span>
            </div>
            <h4 class="content-text project-text"><?php the_title(); ?></h4>
          </a>
        </div>
    <?php
      endwhile;
      wp_reset_postdata();
    endif;
    ?>
  </div>
</div>

<?php

// カスタム投稿タイプ 'blog' からランダムに3記事取得

$args = array(

'post_type' => 'blog',

'posts_per_page' => 3,

'orderby' => 'rand'

);

$random_posts = new WP_Query($args);

if ($random_posts->have_posts()) :

while ($random_posts->have_posts()) : $random_posts->the_post();

// カテゴリーのサムネイル画像を取得

$categories = get_the_terms(get_the_ID(), 'blog_category');

$thumbnail_url = '';

if (!empty($categories)) {

$category = $categories[0]; // 最初のカテゴリーを取得

$thumbnail_id = get_term_meta($category->term_id, 'thumbnail', true);

if ($thumbnail_id) {

// カテゴリーのサムネイル画像がある場合

$thumbnail_url = wp_get_attachment_image_url($thumbnail_id, 'full');

}

<?php if ($thumbnail_url) : ?>

<?php elseif (has_post_thumbnail()) : ?>

<?php the_post_thumbnail('full'); ?>

<?php else : ?>

<img src="<?php echo get_template_directory_uri(); ?>/assets/img/white_back.png" alt="No Image">

<?php endif; ?>

</div>

</div>

</a>

</div>

<?php

endwhile;

wp_reset_postdata();

endif;

</div>

そこで、調べてみた結果を記事にしてみました。

mb_strimwidth 関数の設定方法
1. mb_strimwidth の各引数の意味
文字数を取得するmb_strlenもある
1. mb_strlenとmb_strimwidthの比較
最後にもう１パターンあります。
YouTube動画

mb_strimwidth 関数の設定方法

実は今回mb_strimwidth で指定している「10」というのは「バイト数」になり、
文字数とは少し異なります。

なので全角文字の場合は1文字あたり2バイト、
半角文字の場合は1文字あたり1バイトとカウントされます。

そのため、10文字を全角で表示する場合には約20バイト、半角が混ざる場合には
少し余裕を持って30バイトで指定することで、10文字程度が表示されるようになります。

修正後のコードはこちらになります。

<span><?php echo mb_strimwidth($category->name, 0, 30, '...'); ?></span>

1	<span><?php echo mb_strimwidth($category->name, 0, 30, '...'); ?></span>

こんな感じなのでmb_strimwidth関数を使用する時は少し注意しましょう

mb_strimwidth の各引数の意味

第1引数：対象の文字列
第2引数：切り出し開始位置（今回は先頭の 0）
第3引数：切り出し幅（バイト単位）
第4引数：省略記号（例: ‘…’）

文字数を取得するmb_strlenもある

mb_strlen関数は文字列の文字数を取得したい場合に適してます。
用途としては文字数が何文字あるか知りたい場合に使用がおすすめです。

mb_strlenとmb_strimwidthの比較

mb_strlen
機能: 文字列の文字数を取得します。
用途: 文字数が何文字あるか知りたい場合に使用します。

php

$string = "こんにちは世界";
echo mb_strlen($string, 'UTF-8'); // 出力: 7

1 2	$string = "こんにちは世界"; echo mb_strlen($string, 'UTF-8'); // 出力: 7

こんな感じで日本語の1文字ごとをカウントし、正確な文字数が得られます。

mb_strimwidth
機能: 文字列を指定した「幅（バイト数）」で切り取ります。日本語文字を考慮して幅を指定できます。切り取り時に末尾に任意の文字（省略記号など）を付けることも可能。
用途: 日本語サイトでタイトルや説明文などを特定の幅で制限し表示する際に便利です。

php

$string = "これは非常に長いタイトルの例です";
echo mb_strimwidth($string, 0, 20, '…', 'UTF-8'); // 出力: これは非常に長いタ…

1 2	$string = "これは非常に長いタイトルの例です"; echo mb_strimwidth($string, 0, 20, '…', 'UTF-8'); // 出力: これは非常に長いタ…

上記例では、20バイト（日本語全角文字は3バイト）で文字列を切り取り、「…」を追加しています。

最後にどちらを使う方がいいのか

単に文字数を調べたい場合はmb_strlenを使うといいでしょう。
日本語を含む文字列を、画面幅に合わせて省略表示したい場合はmb_strimwidthが便利です。

日本語サイトでは、文字列の表示制限においてmb_strimwidthを使うことが多いです。
なぜなら、文字幅やバイト数で指定できるため、表示領域の制御がしやすくなる
特にデザインが崩れないようにする場合に有効です。

mb_strlenは、あくまで文字数確認に使用するのがベストです。

最後にもう１パターンあります。

この方法は、指定した場所の文字数を取得して文字数をカウントします。
その後指定の文字よりも多い場合は、指定した文字だけ設定した形で表示します。
指定した文字数より少ない場合はそのまま表示します。

「今回作成したのがこんな感じで、タイトルが30文字以上の場合は30文字まで表示で
最後に…を表示にしてます。

また、WordPressサイトを快適に運用するには、サーバー選びも大切です。
エックスサーバーは初心者でも安心の高機能と安定性を提供しており、速度と信頼性に優れています。新規申し込みキャンペーン中の今がチャンス！ぜひお試しください。」

コードはこんな感じで書いてます。

<div class="news-wrap">
  <h3>新しいお知らせ</h3>
  <div class="news-block">
    <?php
      $args = array(
        'post_type' => 'news',
        'posts_per_page' => 3,
        'orderby' => 'date',
        'order' => 'DESC'
      );
      $news_query = new WP_Query($args);
      if ($news_query->have_posts()) :
        while ($news_query->have_posts()) : $news_query->the_post();
    ?>
      <a href="<?php the_permalink(); ?>" class="news-detail">
        <div class="news-date"><?php echo get_the_date('Y.m.d'); ?></div>
        <p class="news-title">
          <?php 
            $title = get_the_title();
            echo mb_strlen($title) > 30 ? mb_substr($title, 0, 30) . '…' : $title;
          ?>
        </p>
      </a>
    <?php
        endwhile;
        wp_reset_postdata();
      endif;
    ?>
  </div>
</div>