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

一般的な改行の入れ方

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

Enterキー

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

Shift+Enterキー

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

CSSで設定する方法

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

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

下にスペースを空けたい場合　Pの中にインラインでmarginを指定することで好きなだけ下との間隔を空ける事が出来ます。
[css]
ー例ー
<p style="margin-bottom:2em">このテキストの下に２行分スペースが空きます。</p>[/css]
改行にbrを使いたくないという人にはこれが一番良い方法かもしれません。emという単位は一行分という意味です。
文字サイズ１つ分が1em。つまり2emにすることで、下に２行分のスペースを確保するという記述になります。

CSSで設定する

あとは、style.cssで設定することで、より簡単になります。
[css]
ー例ー
p .b2 { margin-bottom:2em;}
p .b3 { margin-bottom:3em;}[/css]
スタイルシートに上記の様に追記することで、下記のように投稿することで下にスペースを空けられます。
[css]
<p class="b2">テキストの下に２行分の改行を空ける。</p>
<p class="b3">テキストの下に３行分の改行を空ける。</p>[/css]

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

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

functions.phpへ記述

functions.phpに下記のように記述します。
[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;
}[/php]
次にスタイルシートに下記の記述を追加します。
[css]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;
}[/css]

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

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

Tweet

関連する記事

WordPressから送られてい来るメールの差出人を変更する方法 メディアから追加した画像にwidthとheightを入れなくする方法　[wordpress] WordPressの初心者がfunctions.phpの編集でエラーを防ぐ為に気を付けたいこと。 wordpress 特定のカテゴリー以下の記事テンプレートを変える WordPress　固定ページ一覧、記事ページ一覧にページID、記事IDを表示させる 特定の記事やページにCSSやSCRIPTを適応したい場合 　[wordpress] WordPressで勝手に入る空のＰタグを固定ページだけ削除したい WordPressの投稿画面にショートコードをドロップダウンで選択できるようにする方法