【WordPress】カスタムHTMLが保存後に消える原因と解決策|ブロックコメント編

この記事は2025年4月現在の情報に基づいています。

✅この記事でわかること

WordPressでカスタムHTMLが保存後に消える原因
ブロックエディタ（Gutenberg）特有の問題点
HTMLコードを安全に保存・管理する方法

はじめに

WordPressで記事作成中に、カスタムHTMLを貼り付けて保存すると「正常に表示されたのに、再編集でコードが消えてしまう」という現象が起きることがあります。

特にブロックエディタ（Gutenberg）を使用している場合、この問題が発生しやすいです。
この記事では、実際の事例をもとに原因と対策をわかりやすく解説します。

✅この記事でわかること
はじめに
【現象】カスタムHTMLが再編集時に消える
【原因】ブロックコメントの二重ラッピング
【解決策】不要なブロックコメントを削除する
【注意点】ブロックエディタの仕様を理解しよう
まとめ
このサイトについて
【変更履歴】

【現象】カスタムHTMLが再編集時に消える

発生した環境

OS：Windows 10
ブラウザ：Google Chrome 135.0.7049.96（64ビット）
WordPress：バージョン6.8
テーマ：Cocoon
使用エディタ：ブロックエディタ（Gutenberg）
サーバー：さくらインターネット（スタンダードプラン）

問題となったコード例

※コードはスクロールできます

<!-- wp:tadv/classic-paragraph -->
<p id="invite-code">コピーされる文字列</p>
<p><button onclick="copyToClipboard()">コードをコピー</button></p>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:tadv/classic-paragraph -->
<p><script>
function copyToClipboard() {
    const code = document.getElementById("invite-code").innerText;
    navigator.clipboard.writeText(code).then(() => {
        alert("文字列がコピーされました！");
    }).catch(err => {
        console.error("コピーに失敗しました: ", err);
    });
}
</script></p>
<!-- /wp:tadv/classic-paragraph -->

一見正しく保存できたように見えても、
再編集するとこのコードブロックが丸ごと消えてしまいました。

詳細な手順は、こちらを展開してください

広告(設定によっては表示されません)

【原因】ブロックコメントの二重ラッピング

ブロックエディタでは、各ブロックの開始・終了を示す「ブロックコメント（例：）」が自動で挿入されます。

今回の問題は、

HTMLブロック（）の中に
クラシック段落ブロック（）が
ネスト（入れ子）されてしまったことが原因です。

問題となったコードでは以下の部分が該当します。

※コードはスクロールできます

<!-- wp:html -->・・・・・・・・・・・・段落ブロックに付くコメント
<!-- wp:tadv/classic-paragraph -->・・・クラシックの段落ブロックに付くコメント
以下、ボタンに関する処理

【参考】ブロックのアイコンとコメント

<!-- wp:paragraph -->
<p>ダミー入力</p>
<!-- /wp:paragraph -->

段落ブロックのブロックコメント

<!-- wp:tadv/classic-paragraph -->
<p>ダミー入力</p>
<!-- /wp:tadv/classic-paragraph -->

クラシック版の段落ブロックの
ブロックコメント

WordPressは、想定外のネスト構造を検出すると、データを安全のため消してしまう仕様になっています。

【解決策】不要なブロックコメントを削除する

正しい修正方法は、クラシック段落のブロックコメントを取り除くことです。

修正後のHTMLコード

※コードはスクロールできます

<p id="invite-code">コピーされる文字列</p>
<p><button onclick="copyToClipboard()">コードをコピー</button></p>

<p><script>
function copyToClipboard() {
    const code = document.getElementById("invite-code").innerText;
    navigator.clipboard.writeText(code).then(() => {
        alert("文字列がコピーされました！");
    }).catch(err => {
        console.error("コピーに失敗しました: ", err);
    });
}
</script></p>

取り消し線の部分が削除対象です

<!-- wp:tadv/classic-paragraph -->
<p id="invite-code">コピーされる文字列</p>
<p><button onclick="copyToClipboard()">コードをコピー</button></p>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:tadv/classic-paragraph -->
<p><script>
function copyToClipboard() {
    const code = document.getElementById("invite-code").innerText;
    navigator.clipboard.writeText(code).then(() => {
        alert("文字列がコピーされました！");
    }).catch(err => {
        console.error("コピーに失敗しました: ", err);
    });
}
</script></p>
<!-- /wp:tadv/classic-paragraph -->

これで、再編集してもHTMLコードが消えなくなります。
最後に、このコードをカスタムHTMLブロックに貼り付けて完成です。