Estoy tratando de crear un plugin de WordPress, y me gustaría tener jQuery UI Tabs en una de mis páginas de configuración.

Ya tengo el código de secuencias de comandos set:

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 he creado el HTML y JavaScript. Hasta aquí todo está bien.

La pregunta es:

La plataforma de WordPress viene con algunos scripts pre-instalados como el que tengo en cola de arriba. Mi script se ejecuta bien, con las pestañas, pero no es estilo! Entonces, ¿qué estoy tratando de preguntar, ¿ la plataforma de WordPress vienen con jQuery UI Tema pre-instalado? …y si es así, ¿cómo puedo poner en cola el estilo en mi plugin?

6 Comentarios

  1. 54

    Suena más como usted tiene un problema con la búsqueda de una disposición estilo dentro de WordPress para el jquery-ui tema.

    Para responder a su pregunta. No, WordPress no tiene ninguna utilidad estilos disponibles dentro de la misma plataforma. El único disponible css está en \wp-includes\jquery-ui-dialog.css, y que por si solo no es muy útil.

    También tuve el mismo problema, y he encontrado dos opciones. Almacenarlo en una carpeta CSS de carga y a partir de allí, o de la carga a través de URL (APIs de Google). Para la interfaz de usuario JQuery decidí confiar en Google CDA y añadió una manera de utilizar el Tema de Rodillo’. Almacenar esa cantidad de código css parece onu-nessecary para empezar, y sus lástima que WordPress no ofrece ningún estilo apoyo como ellos hacen con el jquery-ui scripts.

    Sin embargo, WP no ofrecen secuencias de comandos, la cual mantendrá el CSS hasta la fecha con $wp_scripts->registered['jquery-ui-core']->ver. Usted puede acceder a ella con wp_scripts(); O global $wp_scripts;.

    Estática-tema

    $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 Dinámico-tema

    $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 almacenar localmente se

    wp_enqueue_style('plugin_name-admin-ui-css',
                    plugins_url() . '/plugin-folder-name/includes/css/jquery-ui-theme-name.css',
                    false,
                    PLUGIN_VERSION,
                    false);
    • +1 por lo que sugiere CDA en lugar de abarrotar plugin con el común de las hojas de estilo
    • Actualización automática: global $wp_scripts; wp_enqueue_style("jquery-ui-css", "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-‌​ui-core']->ver}/themes/ui-lightness/jquery-ui.min.css"); la versión es la misma que en WP (actualmente 1.10.3).
    • En realidad, yo sólo necesitaba el cuadro de diálogo de css. Uso wp_enqueue_style("wp-jquery-ui-dialog");
  2. 5

    Yo no creo que una interfaz de usuario tema viene pre-instalado. Usted necesita agregar el script en el encabezado.

    Creo que usted está buscando esta función. Permite agregar una secuencia de comandos para su cabecera. Acabo de poner el tema del css en algún lugar en tu carpeta de plugins y que lo incluya.

    • También puede comentar es que hay un problema si hay varios plugins comienza a incluir por separado jQuery UI temas? Suspiro este medio corazón, medida desde el equipo de WordPress ha hecho que los desarrolladores de plugins para agrupar propios temas para la interfaz de usuario jQuery, que es un desastre y de la cruz-plugin de compatibilidad de mierda. WP Equipo debe: Abrazo un único tema, y lo llaman «WP jQuery UI theme», eso es todo, todo el mundo debería utilizar en sus plugins. (Especialmente en admin!)
    • Estoy bastante positiva de WordPress que no se parece en CSS conflictos. Es muy común el «sobrescribir» su propia hoja de estilos utilizando otro estilo con el fin de buscar conflictos sería bastante extraño. No obstante estoy de acuerdo con usted. WordPress DEBERÍA mejorar esta… Alguien podría ayudar con esto. Trate de preguntar a una nueva pregunta. Buena suerte hombre!
    • Sé por experiencia que no puede ser un montón de problemas de conflictos de la secuencia de comandos/estilo incluye entre los temas y plugins. Uno de los más grandes que he visto es jQuery llegar incluido como un enlace directo añadido a la cabecera opuesta a la correcta wp_enqueue_script('jquery') método. Hay algunas medidas preventivas que puede tomar, pero es difícil de evitar. Por desgracia, incluso si lo haces bien, la gente se le culpa por la ruptura de su sitio web en caso de agregar el plugin después de que ya tiene un tema/plugin que lo hace mal.
  3. 3

    Para añadir algunos detalles más para EkoJr la respuesta, como de la interfaz de usuario Jquery v1.11.4 si desea añadir toda la interfaz de usuario JQuery CSS stylesheet, es posible quebrar el Tema por defecto de WordPress estilo.

    Así, podría agregar solamente las clases CSS correspondiente a la componente slider. Aquí están las clases que he usado (nota : estos son construidos para el interfaz de usuario de la oscuridad tema) :

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

    También, por favor, tenga en cuenta que puede prefijo esas clases con el ID del contenedor. Por ejemplo, si el regulador tiene la ID ‘slider’, uso :

     #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. 1

    Una actualización para que los cambios que ha sucedido con WordPress desde siempre. Reciente de WordPress paquetes vienen con el CSS en el cuadro.

    Usted puede encontrar a continuación, en wp-includes\css y su uso wp_enqueue_style().

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

    La esperanza de que esto ayude a alguien en el futuro.

  5. 0

    Si utiliza el wp_enqueue_style() y wp_enqueue_script() llamadas correctamente, y suponiendo que otros autores se están utilizando correctamente y, a continuación, WordPress se encargará de conflictos.

    Sin embargo, si es un plugin o tema autor imprime los estilos o scripts directamente a la cabeza de la página utilizando wp_head o admin_head acciones, entonces no hay mucho que usted puede hacer para evitar el conflicto.

    Refs:

    http://codex.wordpress.org/Function_Reference/wp_enqueue_style

    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    • -1 por no contestar OP pregunta. No era cómo agregar un genérico de estilo.
    • no es muy agradable a nuestros nuevos miembros, hmm? el comentario hubiera sido suficiente.
  6. 0

    Acabo de enfrentar este problema y encontrar el post, a continuación, he encontrado una manera es que la inserción de la clase «subsubsub» ul etiqueta. La lista no será malo. El código será:

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

    La esperanza puede ayudar a alguien.

Dejar respuesta

Please enter your comment!
Please enter your name here