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

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

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

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

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

「コードエディター」に変更してからHTMLタグを入力することがポイントです。

コードエディター上で <br> タグを入力し、ビジュアルエディターに戻す（コードエディターを終了をクリックする）と改行表示されます。
編集画面でこのように表示されていれば、the_title() などで出力した時に改行されて表示されます。

「ビジュアルエディター」だと < が特殊文字の < に変換されてしまい、改行として出力されません。

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

上述したように「ビジュアルエディター」で入力するとうまく改行表示されません。「コードエディター」でちゃんと <br> と表示されるか確認してみてください。

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

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

タイトルに改行を入れた場合の出力

タイトルに改行をつけた時に、どのページでも改行をさせたいとは限りません。
個別ページでのタイトルは改行させたいけど、一覧で表示するときは改行はいらないといった場合、タイトルを表示させるコードを変更する必要があります。

タイトルにつけたbrタグを削除したいときは the_title_attribute() で出力

the_titile() ではなく the_title_attribute() を使います。このコードは <br> といったhtmlタグを含めず文字列だけ出力します。

<?php the_title_attribute(); ?>

title属性などのような箇所で出力する際は、特にこちらのコードを使用した方が良いと思います。属性値では改行されず、 <br> タグがそのまま表示されてしまいます。

the_title_attribute() の詳細・使い方

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

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

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

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;
}

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

$title = str_replace("改行として出力させる文字列", "<br>", $title);

改行して表示させたいところで関数名を記述します。上記のサンプルコードなら <?php title_space_br(); ?> で半角スペースがbrタグとして出力されます。

別で関数を作成することで、the_title() は改行なしで表示させたい場合、title_space_br() は改行させて表示させたい場合と使い分けられます。

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

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

以下のように改行させる時・させない時と分けて使うコードを作成して対応することもできます。

// タイトルにある「.」を<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;
}

// タイトルにある「.」を<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;
}

投稿本文の
改行

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

見出しも同様です。実際にここの見出しを上記の方法で改行させています。

古いWordPressバージョンの場合、見出しが shift + Enter でも改行できないかもしれません。この場合、タイトルと同様に <br> を入力してもそのまま <br> というテキストが表示されてしまいます。
コードエディターに切り替えて <br> を入力するか、本文なら「カスタムHTML」ブロックが使えるので、これを利用して記述することもできます。

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

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