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の恩恵です。