🦚

WordPressのカスタムHTMLの自由度

に公開

はじめに

こちらスマートキャンプのアドベントカレンダー14日目の記事なっています!
WordPressのカスタムHTMLがWordPressがかなり自由度が高かったので備忘録として残しておきます。

WordPressのカスタムHTML

WordPressのカスタムHTMLブロックは以下のようなものです。

ブロックのコード

ブロックのコードは以下になっており、特別HTMLタグで囲まれているわけではなく、ただWordPressコメント囲まれている箇所がカスタムHTMLと解釈されます。

<!-- wp:html -->
<div>
カスタムHTML
</div>

<script>
alert("カスタムHTML")
</script>
<!-- /wp:html -->

マネージドサービスによっては禁止機されているHTMLタグなどがあるようですが、基本的にはただのHTMLを埋め込めます。
なのでstyleタグ, scriptタグを埋め込むことができ、WordPressの制約をほとんど受けません。

WordPressブロックをカスタムHTMLで囲める

WordPressブロックをタグで囲みたいとき、以下のようにしてカスタムHTML要素で囲むことができます。

レンダリングされると以下のようにHTMLで囲まれます。

これができてしまうと、プラグインなどは意図しないブロックの使われ方などができてしまうため、プラグイン開発の際などは気をつけたほうが良いと思います。

GitHubで編集を提案
SMARTCAMP Engineer Blog

Discussion