WordPress

WordPressのカスタムHTMLブロックで ‘>’ などを記述する場合の問題点 (未解決)

投稿日:

1. はじめに

WordPress の記事編集画面 (Gutenberg) では、いろいろなブロックが用意されていますが、その中の1つである「カスタムHTML」ブロックでの問題点について書きます。

カスタム HTML ブロック

2. カスタムHTMLでの問題点

困った現象というのは、以下の現象です。

  1. カスタムHTMLブロック内で、何かしらHTMLタグを書く。
  2. そのとき、タグの属性値に HTMLの「数値文字参照」もしくは「文字実体参照」を使う。
  3. 一旦、記事を保存して閉じる。
    • データベースには、「数値文字参照」もしくは「文字実体参照」がそのまま保存される。
  4. 再度その記事を編集する(編集画面を開く)。
  5. 先程の「数値文字参照」もしくは「文字実体参照」を記述した部分が、「参照したい文字」に置き換わって表示される。
  6. その状態でもう一度記事を保存すると、データベースには「数値文字参照」もしくは「文字実体参照」ではなく、「参照したい文字」が保存されてしまう。
  7. その記事を閲覧する際、意図しないHTMLが出力されてしまう。

具体的な例をあげてみます。

(1) カスタムHTMLに以下を記述します。

<p class="&gt;">Hello!</p>

この記事をプレビューすると、この部分は「Hello!」と表示されます。

(2) この記事を保存して、再度編集を開きます。

すると、先程の カスタムHTML ブロックは以下のように表示されます。

<p class=">">Hello!</p>

(3) 再度保存します。

(4) この記事を閲覧します。

すると、「Hello!」が表示されません。意図しない HTML が出力されたからです。

本来、「Hello!」が出力されるはずだった部分のHTMLには以下が出力されます。

意図しない HTML が出力されます(2つ目のダブルクォートが数値文字参照になっています)

つまり、「&gt;」が「>」になったことで、この部分が「閉じタグ」だと解釈されてしまいました。

3. どんな時に困るのか?

実際、HTMLの属性値に 「数値文字参照」もしくは「文字実体参照」が必要になるような文字を入力するようなことはなかなかないと思いますが、例えば <a> タグの href 属性に JavaScript コードを記述する場合に困ります。アロー関数「() => { ... }」を書こうとして、「&gt;」の部分を「&amp;gt;」と書いた場合に、今回の問題が発生します。if の条件で大小関係を書く場合も同様です。あと、title 属性で &gt; などを使いたい場合も困ります。

<a href="javascript:(()=>{let a = 2; if (a > 1) alert(1);})()">Test</a>

4. 未解決

今のところ、未解決です。

何か解決策がありましたら教えて頂きたいです。

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress のプラグイン Autoptimize についての覚書

WordPress のプラグイン Autoptimize についての覚書です。

WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …

WordPress

WordPress をフレームワークとして利用する

目次1. はじめに2. WordPress をフレームワークとして利用する場合に便利な機能3. ブログでない Webサイトに WordPress を使う試み3-1. したいこと3-1-1. メインのコ …

WordPress

【WordPress】Gutenberg をカスタマイズするための情報

WordPress の Gutenberg をカスタマイズするための情報を紹介します。

WordPress

【WordPress】Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが表示されました

WordPressで、Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが発生しました。