1. home
2. Web制作
3. WordPress

WordPressでプラグイン使わず連続改行させる素直な方法

おちです。

WordPressのテキスト処理は、パラグラフ処理のみならず、改行処理にも独特の癖がありますね。

テキストエディタ上でリターンすると改行コードに対して <br> タグを入れてくれるので、調子こいて2回リターンするとPタグで閉じてくれちゃう、というアレです。しかも手打ちでBR打っても勝手に消してくれよるよ！

Word並みのお節介に激おこですけど、英語圏の人は日本語的な改行が嫌いなので仕方ありません。プンスカするより建設的な方法を考えましょう。例によってプラグインは使いません。

HTMLレベルで空行が書ける方法を考えてみる

まず、改めてWordPress側の挙動を確認してみましょう。

<wbr> 改行制御タグを入れてリターン

純粋に改行コードだけ置いてくから圧縮されるのであって、余分な物を挟んでみたらどうでしょうか。それぞれに<br>タグがつくようです。

【HTML】
<p>
<wbr>
<wbr>
<wbr>
</p>


【サンプル】

ただし複数打っても最終行には<br>タグがつかないので実際に生成される行数は1行足りない感じになります。ご注意。

<br>タグの書き方を工夫する

タグの書式も様々なので、色々工夫してみましょう。まずノーマルに連続打ち。

【HTML】
<br>
<br>


【サンプル】

当然何もおきません。これは皆さんご存じですね。

BRタグをXML省略記法で閉じてみる

空タグ特有の閉じ方です。

【HTML】
<br />
<br />


【サンプル】

こちらも同様に改行タグが消滅してしまうようです。

BRタグを完全表記で閉じてみる

面倒がらずに一番丁寧な記法で閉じてみましょう。
これなら空行が二行発生するはずです。

【HTML】
<br></br>
<br></br>


【サンプル】

はい、謎仕様キター！(ΦωΦ)

なぜか4行ぶん改行されました。<br></br>で閉じると倍に増量されるみたいです。ど…どういう設計思想なんだ。(^^;

…とはいうものの、任意の空行を表現するための書式はわかりました。

いろいろな改行例

【3行のサンプル】
<wbr>
<br></br>


【6行のサンプル】
<br></br><br></br><br></br>


偶数だったら2で割った数の<br></br>を、
奇数だったら2で割って冒頭に<wbr>\nをつければOKですね。

タグの手打ちとか面倒臭いんですけど

…ですよねー。(´Д｀) =3

こうなったらコンソールのHTMLエディタにボタンを追加してしまいましょう。ボタンを追加するサンプルがCodexにあったので適当に書き換えます。
Quicktags API(WordPress3.3) – Codex

【function.php】
// add more buttons to the html editor
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_wbr', 'WBR', '<wbr>', '', '', 'ZeroWidthSpace', 201 );
QTags.addButton( 'eg_brbr', '2空行', '<br></br>', '', '', 'DoubleBreak', 202 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );


「WBR」ボタンで<wbr>タグが、
「２空行」ボタンで<br></br>タグが挿入されるようになってます。

いずれも開始タグ扱いなのでテキストをアクティブにしておく必要はありません。好きなところにカーソルを合わせてボタン押せばOKです。

…これで昔ながらのテキストサイトもWordPressでOKさ！

CSSで<P>タグに任意の余白を割り振る

【本章追記：2014/10/15】

近頃このページ人気があるようでありがとうございます。その後、CSSによる余白設定も使うようにになったので追記しときます。

任意の行間で表示したい

話のリズムごとに行間を設定したい時など、自由に幅を決めたい場合はインラインCSSを使えば細かく調整できます。BRタグではなくPタグである点に注意して下さい。

余白幅をクラスで振り分ける

複数の余白設定を使い分けたいときは専用のクラスを割り振っておくと便利です。先ほどのエディタ拡張に好みの余白を設定しましょう。

【function.php】
// add more buttons to the html editor
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_wbr', 'WBR', '<wbr>', '', '', 'ZeroWidthSpace', 201 );
QTags.addButton( 'eg_topMargin', '2空行', '<p class="topMargin2">', '</p>', '', 'topMargin2', 202 );
QTags.addButton( 'eg_topMargin', '4空行', '<p class="topMargin4">', '</p>', '', 'topMargin4', 203 );
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );


【style.css】
.topMargin2 { margin-top: 2em; }
.topMargin4 { margin-top: 4em; }


細かい値はお好みで～。