WordPress, jQuery UI CSS Files?

Question

Je suis en train de créer un plugin WordPress, et je voudrais avoir jQuery UI onglets dans l'une de mes pages de paramètres.

J'ai déjà l'ensemble du code de script:

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

... et j'ai créé le code HTML et JavaScript aussi. Jusqu'à ici tous sont très bien.

La question est:

La plate-forme WordPress est livré avec des scripts déjà pré-installés comme celui que j'ai enqueue ci-dessus. Mon script fonctionne très bien avec les onglets, mais il n'est pas de style! Donc ce que je suis en train de demander, ne la plate-forme WordPress venir avec jQuery UI Theme pré-installé? ... et si oui, comment puis-je ENQUEUE le style dans mon plug-in?

Answer 1

Ressemble plus vous avez un problème avec la recherche d'un style disponibles dans WordPress pour le thème jquery-ui.

Pour répondre à votre question. Non, WordPress n'a pas de styles utiles disponibles dans la plate-forme elle-même. Le seul disponible est en css \ wp-includes \ jquery-ui-dialog.css, et que seul est pas très utile.

J'ai eu le même problème, et j'ai trouvé deux options . Soit le stocker dans un dossier CSS et le charger à partir de là ou de le charger via URL (Google API). Pour JQuery UI j'ai décidé de compter sur CDA de Google et a ajouté une façon d'utiliser le « Thème rouleau ». Le stockage que quantité de code css semble non nessecary pour commencer, et son WordPress trop mauvais ne fournit aucun support de style comme ils le font avec les scripts jquery-ui.

Cependant, WP ne scripts offre, qui gardera la CSS à jour avec $wp_scripts->registered['jquery-ui-core']->ver. Vous pouvez y accéder avec wp_scripts(); OU global $wp_scripts;.

thème statique

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

ou dynamique thème

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

Et un exemple de stocker localement il

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 2

Je ne pense pas que le thème de l'interface utilisateur est pré-installé. Vous devez ajouter le script à l'en-tête.

Je pense que vous cherchez cette fonction . Il vous permet d'ajouter un script à votre tête. Il suffit de mettre quelque part le css du thème dans votre dossier de plug-in et l'inclure.

Answer 3

Pour ajouter quelques détails à la réponse de EkoJr, au v1.11.4 JQuery UI si vous ajoutez l'ensemble JQuery UI CSS stylesheet, il pourrait briser le style de thème par défaut Wordpress.

Alors, vous ne pouvez ajouter les classes CSS correspondant à la composante de curseur. Voici les classes I utilisés (note: ceux-ci sont construits pour le thème ui-obscurité ):

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

En outre, s'il vous plaît noter que vous pouvez préfixe les classes avec votre ID de conteneur. Pour exemple, si votre curseur a l'ID 'curseur', utilisez:

 #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

Une mise à jour pour les changements qui s'est passé jamais avec WordPress depuis. Récents forfaits WordPress viennent avec le CSS dans la boîte.

Vous pouvez alors trouver dans wp-includes\css et enqueue en utilisant wp_enqueue_style().

Je pense que pour le wp_enqueue_style( 'wp-jquery-ui-dialog' ); de cas d'utilisation de l'OP est tout ce qui était nécessaire.

Espérons que cela aide quelqu'un à l'avenir.

Answer 5

Si vous utilisez le wp_enqueue_style() et wp_enqueue_script() appels correctement, et en supposant que les autres sont de l'auteur de les utiliser correctement et, puis WordPress prendra soin des conflits.

Toutefois, si un plugin ou auteur thème imprime les styles ou les scripts directement à la tête de la page en utilisant les actions de wp_head ou admin_head alors il n'y a pas grand chose que vous pouvez faire pour éviter les conflits.

Réfs:
- http://codex.wordpress.org/Function_Reference/wp_enqueue_style
- http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Answer 6

Je face à tout ce problème et a trouvé le poteau alors j'ai trouvé un moyen est que la classe d'insérer « subsubsub » pour balise ul. La liste sera pas mal. Le code sera:

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

L'espoir peut aider quelqu'un.