如何防止 Bootstrap 干扰自定义插件中的 WordPress 主题和默认 CSS?

发布于 2025-01-16 21:31:01 字数 461 浏览 4 评论 0原文

我正在创建一个 WordPress 插件,并且需要 Bootstrap。我正在使用 Bootstrap CDN。

更具体地说,我不想更改 CSS 中的代码 我的插件是通过短代码切换的,所以我不能只定位单个页面

wp_register_style( 'bootstrap-css','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
wp_enqueue_style('bootstrap-css');

,但问题是它会干扰我的 WordPress CSS(主题,标题等..) 有人知道如何解决吗?

I'm creating a WordPress plugin and I need Bootstrap. I'm using the Bootstrap CDN.

To be more specific, I don't want to change code in the CSS
And my plugin is toggled by a shortcode so I can't just target a single page

wp_register_style( 'bootstrap-css','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
wp_enqueue_style('bootstrap-css');

But the problem is it interfere with my wordpress css (theme , title etc..)
Someone know how to resolve that ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

深海不蓝 2025-01-23 21:31:01

您需要更改 CSS。您不能指望您的插件用户将 Bootstrap 加载到任何随机主题中,否则他们将面临与您完全相同的问题。另外,Bootstrap 对于一个插件来说有点重。不管怎样,你可能想要一个大大简化的版本。

  1. 在样式表和标记中使用插件代码为所有 Bootstrap 类添加前缀。选择可能唯一的前缀,例如 ws_
  2. 将库减少到您实际需要的大小并缩小它。将其作为文件包含在您的插件包中。
  3. 不要对 Bootstrap 样式过于严厉,除非您将插件营销为仅适用于 Bootstrap。例如,使用布局和间距类,但可能不使用按钮或颜色类,除非用户选择使用 Bootstrap 样式。

You'll need to change the CSS. You can't expect your plugin users to load Bootstrap into any random theme or they'll face the exact problems you are. Also, Bootstrap is a bit heavy for a plugin. You probably want a vastly reduced version of it anyway.

  1. Prefix all Bootstrap classes in your stylesheet and markup with a code for your plugin. Select a prefix that's likely to be unique, like ws_.
  2. Reduce the library to just what you actually need and minify it. Include it as a file with your plugin package.
  3. Don't be heavy-handed with Bootstrap styling unless you're marketing your plugin as Bootstrap-only. Use layout and spacing classes, but maybe not button or color classes, for example, unless the user opts in to Bootstrap styling.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文