b00k.jp ~積み上げ式読書ノート~
公開日:
最終更新日:2018/09/14

【プログラミング知識不要】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>タグが記事から消えてしまいます。
2018y09m02d_140526403

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

サンプル

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

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

カテゴリー: IT, プログラミング

努力が続かないとお悩みの方へ!

努力のコツ PC用バナー

Amazonにて発売中!!

試験に受かる、給料を上げる、ビジネスを立ち上げる…。
自分の人生をよりよくしていくには、何よりも努力が欠かせません。
しかし、そうはわかっていてもなかなか続かないもの。。。
「めんどくさい」、「明日からでいいや」、「どうせやっても無駄だし」…
こんな風に私たちは努力を続けられずにいます。

ですが、それはあなたが怠けものだからとか、根性がないからというわけではありません。
どうすれば努力が続くのか、その「テクニック」を知らないだけなのです!
本書では、そんな「どうすれば努力が続くのか」というテクニックや心構えを集めました。
「達成したい夢があるのに、どうしても頑張れない…」
そんなあなたに是非とも読んでほしい1冊となっています。


広告

オススメ記事


PAGE TOP ↑