【実録】タイトルを改行したい？こだわりクライアントの要望に応えたスマートなWordPress対応術

はじめに

ある日、クライアントからこう言われました。

「記事タイトルを、任意の位置で2行にしたいんです。“課題解決のその先に｜新しい価値を”の“｜”で見た目だけ改行したい」

うーん、来ましたね…こだわり系ご要望。

でも、実はこれ、見た目を整えたい気持ちと、WordPress構造やSEOの制約がガッツリぶつかる要望だったりします。

今回はこの要望にどう応えたかを、エピソード仕立てでお届けします！

「<br>入れればいいじゃん」は罠！

HTMLに詳しい方なら、思わずこう言いたくなるかもしれません。

「じゃあタイトルに <br> 入れればいいんじゃない？」

確かに、表示上はそれで改行されます。

しかし、WordPressの投稿タイトルは下記のようにサイト全体に使われる重要なデータです：

• ページの <title> に使われる（SEOに直結）
• OGP（SNSカード表示）に使われる
• 一覧ページ・パンくず・関連記事 などでも使用される

つまり <br> を直接書いてしまうと…

<title>課題解決のその先に<br>新しい価値を</title>

Googleの検索結果にもそのまま <br> が表示される危険があります。
FacebookやX（旧Twitter）のOGPも崩れてしまうかもしれません。

解決策：HTML上は1行のまま、見た目だけ改行

クライアントの要望を叶えつつ、SEOやOGPにも安全な方法──
それは「表示上だけ改行する」というアプローチです。

✅ Step1. 投稿タイトルは「｜（縦棒）」で区切っておく

記事編集画面でタイトルをこう書いておくだけ：

課題解決のその先に｜新しい価値を

✅ Step2. functions.php に置換処理を追加

function custom_title_br($title, $id = null) {
    if (is_singular('post') && get_post_type($id) === 'post') {
        $title = str_replace('｜', '<span class="br">', $title);
    }
    return $title;
}
add_filter('the_title', 'custom_title_br', 10, 2);

ポイント：

• is_singular('post') によって投稿の個別ページだけに限定
• 一覧やOGPには影響を与えません

✅ Step3. CSSで .br に改行指定

.br {
  display: block;
}

これで、見た目はこう表示されます：

課題解決のその先に  
新しい価値を

HTML構造的には：

<h1 class="post-title">課題解決のその先に<span class="br">新しい価値を</span></h1>

補足1：スマホだけ改行したい場合

PCでは1行、スマホでは改行させたいときは、CSSを少し工夫します。

.br {
  display: inline;
}

@media screen and (max-width: 768px) {
  .br {
    display: block;
  }
}

補足2：single.php で直接処理したい場合

テーマによっては functions.php が触れない、または個別に出し分けたい場合もあります。

その場合は single.php 側でこのように処理可能：

<h1 class="post-title">
  <?php
    $title = get_the_title();
    echo str_replace('｜', '<span class="br">', $title);
  ?>
</h1>

補足3：HTMLのまま <br> を使いたい場合（非推奨）

function allow_title_html($title) {
    return html_entity_decode($title);
}
add_filter('the_title', 'allow_title_html');

⚠️ ただしこれは、SEOやOGPに直接的な悪影響を与える可能性があるため、非推奨です！

補足4：一覧ページと詳細ページで出し分けたい場合

function custom_title_br($title, $id = null) {
    if (is_singular('post')) {
        $title = str_replace('｜', '<span class="br">', $title);
    } else {
        // 一覧ページでは「｜」を削除
        $title = str_replace('｜', '', $title);
    }
    return $title;
}

■ クライアントの反応

最終的にスマホでも美しく表示されたことで、クライアントからは…

「これです！やりたかったのは！」
「全端末でちゃんと意図が伝わってるのが嬉しいです」

…とご満悦の声をいただきました👏

■ まとめ：技術だけでなく、“伝わり方”も大事

タイトルの改行は一見ささいな要望に見えますが、その裏には

• コンテンツの伝わり方
• ブランディング
• スマホでの視認性

といった“こだわり”が詰まっていたりします。

今回のように、**「見た目を崩さず」「SEOに影響させず」「クライアントの意図を叶える」**実装ができると、信頼感にもつながりますよね。

おまけ：実装コードまとめ

// functions.php
function custom_title_br($title, $id = null) {
    if (is_singular('post')) {
        $title = str_replace('｜', '<span class="br">', $title);
    }
    return $title;
}
add_filter('the_title', 'custom_title_br', 10, 2);

/* style.css */
.br {
  display: block;
}

✍️ 最後にひとこと

「タイトルを改行したい」
そんなシンプルな一言の奥に、どんな意図や感情があるのか？
それを読み取って丁寧に実装できるのも、Web制作者としての醍醐味だなと思います😊