今回は、テキストエリアで入力したテキストの改行を、実際の表示にも反映する方法を紹介します。カスタムフィールドのtextareaに入力されたテキストは、そのまま出力しても改行が反映されません。Webサイトを作成する際に自作でテーマを作成するとこのような場面に出くわすこともあるかもしれません。知っていると便利なので、やり方を覚えておきましょう。Fields(ACF)」でもnl2br関数は使用できるかget_field関数の場合get_post_meta関数の場合まとめカスタムフィールドのテキストエリアはデフォルトだと改行されない早速実験しながら確認していきましょう。カスタムフィールドを作成し、textareaタグでテキストエリアを作ります。(今回カスタムフィールドの作成方法は割愛します)編集画面でテキストエリアに改行したい文字を記入しました。次に表示したいテンプレートファイルに下のコードを記述します。?>カスタムフィールドで「textarea」というkeyを作成したので呼び出して出力しています。これをブラウザで表示すると、下の画像のようになります。入力では改行されていたのですが、ブラウザでは改行されないという結果になりました。デベロッパーツールで見ても、HTMLには改行のタグは挿入されておらず、空白で区切られているように見えます。(\r\n、\n)が挿入されるためです。改行文字はHTMLに表れないので空白で区切られているように見えたのですね。カスタムフィールドのテキストエリアを改行するためには次に、先ほどのテキストエリアを改行する方法を試してみます。改行文字をうまく利用して改行させるには2つの方法があります。改行タグを挿入する」と定義されています。準拠の改行を使うか否かで初期値は”true”です。挿入して返すということが書かれています。?>上記のようにコードを書くとブラウザでは下の画像のように表示されます。これは、先ほどテキストエリアを入力した時と同じように空白で区切られたようになっていて、改行はされていません。nl2br関数を使用するとどうなるでしょうか。?>このように記述するとブラウザでは下のように表示されます。デベロッパーツールでHTMLを見てみると下の画像のようになりました。brタグが挿入され、HTML上でも改行がされていることがわかります。改行ができることがわかったので、先ほどのテキストエリアも同様にnl2br関数で記述してみます。?>ブラウザで見ると下の画像のようになりました。brタグが挿入され、思い通り改行することができました。pre-wrap」を指定する方法です。pre-wrap」は下のように定義されています。boxes.Text「この値は、ユーザーエージェントが一連の空白を折りたたむのを防ぐ。改行は,保存された改行文字で行われ,また,行ボックスを埋めるために必要な場合には,改行される。」このように翻訳されます。この文章から、改行文字で改行するように定義されていることがわかります。pre-wrap」でテキストボックスの値が改行されるのか試してみましょう。pre-wrap」を指定してみます。pre-wrap;}フロントでの表示は下の画像のようになりました。改行されていますね!デベロッパーツールではこのように表示されました。最初の時と同じように、brタグは挿入されず、HTML上では空白で区切られているようにみえます。brタグはHTMLで「意図した改行」を示すので、使用する際は注意しないといけません。pre-wrap」を使用した方がいいのではないかと考えられます。Fieldsはカスタムフィールドを手軽に追加できるプラグインとして有名です。Fieldsの専用の関数です。指定したフィールドの値を取得します。[$format]);このget_field関数とnl2br関数を使用して、先ほどのコードを書き換えると下のようになります。?>フロントで表示を確認してみましょう。改行して表示されました!brタグでの改行なので意図した改行の時はこの方法で改行できそうです。Fieldsのフィールドの値を取得することができます。?>この関数は自作のカスタムフィールドの出力の時にも使用しており、同様に改行することができます。まとめ今回はカスタムフィールドの改行方法について説明をしました。pre-wrap」を使用すると良いと思います。細かいですが適切なマークアップのためにぜひ覚えておいてくださいね。今回は、WordPressのショートコードを自作する方法を紹介します。株式会社RETVALでHTML/CSS、WordPressのコーディングを担当。