WordPressでjQueryを使う

公開日: 2015/05/30　最終更新日: 2016/01/13 0 0 0 0

WordPressには独自仕様によるjQueryが設定されているので
自分の使いたいjQueryがある場合は独自仕様によるjQueryを「読み込ませない」設定にします

header.phpに書きます

<?php wp_deregister_script('jquery'); ?>
<!-- WordPressのjQueryを読み込ませない -->
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

または

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

自分で jQuery のコードを head 内に書く場合は、wp_head() より後ろに書きます。

<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(function(){ 
    /* ここに書きます */
});
</script>

jQuery のプラグインをテーマで使いたい場合

wp-include/js/にコピー
header.php

<?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.js', array('jquery')); ?>
<?php wp_enqueue_script('funcybox', get_bloginfo('template_url') . '/js/jquery.funcybox.js', array('jquery')); ?>
<?php wp_head(); ?>

 jQuery の easing プラグインと、funcybox プラグインを読み込んでいる例です