beatoraja用FullHDスキン【ModernChic】公開中です!
WordPress

WordPressでjQueryを導入する時に・・・

WordPress
この記事は約2分で読めます。

WordPressにJavaScriptのライブラリ『jQuery』を導入する時にちょっとした勘違いをしていたのでメモメモ。
勘違いというかなんというか・・・私のいくじなしぃ~って感じです。備忘録っと。

jquery

わざわざjQueryを用意しなくても良かったという話

WordPressに用意されたjQueryを呼び出す技があるなんてしらなかったお(´・ω・`)
今までこう書いてました。

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="<?php bloginfo('template_url'); ?>/js/script.js"></script>
</head>

一般的なjQueryを呼び出すスクリプトです。
そしてJavaScriptを書いたファイルを <?php bloginfo() ?> を使って読み込んでいました。

もちろんこれでも正常通り動いていたので満足だったのですがWordPressには用意されたjQueryを呼び出す<?php wp_enqueue_script() ?>という関数があるので修正をしてみました。
それがコチラ。

<head>
    <!-- jQuery呼び出しとスクリプト -->
    <?php wp_enqueue_script('script', get_bloginfo('template_url') . '/js/script.js',array(jquery)); ?>
</head>

こうすることでWordPressに用意されたjQueryを使うことが出来るようです。
またこの記述は<?php wp_head(); ?>の前でないと呼ばれないので注意が必要。

$が使えない・・・!?

通常jQueryで書くプログラムは$(function(){});で書くのですがWordPressではPrototypejsも使っているため$を使うとコンフリクト(競合)するようです。
なので$をすべてjQueryに変えることで回避できました。これでひとまず修正完了w

$とかコンフリクトとか聞くとある一部の方は反応すると思います。私もそうですしwww

参考サイト

  • wp_enqueue_scriptで外部のjQueryライブラリを使う 
  • WordPressでjQueryが動かないという人へ 
タイトルとURLをコピーしました