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

2014 8 22

現在のWordPressの最新バージョンは、3.9．2で、ビジュアルモードで複数の改行を行った場合は（2013 7 24の追記）と同様に、行間は改行の数に対応して間隔があくようになっています。

でも、依然としてこのページにアクセスする人が少なからずいる模様で、なんでだろうと思っていました。

有料テーマや、プライベートで配布されているテーマをお使いでしたら、Wordプレスの公式テーマに一度切り替えてみて、改行がうまく反映されているかどうかチェックしてみるといいかも

テーマが独自に改行の設定を変更しているという事もあるので、、、

2013 7 24

WordPress3.5.2では、ビジュアルモードの編集画面で改行を連続すると以下のようにソースが形成されるようになっているようで、もはや、改行を自由に使うカスタマイズなんてことは、必要がなくなったようです

<div class="entry-content clearfix">
<p>行間</p>
<p>段落</p>
<p>&nbsp;</p>
<p>改行2</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>改行3</p>
<p>段落</p>
</div>

2012 2 15

編集しなおすと、行間隔が、強制的に修正されるので、新規作成時は、ビジュアルモードで開けるけど、保存した場合は、エディタが、自動的に、htmlモードでしか開かなくなるものを作ってみました。

修正とか入れたので、gistに移動

こちらにコードがありますのでクリックしてください

フィルタを使っているので、新規作成した投稿は、改行に合わせて表示できますが、再編集時、ビジュアルエディタが、余分な改行を削除するため、テキストモードで開かないと、行間隔が変更されます。

2012 11

ビジュアルエディタで使えるタイプを作りました。

shift+ 改行などを混ぜなければ、brは、連続しません。

functions.phpにこのコードを追加するだけです。

動作としては、投稿を保存する時に、tinymceで複数改行が、 に変換されますが、その部分の を数えて、br要素にline-height属性を個数分追加するというものです。

ビジュアルエディタでご利用ください

投稿そのものを、保存時に変更するので、htmlとtinymceを切り替えるなどしても、行間が変化する事はありません。

WEB標準に準拠します。

/*
Script Name: Force Break2
Author: Tenman
Author URI: http://www.tenman.info/
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
add_filter( 'wp_insert_post_data' , 'filter_handler' , '99999');

function filter_handler( $data){

$pattern = '/(&nbsp;(\s)*)+/';
$data['post_content'] = preg_replace_callback(
            $pattern,
            "nbsp2br",
            $data['post_content']);
  return $data;
}

function nbsp2br($matches){
	$count = substr_count( $matches[0], '&nbsp;' );
	return '<br style="line-height:'.$count * 1.5.'" />'."\n\n" ;
}

以前のコードだと、フィルタを使っていたので、ビジュアルモード　htmlモードに切り替えると、 がビジュアルに戻した時に、削除されてレイアウトが戻ってしまうという問題がありました。

htmlタブには、出来るだけ切り替えないでくださいね。

編集中に、（公開ボタンを押す前）htmlタブに移動すると、 になってしまうようです。

公開ボタンを押した後だと、htmlにタブに が表示されたら、リロード（F5）していただくと、<br>が表示されます。

なんか、へんだなぁ

参考

ブログや、ホームページのコンテンツを書く時、WordPressのWEB標準に準拠したルールで、改行を複数記述しても、その通りに、表示できなくて、困っている人は、少なからずいると思います。

改行に使われる　br (break) というhtml要素は、行間の調整のために、利用すべきではないというのが、根拠のようです

私自身も、コンテンツを記述する時に「行間」を調整する時に、いろいろな工夫をこれまでしてきました

例えば、

行間20:

と記述すると、

<br style="line-height:20px;" />

等に置換してしまう方法や、

<br class="space-20" />

等として、スタイルシートでルールを書いておくといった方法をとってきたのですが、自分自身では出来ても、誰かにその方法を、教えたり、便利だと思ってもらう事は、前置きが長くなりすぎて難しいだろうと思っています。

WordPressのフォーラムなどでの質問を、覗き見していると、いわゆる改行プラグインといったものを使っている人も少なからず存在していて、「日本語」は、行間にちょっとした意味を持たせたりするニーズがあるんだろうな、等と思っていました

このようなことから、ワードプレスの投稿で、自由に改行が可能になる　コピペスクリプトを作成しました

以下内容について説明します。

機能

投稿の中に　[nobita]　と記述して、投稿を書いていただくと、改行したとおりに、行間を空けることが出来ます。

[nobita]と記述しない場合は、通常のWordPressの機能で表示されます。（複数改行は、無視）

特徴

この機能は、フィルターと、スタイルの設定だけで、動作しますので、投稿自体を改変したりするものではありません。

特徴

PHP スクリプトですが、わずか15行　スタイルシートは、33行だけです。

ビジュアルモードでも、テキストモードでも動作しますが、テキストモードのほうをおすすめします。

ビジュアルモード　Tips

ビジュアルモードでは、改行を押すと、一行空白があいて、段落が出来てしまいますが、

段落内で、改行をしたい時には、シフトキーを押しながら改行キーを押すと、段落内改行が出来ます。

動作原理

WordPress3.4は、複数のbr要素の検出とコントロールを<br />に対して、行っています。このため、このタグに、クラス属性を追加して、検出とコントロールから、逃れる作業を、コードの中で行っています。これは、表示する時だけ機能するフィルタという機能を使っていますので、コンテンツ自体を改変する事はありません。

制限

自分のブログやホームページで利用する場合は、商用でも、非商用でも自己責任で、自由にカスタマイズして使ってください。

他の、テーマやプラグインで利用する場合は、GPL2または、それ以降のライセンスに従ってください。

既知の問題

table エレメントの中には、改行を含めないでください。Chromeやfirefoxでは、テーブルの上部に大きなマージンが発生します。

それ以外の、ブロック要素の、隣接<br class="space" />は、スタイルルールで、display:none　として処理してあります。

適宜、環境に合わせて、スタイルルールを検討してください。

WEB標準では、連続するbr要素は、推奨されないという点を理解した上で、利用してください。

コード

テーマファイルの、functions.phpの先頭　<?の直前に、以下のコードを貼り付けてください。

<?php
//複数改行を有効にするスクリプト
/*
Script Name: Force Break
Author: Tenman
Author URI: http://www.tenman.info/
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
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;
}
?>

style.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;
}

最後に

楽しんでください