As You Like It » Blog Archive » WordPressのエディタとの付き合い方

WordPress標準のエディタが非常に使いづらい。デフォルトではビジュアルエディタが有効になっており、投稿の編集時はまずビジュアルエディタに投稿が読み込まれるのだが、私はもっぱらコードエディタで編集を行っている。そのためすぐにコードエディタへ切り替えるのだが、一度ビジュアルエディタで読み込んでしまうとソースが意図しない形に変換されてしまう。これでは編集を行うたびに細かい修正が必要になってしまい、非常に不便だ。

また、投稿を表示する際に改行コードをbrタグに変換するなどの処理が行われているのだが、意図しない部分にpタグが挿入されてしまうことが多い。基本的には重宝する機能なわけだが、codeタグ内にpタグを埋め込まれてしまうとcodeタグのCSSが効かなくなってしまい困ってしまう（何かうまいCSSの書き方があるのかもしれないが、見つけることが出来なかった）。
それだけではなく、「<p></code></p>」のように不可思議なネストが生成されてしまう場合もある。

機械的に文章を解析しタグを挿入しているわけだから、不都合が生じるのは仕方のないことだが、如何せん不便と思うパターンが多すぎる。そこで、WordPressの癖を覚えつつ、やむを得ない部分はソースの改造を行い、エディタと上手な関係を築けるように工夫していこうと思う。

ビジュアルエディタを無効にする

冒頭に書いた通り、ビジュアルエディタはソースを変換してしまうので無効に設定する。

管理画面の「ユーザー」タブからビジュアルエディタを無効にしたいユーザーを選び、編集画面の「ビジュアルエディタを使用する」のチェックを外し、「ユーザーを更新」を押してやれば無効になる。これで、編集画面からはビジュアルエディタのタブが無くなり、最初からコードエディタでソースが読み込まれるようになる。

codeタグ内のpタグを除去する

投稿表示の際に挿入されるpタグをどこまで制御するか迷ったが、回避策を見つけることが出来なかった「codeタグに挿入されるpタグ」に対してのみ対策を取ることにした。これには、WordPressのソースを一部変更する必要がある。

wp-includesのformatting.phpを編集する。「function wpautop」で検索するとpタグやbrタグの挿入処理を行っている関数が見つかるので、関数末尾の「return $pee」の前に下記の2行を挿入する。

$pee = preg_replace('| {4}|', str_repeat('&nbsp;',4), $pee);

$pee = str_replace('\\', '\\\\', $pee);

$pee = preg_replace(

        '|<code.*?>.*?</code>|se'

        , "str_replace(array('<p>', '</p>'), array('', '<br /><br />'), '$0')"

        , $pee);

$pee = StripSlashes($pee);

1行目では、半角スペースが4つ続いた場合に「 」に変換し、ブラウザ上でも半角スペースを複数個表示できるようにしている。CSSで「white-space: pre;」とすれば、スペースのままでも期待通りに表示されるのだが、枠から溢れて表示されてしまうのに抵抗があったため、使用していない。

2行目では、投稿内の「\」を「\\」にエスケープしている。理由は4行目に関わってくる。

3行目では、pタグを削除し、段落を設けるためにクロージング側のタグをbrタグ2つに変換している。今回のコードではここが主の部分となる。

4行目では、StripSlashesにより投稿内のエスケープを除去している。理由はpreg_replaceをeオプションで実行した場合に、文字列内のクォートがエスケープされてしまうからだ。例えば、<span class="comment">などとしている場合に、「"」が「\"」となってしまい、HTMLタグが正常に認識されなくなってしまう。その対策としてStripSlashesを使用するのだが、この関数は全てのエスケープ文字を除去してしまうため、「\n」などの「\」までが削除されてしまう。そこで2行目の処理が必要になってくるわけだ。

PHP未経験者とはいえ、後手に回る対応が多く、とてもスマートとは言えない手順となってしまったが、実利は得られるので良しとする。

ちなみに、pタグ・brタグの挿入を完全に停止してしまうには、wp-includesのdefault-filters.phpを下記のように変更すればいい。

add_filter('the_content', 'wpautop');

add_filter('the_excerpt', 'wpautop');

    ↓

// pタグ・brタグの挿入を停止するためコメントアウト

// add_filter('the_content', 'wpautop');

// add_filter('the_excerpt', 'wpautop');

これでそもそも変換処理が行われなくなる。

codeタグ前後のpタグを調整する

上述の手順でcodeタグ内のpタグは除去されるようになったが、codeタグ外のpタグが期待しない形で挿入されてしまう。具体的には、下記のようになる。

<p>下記がコードです。<br />

<code>ここがコードです</code><br />

上記がコードです。</p>

本来は下記のように挿入して欲しい。

<p>下記がコードです。</p>

<code>ここがコードです</code>

<p>上記がコードです。</p>

前者の例になるのは、codeタグがインライン要素だからだ。「display:block」として無理やりブロック要素としているために、期待と相容れなくなってしまっている。そこで、codeタグがブロック要素として扱われるように変更する。

wp-includesのformatting.phpを編集する。pタグの除去と同様に「function wpautop」で検索した関数を変更する。


$allblocks = '(?:table|thead|tfoot|caption|colgroup|tbody~省略~)';

    ↓

// 先頭にcodeを追記する

$allblocks = '(?:code|table|thead|tfoot|caption|colgroup|tbody~省略~)';

これで、codeタグがブロック要素として扱われるようになるので、期待した通りにpタグが挿入されるようになる。当然ながら、pタグ除去の手順でpタグ・brタグの挿入を完全に停止してしまっていた場合はこの対応を行う意味が無い。

クォートの変換を無効にする

WordPressでは「'」や「"」のようなクォートなどが「&#****;」といったコードに変換されてしまうようだ。これではコードを記述する際に意図しない形になってしまい困ってしまう。コピー＆ペーストも出来ない。

また、私の場合は下記のような問題が発生していた。二度登場する「'A'」に注目して欲しい。

if(my $query = $res->search($host, 'A')){

    # <span class="comment">を利用したあとのクォートが変換される。

    print map {$_->address."\n"} grep($_->type eq ‘A’, $query->answer);

}

この中途半端な状態について原因の特定は行っていないのだが、実はcodeタグ内のクォートは変換されないように作られているのではないかと予想している。しかし、<span>といった別のタグが呼び出されることで、それ以降がcodeタグ内ではないと判断され変換されてしまっているのではないか。もちろん想像に過ぎないのだが。

原因は何にせよ、クォートも入力した通りに表示して欲しいので変換機能を停止させてしまう。これにはプラグインを使用する。

Multimeter：『Kill WPTexturize』

このプラグインをwp-content\pluginsにアップロードし、管理画面から有効にするだけで全投稿のクォートが元のままで表示されるようになる。

また、この問題の解決には以下のサイトを参考にさせてもらった。

BirDesign：『クォーテーションを変換しないようにする』

まとめ

以上の作業を行うことで、WordPressでの編集作業がずいぶんと気楽に行えるようになった。

後は挿入されるpタグ・brタグのため、改行の位置にほんの少し気を遣っていくだけだ。