如何将 codpen JS 和 AJax 添加到我的 wordpress 页面

Question

我刚刚在codepen上发现了一个不错的滑块，想集成到我的wp主页（单页）中。

我尝试导出 Codepen 滑块并注入内联 JS 和 CSS。 header 使用自定义 header 代码插件和 body.but 中的 HTML 代码与网站上已有的其他代码发生冲突。

我的问题是如何让 JS 内联代码只影响一个 DIV/ ID。

谢谢

Answer 1

不要依赖内联脚本。将它们保存为单独的文件 (hicham-slider.css/js) 并将它们存储在您网站的某个位置（可能是 /wp-content/themes/ACTIVETHEME/css/ 和 /wp-content/themes/ACTIVETHEME/js/，如果它们不存在则创建这些目录。

然后您需要 enqueue 使用您的 functions.php 文件：

add_action( 'wp_enqueue_scripts', 'hicham_scripts' );
function hicham_scripts(){
    wp_enqueue_style( 'hicham-slider', get_stylesheet_directory_uri() .'/css/hicham-slider.css', [], '1.0' );
    wp_enqueue_script( 'hicham-slider', get_stylesheet_directory_uri() .'/js/hicham-slider.js', ['jquery'], '1.0', true );
}

然后将 HTML 放入自定义 HTML 小部件或页面的 html/text 编辑器或 post。

如果滑块不依赖于 jQuery，请将 ['jquery'] 改为 []。阅读有关使用 wp_enqueue_style() and wp_enqueue_script()

正确排队的更多信息

如何将 codpen JS 和 AJax 添加到我的 wordpress 页面

How can I add codpen JS and AJax to my one wordpress page

javascript

ajax

wordpress

integration-testing