WordPress，jQuery UI CSS文件？

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

Answer 1

听起来更像是在WordPress中为jquery-ui主题找到可用样式的问题。

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

我也有同样的问题，我找到了两个选择 。 将其存储在CSS文件夹中并从那里加载，或通过URL （Google API）加载它。 对于JQuery UI，我决定依赖Google的CDA，并添加了一种利用’主题滚轴’的方法。 存储那些数量的css代码似乎是不必要的，并且它太糟糕的WordPress不提供任何样式支持，就像它们使用jquery-ui脚本一样。

但是，WP确实提供了脚本，这将使$wp_scripts->registered['jquery-ui-core']->ver保持CSS最新。 您可以使用wp_scripts();访问它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); 

Answer 2

我不认为预先安装了UI主题。 您需要将脚本添加到标头中。

我想你正在寻找这个function 。 它允许您向标题添加脚本。 只需将主题的css放在插件文件夹中的某个位置即可。

Answer 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 

Answer 4

如果正确使用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

Answer 5

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

希望它可以帮助某人。

Answer 6

从那以后对WordPress发生的更改的更新。 最近的WordPress软件包附带了CSS。

然后你可以在wp-includes\css并使用wp_enqueue_style()排队。

我认为对于OP的用例wp_enqueue_style( 'wp-jquery-ui-dialog' ); 就是这一切。

希望这可以帮助将来的某个人。