32

我正在尝试创建一个 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 主题？...如果是这样，我如何将样式排入我的插件？

4

6 回答 6

70

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

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

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

但是，WP 确实提供了脚本，这将使 CSS 与$wp_scripts->registered['jquery-ui-core']->ver. 您可以使用wp_scripts();OR访问它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);
于 2012-08-03T04:50:40.117 回答
5

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

我想你正在寻找这个功能。它允许您将脚本添加到标题中。只需将主题的 css 放在插件文件夹中的某个位置并包含它。

于 2012-01-13T11:20:31.290 回答
4

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

您可以wp-includes\css使用wp_enqueue_style().

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

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

于 2017-11-11T05:34:54.320 回答
3

要为 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 .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
于 2016-05-31T18:37:10.607 回答
0

如果您正确使用wp_enqueue_style()andwp_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

于 2012-07-30T19:14:44.047 回答
0

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

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

希望它可以帮助某人。

于 2016-07-20T09:07:47.117 回答