了解WordPress子主题自定义JS加载

时间:2017-02-04 作者:Matthieu Ducorps

经过一个又一个小时的努力,我的脑袋都想不起来了,我正在努力wp_enqueue_script 我的自定义js但WordPress总是在父主题文件夹中查找,下面是我最近尝试的内容,但没有成功。

我父母的主题是2016年,

直接地wp_enqueue_script:

function assets() {
         wp_enqueue_script(\'ajax_filter\', get_stylesheet_directory_uri() . \'/js/ajax-filter-posts.js\', [\'jquery\'], null, true);
         wp_localize_script( \'ajax_filter\', \'mdu\', array(
             \'nonce\'    => wp_create_nonce( \'mdu\' ),
             \'ajax_url\' => admin_url( \'admin-ajax.php\' )
         ));
    }
    add_action(\'wp_enqueue_scripts\', \'assets\', 100 );
注册wp_register_script 之前wp_enqueue_script:

 function assets() {
     wp_register_script(\'ajax_filter\', get_stylesheet_directory_uri() . \'/js/ajax-filter-posts.js\', [\'jquery\'], null, true);
     wp_enqueue_script(\'ajax_filter\');
     wp_localize_script( \'ajax_filter\', \'mdu\', array(
         \'nonce\'    => wp_create_nonce( \'mdu\' ),
         \'ajax_url\' => admin_url( \'admin-ajax.php\' )
     ));
}
add_action(\'wp_enqueue_scripts\', \'assets\', 100 );
还有这个解决方案wp_deregister_script 父主题脚本,

function assets() {
     wp_deregister_script(\'parent-script-handle\');
     wp_register_script(\'ajax_filter\', get_stylesheet_directory_uri() . \'/js/ajax-filter-posts.js\', [\'jquery\'], null, true);
     wp_enqueue_script(\'ajax_filter\');
     wp_localize_script( \'ajax_filter\', \'mdu\', array(
         \'nonce\'    => wp_create_nonce( \'mdu\' ),
         \'ajax_url\' => admin_url( \'admin-ajax.php\' )
     ));
}
add_action(\'wp_enqueue_scripts\', \'assets\', 100 );
我正在跟进WordPress的建议:

https://developer.wordpress.org/themes/advanced-topics/child-themes/#enqueueing-styles-and-scripts

EDIT: fixed some coding errors这是我的全部功能。php内容

<?php
/**
 *
 * Functions and definitions.
 *
 */

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

            $parent_style = \'twentysixteen-style\'; // This is \'twentysixteen-style\' for the Twenty Sixteen theme.

                wp_enqueue_style( $parent_style, get_template_directory_uri() . \'/style.css\' );
                wp_enqueue_style( \'child-style\',
                                get_stylesheet_directory_uri() . \'/style.css\',
                                        array( $parent_style ),
                                                wp_get_theme()->get(\'Version\')
                                                    );
}


//enqueue and localizing the Javascript.
 function assets() {
     //wp_deregister_script(\'parent-script-handle\');
     wp_register_script(\'ajax_filter\', get_stylesheet_directory_uri() . \'/js/ajax-filter-posts.js\', [\'jquery\'], null, true);
     wp_enqueue_script(\'ajax_filter\');
     wp_localize_script( \'ajax_filter\', \'mdu\', array(
         \'nonce\'    => wp_create_nonce( \'mdu\' ),
         \'ajax_url\' => admin_url( \'admin-ajax.php\' )
     ));
}
add_action(\'wp_enqueue_scripts\', \'assets\', 100 );
最后是我的控制台中的错误:

收到http://192.168.33.10/wp-content/themes/twentysixteen/js/ajax-filter-posts.js?ver=4.7.2 404(未找到)

我的JS文件位于216child/JS/文件夹中。

我真的很困惑这是如何工作的,我做错了什么,让这个js没有被加载,WP指向父主题…

感谢您的帮助和澄清!

好心的

马特。

2 个回复
最合适的回答,由SO网友:Matthieu Ducorps 整理而成

这是在子主题中加载自定义javascript的正确方法,wp_localize_script 仅当需要在JS和PHP(客户端和服务器)之间交换数据时才需要。

function assets() {
     wp_register_script(\'ajax_filter\', get_stylesheet_directory_uri() . \'/js/ajax-filter-posts.js\', [\'jquery\'], \'1.0\', false);
     wp_enqueue_script(\'ajax_filter\');
     wp_localize_script( \'ajax_filter\', \'mdu\', array(
         \'nonce\'    => wp_create_nonce( \'mdu\' ),
         \'ajax_url\' => admin_url( \'admin-ajax.php\' )
     ));
}
add_action(\'wp_enqueue_scripts\', \'assets\');
所以@KAGG注意到我的问题是我从另一个文件加载这个JS…

谢谢他的帮助!

马特

SO网友:KAGG Design

在父主题中似乎有相同的代码:/twentysixteen/functions.php 这是唯一的解释get_stylesheet_directory_uri() 退货/wp-content/themes/twentysixteen 但不是/wp-content/themes/twentysixteen-child

相关推荐

无法在模板函数.php中使用IS_HOME

我试图在标题中加载一个滑块,但只在主页上加载。如果有帮助的话,我正在使用Ultralight模板。我正在尝试(在template functions.php中)执行以下操作:<?php if ( is_page( \'home\' ) ) : ?> dynamic_sidebar( \'Homepage Widget\' ); <?php endif; ?> 但这行不通。现在,通过快速的google,我似乎需要将请