防止在静态首页加载其他版本的jQuery

时间:2015-07-27 作者:Steve

This site is using cordillera which calls on /wp-includes/js/jquery/jquery.js?ver=1.11.2.

The child theme contains a front-page.php which consists of:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php wp_head(); ?>
<link type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/front-page.css" rel="stylesheet" />
</head>
<body bgcolor="#ffffff" <?php body_class($class); ?>>
    <div id="front-page">
        <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/tempertemper.jpg" alt="Temper Temper entry image" width="1200" height="800" usemap="#Map" title="Temper Temper Fine Chocolates" border="0" />
        <map name="Map" id="Map">
          <area shape="rect" coords="115,500,637,773" href="http://www.margaretriver.com" alt="Margaret River" />
          <area shape="rect" coords="641,240,857,772" href="/test/shop" alt="Visit our online shop" />
          <area shape="rect" coords="195,186,366,449" href="/test/gallery" alt="Come see our image gallery" />
          <area shape="rect" coords="504,349,622,440" href="/test/contact" />
          <area shape="rect" coords="616,124,890,237" href="/test/about-us" alt="About Temper Temper" />
          <area shape="rect" coords="985,285,1164,488" href="https://www.facebook.com/tempertempermargaretriver" alt="Follow Temper Temper on Facebook" />
          <area shape="rect" coords="859,490,1036,793" href="http://www.tripadvisor.com.au/Restaurant_Review-g255367-d7789880-Reviews-Temper_Temper_Fine_Chocolate-Margaret_River_Margaret_River_Region_Western_Austral.html" alt="See our Reviews on Trip Advisor" />
        </map>
        <?php wp_nav_menu( array( \'theme_location\' => \'front-page-menu\' ) ); ?>
        <p align="center">&copy; Temper Temper 2015</p>
    </div>
<?php wp_footer(); ?>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.rwdImageMaps.js"></script>
<script>
    $(document).ready(function() {
        $(\'img[usemap]\').rwdImageMaps();
    });
</script>
</body>
</html>

The main image (div#front-page img) is responsively sized for screen size <= 960px.

I want to make the image map responsive too, by using this project. This project relies on jQuery, but doesn\'t seem to work with jQuery v1.11.2. i.e: Using /wp-includes/js/jquery/jquery.js?ver=1.11.2 the image map is not responsive. It produces a Chrome code inspector console error Uncaught TypeError: undefined is not a function using jquery.js?ver=1.11.2

So I want to try including jQuery v2, but to do so, I must first disable /wp-includes/js/jquery/jquery.js?ver=1.11.2 from front-page.php.

How do I do this?

1 个回复
SO网友:Charles

也许我是如履薄冰,但让我们试一试

假设您已经下载了正确的jquery版本(要使用),并将其复制到文件夹中
(与jquery.rwdImageMaps.js 符合逻辑(imho)

Imho您还可以删除以下代码部分<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.rwdImageMaps.js"></script>来自头版。php文件并将其与(\'new\')jQuery一起加载,然后将文件迁移到页脚中
如果不需要,请删除下面的两行//To load the jquery.rwdImageMaps.js file also into the footer

您可以使用以下函数。(我假设您下载了两个文件,一个是普通的jQeury文件,另一个是缩小的jQeury文件),(使用false,true 进入页脚false,false 进入头部)

请在函数中复制此函数。php(在您的子主题文件夹中)

function load_scripts_into_footer() {
    // Only load on front-page.php (else it could brake some?)
    if ( is_front_page() ){

        // Deregister the undesirable jQuery file WP uses itself
        wp_deregister_script( \'jquery\' );

        // The Version2 jQuery file
        wp_register_script( \'jquery-2.0.0.min\', get_stylesheet_directory_uri() . \'/js/jquery-2.0.0.min.js\', array(), false, true ); 
        wp_enqueue_script(  \'jquery-2.0.0.min\', get_stylesheet_directory_uri() . \'/js/jquery-2.0.0.min.js\', array(), false, true );

        // It is recommend to use jquery-migrate in this case
        wp_enqueue_script(  \'jquery-migrate.min\', \'/wp-includes/js/jquery/jquery-migrate.min.js\', array(\'jquery-2.0.0.min\'), false, true );

        // To load the jquery.rwdImageMaps.js file also into the footer
        wp_register_script( \'jquery.rwdImageMaps\', get_stylesheet_directory_uri() . \'/js/jquery.rwdImageMaps\', array(\'jquery-2.0.0.min\',\'jquery-migrate.min\'), false, true );
        wp_enqueue_script(  \'jquery.rwdImageMaps\', get_stylesheet_directory_uri() . \'/js/jquery.rwdImageMaps\', array(\'jquery-2.0.0.min\',\'jquery-migrate.min\'), false, true );
    }
}
// Action hook
add_action( \'wp_enqueue_scripts\', \'load_scripts_into_footer\' );
我还没有测试过它,但它应该可以正常工作。我想说,试试看。

如何使用deregisterregisterenqueuejQuery 2.0

结束

相关推荐

JQuery函数在开发人员控制台中工作,但在其他情况下不起作用

有人能帮我利用原生wordpress jquery来运行我的函数吗?我所做的唯一工作测试是通过chrome开发控制台加载外部jquery资源,然后将我的函数添加到inspect元素控制台。工作测试:将其添加到控制台:if(!window.jQuery||confirm(\'Overwrite\\x20current\\x20version?\\x20v\'+jQuery.fn.jquery)) (function(d,s){s=d.createElement(\'script\');&#x