Wordpress：仅在使用短代码的页面上加载 CSS 和 JS答案

【问题标题】：Wordpress: Load CSS and JS only on page where shortcode is usedWordpress：仅在使用短代码的页面上加载 CSS 和 JS
【发布时间】：2021-01-21 11:30:47
【问题描述】：

我只想在特定页面中使用短代码（embedyt）时显示 css 和 javascript 文件。

我不是 php 专家，但我需要修改我的 wordpress 网站中的一些内容。

这是css和js文件：

<link rel='stylesheet' id='__EPYT__style-css'  href='***/wp-content/plugins/youtube-embed-plus/styles/ytprefs.min.css?ver=13.4.1.2' type='text/css' media='all' />
<script type='text/javascript' defer src='***/wp-content/plugins/youtube-embed-plus/scripts/ytprefs.min.js?ver=13.4.1.2' id='__ytprefs__-js'></script>

这是我在 function.php（子）中插入但不起作用的代码

function youtubeembed_css_js() {
    global $post;
    
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'embedyt') ) {
        wp_enqueue_script('youtube-embed-plus');
     wp_enqueue_style('youtube-embed-plus');

    }else{
        wp_dequeue_script( 'youtube-embed-plus' );
        wp_dequeue_style( 'youtube-embed-plus' );
    }
}
add_action( 'wp_enqueue_scripts', 'youtubeembed_css_js', 100);

我该如何解决？感谢您的帮助

【问题讨论】：

您需要注册脚本，然后在必要时将脚本加入队列。检查下面的代码sn-p
您似乎没有注册“youtube-embed-plus”，所以 WP 不知道哪个脚本入队或出队。查看 Wordpress Codex 中入队函数的定义以及如何使用 wp_register_script() 如果您在头部进行正常链接，那么我怀疑 WP 会知道它是同一个脚本 - 您需要使用它自己的函数。

标签： javascript php css wordpress

【解决方案1】：

感谢您的帮助。但是我很新，所以我一步一步尝试

我做错了，因为我仍然在 html 中看到该文件。

我用这个代码注册

add_action('init', 'register_style');
function register_style() {
    wp_register_style( 'youtube-embed-plus', plugins_url('/styles/ytprefs.min.css', __FILE__));
    wp_register_script( 'youtube-embed-plus', plugins_url('/scripts/ytprefs.min.js', __FILE__));
}

【讨论】：

【解决方案2】：

您需要先注册脚本。这不会加载脚本。

<?php
add_action("wp_enqueue_scripts", "myscripts");
function myscripts() { 
    wp_register_script('myfirstscript', 
                        get_template_directory_uri() .'/myscript.js',   //
                        array ('jquery', 'jquery-ui'),                  //depends on these, however, they are registered by core already, so no need to enqueue them.
                        false, false);
}
?>

要加载脚本，您需要使用 wp_enqueue_script 和如下所示的脚本句柄

<?php
add_shortcode('foo','my_shortcode');
function my_shortcode() {
    ob_start();
    wp_enqueue_script('myfirstscript');
    ?> <HTML> <here> ... <?php
    return ob_get_clean();
}
?>

【讨论】：

感谢您的帮助。但是我很新所以我一步一步尝试但是我做错了因为我仍然在html中看到文件。
在<?php?>中附上给定的代码sn-p