【WordPress】カスタムフィールドのテキストエリアの改行を反映する方法

今回は、テキストエリアで入力したテキストの改行を、実際の表示にも反映する方法を紹介します。

カスタムフィールドのtextareaに入力されたテキストは、そのまま出力しても改行が反映されません。

Webサイトを作成する際に自作でテーマを作成するとこのような場面に出くわすこともあるかもしれません。

知っていると便利なので、やり方を覚えておきましょう。

カスタムフィールドのテキストエリアはデフォルトだと改行されない

早速実験しながら確認していきましょう。

カスタムフィールドを作成し、textareaタグでテキストエリアを作ります。(今回カスタムフィールドの作成方法は割愛します)

編集画面でテキストエリアに改行したい文字を記入しました。下の画像です。

次に表示したいテンプレートファイルに下のコードを記述します。

<?php
$post_id = get_the_ID();
$text = get_post_meta($post_id, 'textarea', true);
?>

<?php if ($text) : ?>
  <p><?php echo $text; ?></p>
<?php endif; ?>

カスタムフィールドで「textarea」というkeyを作成したので呼び出して出力しています。

これをブラウザで表示すると、下の画像のようになります。

入力では改行されていたのですが、ブラウザでは改行されないという結果になりました。

デベロッパーツールで見ても、HTMLには改行のタグは挿入されておらず、空白で区切られているように見えます。

textareaでは改行時、brタグではなく改行文字 (\r\n\n)が挿入されるためです。

改行文字はHTMLに表れないので空白で区切られているように見えたのですね。

カスタムフィールドのテキストエリアを改行するためには

次に、先ほどのテキストエリアを改行する方法を試してみます。

改行文字をうまく利用して改行させるには2つの方法があります。

PHPのnl2br関数を使用する

nl2br関数はPHPのマニュアルによると「改行文字の前に HTML の改行タグを挿入する」と定義されています。

第一引数は入力文字列、第二引数は XHTML 準拠の改行を使うか否かで初期値は”true”です。

また、改行文字 (\r\n、 \n\r\n および \r) の前に <br /> あるいは <br> を挿入して返すということが書かれています。

例えば、

<?php echo "こんにちは\nさようなら"; ?>

上記のようにコードを書くとブラウザでは下の画像のように表示されます。

これは、先ほどテキストエリアを入力した時と同じように空白で区切られたようになっていて、改行はされていません。

では、nl2br関数を使用するとどうなるでしょうか。

<?php echo nl2br("こんにちは\nさようなら"); ?>

このように記述するとブラウザでは下のように表示されます。

改行されました。

デベロッパーツールでHTMLを見てみると下の画像のようになりました。

brタグが挿入され、HTML上でも改行がされていることがわかります。

改行ができることがわかったので、先ほどのテキストエリアも同様にnl2br関数で記述してみます。

<?php
$post_id = get_the_ID();
$text = nl2br(get_post_meta($post_id, 'textarea', true));
?>

<?php if ($text) : ?>
  <p><?php echo $text; ?></p>
<?php endif; ?>

ブラウザで見ると下の画像のようになりました。

brタグが挿入され、思い通り改行することができました。

white-space: pre-wrapを使用する

テキストエリアを改行する2つ目の方法は、CSSで「white-space: pre-wrap」を指定する方法です。

「white-space: pre-wrap」は下のように定義されています。

pre-wrap

This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

Text

「この値は、ユーザーエージェントが一連の空白を折りたたむのを防ぐ。改行は,保存された改行文字で行われ,また,行ボックスを埋めるために必要な場合には,改行される。」

このように翻訳されます。

この文章から、改行文字で改行するように定義されていることがわかります。

では、実際に「white-space: pre-wrap」でテキストボックスの値が改行されるのか試してみましょう。

<?php
$post_id = get_the_ID();
$text = get_post_meta($post_id, 'textarea', true);
?>
<?php if ($text) : ?>
  <p class="test-textarea"><?php echo $text; ?></p>
<?php endif; ?>

test-textareaクラスを作成し、「white-space: pre-wrap」を指定してみます。

.test-textarea {
  white-space: pre-wrap;
}

フロントでの表示は下の画像のようになりました。

改行されていますね!

デベロッパーツールではこのように表示されました。

最初の時と同じように、brタグは挿入されず、HTML上では空白で区切られているようにみえます。

brタグはHTMLで「意図した改行」を示すので、使用する際は注意しないといけません。

このことから、意図した改行をしたい場合はnl2br関数を使用し、その他の場合はCSSの「white-space: pre-wrap」を使用した方がいいのではないかと考えられます。

プラグイン「Advanced Custom Fields(ACF)」でもnl2br関数は使用できるか

Advanced Custom Fieldsはカスタムフィールドを手軽に追加できるプラグインとして有名です。

CSSの「white-space: pre-wrap」を使った改行はできると思いますが、nl2br関数は使用できるのでしょうか?

get_field関数の場合

get_field関数はAdvanced Custom Fieldsの専用の関数です。

指定したフィールドの値を取得します。

get_field($selector, [$post_id], [$format]);

このget_field関数とnl2br関数を使用して、先ほどのコードを書き換えると下のようになります。

<?php
$post_id = get_the_ID();
$text = nl2br(get_field('textarea', $post_id));
?>

<?php if ($text) : ?>
  <p class="test-textarea"><?php echo $text; ?></p>
<?php endif; ?>

フロントで表示を確認してみましょう。

改行して表示されました!

brタグでの改行なので意図した改行の時はこの方法で改行できそうです。

get_post_meta関数の場合

get_post_meta関数でもAdvanced Custom Fieldsのフィールドの値を取得することができます。

<?php
$post_id = get_the_ID();
$text = nl2br(get_post_meta($post_id, 'textarea', true));
?>

<?php if ($text) : ?>
  <p class="test-textarea"><?php echo $text; ?></p>
<?php endif; ?>

この関数は自作のカスタムフィールドの出力の時にも使用しており、同様に改行することができます。

まとめ

今回はカスタムフィールドの改行方法について説明をしました。

brタグは「意図のある改行」を示すHTMLのタグなので、意図のある改行の時はnl2br関数を使用し、その他の場合はCSSで「white-space: pre-wrap」を使用すると良いと思います。

細かいですが適切なマークアップのためにぜひ覚えておいてくださいね。