【WordPress】タイトルや文章の改行方法まとめ

この記事はWordPressでのタイトルや文章中での改行方法、改行したテキストの表示（出力）方法についてのメモです。

改行は文章を読みやすくする一つの要素です。うまく活用することで読みやすさが上がるので、ユーザビリティを意識して改行を設定していきましょう。

投稿タイトルに改行を入れる

タイトルに改行を入れる方法は、改行させたいところに <br> を入れるだけです。

タグをつけることで the_title() で出力した時に改行されて表示されます。

<br>タグを入力したのに改行されない？

全角文字で＜ｂｒ＞と入力するとそのまま表示されてしまうので、半角になっているか確認してみてください。

<BR> というように大文字でも、半角であれば改行されます。

<br>を削除したいときは the_title_attribute() で出力

個別ページでのタイトルは改行させたいけど一覧で表示するときは改行はいらない、などといった場合は the_titile() ではなく the_title_attribute() を使います。このコードは <br> といったhtmlタグを含めず文字列だけ出力します。

<?php the_title_attribute(); ?>

aタグにtitle属性を設定する場合もこちらのコードで出力するようにしましょう。title属性では改行されるわけではなく <br> タグがそのまま表示されてしまいます。

特定のページ以外はhtmlタグを削除する

タイトルを出力する箇所ごとにコードを書き換えるのは大変だな…という場合は、the_title() で出力されるhtmlタグを特定の箇所のみで表示させるようにしましょう。

add_filter('the_title', function($title){
  if (is_single()) {
    return $title;
  } else {
    return strip_tags($title);
  }
});

上記の場合なら「singleページ（記事の個別ページ）ならそのままタイトルを表示、それ以外ではhtmlタグを取り除く」という処理がされます。必要な箇所に応じて条件分岐を変更することで設定してみてください。

半角スペースなど特定の文字を改行に変換する

わざわざ <br> というタグを毎回入力するのは手間だな…と思う場合、他の文字列で改行をさせる方法もあります。

下記は半角スペースを入力したらその文字を <br> に変換して出力するコードです。

function title_space_br() {
  $title = get_the_title();
  $title = str_replace(" ", "<br>", $title);
  echo $title;
}

$title = str_replace("ここに改行となる文字列を記述", "<br>", $title);

改行して表示させたいところで関数名を追加します。ここでは <?php title_space_br(); ?> を記述することで変換したものを出力できるようになります。

関数にすることで、the_title() は改行なしで表示させたい場合、title_space_br() は改行させて表示させたい場合と使い分けやすくなります。

タイトルに英数字表記を使用する、半角スペースをよく使う場合は別の文字にしておきましょう。全角スペースや半角スペース2つなどもありです。

「.」や「*」といった文字でもいいのですが、改行として出力しない場合はそのままテキストとして表示されてしまうので、別途この文字を取り除くコードが必要になります。そのため半角スペースが無難に使いやすいかと思います。

the_title() といったデフォルトのタイトル出力コードを使用しない場合は、以下のように改行させる時・させない時と分けて使うコードを作成して対応できます。

// タイトルにある「.」を<br>に変換
function title_dot_br() {
  $title = get_the_title();
  $title = str_replace(".", "<br>", $title);
  echo $title;
}
// タイトルに「.」があったら削除する
function title_dot_no() {
  $title = get_the_title();
  $title = str_replace(".", "", $title);
  echo $title;
}

プラグインで簡単にタイトル改行

プラグインでも改行を設定することができます。
Page Title Splitter
このプラグインでは改行したいところをクリックするだけで設定できます。
【使い方参照】ブログ記事のタイトルで改行が使える「Page Title Splitter」の使い方 | takuweb

投稿本文の改行

ビジュアルエディタでは、ただEnterを押すだけだと別の「段落」になってしまいます。
段落の中に改行を入れたい場合は、[shift] + [Enter]の同時押しで「改行」になります。

本文中の
見出しの改行

実際にここの見出しを改行させています。

ビジュアルエディタでは、投稿本文の中の「見出し」は、[shift] + [Enter]の同時押しでも改行にはならずタイトルと同様 <br> を使用してもそのまま <br> が出力されてしまいます。

そこで「カスタムHTML」ブロックを使用して改行をつけたい箇所に <br> を追加します。

【カスタムHTMLブロックでの記述例】

<h3 class="wp-block-heading">本文中の<br>見出しの改行</h3>

本文の改行が反映されない

本文に改行をつけたはずなのに改行が反映されない！という場合は自動整形機能が動いていることが原因です。この機能を設定していると不要なタグが削除されます。

自動整形の機能をOFFにしたいときはfunctions.phpにこのコードを記述します。

remove_filter( 'the_content', 'wpautop' );