如何基于POST模板加载css和js

时间:2018-11-23 作者:Abdus Sattar Bhuiyan

我创建了一篇帖子,其模板如下:

<?php
/*
Template Name: Html Code
Template Post Type: post, page
*/
?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">
<?php
 the_post();
 the_content();
?>
</div>
<?php get_footer(); ?>
现在我想基于这个模板加载css和js。我的条件代码如下:

 if(is_page_template(\'htmlcode.php\')){

            wp_enqueue_style( \'code-mirror-css\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/lib/codemirror.css\', array(), \'all\');
            wp_enqueue_style( \'code-mirror-monokai\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/theme/monokai.css\', array(), \'all\');

            wp_enqueue_script( \'code-mirror-js\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/lib/codemirror.js\', array(), \'1.0.0\', true );
            wp_enqueue_script( \'code-mirror-addon\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/addon/selection/selection-pointer.js\', array(), \'1.0.0\', true );
            wp_enqueue_script( \'code-mirror-mode-xml\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/xml/xml.js\', array(), \'1.0.0\', true );
            wp_enqueue_script( \'code-mirrror-mode-javascript\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/javascript/javascript.js\', array(), \'1.0.0\', true );
            wp_enqueue_script( \'code-mirrror-mode-css\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/css/css.js\', array(), \'1.0.0\', true );
            wp_enqueue_script( \'code-mirrror-mode-vbscript\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/vbscript/vbscript.js\', array(), \'1.0.0\', true );
            wp_enqueue_script( \'code-mirrror-mode-htmlmixed\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/htmlmixed/htmlmixed.js\', array(), \'1.0.0\', true );
            wp_enqueue_script( \'code-mirrror-config\', get_template_directory_uri() . \'/code-mirror/js/config.js\', array(), \'1.0.0\', true );
     }
但没有加载css和js文件。我通过查看源代码来检查它。有什么想法吗?

1 个回复
SO网友:Alvaro

看起来你的状况检查是正确的。根据对问题的评论,不要忘记将其作为回调添加到wp_enqueue_scripts 行动挂钩。

function enqueue_styles_and_scripts() {
    if ( is_page_template(\'htmlcode.php\') ) {
        wp_enqueue_style( \'code-mirror-css\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/lib/codemirror.css\', array(), \'all\');
        wp_enqueue_style( \'code-mirror-monokai\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/theme/monokai.css\', array(), \'all\');

        wp_enqueue_script( \'code-mirror-js\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/lib/codemirror.js\', array(), \'1.0.0\', true );
        wp_enqueue_script( \'code-mirror-addon\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/addon/selection/selection-pointer.js\', array(), \'1.0.0\', true );
        wp_enqueue_script( \'code-mirror-mode-xml\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/xml/xml.js\', array(), \'1.0.0\', true );
        wp_enqueue_script( \'code-mirrror-mode-javascript\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/javascript/javascript.js\', array(), \'1.0.0\', true );
        wp_enqueue_script( \'code-mirrror-mode-css\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/css/css.js\', array(), \'1.0.0\', true );
        wp_enqueue_script( \'code-mirrror-mode-vbscript\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/vbscript/vbscript.js\', array(), \'1.0.0\', true );
        wp_enqueue_script( \'code-mirrror-mode-htmlmixed\', get_template_directory_uri() . \'/code-mirror/plugin/codemirror/mode/htmlmixed/htmlmixed.js\', array(), \'1.0.0\', true );
        wp_enqueue_script( \'code-mirrror-config\', get_template_directory_uri() . \'/code-mirror/js/config.js\', array(), \'1.0.0\', true );
    }
}
add_action( \'wp_enqueue_scripts\', \'enqueue_styles_and_scripts\' );

结束

相关推荐