【WordPress】投稿タイトルを改行する方法【スマホ、PC別に改行する方法も解説】

こんなお悩みを解決します。

WordPressの投稿画面からでは、タイトルを改行できません。

そこでこの記事では、WordPressのタイトルを改行させる方法について解説します。

本記事の内容

記事の後半では、画面幅に応じて改行させる方法も解説してますので、ぜひ最後までご覧くださいませ。

WordPressの投稿タイトルを改行する方法

タイトルを改行する方法はこちらの3つ。

順に解説します。

<br>を入れて改行する

この方法は、PHPファイルを触らずに改行させることができます。

やり方はかんたん。改行させたい箇所に<br>を入力するだけです。

注意点：全角では改行されない

上記のとおり、全角で「＜br＞」を入力しますと文字列として認識されてしまうため、改行されませんので注意が必要です。

こちらの方法はHTMLが理解できる方向けなので、実案件でお客さまのサイト構築をする際にはおすすめしません。

では続いて、誰でも簡単にタイトルを改行させる方法についてご紹介します。

半角スペースを入れて改行する

改行したい箇所に半角スペースを入れて改行させる方法です。

以下のように、半角スペースを入れると改行することができます。

この方法は、以下のようにPHPファイルにコードを記述する必要があります。

コード解説

// 投稿タイトル改行
function title_space_br() {
	$title = get_the_title($ID);
	$title = str_replace(" ", "<br>", $title);
	echo $title;
  }

ポイントは、str_replace(" ", "<br>", $title);の部分になります。

「str_replace」はPHP関数でして、

を指定します。str_replace("置き換え対象の文字列", "置き換える文字列", $title);

今回は、半角スペースを<br>に変換したいため、

を記述します。

そしてstr_replaceで指定してた内容が、関数title_space_br();に代入されます。

※関数名（title_space_br）は、任意の文字列でOKです。

タイトルを表示させる

最後にタイトルを表示させます。

WordPressでタイトルを表示させるには、the_title();を使用します。

ただ、今回は半角スペースでタイトルを改行させたいので、先ほど作成した関数title_space_br();を使用しましょう。

タイトルの表示例

<!-- 通常 -->
<h2><?php the_title(); ?></h2>

<!-- 改行させる場合 -->
<h2><?php title_space_br(); ?></h2>

上記のように、the_title();からtitle_space_br();に変更すればOKです。

全角スペースを入れて改行する

全角スペースを入れて改行する方法です。

以下のように、全角スペースを入れると改行することができます。

コードの解説

// 投稿タイトル改行
function title_space_br() {
	$title = get_the_title($ID);
	$title = str_replace("　", "<br>", $title);
	echo $title;
  }

変わるところは、str_replaceの第一引数に、半角もしくは全角のスペースが入るかの違いのみです。

コードの解説は、先ほど紹介した【半角スペースを入れて改行する方法】と変わらないので割愛します。

≫コードの解説を見る

半角スペースと全角スペース、どちらを使用するべき？

個人的には全角スペースがおすすめです。

なぜなら英語タイトルの場合、半角スペースを使用する可能が高いからです。

ここは案件にもよるかと思いますので、適宜判断してみてください！

スマホ、PC別にタイトルを改行する方法

ここまでは、タイトルを改行する方法を解説しました。

しかし、実案件では画面幅によって「タイトルを改行させたい！」という場面もあるはずです。

ここからは、PC画面のみタイトルを改行する方法について解説します。

※スマホの場合もやることはほぼ変わりません。

やりたいこと

コードの解説

// 投稿タイトル改行
function title_space_br() {
	$title = get_the_title($ID);
	$title = str_replace(" ", "<br class='br-pc'>", $title);
	echo $title;
  }

これまでと変わるところは、str_replace();の第二引数になります。

上記コードのように、brタグに「br-pc」というクラスをつけます。

あとはPC画面時のみ「br-pc」にCSSを当てるようにします。

CSSの例

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

上記のように、任意でCSSを当てればOKです。

まとめ：WordPressの投稿タイトルを改行する方法

WordPressの投稿タイトルを改行する方法について解説しました。

このブログでは、Web制作に関する情報を備忘録としてまとめておりますので、

よかったら他の記事もご覧になってください！