WordPressの記事投稿で、プラグインを使わずに自由に改行させる方法

一般的な改行の入れ方

WordPressでは、記事内での改行の使い方にルールがあります。

Enterキー

Enterキーをクリックすると、それまでのテキストにPタグが付きます。
大抵のテーマではPのついたテキストの後には10pxとかのmarginが付くので、
その下のテキストの間に間隔が出来ます。

Shift+Enterキー

Shiftキーを押したままEnterキーを押すとmarginが付かない通常の改行となります。

これらの方法は、テーマにもよりますが、基本一度のみ有効な処理で、何度も改行を入れても実際は一つしか入いらないようになっています。

CSSで設定する方法

テキストエディタ(HTMLモード)で編集する場合は、CSSで設定することも出来ます。

インラインで指定する方法

下にスペースを空けたい場合 Pの中にインラインでmarginを指定することで好きなだけ下との間隔を空ける事が出来ます。

ー例ー
<p style="margin-bottom:2em">このテキストの下に2行分スペースが空きます。</p>

改行にbrを使いたくないという人にはこれが一番良い方法かもしれません。emという単位は一行分という意味です。
文字サイズ1つ分が1em。つまり2emにすることで、下に2行分のスペースを確保するという記述になります。

CSSで設定する

あとは、style.cssで設定することで、より簡単になります。

ー例ー
p .b2 { margin-bottom:2em;}
p .b3 { margin-bottom:3em;}

スタイルシートに上記の様に追記することで、下記のように投稿することで下にスペースを空けられます。

<p class="b2">テキストの下に2行分の改行を空ける。</p>
<p class="b3">テキストの下に3行分の改行を空ける。</p>

とにかく改行キーを押した分だけスペースを空けたい!

改行キーを押したぶんだけスペースを取るのには、プラグインもありますが、
functions.phpとcssに記述するだけで有効になる方法があります。
一般的にはBRを連続して入れるのは良くないとされていますが、まぁ大したマイナスでは無いと思うので、気にならない方はこの方法で。

functions.phpへ記述

functions.phpに下記のように記述します。

add_filter('the_content','force_break_before',3 );
add_filter('the_content','force_break_after',99999 );

function force_break_before($contents){
	if(preg_match('!\[nobita\]!',$contents) ){
		return str_replace( PHP_EOL,'<br class="space" />'.PHP_EOL,$contents );
	}
	return $contents;
}
function force_break_after($contents){
	if(preg_match('!\[nobita\]!',$contents) ){
		return str_replace(array( '<br />','<br>','[nobita]'),array( '', '', '' ), $contents );
	}
	return $contents;
}

次にスタイルシートに下記の記述を追加します。

hr + br.space,
body + br.space,
div + br.space,
dl + br.space,
dt + br.space,
dd + br.space,
ul + br.space,
ol + br.space,
li + br.space,
h1 + br.space,
h2 + br.space,
h3 + br.space,
h4 + br.space,
h5 + br.space,
h6 + br.space,
pre + br.space,
code + br.space,
form + br.space,
fieldset + br.space,
legend + br.space,
input + br.space,
button + br.space,
textarea + br.space,
blockquote + br.space,
table br.space,
th + br.space,
tbody + br.space,
thead + br.space,
tfoot + br.space,
tr + br.space,
td + br.space{
	display:none;
}

これで 投稿内で改行を押した分だけスペースが空くようになります。

参考サイト:WordPressで改行( br要素 )を自由に使う、15行スクリプト