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
  • このエントリーをはてなブックマークに追加

関連記事

PAK85_seijinsikikeitai20140113500-thumb-500xauto-4104

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

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

記事を読む

PAK23_husentomemo20140313500-thumb-500xauto-4376

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

jquery-icon

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

application-javascript

javascriptでチェックボックスを一括で変更する方法

チェックボックスのチェックに一つ一つチェックを入れていくのは非常に手間がかかるのでjavascrip

記事を読む

chessboard

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

sliderimage

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

application-javascript

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

nc23924

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

question

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

application-javascript

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

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

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

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

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

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

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

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

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

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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