[WordPress]記事内にJavaScriptのコードを反映させる

WordPressでJavaScriptの記事を書いている時、実行結果を表示する方法を探していました。

HTML、CSS、JavaScriptの実行結果を表示したいのだったら、CodePenなどを用いたらコードと結果を簡単に表示できるのですが、外部のサイトやプラグインなどを使用せずに実現する方法がありました。

記事の記述方法を「テキスト」にし、JavaScriptのコードを書き込む方法です。

使用方法

<script>タグを<div>タグで囲む

<div>
	<script>
		var sample_id = document.getElementById("sample");
	</script>
</div>

<div>

var sample_id = document.getElementById("sample");

</script>

</div>

JQueryなどのライブラリの宣言も同じ方法で記述すれば使用できます。

注意点

空白の改行を入れないようにコードを書く

空白の改行は<p>タグに自動変換されてしまうので注意してください。

<div>
　　　　　　　　　　　　　　　//空白の改行
	<script>
		var sample_id = document.getElementById("sample");
	</script>
</div>

//↓　このようになってしまいます
<div>
	<p>
		<script>
			var sample_id = document.getElementById("sample");
		</script>
	</p>
</div>