質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3261閲覧

wordpressに移行する時のjsの読み込みがうまくいきません

i_p_n

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/03/25 01:58

編集2017/03/25 04:11

wordpressでサイトを管理できるようにするために、html→phpの移行をしております。

その際、wordpressでのjsの読み込みで、toTopのボタン以外のjsが読み込めないのはなぜでしょうか?

使用テーマは「_S」
http://underscores.me/
になります。

恐れ入りますが、何卒よろしくお願いいたします。

以下がfooter.phpです

footer.php

1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 2<script type='text/javascript' src='./library/js/jquery.js'></script> 3<script type='text/javascript' src='./library/js/jquery-migrate.min.js'></script> 4<script type='text/javascript' src='./library/js/libs/modernizr.custom.min.js'></script> 5<script src="./library/js/jquery.matchHeight.js" type="text/javascript"></script> 6<script src="library/js/jquery.sliderPro.min.js" type="text/javascript"></script> 7 8<!-- Sidrスクリプトの呼び出し --> 9<script src="./library/js/jquery.sidr.min.js"></script> 10<script> 11 jQuery(document).ready(function() { 12 jQuery('#simple-menu').sidr(); 13 }); 14</script> 15<!-- /sidr --> 16<script> 17//スムーズスクロール 18jQuery(function(){ 19 // #で始まるアンカーをクリックした場合に処理 20 jQuery('a[href^=#]').click(function() { 21 // スクロールの速度 22 var speed = 400; // ミリ秒 23 // アンカーの値取得 24 var href= jQuery(this).attr("href"); 25 // 移動先を取得 26 var target = jQuery(href == "#" || href == "" ? 'html' : href); 27 // 移動先を数値で取得 28 var position = target.offset().top - 40; 29 // スムーススクロール 30 jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); 31 return false; 32 }); 33}); 34</script> 35<script> 36//ページ間スムーススクロール 37jQuery(function(){ 38 var url = $(location).attr('href'); 39 if (url.indexOf("?id=") == -1) { 40 // スムーズスクロール以外の処理(必要なら) 41 }else{ 42 // スムーズスクロールの処理 43 var url_sp = url.split("?id="); 44 var hash = '#' + url_sp[url_sp.length - 1]; 45 var tgt = $(hash); 46 var pos = tgt.offset().top - 40; 47 $("html, body").animate({scrollTop:pos}, 400, "swing"); 48 } 49}); 50</script> 51<!-- toTop --> 52<script type="text/javascript"> 53jQuery(function() { 54 var pagetop = jQuery('.toTop'); 55 jQuery(window).scroll(function () { 56 if (jQuery(this).scrollTop() > 150) { 57 pagetop.fadeIn(); 58 } else { 59 pagetop.fadeOut(); 60 } 61 }); 62 pagetop.click(function () { 63 jQuery('body, html').animate({ scrollTop: 0 }, 500); 64 return false; 65 }); 66}); 67</script> 68 69 70 71 72<script> 73jQuery('#sidr-menu-button').sidr({ 74 name: 'sidr-nav', 75 source: '.wrap_nav', 76 speed : 500, 77 side : 'right' 78}); 79</script> 80<script type='text/javascript' src='./library/js/scripts.js'></script> 81<script> 82jQuery(function() { 83 jQuery('.footer-col').matchHeight(); 84}); 85</script> 86 87<!-- Chromeでリンクが機能しないバグを修正するスクリプト --> 88<script> 89jQuery(document).ready(function(){ 90 if(jQuery(window).width() > 767) { 91 // ウインドウサイズの幅が767ピクセルよりも大きい場合 92 jQuery("#top-slider .sp-slide a").each(function(){ 93 jQuery(this).addClass("sp-selectable").css("cursor","pointer"); 94 }); 95 } 96}) 97</script> 98 99<script> 100jQuery(document).ready(function(){ 101 jQuery( '#top-slider' ).sliderPro({ 102 width: 1200, 103 height: 300, 104 105 arrows: true,//矢印の有無 106 buttons: true,//ページャーの有無 107 autoplay: true,//自動スライドか否か 108 loop: true,//ループ再生か否か 109 visibleSize: '100%',//前後のスライドを表示(?) 110 forceSize: 'fullWidth' ,//幅いっぱいに表示 111 }); 112 }); 113</script>

以下がfunctions.phpです

functions.php

