Подтвердить что ты не робот

WordPress, jQuery UI CSS Files?

Я пытаюсь создать плагин 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 поставляется с некоторыми предварительно установленными сценариями, такими как тот, который у меня установлен в очереди. Мой script отлично работает с вкладками, но это не стиль! Итак, что я пытаюсь спросить, на платформе WordPress есть предустановленная тема пользовательского интерфейса jQuery?... и если да, как мне вставить стиль в мой плагин?

4b9b3361

ОТВЕТЫ

Ответ 1

Звучит скорее как проблема с поиском доступного стиля в WordPress для темы jquery-ui.

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

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

Ответ 2

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

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

Ответ 3

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

Кроме того, обратите внимание, что вы можете префикс этих классов с идентификатором контейнера. Например, если ваш слайдер имеет 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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

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

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

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