サポート » テーマ » jsファイルが読み込めない

  • 解決済 omakihan

    (@omakihan)


    PHP Version 5.3.5
    ブラウザ/safari5.0.6

    header.phpに直接書き込んでいたJavaScriptを
    外部jsファイル(org.js)を新たに作って読み込ませようとしています。
    ローカルでテストしているのですがうまく行きません。
    (直書きでは問題なく動作しています。)
    phpの知識はありません。

    ●以下のコードをheader.phpの<?php wp_head(); ?>の上に書き込みました
    が反映されませんでした。

    <?php wp_enqueue_script(‘org’,get_template_directory_uri() . ‘/js/org.js’, array(), ‘1.0’); ?>

    ●以下のコードをfunction.phpに貼付けたのですがうまく行きませんでした。

    function my_scripts_method() {
    wp_enqueue_script(
    ‘org’,
    get_template_directory_uri() . ‘/js/org.js’,
    array(‘ ‘)
    );
    }
    add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);

    ちなみに以下も試しましたがダメでした。
    <script src=”<?php echo get_template_directory_uri(); ?>/js/org.js” type=”text/javascript”></script>

    あれこれ検索しまくったのですがわからず、質問させていただきました。
    初心者にも分かるように、ご示唆いただけましたら幸いです。

15件の返信を表示中 - 1 - 15件目 (全22件中)
  • 2番目のやり方が推奨ですが、

    function my_scripts_method() {
    wp_enqueue_script(
    ‘org’,
    get_template_directory_uri() . ‘/js/org.js’,
    array(‘ ‘)
    );
    }
    add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);

    当方で未検証ですが、array(‘ ‘)だと、正しく動作しないかもしれません。(array()に変更する)
    あとは「js/org.js」がテーマ内にあるか、ファイル名のスペルミスがないか、などをチェック、でしょうか。

    トピック投稿者 omakihan

    (@omakihan)

    MIZUNO様

    早速ありがとうございます!

    残念ながらarray(‘ ‘)→array()に修正しましたが動きませんでした。
    さっぱりわかりません。

    jsファイルもテーマ内のjsフォルダに納まっておりスペルも確認いたしました。

    引き続きどうかよろしくお願いいたします。

    下に変更したらどうなりますか?

    function my_scripts_method() {
        wp_enqueue_script('jquery-ui-core');
    }

    正しく動作していれば、jquery-ui-coreへのリンクがヘッダー部分に出るはずですが。

    トピック投稿者 omakihan

    (@omakihan)

    MIZUNO様

    ありがとうございます!

    しかしながら変化なしでした。

    説明不足でしたがjqueryのコードではなくサイトの高さやプルダウンメニューなど関する
    JavaScriptです。
    ちなみに中身は以下の通りです。

    header.phpをすっきりさせたかったのですが、
    直に書くしかないのでしょうか。。

    ほか、なにか対策があれば宜しくお願いいたします。

    <script type=”text/javascript”>
    $(window).load(function(){
    var height = $(‘#container’).outerHeight();
    height = height + ‘px’;
    $(‘#main’).css(‘height’,height);
    $(‘#sidebar’).css(‘height’,height);
    });

    // sidebarプルダウンメニュー
    $(document).ready(function(){
    $(“ul.children”).hide();
    $(“li.page_item”).hover(function() {
    $(“ul.children”,this).slideDown(“fast”);
    },
    function() {
    $(“ul.children”,this).slideUp(“fast”);
    });
    });

    $(function() {

    //ページ上部へ戻る
    $(“.btn_top”).click(function () {
    $(‘html,body’).animate({ scrollTop: 0 }, ‘fast’);
    return false;
    });

    });
    </script>

    モデレーター gatespace

    (@gatespace)

    「うまく行きませんでした。」

    と言うのが

    1. ソース自体は読み込まれているが(ブラウザでサイトを表示させて「ソースを見る」などでリンクされており、NotFoundにもなっていない)、JavaScript が動作しない

    なのか

    2. そもそも JavaScript 自体が読み込まれていない

    なのか。
    1. 2. どちらでしょ?

    トピック投稿者 omakihan

    (@omakihan)

    世話役様

    ありがとうございます!

    ソースを見ますとJavaScript 自体が読み込まれていない状態でした。2ですね。

    ちなみにjqueryのjsファイルは以下のheader.phpの記述により読み込まれておりました。

    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;
    <script type=”text/javascript” src=”http://www.google.com/jsapi”></script&gt;
    <script type=”text/javascript”>google.load(“jquery”, “1.7”);</script>

    ややこしいことですみません。
    どうか宜しくお願いいたします。

    こんにちは

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.7");</script>

    は、取っ払っていただき

    array(' ') は、array('jquery')に変更
    add_action('wp_enqueue_scripts', 'my_scripts_method',999);

    999を追加してどうですか?

    念のため確認しておきますがwp_head()はちゃんとheader.phpにありますよね?

    モデレーター gatespace

    (@gatespace)

    説明不足でしたがjqueryのコードではなくサイトの高さやプルダウンメニューなど関する
    JavaScriptです。

    と書かれていますが、中身はjQueryに依存しているコードなので、jQueryの読み込みは必須です。

    その上で、Fumito MIZUNOさん、nobitaさん、Hinaloeさんが書かれていることを捕捉すると、こちらの記事を読んでいただいて、
    http://eastcoder.com/2014/07/using-jquery-with-wordpress/

    1. 特別な理由がない限り WordPress に含まれている jQuery を使う

    2. テーマの functions.php で

    function my_scripts() {
    	wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts' );

    のような形で自作のjavascriptを読み込むようにする(このあたりがFumito MIZUNOさんとnobitaさんが書かれている内容)

    3. テーマの header.php に wp_head() 、footer.php に wp_footer() が書かれているか確認する(Hinaloeさんが書かれている内容)

    4. 先のリンクの「WordPress 版 jQuery はそのままでは $ が使えない」を参照に自作のjavascriptを書き直す

    の順番で確認してください。

    トピック投稿者 omakihan

    (@omakihan)

    nobita様  Hinaloe様 世話役様

    ありがとうございます!

    array(‘ ‘)→array(‘jquery’)変更し
    999を追加しましたが
    変化なしとなってしまいました。
    JavaScriptは読み込まれていない状態です。

    wp_head()と wp_footer()は存在します。

    世話役様の4、時間がかかりそうですが確認したいと思います。

    またお力を貸して下さい!!

    ざっと、以下の3つがポイントでしょうか。

    (A)テーマの作りが適切かどうか
    (B)omakihanさんの自作のJSが読み込まれるかどうか
    (C)omakihanさんの自作のJSがWP上でうまく動くかどうか

    もしかしたら(A)がおかしいかもしれません。

    == 以下は(A)のチェック ==

    ひとまず、自作のJSは置いておいて、
    「WPにログインした状態で見てみる」でどうなりますか?

    wp_head()と wp_footer()が適切に書いてあれば、
    画面上部に黒い管理バーが表示されると思います。

    (まずAをチェックして、問題なさそうならBを考える、という手順です。面倒ですが順番にやりましょう)

    トピック投稿者 omakihan

    (@omakihan)

    MIZUNO様

    ありがとうございます!
    さっぱりで悪戦苦闘しております。

    自作サイトはこちらです。
    (コピペサイト!?)

    テーマそのものに問題があるのかもしれません。

    ローカル版でテスト中です。
    wp_head()と wp_footer()は存在し、管理バーもあります。

    公開中のサイトのheader.phpではJavaScriptを直書きしており、
    これを外部ファイルにしようとしています。

    世話役様にご指示いただいた
    http://eastcoder.com/2014/07/using-jquery-with-wordpress/
    『WordPress 版 jQuery はそのままでは $ が使えない』
    jQuery(function( $ ) {

    // ここに $ を使ったコードを書く

    });

    の意味がわからず、苦戦しております。
    どうか宜しくお願いいたします。

    wp_head()と wp_footer()は存在し、管理バーもあります。

    サイト見ました。とりあえずwp_head()と wp_footer()は動いているようです。

    なので、
    http://omakihan.com/omakihan/omakihan/wp-content/themes/omakihan/js/org.js
    となるように、jsファイルを置けますか?
    使っているテーマの中に、jsフォルダを作って、その中にorg.jsフォルダを作る
    です。

    これができれば、ヘッダー部分に http://omakihan.com/omakihan/omakihan/wp-content/themes/omakihan/js/org.js へのリンクが表示されます。

    トピック投稿者 omakihan

    (@omakihan)

    MIZUNO様

    度々お手数おかけしてすみません。
    またサイトを見ていただき、ありがとうございます。

    org.jsファイルですが公開中のサイトで試すことは怖く、
    まずはローカルで成功させることを目指しています。

    現状、テーマの中のjsフォルダにorg.jsファイルを置いています。
    ローカルアドレスでも試すことはできますでしょうか?

    よろしくお願いいたします。

    テーマの中のjsフォルダにorg.jsが適切に置いてあれば、

    <script type=’text/javascript’ src=’…/js/org.js’></script>

    といった表記が出るはずですが、出てないでしょうか?

    出てないのであれば、
    ファイルの置き場所が合っているか、
    ファイル名が合っているか
    あたりを確認してもらえますか?

15件の返信を表示中 - 1 - 15件目 (全22件中)
  • トピック「jsファイルが読み込めない」には新たに返信することはできません。