b00k.jp ~積み上げ式読書ノート~
公開日:
最終更新日:2017/05/11

WordPressで記事内に直接JavaScript、CSSを記述する方法

記事に直接JavaScriptを埋め込む

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

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

注意点として、JavaScriptの記述中に空行を入れると、上手くいかなくなります。
空行があると、自動的に</p>タグが生成されてしまうことが原因のようです。
【参考】
WP(WordPress)で個別記事にJavaScriptを入れる方法

記事に直接CSSを埋め込む

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

注意点として、ビジュアルモードに切り替えると、<style>タグが記事から消えてしまいます。
【参考】
WordPressで記事ごとに個別のCSSを設定する方法3選

サンプル

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

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

広告

カテゴリー: IT

曲をつくりました!




オススメ記事


PAGE TOP ↑