WordPressでjQueryプラグインを使用する方法！ - プログラミングで飯を食え。腕をあげたきゃ備忘録！

サクウェブＴＶはコチラ↓↓↓

jQueryはWordPressで標準装備されています。

しかし、WordPressに装備されているjQueryはWordPressの独自仕様になっているため外部からプラグインを読み込んで使用しようとするときちんと動作しないことがよくあります。

具体的には、jQuery.noConflict()という関数が実行されていて他のライブラリとのコンフリクトを避けるようにしてあります。

そこで、しばしば「$」ではなく「jQuery」と記述することを徹底することで動作するという記事や書籍を多く見ますが、jQuery プラグインを使用するときに、私の経験上なかなか正常に動作してくれませんでした。

であればということで、今回はそもそも、WordPress独自仕様のjQueryの読み込みを禁止し、手動で通常のjQueryを読み込むという方法で対処します。

実装方法

header.phpの<head></head>内の

<?php wp_head(); ?>

以前に以下を記述します。

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない -->
 
<script type="text/javascript" src="<?php bloginfo(template_url);?>/js/jquery.js"></script>

これで、WordPress独自jQueryの読み込みは禁止され、jsフォルダ内に入れておいたjquery.jsを新たに読み込んでいます。

もし、

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない -->

がない場合WordPress内のjQueryとjsフォルダから読み込んだjQueryが二重読み込みとなりエラーがでます。注意して下さい。

その後、

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.slider.min.js"></script>

などとしてプラグインを読み込みます。

あとは外部読み込みのjsファイルまたは、header.php内にプラグインを使用するためのスクリプトを記述して使用して下さい。