2016/09/30 by プロストサイト – Update 14

WordPressビジュアルモードでのHTML欠落を防止する

WordPressでは、HTMLコード表記は行えないのでSyntaxHighlighter Evolved等を利用していました。しかし、ビジュアルモードにするとHTMLコード欠落してしまう課題がありました。WordPress-3.9とTinyMCE-4.0では、これら課題解決が見られます。

WordPress段落ドロップダウンPreによるHTML表記

例えば、プラグインTinyMCE Advanced設定画面のAdvanced Optionの説明文はHTMLの段落と改行タグを含むためWordPress記事としての直接表記は行えない状況でした。これが、段落ドロップダウンメニューに新しく加わったPreで可能となりました。

WordPress-3.9/TinyMCE-4.0 – ビジュアル画面表示

文章範囲をハイライト指定して、段落のドロップダウンメニューからPreを選択した事例です。

ビシュアル画面でも、段落や改行のタグが消えることなく表示されています。指定された範囲には、スクロールバーが付いています。

WordPress-3.9/TinyMCE-4.0 – プレビュー表示

プレビュー表示でも、赤枠のようにHTMLタグが表示されています。スクロールバーは表示されないので、行数が増えた形です。

SyntaxHighlighter EvolvedによるHTML表記

プラグインSyntaxHighlighter Evolvedを利用すると、HTML等のコード表示を行えます。ただし、WordPress-3.8.3まではビジュアルモードにするとコードが欠落してしまう課題がありました。

SyntaxHighlighter Evolved-3.1.9の説明にも、「TIP: Don’t use the Visual editor if you don’t want your code mangled. TinyMCE will “clean up” your HTML.」とあります。単語検索で調べてみると、TinyMCEビジュアルエディタがHTMLコードを切り取ってしまう意味のようです。

WordPress-3.9/TinyMCE-4.0 – プレビュー表示

今度は、WordPress-3.9でのSyntaxHighlighter Evolvedでのプレビュー表示です。前記Pre表示と同じ文章です。この文章は、行番号表示の意味は無いのですがWordPress機能との違いの意味で表示させています。

コード表示目的のプラグインなので、Pre表示に比べ全体的にコンパクトです。

今後は、SyntaxHighlighter Evolved利用でHTMLコード欠落の懸念が無くなりそうです。TinyMCE-4.0の恩恵です。