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() {
    // ここにコードを書く
});

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

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

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

一昨年の3月に結婚し、尻敷かれ男子の仲間入りを果たしました(笑)

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発「 Excel VBA 」を活用した効率化ツールの開発を中心に「 ネットワーク・サーバー構築 」や「 Office365製品の導入支援 」、最近は、ホームページ制作に加え、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

お問い合わせはJTクラウドシステムホームページからお願いします。
スポンサーリンク