jQueryが動かない?WordPressでjQueryを使う方法


WordPressでjQueryはそのまま使えないとうことを今更ながら知りました…orz
設定の際、紆余曲折ありちょっと苦戦したので
参考までに最低限の手順をまとめました。

「functions.php」にコードを追記する。

自作のJavaScriptをWordPressで利用してスマホからのアクセスのみリダイレクトする」で
記載した内容と同じですが、自作のJavaScriptを登録し出力する記述をします。

<?php 
if (!is_admin()) {
function my_scripts() {
    //wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    wp_enqueue_script( 'app', get_stylesheet_directory_uri() . '/js/app.js', array( 'jquery' ), '1.0.0', true );  
}
  add_action( 'wp_enqueue_scripts', 'my_scripts' );
}
?>

今回は読み込むファイルを「app.js」というファイル名にしました。
前回と違う箇所は[$deps]に「array( ‘jquery’ )」と記述しています。
この記述によってjQueryが使えるようになります。

WordPressでjQueryを記述する際の注意点

$(function() {
    // ここにコードを書く
});

そのまま記述するとWordPressでは動作しません。
$ ショートカットが使えないようになっているため、
動作させるためには次のように記述します。

jQuery(function() {
    // ここにコードを書く
});

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ビジュアルプログラミング オンライン無料体験レッスン モニター大募集
こどもICTかつしか教室 | 幼稚園年長 小学生 中学生 スクラッチ ビジュアルプログラミング
WordPress で困ったら? | 必要なときに必要な分だけ、お助けサポート
WordPress / PHP なんでも相談OK