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

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

ただいまの
回答率

90.52%

  • JavaScript

    16389questions

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

  • WordPress

    7201questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 475

i_p_n

score 3

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

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

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

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

以下がfooter.phpです

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript' src='./library/js/jquery.js'></script>
<script type='text/javascript' src='./library/js/jquery-migrate.min.js'></script>
<script type='text/javascript' src='./library/js/libs/modernizr.custom.min.js'></script>
<script src="./library/js/jquery.matchHeight.js" type="text/javascript"></script>
<script src="library/js/jquery.sliderPro.min.js" type="text/javascript"></script>

<!-- Sidrスクリプトの呼び出し -->
<script src="./library/js/jquery.sidr.min.js"></script>
<script>
    jQuery(document).ready(function() {
    jQuery('#simple-menu').sidr();
    });
</script>
<!-- /sidr -->
<script>
//スムーズスクロール
jQuery(function(){
   // #で始まるアンカーをクリックした場合に処理
   jQuery('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= jQuery(this).attr("href");
      // 移動先を取得
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - 40;
      // スムーススクロール
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>
<script>
//ページ間スムーススクロール
jQuery(function(){
    var url = $(location).attr('href');
    if (url.indexOf("?id=") == -1) {
        // スムーズスクロール以外の処理(必要なら)
    }else{
        // スムーズスクロールの処理
        var url_sp = url.split("?id=");
        var hash   = '#' + url_sp[url_sp.length - 1];
        var tgt    = $(hash);
        var pos    = tgt.offset().top - 40;
        $("html, body").animate({scrollTop:pos}, 400, "swing");
    }
});
</script>
<!-- toTop -->
<script type="text/javascript">
jQuery(function() {
  var pagetop = jQuery('.toTop');
    jQuery(window).scroll(function () {
       if (jQuery(this).scrollTop() > 150) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           jQuery('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});
</script>




<script>
jQuery('#sidr-menu-button').sidr({
    name: 'sidr-nav',
    source: '.wrap_nav',
    speed : 500,
    side : 'right'
});
</script>
<script type='text/javascript' src='./library/js/scripts.js'></script>
<script>
jQuery(function() {
    jQuery('.footer-col').matchHeight();
});
</script>

<!-- Chromeでリンクが機能しないバグを修正するスクリプト -->
<script>
jQuery(document).ready(function(){
            if(jQuery(window).width() > 767) {
        // ウインドウサイズの幅が767ピクセルよりも大きい場合
                    jQuery("#top-slider .sp-slide a").each(function(){
            jQuery(this).addClass("sp-selectable").css("cursor","pointer");
        });
    }
})
</script>

<script>
jQuery(document).ready(function(){
            jQuery( '#top-slider' ).sliderPro({
            width: 1200,
            height: 300,

            arrows: true,//矢印の有無
            buttons: true,//ページャーの有無
            autoplay: true,//自動スライドか否か
            loop: true,//ループ再生か否か
            visibleSize: '100%',//前後のスライドを表示(?)
            forceSize: 'fullWidth' ,//幅いっぱいに表示
            });
    });
</script>

以下がfunctions.phpです

/**
 * Enqueue scripts and styles.
 */
function kaimasu_net_scripts() {

    wp_enqueue_style( 'style.css', get_stylesheet_uri() );
    wp_enqueue_style( 'hover-min.css', get_stylesheet_uri() . '/library/css/style.css' );
    wp_enqueue_style( 'font-awesome.min.css', get_stylesheet_uri() . '/library/css/font-awesome.min.css' );
    wp_enqueue_style( 'slider-pro.min.css', get_stylesheet_uri() . '/library/css/slider-pro.min.css' );
    wp_enqueue_style( 'jquery.sidr.light.css', get_stylesheet_uri() . '/library/css/jquery.sidr.light.css' );
    wp_enqueue_style( 'sidr-menu.css', get_stylesheet_uri() . '/library/css/sidr-menu.css' );


  // WordPress本体のjquery.jsを読み込まない
  wp_deregister_script('jquery');
  // jQueryの読み込み
  wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js', "", "170324", true );

  wp_enqueue_script( 'jquery.js', get_template_directory_uri() . '/library/js/jquery.js', array(), '170324', true );
  wp_enqueue_script( 'jquery-migrate.min.js', get_template_directory_uri() . '/library/js/jquery-migrate.min.js', array(), '170324', true );
  wp_enqueue_script( 'modernizr.custom.min.js', get_template_directory_uri() . '/library/js/libs/modernizr.custom.min.js', array(), '170324', true );
  wp_enqueue_script( 'jquery.matchHeight.js', get_template_directory_uri() . '/library/js/jquery.matchHeight.js', array(), '170324', true );
  wp_enqueue_script( 'jquery.sliderPro.min.js', get_template_directory_uri() . '/library/js/jquery.sliderPro.min.js', array(), '170324', true );

  wp_enqueue_script( 'jquery.sidr.min.js', get_template_directory_uri() . '/library/js/jquery.sidr.min.js', array(), '170324', true );
  wp_enqueue_script( 'scripts.js', get_template_directory_uri() . '/library/js/scripts.js', array(), '170324', true );





    wp_enqueue_script( 'kaimasu-net-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'kaimasu-net-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

}
add_action( 'wp_enqueue_scripts', 'kaimasu_net_scripts' );
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/25 12:59

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

    キャンセル

  • i_p_n

    2017/03/25 13:12

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

    キャンセル

  • kei344

    2017/03/25 13:35

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

    キャンセル

  • i_p_n

    2017/03/25 13:38

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

    キャンセル

回答 1

checkベストアンサー

+1

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 18:03

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

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16389questions

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

  • WordPress

    7201questions

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