当前位置：文江博客话题详情

CSS WP 小部件在任何主题下保持风格的最佳方式

发布于 2024-11-07 05:27:28 字数 155 浏览 0 评论 0原文

我将制作 WP 小部件插件，并希望使其独立于主题。

我的意思是，无论使用什么主题，我都需要这个小部件在其 CSS 中保持样式设置。我担心主题会覆盖它的风格。

做到这一点的最佳 CSS 技术是什么？我应该使用基于小部件 ID(#) 或其 Class(.) 的样式吗？

原文

分享到QQ

分享到微博

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

发布评论

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

謌踐踏愛綪 2024-11-14 05:27:28

如果您使用 ID 定义容器并让所有样式声明在选择器中使用此 ID，那么其他人不太可能覆盖您的样式。

#MyWidget p {
    color: #ffcc00;
}

#MyWidget p a {
    text-decoration: none;
}

您的选择器越具体，它们的优先级就越高。

It's unlikely that someone overwrite your style if you define a container with an ID and have all your style declarations use this ID in the selector.

#MyWidget p {
    color: #ffcc00;
}

#MyWidget p a {
    text-decoration: none;
}

The more specific your selectors are, the more priority they have.

回复收藏 0 原文

以酷 2024-11-14 05:27:28

当 wp_head() 函数被触发时，使用它来将样式表包含到您的 css 文件中..

function wp_mywidget_css() {

    $siteurl = get_option('siteurl');
    $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/styles.css';

    echo "\n\n<!-- your plugin css styles -->\n";
    echo "<link rel='stylesheet' type='text/css' href='$url'>\n";
    echo "<!-- /your plugin css styles -->\n\n";
} 
add_action('wp_head', 'wp_mywidget_css');

在您的插件文件夹中放置一个名为“styles.css”的文件，其中包含上面帖子中的代码，这应该会阻止任何主题与您的样式混淆，只需将您的小部件样式命名为独特的名称即可...

when the wp_head() function is fired, use that to include a stylesheet to your css file..

function wp_mywidget_css() {

    $siteurl = get_option('siteurl');
    $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/styles.css';

    echo "\n\n<!-- your plugin css styles -->\n";
    echo "<link rel='stylesheet' type='text/css' href='$url'>\n";
    echo "<!-- /your plugin css styles -->\n\n";
} 
add_action('wp_head', 'wp_mywidget_css');

place a file called 'styles.css' your plugin folder, which would include the code from the post above, this should stop any theme messing with your styles, just name your widget styles something unique...

回复收藏 0 原文

~没有更多了~