WordPressでタイトルを自動で省略する関数の解説

ブログサイトを運営していると、長すぎる記事タイトルが原因でデザインが崩れてしまう問題に必ず直面します。特にレスポンシブデザインでは、PCとスマホで最適な文字数が全く異なります。

この記事で紹介する the_responsive_trim_title() 関数は、この問題を**「PC/スマホで自動で文字数を切り替え、なおかつコードは1行で済む」という方法で解決する、現場で使うべき関数**です。

🎯 この関数は何をするもの？

the_responsive_trim_title() 関数は、WordPressのタイトル表示を劇的に改善します。

💡 なぜこの関数が必要なのか？（悪い例 vs 良い例）

長いタイトルをそのまま表示すると、特に縦幅が狭いスマホ表示で、タイトルが何行にも渡ってしまい、デザインが崩れてしまいます。

📖 関数の仕組み：コードの全貌と役割

この関数は、PC用とSP用のタイトルを両方出力し、CSSの力でどちらかを表示/非表示に切り替えるという、キャッシュプラグインと相性の良い手法を採用しています。

関数の全体像（functions.phpに貼り付け）

PHP

function the_responsive_trim_title($pc_length = 44, $sp_length = 23) {
    $title = get_the_title();
    
    // PC版（44文字まで）
    echo '<span class="sp-none">'; // ← SPでは非表示にするクラス
    if (mb_strlen($title) > $pc_length) {
        echo esc_html(mb_substr($title, 0, $pc_length)) . '…';
    } else {
        echo esc_html($title);
    }
    echo '</span>';
    
    // SP版（23文字まで）
    echo '<span class="tab-none">'; // ← PCでは非表示にするクラス
    if (mb_strlen($title) > $sp_length) {
        echo esc_html(mb_substr($title, 0, $sp_length)) . '…';
    } else {
        echo esc_html($title);
    }
    echo '</span>';
}

🔍 ステップ別解説：各行の役割

💡 なぜ mb_ が必要なのか？

PHPで日本語の文字数を正確に数えるには、mb_strlen() (マルチバイト文字列対応) が必須です。

• strlen()：バイト数で数えるため、日本語では1文字が3や4とカウントされてしまいます。（NG）
• mb_strlen()：文字数で数えるため、正確に「何文字」かをカウントできます。（OK）

3. 💻 関数の使い方とカスタマイズ

この関数は、ブログカードのタイトルやサイドバーの新着記事リストなど、タイトルを表示したい場所にたった1行書くだけで完了します。

使い方：テンプレートに書くコード

PHP

<p class="blog__content--tittle">
    <?php the_responsive_trim_title(); ?> 
    </p>

文字数をカスタマイズする

デフォルト値を変更したい場合は、関数を呼び出す際に数値を指定します。

PHP

<?php the_responsive_trim_title(50, 30); ?> 

<?php the_responsive_trim_title(60); ?>

🎨 カスタマイズ例：省略記号を変更

関数内の'…'を引数として受け取れるようにカスタマイズすれば、呼び出し側で省略記号を自由に設定できます。

PHP

// functions.php側で$moreをパラメータに追加
function the_responsive_trim_title($pc_length = 44, $sp_length = 23, $more = '…') {
    // ... (中略) ...
    echo esc_html(mb_substr($title, 0, $pc_length)) . $more; // ← $more を使用
    // ... (中略) ...
}

PHP

<?php the_responsive_trim_title(44, 23, '→続きを読む'); ?>

4. まとめ：この関数の圧倒的なメリット

この関数を使うことで、デザイン崩壊の心配なく、サイトの美しさと保守性を両立できます。🎊