WordPressの自動整形プラグインとビジュアルエディタとHTML：メモ

WordPressの自動整形関係は手を出していませんでしたが、今回は必要に迫られて導入。すると、いろいろと慣れない自体に直面。

自動整形は便利ですし重要なプラグインだとは認識していますが、如何せんもとめる挙動にならなかったり。失敗するといちいち細かい修正が必要になり、かなりの時間を修正作業にとられる始末です。

プラグインの挙動を把握できていないのが全ての原因ではありますが、こちらが望む形のプラグインを見つけられないのもまた問題とも言えます。
プラグインの知識や使用経験はやはり大事ですね。

この記事は私的なメモの意味合いが強いので、何かしら正解が書かれている訳でありません。対処療法の過程と結果にすぎませんので予めご了承ください。

前提

WordPressでサイトを作る場合、記事入力部分に直接HTMLを書き込みます。divタグはもちろんpタグも整形に使いますので、基本は通常の静的HTMLと特にかわりません。

HTMLタグを使用するので、必然的にビジュアルエディタは使いません。が、クライアントさんが例えばブログを更新する時はビジュアルエディタを使う訳ですし、そのまま固定ページの画面を開こうものならHTMLで書いた場所をビジュルエディタで開けることになります。
通常ビジュアルエディタとHTMLを切り替えるとタグの消失などが起りますので、レイアウト崩れの大きな原因になります。

なお、WordPressの場合は作業環境で構築して本番サーバーに上げますが、その際に問題となるのがリンクと画像のURL。ベタ書きではいちいち書き換えが大変です。ですので、この部分にはWordPressのテンプレートタグを使っています。phpが使えるようにExec-PHPも必要になります。
ただ、ここでもビジュアルエディタとHTMLに切り換えると、例えばimgタグ内のsrcにテンプレートタグの山括弧（ < や > ）が文字参照に置き換わってしまいます。

さて。
ここで以降に書く内容を分かりやすくするために問題点となる要因をまとめます。

• 記事と投稿部分にHTML
• ビジュアルエディタとHTMLに切り換え
• テンプレートタグの使用

次いで、実現したい状態ですが非常に単純です。

• ビジュアルエディタとHTMLを切り替えてもタグが変わらず、テンプレートタグにも影響が無い状態

これを実現するために四苦八苦した次第です。

別の視点で

早い話が、クライアントさんが固定ページを触らなければ問題は起きません。事前にご留意をお願いし、かつ一見複雑そうに見えるHTMLをお見せすれば大概はご納得いただけますし、安全です。

が、自分でいろいろ更新したい方もいらっしゃいますし、それが可能なのがCMSたる仕組みな訳で。その場合はいろいろ整えなければなりません。

起こった問題と対応策の経過

何もプラグインを入れていない時は、前段で書きましたようにビジュアルエディタとHTMLの行き来が大問題です。
この点を基本に問題解決の方法を探りました。

PS Disable Auto Formattingの使用

これで解決だろういれたプラグインPS Disable Auto Formatting。仮にこのブログに入れてみましたが、実際いい具合に動きそうでした。

が、先日問題発生。このブログで新しく記事を書いた所、過去記事を含めて全記事からPタグが消えました…。公開するまで何もなかったので、公開と同時の模様です。もちろん設定で過去記事に対して処理を行うようにはしていませんでした。

この件があったので、別のプラグインを検討。

TinyMCE Advancedの使用

TinyMCE Advancedというビジュアルエディタ拡張用のプラグインで、pタグやbrタグが安定して使えると言う記事を見て早速実験。
その時点では成功に見えました。

が、原因が未だに分からないのですがある一つのimgタグの末尾に</p>が生成されました。このimgタグは唯一pタグで囲っていなかったので、恐らくそこに反応したのかと思いますが…。なぜ末尾だけに終了タグが付くのかは分かりませんでした。

挙動がわからないので、別の方法を検討。

再びPS Disable Auto Formattingの使用

前述のpタグ消失を調べていたのですが、関連する情報が見つかりませんでした。そこで、再現して調べようと思ったものの再現できず。ある程度しつこく繰り替えしましたがダメした。

他に手もなかったので、少なくともPS Disable Auto Formattingが現時点では安定していると判断して使用を決定しました。因に現時点でも同様の症状(pタグ消失)は起っていません。

ショートコードの使用

imgタグ内のsrcにテンプレートタグの山括弧（ < や > ）が文字参照に置き換わってしまう問題は、その部分をショートコードにしてしまうことで解決しました。

もともと本番環境移行用にショートコードを作っていたので作業は簡単。

WordPressテンプレートタグがコメントアウトになる

一部のページにのみ新着情報表示のためのWordPressテンプレートタグを使用していましたが、コメントアウトになります。Exec-PHPで解決できたいたと思っていたのですがそうでもなく。前段の自動整形プラグインを試しても同じでした。

ここもショートコードにすることで対応しました。

対応策の結論

結論としては以下の通りです。

• PS Disable Auto Formatting
• ショートコードの使用

ショートコードが便利すぎて泣けてきますが、どうも力技過ぎる気もするので何でもかんでもというのは控えようかと思います。でないとショートコードだらけになりそうですから。

結び

以上が経緯と対応と結果です。

全くスマートな解決でも正しい解決でも無さそうですが、現時点ではこれが解決策でした。サイトの構築方法を見直せばある程度防げるものもありますし、運用面での注意でも対応できます。

が、もしもを考えるともっと安定的な形が必要だなと痛感した次第です。