サポート » 使い方全般 » functions.phpにjsが記述できない..

  • 解決済 h-pine-h

    (@h-pine-h)


    以前同じ質問をして、解決したのですが、同じ記述でもjsだけ反映されません。
    それで今回調べて新しい書き方をしたのですが、やはりjsだけ反映されなくて困っています。cssとまとめて下記のように記述して、jsだけが反映されない状態です。反映まで時間がかかるということはありませんよね?
    ‘<?php

    // Loads JavaScript file with functionality .
    function my_scripts_method() {
    wp_enqueue_script( ‘jquery’, get_template_directory_uri() . ‘/js/jquery-1.7.1.min.js’, array( ” ), true );
    wp_register_script(‘index’, get_template_directory_uri() . ‘/js/index.js’, array(‘jquery’), true);
    wp_register_script(‘fancybox’, get_template_directory_uri() . ‘/fancybox/jquery.fancybox-1.3.4.pack.js’, array(‘jquery’), true);
    wp_register_script(‘public’, get_template_directory_uri() . ‘/js/public.js’, array(‘jquery’), true);
    wp_register_script(‘responsiveslides’, get_template_directory_uri() . ‘/js/responsiveslides.js’, array(‘jquery’), true);
    wp_register_script(‘slicknav’, get_template_directory_uri() . ‘/js/jquery.slicknav.min.js’, array(‘jquery’), true);

    // Add used in the main stylesheet.
    wp_enqueue_style( ‘main’, get_template_directory_uri() . ‘/css/main.css’, array(), ‘2.09’ );
    wp_enqueue_style( ‘rslides’, get_template_directory_uri() . ‘/css/rslides.css’, array(), ‘2.09’ );
    wp_enqueue_style( ‘menu’, get_template_directory_uri() . ‘/css/menu.css’, array(), ‘2.09’ );
    wp_enqueue_style( ‘slicknav’, get_template_directory_uri() . ‘/css/slicknav.css’, array(), ‘2.09’ );

    }

    add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );

    ?>’

