WordPress，jQuery UI CSS文件? [英] WordPress, jQuery UI CSS Files?

问题描述

我正在尝试创建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? ...如果是的话，如何将样式加入我的插件中?

解决方案

听起来更像是您在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();或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);

I'm trying to create a WordPress plugin, and I would like to have jQuery UI Tabs in one of my settings pages.

I already have the scripting code set:

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

...and I have created the HTML and JavaScript too. Until here all are fine.

The question is:

The WordPress platform comes with some scripts already pre-installed like the one I have enqueue above. My script runs fine with the tabs, but it is not styled! So what I'm trying to ask, does the WordPress platform come with jQuery UI Theme pre-installed? ...and if so, how do I enqueue the style into my plugin?

解决方案

Sounds more like you have an issue with finding an available styling within WordPress for the jquery-ui theme.

To answer your question. No, WordPress has no useful styles available within the platform itself. The only available css is in \wp-includes\jquery-ui-dialog.css, and that alone isn't very useful.

I also had the same issue, and I found two options. Either store it in a CSS folder and load it from there, or load it via URL (Google APIs). For JQuery UI I decided to rely on Google's CDA and added a way to utilize the 'Theme Roller'. Storing that amount of css code seems un-nessecary to begin with, and its too bad WordPress doesn't provide any styling support like they do with the jquery-ui scripts.

However, WP does offer scripts, which will keep the CSS up to date with $wp_scripts->registered['jquery-ui-core']->ver. You can either access it with wp_scripts(); OR global $wp_scripts;.

Static-theme

$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);

OR Dynamic-theme

$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);

And an example of locally storing it

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

这篇关于WordPress，jQuery UI CSS文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！