it-swarm.com.ru

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

26
Merianos Nikos

Похоже, у вас есть проблема с поиском доступного стиля в 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(); OR 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);
51
EkoJR

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

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

5
Tim S.

Чтобы добавить больше деталей к ответу 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
2
Luc Lérot

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

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

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

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

1
Arun Basil Lal

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

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

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

0
Hix.botay

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

0
Paul