15件の返信を表示中 - 1 - 15件目 (全18件中)
  • wp_register_script()はjsファイルの登録しか行わないので、wp_enqueue_script()を使って下さい。

    jQueryはWordPressにデフォルトで入っているので、もしバージョン的に問題がなければ

    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.7.1.min.js', array( '' ), true );

    この記述は不要です。(自分で用意したjQueryではなくなるべくWordPressに入っているjQueryを使いましょう。)

    このあたりが参考になるかと思います。
    wp_enqueue_scriptのススメ http://dogmap.jp/2008/07/12/wp_enqueue_script/
    WordPress同梱のjQuery以外を使う方法 http://dogmap.jp/2011/07/02/wordpress-dequeu-jquery/

    「以前同じ質問をして」とありますが、以前どんな回答をいただいたのかわからないので、リンクを貼っていただけると経緯がわかりやすいです 🙂

    >Mignon Styleさん
    下記のページです。
    http://ja.forums.wordpress.org/topic/129246?replies=3
    最終的に下記のようにfunctions.phpに記述したのですが、やはりjsだけ反映されず、cssだけ反映されています。なにが原因なのでしょうか。

    ‘function addScripts() {

    wp_enqueue_script(‘jquery’);
    wp_enqueue_script(‘index’, get_template_directory_uri() . ‘/js/index.js’, array(‘jquery’), true);
    wp_enqueue_script(‘fancybox’, get_template_directory_uri() . ‘/fancybox/jquery.fancybox-1.3.4.pack.js’, array(‘jquery’), true);
    wp_enqueue_script(‘public’, get_template_directory_uri() . ‘/js/public.js’, array(‘jquery’), true);
    wp_enqueue_script(‘responsiveslides’, get_template_directory_uri() . ‘/js/responsiveslides.js’, array(‘jquery’), true);
    wp_enqueue_script(‘slicknav’, get_template_directory_uri() . ‘/js/jquery.slicknav.min.js’, array(‘jquery’), true);

    // Add Genericons font, used in the main stylesheet.
    wp_enqueue_style( ‘main’, get_template_directory_uri() . ‘/css/main.css’, array(), ‘2.09’ );
    wp_enqueue_style( ‘rslides’, get_template_directory_uri() . ‘/css/rslides.css’, array(), ‘2.09’ );
    wp_enqueue_style( ‘menu’, get_template_directory_uri() . ‘/css/menu.css’, array(), ‘2.09’ );
    wp_enqueue_style( ‘slicknav’, get_template_directory_uri() . ‘/css/slicknav.css’, array(), ‘2.09’ );

    }

    add_action( ‘wp_enqueue_scripts’, ‘addScripts’ );’

    前回のリンクを貼っていただいてありがとうございます 🙂

    jsだけ反映されないとのことですが、ページのソースを表示して、
    jsファイルは読み込みされていますか?読み込みされていませんか?

    ちょっと古い記事ですが見てみてください。
    WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 http://kachibito.net/web-design/wordpress-with-jquery.html

    >Mignon Styleさん
    ご親切にありがとうございます。前回のわたしの書き込みと同じソースで、ローカルで保存してアップしたところ、反映することができました。
    もう一つ問題があるのですが、ソースを見たところ、headに直書きしたscriptがjsのリンクより上にきていたので、footer.phpの<?php wp_footer(); ?>の上に書いたのですが、動作致しません。

    直書き以外のjsは動作しています。こういった場合はどこに記述すればよろしいのでしょうか?

    <?php wp_footer(); ?>の下に書いてください。

    なるべく直書きせずにadd_action( ‘wp_enqueue_scripts’ )を使ったほうがいいですよ 🙂

    >Mignon Styleさん
    ご親切にありがとうございます。
    はじめも今も<?php wp_footer(); ?>の下に書いていて、ソースには表示されているのですが、動作致しません。書いているのは下記の記述で、二つのscriptの元となるjsはheadのところにリンクが表示されています。他のjsも動いております。

    また、jsのリンクの仕方をfunctions.phpに記述する方法はわかったのですが、下記のような記述をfunctions.phpに記述する方法はちょっと調べたところ出てきません。
    こういった記述もfunctions.phpで管理できるのでしょうか?

    ‘<script>
    $(function() {
    $(“.rslides”).responsiveSlides();
    });
    </script>

    <script>
    $(document).ready(function(){
    $(‘#menu’).slicknav();
    });
    </script>’

    モデレーター gatespace

    (@gatespace)

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    WordPress本体に入っているjQueryはnoConflictが入っています。
    このため、テーマ作者などがWordPress本体のjQueryを利用した上で独自のjQueryをついかするなら、カプセル化しないとダメです。

    先のリンク先は英語ですが、カプセル化のサンプルコードが載っています。

    >gatespaceさん
    回答ありがとうございます。
    サンプルコードを見て、次のように書き換えたのですが、やはりまだ動かないようです。
    この部分だけでなくてheadで読み込んでいるjsの順序等も影響しているのでしょうか?
    しかしこの二つのjsだけ動作していません。

    ‘<?php wp_footer(); ?>
    <script>
    jQuery(document).ready(function() {
    jQuery(“.rslides”).responsiveSlides();
    });

    jQuery(document).ready(function(){
    jQuery(‘#menu’).slicknav();
    });
    </script>’

    モデレーター gatespace

    (@gatespace)

    しかしこの二つのjsだけ動作していません。

    ブラウザの「ソースを見る」で必要なjs類が全て読み込まれているのであれば、
    それはjsの動作不具合になります。

    ブラウザにデバッグモードや開発者ツールがついていますから、そちらを使ってエラー箇所を突き止めてください。

    逆に「ソースを見る」で必要なjsが読み込まれていなかったり、順番がおかしければWordPressでjsを追加している部分に問題があります。

    >getespaceさん
    自分の入れているjsにはエラーはありません。元々html5とcss3で動作していたものをwordpressに組み込みました。
    読み込む順番ですが、一通りはあっているのですが、元のhtmlでは一通りのjsを読み込んだ最後に下記のように記述しています。
    現状では、reponsiveslides.jsとslicknav.min.jsをfopter.phpで読み込み、直書きの部分を続けています。この違いで動作しなくなることもあるでしょうか?二つのjsをheadにして直書きだけfooterにしてもダメです。また、Jqueryはwp本体に入っているものでなくしたので、コンフリクトを防ぐ書き方もやめています。
    ‘<script src=”js/responsiveslides.js”></script>
    <script type=”text/javascript”>
    $(function() {
    $(“.rslides”).responsiveSlides();
    });
    </script>
    <script src=”js/jquery.slicknav.min.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function(){
    $(‘#menu’).slicknav();
    });
    </script>’
    それと、下記のような場合、functions.phpにはどのように記述するのでしょうか?現状ではheader.phpに記述しています。
    ‘function addScripts() {
    if (!is_IE6()) {〜’?
    9以前の場合は??phpにまだ初心者ですみません。
    ‘<!–[if IE 6]>
    <script src=”http://hpineh0913.com/zesda/wp-content/themes/twentyfourteen/js/DD_belatedPNG_0.0.8a-min.js”></script>
    <script>
    DD_belatedPNG.fix(‘img, .png’);
    </script>
    <![endif]–>
    <!–[if lt IE 9]>
    <script src=”http://hpineh0913.com/zesda/wp-content/themes/twentyfourteen/js/html5shiv.js”></script>
    <![endif]–>
    <!–[if lt IE 9]>
    <script src=”http://hpineh0913.com/zesda/wp-content/themes/twentyfourteen/js/css3-mediaqueries.js”></script>
    <![endif]–>’

    モデレーター gatespace

    (@gatespace)

    ぱっとみて
    <script src="js/jquery.slicknav.min.js"></script>

    404になってませんか?
    テーマのテンプレートファイルと同階層においても必ず、get_template_directory_uri() などを使用してください。
    http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_directory_uri

    あとhtml単体でうまくいってもWordPressに移行するときには1個ずつやった方が良いです。
    いっぺんにやるとどこに問題があるか、第三者は分かりません。

    jsはWordPressが出力したHTMLソース上で動くかどうかが鍵で、元のPHPだけでは簡単に原因探すことができません。
    可能ならば、第三者でも確認できるURLを提示してください。

    >gatespaceさん
    すみません、記述のリンクはこちらの書き込みのものがミスで、ちゃんと貼ってありました。
    サイトは個人のものではないのでリンクを控えていたのですが、仮のサーバーにアップしてあるのであとで削除します。ページはまだトップのみです。
    動きが見られないのは、resposiveslides.jsとslicknav.min.jsの二つで、それぞれ画像のスライドと、768px以下にするとメニューがアコーディオンになる仕組みです。
    http://hpineh0913.com/zesda/

    モデレーター Seisuke Kuraishi (tenpura)

    (@tenpura)

    wp_enqueue_scriptのススメ http://dogmap.jp/2008/07/12/wp_enqueue_script/
    WordPress同梱のjQuery以外を使う方法 http://dogmap.jp/2011/07/02/wordpress-dequeu-jquery/

    は記事が古すぎるせいもありますが誤ったやり方や推奨できない方法が書かれていますね。

    WordPress で jQuery を使う時の注意点 という記事を書きましたので参考になればと思います。

    モデレーター gatespace

    (@gatespace)

    jQueryの使い方はKuraishiさんが書かれた記事が詳しいので、そちらを参考にjsファイルへのリンク方法を見直してみてください。

    その上でURL拝見しましたが、スライドショーもメニューもが動かないのは
    public.js でエラーが出ているためです。
    大本のFancybox.jsが404で正常に読み込まれていないことに起因しているようです。

    ブラウザの開発者ツールで見ただけでも404やどのjsでエラーが出ているかは分かるので、
    ひとつずつ確認して修正してみてください

    モデレーター Seisuke Kuraishi (tenpura)

    (@tenpura)

    WordPress で CSS、JavaScript ファイルを読み込む正しい方法 という記事も書きましたのでよろしければあわせて読んでいただけたらと思います。

15件の返信を表示中 - 1 - 15件目 (全18件中)
  • トピック「functions.phpにjsが記述できない..」には新たに返信することはできません。