【プログラミング知識不要】WordPressで記事内にJavaScript、CSSを記述する方法

たとえば、JavaScriptのサンプルコードや実際に動くものをWordPressに掲載したい時、記事の更新と同時に、JavaScriptの外部ファイルも更新しないといけなくなります。
記事更新のたびにJavaScriptファイルを編集するのは、非常に面倒ですし、1回しか使わないJavaScriptの関数を外部ファイルには書きたくありません。

WordPress記事中に直接JavaScriptを埋め込む

そこで、役に立つのが、今回紹介する記事中に直接JavaScriptを埋め込む方法です。
この方法を使用することで、記事ごとに個別のJavaScriptを設定することが可能です。
以下のように<div>タグで囲んで記述することで、WordPressの記事投稿画面から直接JavaScriptを記述することができます。

注意点として、JavaScriptの記述中に空行を入れると、上手くいかなくなります。
空行があると、自動的に</p>タグが生成されてしまうことが原因のようです。

これはJavaScriptの圧縮などを行えば回避できます。
以下のツールなどを使用してJavaScriptを圧縮してから記述することをおすすめします。
JS Minifier (JavaScriptの圧縮)

【参考】
WP（WordPress）で個別記事にJavaScriptを入れる方法

WordPress記事中に直接CSSを埋め込む

同様に、記事中に直接CSSを埋め込むこともできます。
<style>タグ内に記述します。

注意点として、ビジュアルモードに切り替えると、<style>タグが記事から消えてしまいます。

【参考】
WordPressで記事ごとに個別のCSSを設定する方法3選

サンプル

JSやCSSを記事中に直接記述すると以下のようなページを作成することができます。

人生楽しんでますか？人生のバランス度チェックテスト！
○×ゲーム(JavaScript)
JavaScriptでリストの要素を追加、削除する
JavaScript for文のサンプル
JavaScript 配列のサンプル
Canvasを使って動きのある図形を描写する
Canvasを使って図形を描く

---

---

広告