WordPress、jQuery UI CSS 文件？

Posted 2023-05-09

【中文标题】WordPress、jQuery UI CSS 文件？

【英文标题】：WordPress, jQuery UI CSS Files?

【发布时间】：2012-02-09 14:29:56

【问题描述】：

我正在尝试创建一个 WordPress 插件，我想在我的一个设置页面中包含 jQuery UI 选项卡。

我已经有了脚本代码集：

wp_enqueue_script('jquery');                    // Enque jQuery
wp_enqueue_script('jquery-ui-core');            // Enque jQuery UI Core
wp_enqueue_script('jquery-ui-tabs');            // Enque jQuery UI Tabs

...我也创建了 html 和 javascript。到这里为止一切都很好。

问题是：

WordPress 平台已经预装了一些脚本，就像我在上面排队的那个一样。我的脚本在标签上运行良好，但没有样式！那么我想问的是，WordPress 平台是否预装了 jQuery UI 主题？ ...如果是这样，我如何将样式排入我的插件？

【参考方案1】：

听起来您在 WordPress 中为 jquery-ui 主题寻找可用样式时遇到了问题。

回答你的问题。 不，WordPress 在平台本身内没有可用的样式。 唯一可用的 css 位于 \wp-includes\jquery-ui-dialog.css 中，仅此一项并不是很有用。 p>

我也遇到了同样的问题，我找到了两个选项。将其存储在 CSS 文件夹中并从那里加载，或通过 URL (Google API) 加载。对于 JQuery UI，我决定依赖 Google 的 CDA 并添加了一种利用“主题滚轮”的方法。存储这么多的 css 代码似乎并不重要，而且它太糟糕了 WordPress 没有像 jquery-ui 脚本那样提供任何样式支持。

但是，WP 确实提供了脚本，这将使 CSS 与 $wp_scripts->registered['jquery-ui-core']->ver 保持同步。您可以使用wp_scripts(); 或global $wp_scripts; 访问它。

静态主题

$wp_scripts = wp_scripts();
wp_enqueue_style('plugin_name-admin-ui-css',
                'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/smoothness/jquery-ui.css',
                false,
                PLUGIN_VERSION,
                false);

或动态主题

$wp_scripts = wp_scripts();
wp_enqueue_style('plugin_name-admin-ui-css',
                'http://ajax.googleapis.com/ajax/libs/jqueryui/' . $wp_scripts->registered['jquery-ui-core']->ver . '/themes/' . $pluginOptions['jquery_ui_theme'] . '/jquery-ui.css',
                false,
                PLUGIN_VERSION,
                false);

还有一个本地存储的例子

wp_enqueue_style('plugin_name-admin-ui-css',
                plugins_url() . '/plugin-folder-name/includes/css/jquery-ui-theme-name.css',
                false,
                PLUGIN_VERSION,
                false);

【讨论】：

+1 用于建议 CDA 而不是用常见的样式表把插件弄得乱七八糟

自动更新：global $wp_scripts; wp_enqueue_style("jquery-ui-css", "http://ajax.googleapis.com/ajax/libs/jqueryui/$wp_scripts->registered['jquery-‌​ui-core']->ver/themes/ui-lightness/jquery-ui.min.css"); 版本与WP相同（目前为1.10.3）。

其实我只需要对话框css。使用wp_enqueue_style("wp-jquery-ui-dialog");

【参考方案2】：

我认为没有预装 UI 主题。您需要将脚本添加到标题中。

我认为您正在寻找this function。它允许您将脚本添加到标题中。只需将主题的 css 放在插件文件夹中的某个位置并包含它即可。

【讨论】：

您能否评论一下如果多个插件开始包含单独的 jQuery UI 主题是否存在问题？ Sigh WordPress 团队的这种半心半意的措施让插件开发人员为 jQuery UI 捆绑了自己的主题，这很混乱，而且跨插件兼容性很糟糕。 WP 团队应该： 拥抱一个单一的主题，并称之为“WP jQuery UI 主题”，就是这样，每个人都应该在他们的插件上使用它。 （尤其是管理员！）

