enqueue - jquery ui dependencies

WordPress, archivos jQuery UI CSS?

Question

Intento crear un plugin de WordPress, y me gustaría tener las pestañas de jQuery UI en una de mis páginas de configuración.

Ya tengo el conjunto de códigos de scripting:

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

... y también he creado el HTML y JavaScript. Hasta aquí, todo está bien.

La pregunta es:

La plataforma de WordPress viene con algunos scripts ya preinstalados como el que he puesto en cola arriba. Mi script funciona bien con las pestañas, ¡pero no tiene estilo! Entonces, ¿qué estoy tratando de preguntar, la plataforma de WordPress viene con jQuery UI Theme preinstalado? ... y si es así, ¿cómo encola el estilo en mi complemento?

Answer 1

Me enfrento a este problema y encontré la publicación y encontré la forma de insertar la clase "subsubsub" en la etiqueta ul. La lista no estará mal. El código será:

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

Espero que pueda ayudar a alguien.

Answer 2

No creo que un tema de UI venga preinstalado. Necesita agregar la secuencia de comandos al encabezado.

Creo que estás buscando esta función . Le permite agregar una secuencia de comandos a su encabezado. Simplemente coloque el CSS del tema en algún lugar de su carpeta de complementos e inclúyalo.

Answer 3

Para agregar más detalles a la respuesta de EkoJr, a partir de Jquery UI v1.11.4 si agrega toda la hoja de estilos CSS de JQuery UI, podría romper el estilo predeterminado del tema Wordpress.

Por lo tanto, solo puede agregar las clases CSS correspondientes al componente del control deslizante. Estas son las clases que utilicé (nota: estas están construidas para el tema ui-oscuridad ):

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

Además, tenga en cuenta que puede ponerle un prefijo a esas clases con su identificación de contenedor. Por ejemplo, si su control deslizante tiene el ID ''control deslizante'', use:

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

Si usa las wp_enqueue_style() y wp_enqueue_script() correctamente, y suponiendo que otros autores también las están utilizando correctamente, WordPress se encargará de los conflictos.

Sin embargo, si un complemento o autor del tema imprime los estilos o secuencias de comandos directamente en el encabezado de la página con las acciones wp_head o admin_head , entonces no hay mucho que pueda hacer para evitar el conflicto.

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

Answer 5

Suena más como si tuvieras problemas para encontrar un estilo disponible en WordPress para el tema jquery-ui.

Para responder tu pregunta. No, WordPress no tiene estilos útiles disponibles dentro de la plataforma. El único CSS disponible está en / wp-includes / jquery-ui-dialog.css, y eso solo no es muy útil.

También tuve el mismo problema, y ​​encontré dos opciones . O guárdelo en una carpeta CSS y cárguelo desde allí, o cárguelo a través de la URL (API de Google). Para JQuery UI, decidí confiar en el CDA de Google y agregué una forma de utilizar el ''Theme Roller''. Almacenar esa cantidad de código css parece no ser necesario para comenzar, y es una pena que WordPress no proporcione ningún soporte de estilo como lo hacen con los scripts de jquery-ui.

Sin embargo, WP sí ofrece scripts, que mantendrán el CSS actualizado con $wp_scripts->registered[''jquery-ui-core'']->ver . Puede acceder a él con wp_scripts(); O global $wp_scripts; .

Tema estático

$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);

O tema dinámico

$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);

Y un ejemplo de almacenamiento local

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 6

Una actualización de los cambios que han sucedido con WordPress desde entonces. Los paquetes recientes de WordPress vienen con el CSS en la caja.

Puede encontrarlo en wp-includes/css y en cola usando wp_enqueue_style() .

Creo que para el caso de uso de OP wp_enqueue_style( ''wp-jquery-ui-dialog'' ); es todo lo que se necesitaba.

Espero que esto ayude a alguien en el futuro.