在为函数中的特定页面排队样式表和脚本时,我遇到了排队顺序问题。php

时间:2020-05-09 作者:Driss Elk

我正在将代码模板(html、css、js)转换为Wordpress主题。此wordpress主题不是子主题。对于主页(front-page.php文件),样式表和javascript的排队工作正常,但在另一个特定页面(room.php文件)中it needs it own stylesheets and javascript 对它来说,它不起作用。这是我函数中的主要函数。将脚本和样式表排队的php文件:

// Styles

    // room.php_Styles
wp_enqueue_style( \'animate\', get_template_directory_uri() . \'/css/animate.css\', array(), \'1.0\');
wp_enqueue_style( \'composent\', get_template_directory_uri() . \'/css/component.css\', array(), \'1.0\' );
wp_enqueue_style( \'defaut\', get_template_directory_uri() . \'/css/default.css\', array(), \'1.0\');
    // front-page.php_Styles
wp_enqueue_style( \'all\', get_template_directory_uri() . \'/css/all.css\', array(), \'1.0\' );       
wp_enqueue_style( \'normal\', get_template_directory_uri() . \'/css/normalize.css\', array(), \'1.0\' );
wp_enqueue_style( \'shortcuticon\', get_template_directory_uri() . \'/favicon.ico\', array(), \'1.0\');   
wp_enqueue_style( \'demonstration\', get_template_directory_uri() . \'/css/demo.css\', array(), \'1.0\');


// Scripts
    // front-page.php_Scripts
wp_enqueue_script( \'anime\', get_template_directory_uri() . \'/js/anime.min.js\', array(), \'1.0\', true );
wp_enqueue_script( \'imagesload\', get_template_directory_uri() . \'/js/imagesloaded.pkgd.min.js\', array(),\'1.0\', true );
wp_enqueue_script( \'main\', get_template_directory_uri() . \'/js/main.js\', array(), \'1.0\', true );
wp_enqueue_script( \'popper\', \'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.js\', array(), \'1.0\', true );
    // room-page.php_Scripts
wp_enqueue_script( \'wall\', get_template_directory_uri() . \'/js/wallgallery.js\', array(), \'1.0\', true );
wp_enqueue_script( \'custom\', get_template_directory_uri() . \'/js/modernizr.custom.js\', array(),\'1.0\', true );
wp_enqueue_script( \'ajax\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\', array(), \'1.0\', true );
添加\\u操作(“wp\\u enqueue\\u scripts”、“enqueue\\u theme\\u assets”);

我在这里的具体页面是房间。php和by comparing the runing of the html template locally with that of the wordpress theme I deduced that there are only certain stylesheets that runs 在房间里。php和其他的都不是。也许这是个问题ORDERDEPENDENCIES wp\\u enqueue\\u script()/wp\\u enqueue\\u style()函数的。

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

Driss,

我倾向于将特定于某个模板的css和javascript分解为特定于该模板的文件-这样,如果每个页面上都不需要它,我就不会加载它,因此可以保留main.jsstyle.css 更小我通常是这样做的:

if( is_page_template( \'room.php\' ) ) {
    //Styles
    wp_enqueue_style( \'room-animate\', get_stylesheet_directory_uri() . \'/css/animate.css\', array(), \'1.0\');
    wp_enqueue_style( \'room-composent\', get_stylesheet_directory_uri() . \'/css/component.css\', array(), \'1.0\' );
    wp_enqueue_style( \'room-defaut\', get_stylesheet_directory_uri() . \'/css/default.css\', array(), \'1.0\');
    //Scripts
    wp_enqueue_script( \'room-wall\', get_stylesheet_directory_uri() . \'/js/wallgallery.js\', array( \'jquery\' ), \'1.0\', true );
    wp_enqueue_script( \'room-custom\', get_stylesheet_directory_uri()() . \'/js/modernizr.custom.js\', array( \'jquery\' ),\'1.0\', true );
    //You don\'t need to call jQuery again, WP does that for you.
    //wp_enqueue_script( \'ajax\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\', array(), \'1.0\', true );
}
重要提示:如果模板不在主题的主目录中,请确保您的条件包括其所在的目录。例如,如果您有room.php 子目录中的模板,您可以改为使用此模板:

if( is_page_template( \'templates/room.php\' ) ) { 
尝试此方法,完成后,使用开发人员工具检查页眉和页脚,以确保正在加载样式和脚本。我注释掉了jQuery,因为WP已经在加载jQuery,两次加载都会导致问题。您可以取消WP的jQuery排队,并将旧版本排队,但这可能会导致一系列其他WP特性停止工作。

如果正在加载样式和脚本,而您仍然存在问题,那么这些问题可能与javascript本身有关。

另外,对于您要询问的特定用例get_template_directory_uri()get_stylesheet_directory_uri 应可互换。