wordpressでjavascript、jQueryを使用する方法

wordpressにて、javascript、jQueryを使用する方法を説明します。(jQueryとは、javascriptコードをより簡単に記述するためのjavascriptライブラリです。通常のjavascript記述方式に加えて、jQueryの記述方式も使えるため、コードを短くすることができます。)

「wordpress」、「jQuery」をネットで検索すると、以下の2種類の使用方法が出てきます。

  1. 初期インストールされているwordpress独自のjQueryを使用する。(wordpress公式推奨)
  2. 外部jQueryを使用する。

それぞれ、メリット、デメリットがありますが、特に理由がなければwordpressが用意しているjQueryを利用した方が、問題が起きにくいので、今回はそちらの使用方法を記述します。

  • wordpressの「functions.php」に以下を追記します。

/**
* jqueryを使用するための定義
*/
function my_scripts() {

function my_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('javascript',get_template_directory_uri().'/js/javascript.js',array('jquery'));

}

add_action('wp_enqueue_scripts','my_scripts');

  • 「C:\xampp\htdocs\(対象wordpressフォルダ)\wp-content\themes\(対象テーマ)\」に「js」というフォルダを作成し、その中に「javascript.js」ファイルを作成します。(既に、「js」フォルダが存在している場合はファイルのみ作成してください。)

  • 作成した「javascript.js」に処理を追加します。今回は「Hello World」を出力する処理を追加しました。

  • javascriptを利用したいページのphpファイルに処理を追加します。今回はjavascriptサンプルページに以下を追加しました。

  • これで「Hello World」が表示されれば、設定完了です。

javascriptサンプルページ

※javascript適用ページを表示後、F12キーを押すことで、javascriptのデバッグができます。

function my_scripts() {

function my_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('javascript',get_template_directory_uri().'/js/javascript.js',array('jquery'));

}

【その他注意事項】

javascriptのコードが動作しないときは、以下リンクも参考にしてみてください。

wordpressでjavascript、jqueryを使うときの注意事項

【追記】

ページごとのjavascript設定は以下ページをご参照ください。

wordpressでページ毎に個別にjavascriptを定義、設定する方法

コメントはお気軽に!

メールアドレスが公開されることはありません。