【问题标题】:Whats the easiset way to integrate a CSS Library into WordPress将 CSS 库集成到 WordPress 中的最简单方法是什么
【发布时间】:2021-08-13 03:47:36
【问题描述】:

我正在寻找一种简单快捷的最佳方式来让 Bootstrap 或 Tailwind CSS 在我的 WordPress 中运行,以帮助保持页面和帖子。

是否有要安装的插件或将 sn-p 代码放入 functions.php 中 - 我仍在学习 Web 开发,并且非常了解它。感谢您的帮助!

【问题讨论】:

  • 欢迎来到 Stack Overflow! wp_enqueue_scripts() 是你的朋友。或者,只需将其放入 header.php 即可(尽管入队是首选方法)。
  • 我似乎无法让它为 TailwindCSS 工作:<?php function add_theme_codes() { wp_enqueue_style( ‘style’, ‘https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css’); } add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ ); ?>
  • 您在哪里添加该代码?而且,您似乎正在使用“智能”引号。那些需要更改为常规引号'

标签: wordpress bootstrap-4 tailwind-css


【解决方案1】:

谢谢你,感谢我在 elsewehere 找到的一些代码,我还能够通过一个名为 Code Snippets 的 WordPress 插件将其加入队列,但它也可以在 functions.php 文件中使用。

<?php
function pwwp_enqueue_my_scripts() {
    // jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts 
    wp_enqueue_script( 'bootstrap-js', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');

function pwwp_enqueue_my_styles() {
    wp_enqueue_style( 'bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' );

    // this will add the stylesheet from it's default theme location if your theme doesn't already
    //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');
?>

这是用于 TailwindCSS 的一个

<?php
    function pwwp_enqueue_my_styles() {
    wp_enqueue_style( 'bootstrap', '//unpkg.com/tailwindcss@2.1.2/dist/tailwind.min.css' );

    // this will add the stylesheet from it's default theme location if your theme doesn't already
    //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');
?>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-04
    • 1970-01-01
    • 2010-09-23
    • 1970-01-01
    • 2019-05-03
    • 2010-11-22
    • 1970-01-01
    相关资源
    最近更新 更多