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

更新2022/02/02

改行は文章を読みやすくする一つの要素です。うまく活用することで読みやすさが上がります。

WordPressで投稿する時に、タイトルや文章中でうまく改行ができない…というときに見直しておきたいところをメモしていきます。

投稿タイトルに改行タグ<br>を入れる

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

テスト投稿<br>改行します

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

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

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

<BR>というように半角であれば大文字でもOK。

the_title_attribute() を使って改行を削除する

タイトルを表示させるコードに the_title_attribute() というものがあります。これは<br>といったhtmlタグを含めず文字列だけ出力します。

<?php the_title_attribute(); ?>

個別ページでのタイトルは改行させたいけど、一覧で表示するときは改行はいらない、という場合は the_titile() ではなく the_title_attribute() を使います。

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

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

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

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

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

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

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

改行して表示させたいところで <?php title_space_br() ?> を追加します。

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

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

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

「.」や「*」といった文字でもいいのですが、改行として出力しない場合はそのままテキストとして表示されてしまうので、半角スペースが無難に使いやすいかなと思います。

改行しない場合に、スペースや記号を削除したい時はさらにコードを追加します。

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

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

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

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

このように書くことで「singleページかつループ外の場合はそのままタイトルを表示、それ以外ではhtmlタグを取り除く」という処理がされます。
必要な箇所が他にもあるといった場合、条件分岐を変更することで設定できます。

投稿本文の改行

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

【その他改行方法参考】[WordPress][Simplicity]記事タイトルを改行せずに1行で表示させる

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

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

自動整形機能を無効にする

WordPressで自動整形をする関数はwpautopというコード。機能をOFFにしたいときはfunctions.phpにこのように記述します。

remove_filter( 'the_content', 'wpautop' );

プラグインを使用して自動整形機能を制御

「Advanced Editor Tools」（旧名 : TinyMCE Advanced）というプラグインを使用することで、自動整形をカスタムすることができます。
【プラグインページ】Advanced Editor Tools (previously TinyMCE Advanced)

高度オプション → 「段落タグの保持」にチェックを入れることで自動整形をOFFにできます。

連続改行したい

テキストエディタで &nbsp; を入力することで連続改行ができるようになります。
ビジュアルエディタの場合はそのまま文字として認識してしまうので、この方法はテキストエディタのみで使用できます。

カテゴリー : WordPress

タグ :

他の記事を見る

カテゴリー

TOPへ