web-dev-qa-db-fra.com

WordPress, fichiers CSS jQuery UI?

J'essaie de créer un plugin WordPress et j'aimerais avoir des onglets jQuery UI dans l'une de mes pages de paramètres.

J'ai déjà le code de script défini:

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 aussi créé le HTML et le JavaScript. Jusque là tout va bien.

La question est:

La plate-forme WordPress est livrée avec des scripts déjà pré-installés comme celui que j'ai mis en file d'attente ci-dessus. Mon script fonctionne bien avec les onglets, mais il n'est pas stylé! Donc, ce que j'essaie de demander, la plate-forme WordPress est-elle fournie avec le thème jQuery UI pré-installé? ... et si oui, comment puis-je mettre le style en file d'attente dans mon plugin?

jquerywordpressjquery-uiwordpress-pluginjquery-ui-css-framework
26
Merianos Nikos

Cela ressemble plus à un problème de recherche de style disponible dans WordPress pour le thème jquery-ui.

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

J'ai également eu le même problème, et j'ai trouvé deux options . Stockez-le dans un dossier CSS et chargez-le à partir de cet emplacement ou viaURL(API Google). Pour l'interface utilisateur de JQuery, j'ai décidé de m'appuyer sur le CDA de Google et d'ajouter un moyen d'utiliser le "Rouleau de thèmes". Stocker cette quantité de code CSS ne semble pas tout à fait nécessaire, et son dommage, WordPress, ne fournit aucun support en matière de style, contrairement à ce qu’ils font avec les scripts jquery-ui.

Cependant, WP propose des scripts qui maintiendront le code CSS à jour avec $wp_scripts->registered['jquery-ui-core']->ver. Vous pouvez y accéder avec wp_scripts(); OR global $wp_scripts;.

Statique-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/smoothness/jquery-ui.css',
                false,
                PLUGIN_VERSION,
                false);

OU thème dynamique

$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 stockage 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);
51
EkoJR

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

Je pense que vous recherchez cette fonction . Cela vous permet d'ajouter un script à votre en-tête. Il suffit de placer les fichiers css du thème quelque part dans votre dossier de plug-ins et de les inclure.

5
Tim S.

Pour ajouter plus de détails à la réponse d'EkoJr, à partir de Jquery UI v1.11.4, si vous ajoutez la feuille de style CSS entière de JQuery UI, le style par défaut du thème Wordpress peut être rompu.

Vous ne pouvez donc ajouter que les classes CSS correspondant au composant slider. Voici les classes que j'ai utilisées (note: elles sont construites pour le thème 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;
}

Notez également que vous pouvez préfixer ces classes avec votre identifiant de conteneur. Par exemple, si votre curseur a le "curseur" ID, 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
2
Luc Lérot

Une mise à jour des modifications apportées à WordPress depuis. Les paquets WordPress récents sont livrés avec le CSS dans la boîte. 

Vous pouvez ensuite trouver dans wp-includes\css et mettre en file d'attente en utilisant wp_enqueue_style().

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

J'espère que cela aidera quelqu'un dans le futur. 

1
Arun Basil Lal

Je viens juste de faire face à ce problème et trouvé le post alors j'ai trouvé un moyen est que l'insertion de la classe "subsubub" à la balise ul. La liste ne sera pas mauvaise. Le code sera:

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

J'espère que ça peut aider quelqu'un.

0
Hix.botay

Si vous utilisez correctement les appels wp_enqueue_style() et wp_enqueue_script(), et en supposant que les autres auteurs les utilisent également correctement, WordPress se chargera des conflits.

Toutefois, si un auteur de plug-in ou de thème imprime les styles ou les scripts directement en haut de la page à l'aide d'actions wp_head ou admin_head, vous ne pouvez rien faire de plus pour éviter les conflits.

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

0
Paul