JQuery函数仅适用于主页

时间:2017-11-05 作者:Tony Garand

我的问题是,我的功能中只有一个可以在整个网站上运行,其余的只能在主页上运行。

我确信我正确地使用了wp\\u enqueue\\u脚本以及get\\u template\\u directory\\u uri()

这是我的JSFIDLE,一切正常https://jsfiddle.net/TonyTheOnly/dwf1x3eu/

非常感谢您的帮助,并感谢您抽出时间。

这是我的全部功能。php:

<?php

function paramo_script_enqueue() {

wp_enqueue_style(\'customstyle\', get_template_directory_uri() . \'/css/paramo.css\', array(), \'1.0.0\', \'all\');
wp_enqueue_script(\'customjs\', get_template_directory_uri() . \'/js/paramo.js\', array(\'jquery\'), \'1.0.0\', true);

}

add_action(\'wp_enqueue_scripts\', \'paramo_script_enqueue\');
function paramo_theme_setup() {

add_theme_support(\'menus\');

register_nav_menu(\'primary\', \'Primary Header Navigation\');
register_nav_menu(\'secondary\', \'Footer Navigation\');   
}

add_action(\'init\', \'paramo_theme_setup\');
add_theme_support(\'custom-header\');


function enqueue_our_required_stylesheets(){
wp_enqueue_style(\'font-awesome\', get_stylesheet_directory_uri() . \'/css/font-awesome.css\'); 
}
add_action(\'wp_enqueue_scripts\',\'enqueue_our_required_stylesheets\');
已满。js文件

    jQuery.noConflict();

jQuery(document).ready(function () {
    \'use strict\';

    jQuery(".burger-nav").on("click", function () {
        jQuery("nav ul").toggleClass("open");
    });

    jQuery(\'.toggles span\').click(function () {
        jQuery(".toggles span").removeClass("active");
        jQuery(this).addClass("active");
    });

    jQuery(".spanish").on("click", function () {
        jQuery(".englishNav").hide();
        jQuery(".spanishNav").show();

    });

    jQuery(".english").on("click", function () {
        jQuery(".englishNav").show();
        jQuery(".spanishNav").hide();
    });
    jQuery(".spanish").on("click", function () {
        jQuery(".englishText").hide();
        jQuery(".spanishText").show();
    });

    jQuery(".english").on("click", function () {
        jQuery(".englishText").show();
        jQuery(".spanishText").hide();
    });
});
完整标题

    <!doctype html>
<html>
    <head>
         <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Paramo Galeria</title>
        <?php wp_head(); ?>

    </head>

    <body <?php body_class( $awesome_classes ); ?>>
        <section>
        <div class="topBar">

<img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
        <div class="topBarMiddle">
            <span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>
          <div class="topBarRight">  
            <nav>
            <a class="burger-nav"></a>
                <ul class="englishNav">
                    <li><a href="http://localhost:8888/ParamoGaleria/home">Home</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/artists">Artists</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Exhibitions</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/offsite">Offsite</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/shop">Shop</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/contact"> Contact</a></li>
                    <li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
                </ul>
                <ul class="spanishNav">
                    <li><a href="http://localhost:8888/ParamoGaleria/home">Home</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/artists">Artistsio</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/exhibitions">Exhibitions</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/offsite">Offsite</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/shop">Shop</a></li>
                    <li><a href="http://localhost:8888/ParamoGaleria/contact"> Contact</a></li>
                    <li style="padding-top:50px;"><i class="fa fa-facebook fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-instagram fa-1.5x" style="padding-right:10px;"></i><i class="fa fa-twitter fa-1.5x"></i></li>
                </ul>
            </nav>
          </div>
        </div>
        </section>
索引

<?php get_header(); ?>

<?php 

if( have_posts() ):

while( have_posts() ): the_post(); ?>


<p><?php the_content(); ?></p>



<?php endwhile;

endif;

?>

<?php get_footer(); ?>

1 个回复
最合适的回答,由SO网友:jaswrks 整理而成

替换此行:

<img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
通过以下步骤,修复无效/ 和尺寸。

<img src="<?php header_image();?>" height="120" width="100" alt="" class="siteLogo" />
替换此标记:

<span class="spanish">español</span> | <span class="english">english</span>
具有以下功能:

<span class="spanish" data-target=".topBar .spanishNav">español</span> | <span class="english" data-target=".topBar .englishNav">english</span>
将JavaScript更改为以下内容:

jQuery.noConflict();

jQuery(document).ready(function($) {
  \'use strict\';

  // You can use the shorter `$` inside the function,
  // even in noConflict mode. `.ready()` passes `$` to you.

  var $toggles = $(\'.topBar .toggles > span\');
  var $uls = $(\'.topBar nav > ul\');

  $toggles.on(\'click\', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    var $this = $(this);

    $toggles.removeClass(\'active\');
    $uls.removeClass(\'open\').hide();

    $this.addClass(\'active\');
    $($this.data(\'target\')).addClass(\'open\').show();
  });
});

结束