※ソースコードを投稿するときはその部分を「code」ボタンで囲ってくださいね。
ぱっと見ですが、何回も jQuery本体 を読み込んでいるのが一番問題かもしれません。
「いろいろ調べた」とのことですが、jQueryプラグインを使いたい場合、この書き方オススメできません。
header.php に書き込むより、functions.phpに記述することをおすすめします。
やり方はこちらを参考になさってください
http://eastcoder.com/2014/07/proper-way-to-enqueue-scripts-and-styles-with-wordpress/
http://eastcoder.com/2014/07/using-jquery-with-wordpress/
functions.phpに記述するのが良いと思います。
下記を追加してください。
/**
* JavascriptとCSSの設定
*/
function my_scripts() {
global $post;
// テーマ全体で必要なJavascriptとCSS
wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '', false );
//トップページに必要なJavascript
if ( is_front_page() ){
wp_enqueue_script( 'cross-slide', get_template_directory_uri() . '/js/jquery.cross-slide.js', array( 'jquery', 'jquery-ui-core' ), '', false );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
/**
* IE9以下の設定
*/
function my_enqueue_lt_ie9() {
global $is_IE;
// IEでない時はおしまい
if ( ! $is_IE ) return;
// 必要ならファイルをインクルード
if ( ! function_exists( 'wp_check_browser_version' ) )
include_once( ABSPATH . 'wp-admin/includes/dashboard.php' );
// IEバージョンによってenqueue
$response = wp_check_browser_version();
if ( 0 > version_compare( intval( $response['version'] ) , 9 ) ){
wp_enqueue_script( 'my-html5', get_template_directory_uri() . '/js/html5.js', array(), '', false );
wp_enqueue_script( 'my-mq', get_template_directory_uri() . '/js/css3-mediaqueries.js', array(), '', false );
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_lt_ie9' );
そうするとheadタグ内部はほぼ必要なくて、<?php wp_head(); ?>だけ残してください。
あとfront-page.phpのscriptが<div id="slidedisp"></div>の読み込み前に実行されるので、おそらくエラーになるかと思います。
また、gatespaceさんの書かれてる二つ目のリンク先にもありますが、$がそのままでは使えないので、次のように囲ってやる必要があります。
jQuery(function( $ ) {
// ここに $ を使ったコードを書く
});
gatespace様
いつもありがとうございます。また、ソースコードのくくりをしないといけないのですね。今後そのようにいたします。ありがとうございます。教えていただきましたところを見てみます。
ikaring様
ご丁寧にソースを記述してくださってありがとうございます。まだ十分理解できていませんが、しっかりみてみます。ありがとうございました。
front-page.php の <div id=”slidedisp”></div> をスクリプトの上の配置しました。
そのほか、$についてのアドバイスですが、
jQuery(function( $ ) {
// ここに $ を使ったコードを書く
});
の // ここに $ を使ったコードを書く
のところに記述するところは、具体的にとこから
どこまでか教えていただけますとありがたいです。
あまりよくわからずに使用しているのは、よくないと思うのですが、どうぞよろしくお願いします。
<?php get_header(); ?>
<!-- 自分で入れたもの -->
<div id="slidedisp"></div>
<script type="text/javascript">
$('#slidedisp').crossSlide({
speed: 25,
fade: 1
},[
{ src: '<?php bloginfo('template_url'); ?>/img-js/image1.jpg', dir: 'up' },
{ src: '<?php bloginfo('template_url'); ?>/img-js/image2.jpg', dir: 'down' },
{ src: '<?php bloginfo('template_url'); ?>/img-js/image3.jpg', dir: 'left' }
]);
</script>
<!-- 自分で入れたもの end -->
できました！！！
ありがとうございます。
最終形を記述します。
■front-page.php
<?php get_header(); ?>
<!-- 自分で入れたもの -->
<div id="slidedisp"></div>
<script type="text/javascript">
jQuery(function( $ ) {
$('#slidedisp').crossSlide(
{
speed: 25, //in px/sec
fade: 1 //in sec
},
[
{ src: '<?php bloginfo('template_url'); ?>/img-js/image1.jpg', dir: 'up', href: '<?php bloginfo('template_url'); ?>/' },
{ src: '<?php bloginfo('template_url'); ?>/img-js/image2.jpg', dir: 'down', href: '<?php bloginfo('template_url'); ?>/' },
{ src: '<?php bloginfo('template_url'); ?>/img-js/image3.jpg', dir: 'up', href: '<?php bloginfo('template_url'); ?>/' }
]
);
});
</script>
<!-- 自分で入れたもの end -->
■function.php（ikaring様の通り記述しました）
* JavascriptとCSSの設定
*/
function my_scripts() {
global $post;
// テーマ全体で必要なJavascriptとCSS
wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '', false );
//トップページに必要なJavascript
if ( is_front_page() ){
wp_enqueue_script( 'cross-slide', get_template_directory_uri() . '/js/jquery.cross-slide.js', array( 'jquery', 'jquery-ui-core' ), '', false );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
/**
* IE9以下の設定
*/
function my_enqueue_lt_ie9() {
global $is_IE;
// IEでない時はおしまい
if ( ! $is_IE ) return;
// 必要ならファイルをインクルード
if ( ! function_exists( 'wp_check_browser_version' ) )
include_once( ABSPATH . 'wp-admin/includes/dashboard.php' );
// IEバージョンによってenqueue
$response = wp_check_browser_version();
if ( 0 > version_compare( intval( $response['version'] ) , 9 ) ){
wp_enqueue_script( 'my-html5', get_template_directory_uri() . '/js/html5.js', array(), '', false );
wp_enqueue_script( 'my-mq', get_template_directory_uri() . '/js/css3-mediaqueries.js', array(), '', false );
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_lt_ie9' );
/*---------------------------------------------------------*/
■header.php
<script src=”～
jQueryのスクリプト関係は削除しまして
<?php
wp_head(); ?>
のみを残しました。
これでうまくいきました。
本当にありがとうございました。
