Adding JS to one page

时间：2016-10-31 作者：Rafal

在wordpress中添加JS脚本并将其应用于一个页面的最佳方法是什么？据我所知，不建议将其添加到模板中。我的简单JS是：

var allStates = $("svg.us > *");

allStates.on("click", function() {

  allStates.removeClass("on");
  $(this).addClass("on");

});

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

创建专用于javascript的新目录和文件。/js/scripts.js.

将整个javascript包装如下：

( function( $ ) {

  var allStates = $("svg.us > *");

  allStates.on("click", function() {

    allStates.removeClass("on");
    $(this).addClass("on");

  });

} )( jQuery );
然后在主题的函数文件中，输入以下代码。它会加载新的js文件。

function your_scripts() {
  wp_enqueue_script( \'your-script-handle\', get_template_directory_uri() . \'/js/scripts.js\', array( \'jquery\' ), \'1.0\', false );
}
add_action( \'wp_enqueue_scripts\', \'your_scripts\' );
这样，所有javascript都可以在任何页面上使用，并且只加载一次（之后，它会在浏览器缓存中）。因为你的功能是on click 可以在所有页面上找到它。

SO网友:jgraup

使用检查页面is_page 在里面wp_enqueue_scripts 刚好赶上wp_add_inline_script.

add_action( \'wp_enqueue_scripts\', function() {

    if ( is_page( \'your-page-name\' ) ) : ob_start(); ?>

        // generic    
        alert(\'Custom JS Loaded!\');

        // custom           
        var allStates = $("svg.us > *");

        allStates.on("click", function() {

        allStates.removeClass("on");
        $(this).addClass("on");

        });
        <?php wp_add_inline_script( \'jquery-migrate\', sprintf( \'( function( $ ) { %s } )( jQuery );\', ob_get_clean() ) );

    endif; // test page

} );

SO网友:Welcher

您可以在排队前执行以下操作来检查页面。如果帖子类型不是页面，您可能需要在if语句中更新您的登录名-这是一般概念：

add_action( \'wp_enqueue_script\', \'enqueue_my_script\');
function enqueue_my_script() {
    $page_title = \'Page Title\';
    if ( is_page( $page_title ) ) {
        wp_enqueue_script( \'your-script-handle\', get_template_directory_uri() . \'/js/scripts.js\', array( \'jquery\' ), \'1.0\', false );
    }
}

标签： jquery   小码农  

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上，我不知道我是如何产生它的，或者它是否是正常的。我正在开发自己的插件，当一个足球队/足球队被输入到一个框中时，它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">