首页 > 解决方案 > 我们如何根据本地文件的位置或通过 CDN 正确地将样式和脚本排入队列?

问题描述

我开始制作一个自定义的 wordpress 主题,并且在将我的脚本排入队列时遇到了一些困难。截至目前,我的代码看起来像这样

主题函数/styles.php

<?php

    function ovaad_register_styling(){
        wp_enqueue_style('custom_core', get_template_directory() . '../custom.css', array(), '1.0', 'all');
        wp_enqueue_style('main_styles', get_template_directory() . '../style.css', array('custom_core'), '1.0', 'all');
    }

    add_action('wp_enqueue_scripts', 'ovaad_register_styling');
?>

主题函数/js.php

<?php

    function ovaad_register_js(){
        wp_enqueue_script('vue_core', get_template_directory_uri() . 'https://unpkg.com/vue@next', array(), '3.2.4', true);
        wp_enqueue_script('my_js', get_template_directory() . '../main.js', array(), '1.0', true);
    }

    add_action('wp_enqueue_scripts', 'ovaad_register_js');
?>

函数.php

<?php
    require 'theme_functions/styles.php';
    require 'theme_functions/js.php';
?>

我已经用谷歌搜索了这个问题,并遇到了一些建议使用get_stylesheet()而不是get_template_directory()我们从头开始处理自定义主题而不是子主题的回复。我注意到,style.css即使我的文件头部没有任何内容,wordpress 也会默认添加而无需我将其排入队列header.php

我有 Angular 背景,所以我更喜欢将所有内容尽可能分解成最小的部分,这就是我以这种方式包含它们的原因。我还尝试将它们硬编码到functions.php文件中并修改路径以查看它是否与我在代码中包含/要求它们的方式有关,并得到相同的结果。由于custom.css, style.cssandmain.js位于主题的根目录中,而我的styles.phpandjs.php文件位于一个theme_functions文件夹中,我认为问题可能是我将这些文件包含在同一文件夹中的一个文件中,并且路径告诉它搜索该位置的父位置,而不是相对于theme_functions文件夹。因此,更改路径以匹配包含它的位置似乎没有任何区别。

我还试图通过网络将 vue js 排入队列,无论get_我将其切换到哪种类型的函数,这似乎都不起作用。我也尝试过使用wp_register_style()wp_register_script()但没有任何区别。谁能阐明我在这里做错了什么以及我们应该如何处理本地文件与 CDN 与从子主题到父主题?我不断从旧版本的 WP 中遇到足够多的不同示例,以知道这显然是我们需要正确做的事情,但我没有找到任何可以清楚地区分它们的东西,足以让我弄清楚我应该尝试做什么它。我发现的所有教程get_template_directory_uri()都适用于所有内容,并且可以正常工作。所以我不知道从这里去哪里。

标签: phpwordpresswordpress-theming

解决方案


推荐阅读