プロストサイト

プラグイン

mobilegeddon-2-728-90 2017年の企業ECサイト喫緊課題はモバイルファースト対応
  • Home
  • プラグイン選定一覧
  • TinyMCE Advanced 完全マニュアル
    • 見出し設定
    • テーブル(表組み)
    • 画像挿入
    • リンク挿入方針と設定
    • リンク挿入
    • HTMLソースエディタ
    • テキストモードのHTMLモード化
    • 導入とオプション設定
    • オプション設定の完全検証
    • CSSスタイル
    • 日本語化

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-pre-html SyntaxHighlighter Evolved Webページ

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

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

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

wordpress-pre-html SyntaxHighlighter Evolved Webページ

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機能との違いの意味で表示させています。

syntax-hilighter-html SyntaxHighlighter Evolvedテキスト

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

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

 

 

mobilegeddon-2-336-280 2017年の企業ECサイト喫緊課題はモバイルファースト対応
animation-book-affiliate-direct2-336-280 2017年の企業ECサイト喫緊課題はモバイルファースト対応
prost-title-jp プロストサイト
公式サイト
WEO強化画像オンラインサービス
WEBオンラインサービス
オンラインサービスのメンバー
オンラインサービスのアフィリエイト
Webサイトモデル
prost-manual ユーザーマニュアル
WordPress CMS
WordPressホームページ
CMS VPS動作環境
CMS Windows操作
 
  • サイトマップ
  • お問い合わせ
  • 会社案内
mobilegeddon-2-1139-400 2017年の企業ECサイト喫緊課題はモバイルファースト対応
book-affiliate-direct2-1139-400 2017年の企業ECサイト喫緊課題はモバイルファースト対応

© 2019 プロストサイト· WordPress CMSサイトのプラグイン