2017-09-28 11 views
0

WordPress Webサイトを作成しています。未知のReferenceError:ChangeSecondNavUlColor()が定義されていません - Javascript関数が機能していません

は、ユーザがフロントpage.php PHPコードで

されていない場合header.phpに呼び出される関数ChangeSecondNavUlColor()が(白にナビゲーションアンカータグ色).menu-secondary-menu-links li aの色を変更する必要が私は最初のページにあるかどうかを調べるif文を持っています。もしそうなら、echo $ blackBgを使ってnavの背景色を変更しています。ナビゲーションのためにはタグカラー(ネストされているので)のために、私はjavascriptを使ってDOMをつかむことに決めました。

しかし、次のエラーを取得:

Uncaught ReferenceError: ChangeSecondNavUlColor is not defined

<header class="main-header"> 

    <div id="sidebar-btn"> 
     <span></span> 
     <span></span> 
     <span></span>    
    </div> 
<div id="sidebar-nav">    
    <div class="logo-nav-one-wrap"> 
     <nav class="nav-one"> 
      <li id="primary-headline" class="logo-icon"><img src="#"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></li> 

      <ul> 
       <?php 

        $args = array(
         'theme_location' => 'primary' 

        ); 
        wp_nav_menu($args); 
       ?> 


      </ul> 


      </nav> 

    </div> 

    <nav class="nav-two home-nav"> 
    <!-- CHANGE THE BACKGROUND COLOR OF NAV TO BLACK IF NOT HOMEPAGE --> 
    <?php if(!is_front_page()) { 

     $blackBg = "background-black-nav"; ?> 

    <script type="text/javascript"> ChangeSecondNavUlColor(); </script> 

    <?php } ?> 
    <div class="nav-two-wrap <?php echo $blackBg;?>"> 

     <?php  
      $walker = new Nav_Walker_Nav_Menu; 

      $args = array(
       'theme_location' => 'secondary', 
       'walker' => $walker 

      ); 
      wp_nav_menu($args); 
     ?>   
    </div> 

    </nav> 



</div> 

はJavaScript

function ChangeSecondNavUlColor() { 
    jQuery(".menu-secondary-menu-links li a").css("color","white !important"); 
    alert("Aasd"); 

} 

アイデア私はこのエラーを取得し、どのように問題を修正するよ、なぜ?

UPDATE 1 - のfunctions.php

function ipe_resources() { 
    // Add stylesheet 
    wp_enqueue_style('style', get_template_directory_uri().'/css/default.css'); 

    // Add javascript 
    wp_enqueue_script('script_js', get_template_directory_uri().'/js/ipe_script.js', array('jquery'), '2017', true); 

} 
add_action('wp_enqueue_scripts', 'ipe_resources'); 

UPDATE 2追加するには、次HTML構造を追加する - 私が正しくAタグを選択しないと思います?

<div class="menu-secondary-menu-links-container"> 

    <ul id="menu-secondary-menu-links" class="menu"> 
     <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a title="Our Programs" href="http://localhost/wordpress/courses/">Courses</a></li> 
     <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a title="Event Schedule " href="http://localhost/wordpress/events/">Event Calendar</a></li> 
     <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a title="Registration Open" href="http://localhost/wordpress/book-a-seminar/">Book A Seminar</a></li> 
     <li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158"><a title="Registration Open" href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li> 
    <li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-293"><a href="http://localhost/wordpress/gallery/">Gallery</a></li> 
</ul> 
</div> 
+0

:これを試して

<script type="text/javascript"> window.onload = function() { ChangeSecondNavUlColor(); } </script> 

そして、あなたのスクリプトの?https://developer.wordpress.org/reference/functions/wp_enqueue_script/

別の解決策は、これをしようとするだろうかfunctions.phpから、またはあなたのヘッダから? –

+0

ファイル-function.php wp_enqueue_script関数を追加しました – Shaz

答えて

1

あなたはこのコード行が必要です。falseに真の変更

wp_enqueue_script('script_js', get_template_directory_uri().'/js/ipe_script.js', array('jquery'), '2017', false); 

wp_enqueue_script('script_js', get_template_directory_uri().'/js/ipe_script.js', array('jquery'), '2017', true); 

スクリプトは、ヘッダーの代わりのフッターに注入することができます。参考のため

:あなたのスクリプトをロードしている場合は

function ChangeSecondNavUlColor() { 
    jQuery("#menu-secondary-menu-links li a").css({"color": "white"}); 
    alert("Aasd"); 
} 
+0

上記に変更されていますが、まだ動作していません。おそらく、wp_head()がまだheader.phpファイルの最後に呼び出されているからでしょうか?わからない – Shaz

+0

@Shaz別のアプローチを追加しました。はい、スクリプトを呼び出す前にwp_head()を呼び出す必要があります。 –

+0

パーフェクトなので、ページがロードされた後にonload関数がトリガされるだけですか?また、JavaScriptが動作していますが、navのaタグは白に変わりません...私のfuncでは正しく選択されていませんか?私はhtmlの構造を追加しました質問..アイデアですか? – Shaz

関連する問題