【WordPress】記事内で「JavaScript」や「css」を使うには?

WordPress

「簡単なJavaScript」や「ちょっとしたCSS」を記事の中で使いたいです。どうしたらいいでしょう?

外部ファイルで持つのも、プラグインを使うのも大袈裟です。

いつもの簡単な使い方

<div>
<script>
~JavaScript~
</script>
</div>

などとしてました。
とりあえず動くには動きます。

しかし、WordPressさんは、タグを自動修正します。
編集したり環境を触ってると、いつしか動かない事態になってます・・。
ソースを読むと、改行コード(\n)が<br>に編集されてます。
これではJavaScriptさんは動けません。

さて?


カスタムJavascriptの使い方

試してみたところ、カスタムJavascriptの使い方は、考えていたものと用途が違いました。王道のJavascriptの使い方です。

bodyの閉じタグの前で本来の?Javascriptの使い方です。記事を読み込んだ後に発火するので、jQueryを使うときなどに便利そうです。

私は、何も知らないです・・。 さて?

WordPressの記事内でJavaScriptを使うには?

用途にもよりますが、結果的に、現在の環境( Cocoon)では カスタムHTMLで 、改行を削除したJavaScriptで使ってます。 改行コード(\n)が<br>に編集されなければ使えます。

<div><script>~JavaScript~</script></div>

JavaScriptのコードが長くなる場合、圧縮したら人が読めませんね。^^;
デバッグも困難になります。長いコードは外部ファイルで使いましょう。

WordPressの記事内でCSSを使うには?

一時的に使うだけなら?文章に直接CSSを書き込むもOKです。とりあえず・・という使い方です。

この文章の直下で、CSSを直に書いてます。保守とかマナーをともかくとすれば、何処でも書けるようです。

<p>一時的に使うだけなら?<span class="test">文章に直接CSSを書き込むもOKです。</span>とりあえず・・という使い方です。</p>
<style>
.test {
    color:red;
    font-size: 18px;
    font-weight: bold;
}
</style>

【WordPress(Cocoon)】特定の記事だけでJavaScript/cssを使うには?

今回とは別の事情で、特定の記事だけで「JavaScript」「css」を使いたいことがあります。こちらの記事で紹介しています。

コメント

タイトルとURLをコピーしました