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サイトの記事に表示した画像を観察する (Gutenberg)

WordPressサイトの記事に表示した画像を観察します。

WordPress

WordPress: @wordpress/env と @wordpress/scripts を使ってカスタムブロック開発環境をセットアップする

@wordpress/env と @wordpress/scripts を使ってカスタムブロック開発環境をセットアップする手順を紹介します。

WordPress

WordPress: create-block して wp-env start する際の注意点

WordPress: create-block と wp-env を使う際の注意点について書いています。

WordPress

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生する

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生した場合の対応方法について書きました。

WordPress

【WordPress】img タグに自動的に追加される属性について

WordPressの投稿ページに画像を貼った場合、その img タグに自動的に追加される属性について説明します。