WordPressの記事内でJavaScriptを動かす

公開日: : 最終更新日:2014/08/14 JavaScript/jQuery, WordPress

スポンサーリンク

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かないJavaScriptをどうやって動かすか検証しました。ちなみに、自分の調べたときのWordPressのバージョンは3.91です。

WordPressでJavaScriptを動かす方法

ここから本題なのですが、WordPressの記事内でJavaScriptを動かす手法にプラグインを導入する方法とそうしない方法があるようですのでそれぞれ調べました。

プラグインを使わない方法

案外何もプラグインを導入しなくても動くものは動きます。このことはJavaScript製のブログパーツが普通に動くのをみるとわかります。

スクリプトが動かない場合としてはWordPress側で自動で挿入される<p>~</p>タグが原因かと思います。

このタグが非常にハタ迷惑なのですが、これが挿入されるタイミングとして考えられるのが改行してスペースが出てきたときです。
その他にも<div>タグをスクリプトに含めると変なところで改行してしまう場合があります。例えばDOMを作成するときに$(“<div>”)などとするとうまくいかないことがありました。他のタグでもこういった現象が起きるのではないかと思います。

なので、ベストなのは記事の方にソースは書かないで、外部スクリプトとして保存して呼び出すというのが無難かと思います。

inline-javascriptを使う方法

inline-javascriptというプラグインを使用するとスクリプト部分を[inline]~[/inline]で囲むだけでスクリプトが動くようになります。ただし、このプラグインを使うとWordPressのバージョンによっては文章のレイアウトが多少崩れるといった欠点もあるため、その辺については注意が必要です。

また、このinline-javascriptのプラグインでも上記同様にDIVタグなどを使用するとうまくいかないといった症状が見られましたので使う際は気を付けてください。

Custom CSS and JSを使う方法

プラグイン「Custom CSS and JS」では記事作成ページのカスタムフィールドからCSSやJavaScriptを記事に追加することができます。ただし、いちいちカスタムフィールドに別途記述する必要があるため多少面倒ではあります。

CSS & JavaScript Toolboxを使う方法

上記のCustom CSS and JSはカスタムフィールドにソースを追加する形のものでしたが、こちらはエディタ形式でソースを変更することができて、かつソースをそのまま一括管理、どこの記事で、もしくは全体でそのスクリプトを有効にするかを簡単に決定・変更することができます。正直一番使いやすいと思います。

cssjstoolbox

このプラグインをインストールすると下図のように左側のメニューバーに『CSS & javascript Toolbox』という項目が出てきてJS・CSSだけでなくPHPやHTMLのソースコードを追加・編集・管理することができます。右の赤枠部分で編集しているソースをどこの記事に反映させるか決めることができます。

最後に

プラグインも便利ですが気をつけさえすればスクリプトはキチンと動いてくれるので何も導入しなくても意外と大丈夫ですので、必要な場合に応じてインストールするもしくは利用する方針でいいかと思います。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