1/** 2 * Enqueue scripts and styles. 3 */ 4function kaimasu_net_scripts() { 5 6 wp_enqueue_style( 'style.css', get_stylesheet_uri() ); 7 wp_enqueue_style( 'hover-min.css', get_stylesheet_uri() . '/library/css/style.css' ); 8 wp_enqueue_style( 'font-awesome.min.css', get_stylesheet_uri() . '/library/css/font-awesome.min.css' ); 9 wp_enqueue_style( 'slider-pro.min.css', get_stylesheet_uri() . '/library/css/slider-pro.min.css' ); 10 wp_enqueue_style( 'jquery.sidr.light.css', get_stylesheet_uri() . '/library/css/jquery.sidr.light.css' ); 11 wp_enqueue_style( 'sidr-menu.css', get_stylesheet_uri() . '/library/css/sidr-menu.css' ); 12 13 14 // WordPress本体のjquery.jsを読み込まない 15 wp_deregister_script('jquery'); 16 // jQueryの読み込み 17 wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js', "", "170324", true ); 18 19 wp_enqueue_script( 'jquery.js', get_template_directory_uri() . '/library/js/jquery.js', array(), '170324', true ); 20 wp_enqueue_script( 'jquery-migrate.min.js', get_template_directory_uri() . '/library/js/jquery-migrate.min.js', array(), '170324', true ); 21 wp_enqueue_script( 'modernizr.custom.min.js', get_template_directory_uri() . '/library/js/libs/modernizr.custom.min.js', array(), '170324', true ); 22 wp_enqueue_script( 'jquery.matchHeight.js', get_template_directory_uri() . '/library/js/jquery.matchHeight.js', array(), '170324', true ); 23 wp_enqueue_script( 'jquery.sliderPro.min.js', get_template_directory_uri() . '/library/js/jquery.sliderPro.min.js', array(), '170324', true ); 24 25 wp_enqueue_script( 'jquery.sidr.min.js', get_template_directory_uri() . '/library/js/jquery.sidr.min.js', array(), '170324', true ); 26 wp_enqueue_script( 'scripts.js', get_template_directory_uri() . '/library/js/scripts.js', array(), '170324', true ); 27 28 29 30 31 32 wp_enqueue_script( 'kaimasu-net-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true ); 33 34 wp_enqueue_script( 'kaimasu-net-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true ); 35 36} 37add_action( 'wp_enqueue_scripts', 'kaimasu_net_scripts' );

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/03/25 03:59

使用されているテーマは自作テーマでしょうか?それとも公開されているテーマでしょうか?後者の場合は入手先をリンクつきで質問文に追記してください。
i_p_n

2017/03/25 04:12

ご返信誠にありがとうございます!追加いたしました!
kei344

2017/03/25 04:35

footer.phpは抜粋ですか?それとも質問文に書いてあるものに置き換えましたか?
i_p_n

2017/03/25 04:38

ありがとうございます、footer.phpは置き換えました!
guest

回答1

0

ベストアンサー

footer.phpは置き換えました!

元テーマのfooter.phpを置き換えてしまっているのであれば、そもそもHTMLの構造自体が崩れてしまっていませんか?
それ以外に、wp_footer(); が実行されないと wp_enqueue_script のフックがフッター時に働きません。

また、wp_enqueue_script でスクリプトを登録しているにもかかわらずfooter.phpに script タグが大量にありますが、重複して指定する必要はありませんし、パスが相対パスになっているのでページの階層によっては取得に失敗するはずです。

jQueryが2回登録されていたり、jQueryに依存関係にあるライブラリに適切な指定がされていなかったりもしますね。

【functions.phpでJSやCSSを一元管理する| WordPressテックラボ | [Smart]】
http://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html

【WordPress で CSS、JavaScript ファイルを読み込む正しい方法 | EastCoder;】
http://eastcoder.com/2014/07/proper-way-to-enqueue-scripts-and-styles-with-wordpress/


複雑なテーマはテーマを触り慣れていないとカスタマイズが難しかったりします。一度単純なテーマを自作し、必要なテンプレートを作ってから、高機能テンプレートをカスタマイズするのがお勧めです。

【WordPressのオリジナルテーマ作成フロー・基本マニュアル - かちびと.net】
http://kachibito.net/wordpress/theme-development-flow.html

【WordPressのオリジナルテーマを3時間で作成する手順 | WEBSEEYA(ウェブシーヤ)】
http://webseeya.com/2015/02/15/howto-wordpress-original-themes/

【Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/wordpress3-original-theme/

投稿2017/03/25 04:57

編集2017/03/25 05:05
kei344

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

i_p_n

2017/03/25 09:03

誠にありがとうございます! こちら参考にさせて頂き、進めて見ます! 多くのご情報をいただき、感謝申し上げますm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問