WordPressの記事内でJavascriptを書く方法

posts_photo
ちょっと躓いて調べてみたのでメモ程度に紹介します。

方法はだいたい3通りほどあるようです。
1)プラグインを使う方法
2)functions.phpを拡張する方法
3)投稿時にdivタグでscriptタグをくくる方法

1)プラグインを使う

これは便利なプラグインがいろいろあります。
よく紹介されていたのは「inline-javascript」というプラグインでした。
ただこのプラグインだと、僕が使っている「SyntaxHighlighter Evolved」というコードを見やすくしてくれるプラグインと相性が悪いようで、共存出来なかったため使うのは諦めました。
ほかのプラグインとしては「Add Admin JavaScript」や「Custom CSS and JS」などなど数えきれないくらいありました。自分にあったものを色々試してみれば良いと思います。

2)functions.phpを拡張する方法

こちらはfunction.phpを触ることで、投稿画面にCSSやJSを追加出来るフィールドを作っちゃおうというものです。
下記のサイトさんが詳しく書いてくれています。
WordPress:ページや記事ごとに個別のCSSやJavaScriptを追加する方法
これが一番軽くて正しい方法なんじゃないかなーと思います。

投稿時にdivタグでscriptタグをくくる方法

下記のサイトさんで紹介されていたのを見て速攻で試したのですが、ほんとに出来ました。
WP(WordPress)で個別記事にJavaScriptを入れる方法 | WEB | C# カフェ ~プログラマー達の憩い場

僕個人としてはこれを採用しました。だってdivでくくるだけで良いとかすごくお手軽。
ただscriptタグ内に改行をいれちゃうと、そこにpタグが挿入されてしまうようです。
なので、動作はローカルで確認してから改行を消してコピペするのが良いんじゃないでしょうか。

こういったWeb制作関連の記事を書いていたりすると、個別記事ごとにJSを使いたい!なんて容貌は多い気がするので、デフォルトでそういう機能を実装してくれたら良いのにな。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
本格ビジネスサイトを作りながら学ぶ WordPressの教科書
ー Amazon.co.jpで買う