WordPress :: 行頭の半角スペースの削除を回避する

WordPressで記事を書くときは「ビジュアルモード」(ビジュアルエディタ)で書くことが多いと思います。
「ビジュアルモード」は<HTML>タグを意識せずに装飾を施せるので便利ですが、このエントリーのタイトルにもあるように、行頭の半角スペースや全角スペースを勝手に削除してしまいます。
ソースコードの公開でスペースにてインデントを表したい場合など、この挙動に困っている方は結構いるのではないでしょうか。

約半日かけて、WordPress と TinyMCE のソースコードを追ってみて、削除を行っているとおぼしきコードを複数発見し、それらをコメントアウトしたり修正してみましたが、挙動を抑制するまでに至りませんでした。

WordPressの「ビジュアルモード」では、オープンソースの「TinyMCE」という JavaScript製の WYSIWYGエディターを採用しています。

ネットで調べてみると、「TinyMCE」に下記のようなオプションを指定することで回避できた方もいるようです。

tinyMCE.init({
     :
    preformatted : true,
    remove_linebreaks : false,
     :
});

しかし、私の環境(FireFox 3.6)では効果はありませんでした。

なお、未確認ですが、後で知った情報によると、スペースを勝手に削除するという挙動は、ブラウザの仕様でもあるようです。
そのため、ブラウザによって挙動が異なり、IE7 や Safari等、削除しないブラウザもあるようです。

で、「スペースを勝手に削除するという挙動」の回避方法ですが、手っ取り早くアウトプットバッファリングを利用して、出力を加工することにしました。

具体的には、下記の流れになります。

PHP のアウトプットバッファリングで出力をハンドリング
ハンドリングした内容に文字列置換をかける
文字列置換をかけた内容を出力する

※ この手法は、ブラウザ依存を考慮しなくて良い等の利点がありますが、パフォーマンス面で若干不利になります。

修正ファイル

wordpress/wp-blog-header.php

16行目付近にある

require_once( ABSPATH . WPINC . '/template-loader.php' );

の前後に、下記のように３行追加します。

ob_start(); // (1)
ob_implicit_flush(false); // (2)
 
require_once( ABSPATH . WPINC . '/template-loader.php' );
 
echo str_replace('~SP~', '&nbsp;', ob_get_clean()); // (3)

(1)(2)(3) を追加します。

使い方

~SP~ が半角スペースを表します。

wp-blog-header.php をアップロードしたら、記事を書く時に半角スペースを入れたい場所に
~SP~ を入力します。
行頭、行中問わず、~SP~ がすべて   に置換されます。

※   は半角スペースを表す特殊文字(エンティティー)です。

入力例

~SP~←半角スペース1文字。
~SP~~SP~←半角スペース2文字。

プラグイン

時間がある時にでも、プラグイン化してみたいと思います。

「Ktai Style」プラグインへの対応

「Ktai Style」プラグインに対応させる場合は、下記のように修正を加えます。

修正ファイル

wp-content/plugins/ktai-style/ktai_style.php 535行目付近

修正前

header ("Content-Type: $mime_type; charset=$iana_charset");
echo $buffer;
exit;

修正後

header ("Content-Type: $mime_type; charset=$iana_charset");
echo str_replace('~SP~', '&nbsp;', $buffer);
exit;