我很肯定 Wordpress 不会考虑 CSS 冲突。使用另一种样式“覆盖”您自己的样式表是很常见的，因此尝试搜索冲突会很奇怪。尽管如此，我同意你的看法。 Wordpress 应该改进这个......其他人可能会帮助你。尝试提出一个新问题。祝你好运！

@Ciantic，我从经验中知道，主题和插件之间包含冲突的脚本/样式可能会出现很多问题。我见过的最重要的事情之一是 jQuery 被包含为添加到标题的直接链接，而不是正确的 wp_enqueue_script('jquery') 方法。您可以采取一些预防措施，但很难避免。不幸的是，即使你做对了，如果他们在已经有一个做错的主题/插件之后添加你的插件，人们会指责你破坏了他们的网站。

【参考方案3】：

从那时起 WordPress 发生的变化的更新。最近的 WordPress 软件包在包装盒中带有 CSS。

您可以在wp-includes\css 中找到然后使用wp_enqueue_style() 排队。

我认为对于 OP 的用例，wp_enqueue_style( 'wp-jquery-ui-dialog' ); 就是所需要的。

希望这对将来的某人有所帮助。

【参考方案4】：

要为 EkoJr 的回答添加更多细节，从 Jquery UI v1.11.4 开始，如果您添加整个 JQuery UI CSS 样式表，它可能会破坏默认的 Wordpress 主题样式。

因此，您只能添加与滑块组件对应的 CSS 类。以下是我使用的类（注意：这些是为 ui-darkness 主题构建的）：

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default 
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
    font-weight: bold;
    color: #eeeeee;

.ui-slider-horizontal .ui-slider-handle 
    top: -.3em;
    margin-left: -.6em;

.ui-slider .ui-slider-handle 
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br 
    border-bottom-right-radius: 6px;

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl 
    border-bottom-left-radius: 6px;

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr 
    border-top-right-radius: 6px;

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl 
    border-top-left-radius: 6px;

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br 
    border-bottom-right-radius: 6px;

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl 
    border-bottom-left-radius: 6px;

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr 
    border-top-right-radius: 6px;

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl 
    border-top-left-radius: 6px;

.ui-widget-content 
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #000000 url("img/jquery-ui/ui-bg_inset-soft_25_000000_1x100.png") 50% bottom repeat-x;
    color: #ffffff;

.ui-widget 
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;

.ui-slider-horizontal 
    height: .8em;

.ui-slider 
    position: relative;
    text-align: left;

另外，请注意，您可以使用您的容器 ID前缀这些类。例如，如果您的滑块的 ID 为“slider”，请使用：

 #slider .ui-state-default,
 #slider .ui-widget-content .ui-state-default,
 #slider .ui-widget-header .ui-state-default 
    border: 1px solid #666666;
    /* this image is from the ui-darkness theme, use the one you'd like */
    background: #555555 url("img/jquery-ui/ui-bg_glass_20_555555_1x400.png") 50% 50% repeat-x;
    font-weight: bold;
    color: #eeeeee;

....ETC

【参考方案5】：

如果您正确使用 wp_enqueue_style() 和 wp_enqueue_script() 调用，并假设其他作者也正确使用它们，那么 WordPress 将处理冲突。

但是，如果插件或主题作者使用wp_head 或admin_head 操作将样式或脚本直接打印到页面头部，那么您就无法避免冲突。

参考： - http://codex.wordpress.org/Function_Reference/wp_enqueue_style - http://codex.wordpress.org/Function_Reference/wp_enqueue_script

【讨论】：

-1 不回答 OP 的问题。这不是如何添加通用样式。

对我们的新成员不太友好，嗯？评论本身就足够了。

【参考方案6】：

我刚遇到这个问题并找到了帖子然后我找到了一种方法是将类“subsubsub”插入到ul标签。名单不会差。代码将是：

<div id="tabs">
<ul class="subsubsub"><li><a href="#tab1"></a></li>
<div id="tab1"></div>
</div>

希望它可以帮助某人。