WordPress, jQuery UI CSS файлы?

Я пытаюсь создать плагин для 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? ... и если да, то как мне включить стиль в мой плагин?

Источник

6 ответов

Решение

Похоже, у вас есть проблема с поиском доступного стиля в WordPress для темы jquery-ui.

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

У меня тоже была такая же проблема, и я нашел два варианта. Либо сохраните его в папке CSS и загрузите оттуда, либо загрузите через URL (API Google). Для JQuery UI я решил положиться на 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);
Источник

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

Вы можете найти тогда в wp-includes\css и ставить в очередь, используя wp_enqueue_style(),

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

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

Источник

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

Я думаю, что вы ищете эту функцию. Позволяет добавить скрипт в заголовок. Просто поместите css темы в папку с плагином и включите ее.

Источник

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

Таким образом, вы можете добавить только классы 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 вашего контейнера. Например, если ваш слайдер имеет идентификатор "слайдер", используйте:

 #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
Источник

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

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

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

Источник

Я только столкнулся с этой проблемой и нашел пост, тогда я нашел способ вставить класс "subsubsub" в тег ul. Список будет не плохим. Код будет:

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

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

Источник
Другие вопросы по тегам