将css和js添加到使用自定义模板创建的空白页面

时间:2020-05-14 作者:ADM

我是wp的新手,请注意:)

我在Twenty20Theme文件夹中添加了一个php文件,添加了一个新的空白页面,其中包含:

<?php
/* Template Name: charles */ 

?>
然后,我通过在admin中选择charles模板创建了一个新页面。

现在在我的新空白页面中,我可以看到我正在创建的新插件的内容,这正是我想要的。到这里都很好。

但是现在,我需要添加一个css自定义文件、一个js自定义文件和一个对jquery cdn url的调用。我试着换了二十个functions.php 正在添加:

function wpdocs_charles_scripts() {
    wp_enqueue_style( \'myStyle\', get_stylesheet_uri() );
    wp_enqueue_script( \'myScript\', get_template_directory_uri() . \'/myFiles/myScript.js\', array(), \'1.0.0\', true );
}
add_action( \'wp_enqueue_scripts\', \'wpdocs_charles_scripts\' );
但这对我的http://localhost/wordpress/charles/我也尝试过使用简单的自定义CSS和JS,但这会改变整个页面的样式,但不会改变charles中的样式。

我在新插件php中的最后一次尝试:

add_action(\'init\', \'register_script\');
function register_script() {
    wp_register_script( \'myScript\', plugins_url(\'/myFiles/myScript.js\', __FILE__), array(\'jquery\'), \'2.5.1\' );

    wp_register_style( \'myStyle\', plugins_url(\'/myFiles/myStyle.css\', __FILE__), false, \'1.0.0\', \'all\');
}

add_action(\'wp_enqueue_scripts\', \'enqueue_style\');

function enqueue_style(){
   wp_enqueue_script(\'myScript\');

   wp_enqueue_style( \'myStyle\' );
}
请帮忙,我想我缺少一些基本的东西。

非常感谢

2 个回复
SO网友:ADM

在我的主题函数中。php最终对我有用:

function themesCharles_enqueue_style() {
    wp_enqueue_style( \'my-theme\', get_template_directory_uri() .\'/myFiles/myStyle.css\', false );
}

function themesCharles_enqueue_script() {
    wp_enqueue_script( \'my-js\', get_template_directory_uri() .\'/myFiles/myScript.js\', false );
}

add_action( \'wp_enqueue_scripts\', \'themesCharles_enqueue_style\' );
add_action( \'wp_enqueue_scripts\', \'themesCharles_enqueue_script\' );

SO网友:made2popular

您应该尝试此功能。此操作仅在页面模板为charles时运行。

if ( is_page_template( \'charles.php\' ) ) {
    // Enqueue the script and CSS here
}
请试试这个,让我知道。

相关推荐

嵌入CodePen Calorie脚本-jQuery错误

我正在尝试嵌入此代码:https://codepen.io/jme11/pen/zMVJVX我的Wordpress关于健身,但我不知道为什么它不能正常工作-我已经下载了代码的导出,它在独立的HTML(+js和css)文件中工作得很好(特别是完成的表单将显示在results div中)。然后,我将HTML嵌入到我的Wordpress模板页面中,它显示在前端,很好,我已经按照HTML中相同的顺序正确链接了css和js,并将它们检入(查看源代码显示它们已连接)填写表格并点击calculate确实可以做一些事情(