WordPress, jQuery UI CSS файлы? - PullRequest
Новая
       4

WordPress, jQuery UI CSS файлы?

27 голосов
/ 13 января 2012

Я пытаюсь создать плагин для 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 ]

54 голосов
/ 03 августа 2012

Похоже, у вас возникла проблема с поиском доступного стиля в 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);
5 голосов
/ 13 января 2012

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

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

3 голосов
/ 31 мая 2016

Чтобы добавить больше деталей к ответу EkoJr, начиная с Jquery UI v1.11.4, если вы добавите всю таблицу стилей CSS JQuery UI, это может нарушить стилизацию 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;
}

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

 #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
1 голос
/ 11 ноября 2017

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

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

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

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

0 голосов
/ 20 июля 2016

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

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

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

0 голосов
/ 30 июля 2012

Если вы правильно используете вызовы 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

...