WordPress, jQuery UI CSS Files?

Question

Я пытаюсь создать плагин WordPress, и я хотел бы иметь вкладки пользовательского интерфейса jQuery на одной из моих страниц настроек.

У меня уже есть набор сценариев код:

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? ... и если да, то как мне вставить этот стиль в мой плагин?

Answer 1

звучит как у вас есть проблемы с поиском доступного стайлинг внутри WordPress для темы JQuery-UI.

Чтобы ответить на ваш вопрос. Нет, WordPress не имеет полезных стилей, доступных на самой платформе. Единственный доступный css находится в \ wp-includes \ jquery-ui-dialog.css, и это само по себе не очень полезно.

У меня также была та же проблема, и я нашел два варианта. Либо сохраните его в папке CSS и загрузите с него, либо загрузите через URL (API Google). Для пользовательского интерфейса JQuery я решил положиться на CDA от Google и добавил способ использования «Theme Roller». Хранение этого количества кода css кажется неубедительным для начала, и его слишком плохой WordPress не предоставляет никакой поддержки стиля, как в сценариях jquery-ui.

Однако WP предлагает сценарии, которые позволят обновить CSS до $wp_scripts->registered['jquery-ui-core']->ver. Вы можете либо получить к нему доступ wp_scripts(); ИЛИ global $wp_scripts;.

Static-тема

$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

Я не думаю, что тема пользовательского интерфейса поставляется с предустановленной. Вам нужно добавить скрипт в заголовок.

Я думаю, вы ищете this function. Это позволяет добавить скрипт в свой заголовок. Просто поставьте css темы где-нибудь в вашей папке плагина и включите это.

Answer 3

Если вы правильно используете коды , и если другие авторы используют их правильно, то WordPress позаботится о конфликтах.

Однако, если автор плагинов или авторов печатает стили или сценарии непосредственно в начале страницы с помощью wp_head или admin_head действий, вы можете не много сделать, чтобы избежать конфликта.

Refs:
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Answer 4

Чтобы добавить некоторые детали к ответу EkoJr, по состоянию на JQuery UI v1.11.4, если вы добавите всю таблицу стилей CSS JQuery UI, она может сломать стиль Wordpress по умолчанию.

Таким образом, вы можете добавлять только классы CSS, соответствующие компоненту слайдера. Вот классы, которые я использовал (примечание: они построены для UI-темноты темы):

.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; 
} 

Кроме того, обратите внимание, что вы можете префикс этих классы с вашим идентификатором контейнера. Для Exemple, если ползунок имеет идентификатор «слайдер», использование:

#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 5

Я просто сталкиваюсь с этим вопросом и нашел этот пост, то я нашел способ, что вставка класса «subsubsub» на ул теге. Список будет неплохим. Код будет следующим:

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

Надеюсь, что это может помочь кому-то.

Answer 6

Обновление для изменений, которые произошли с WordPress с тех пор. Последние пакеты WordPress поставляются с CSS в коробке.

Вы можете найти его в wp-includes\css и поставить в очередь с помощью wp_enqueue_style().

Я думаю, что для использования ОП используется wp_enqueue_style('wp-jquery-ui-dialog'); - это все, что нужно.

Надеюсь, что это поможет кому-то в будущем.