WordPress, file CSS JQuery UI?

Question

Sto cercando di creare un plug -in WordPress e vorrei avere schede dell'interfaccia utente jQuery in una delle mie pagine di impostazioni.

Ho già il set di codice di 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

... e ho creato anche HTML e JavaScript. Fino a qui tutti vanno bene.

La domanda è:

La piattaforma WordPress viene fornita con alcuni script già preinstallati come quello che ho sopra. La mia sceneggiatura funziona bene con le schede, ma non è in stile! Quindi cosa sto cercando di chiedere, la piattaforma WordPress viene fornita con il tema dell'interfaccia utente jQuery preinstallata? ... E in tal caso, come faccio a mettere lo stile nel mio plugin?

Answer 1

Sembra più che tu abbia un problema con la ricerca di uno stile disponibile all'interno di WordPress per il tema JQuery-UI.

Per rispondere alla tua domanda. No, WordPress non ha stili utili disponibili all'interno della piattaforma stessa. L'unico CSS disponibile è in WP-Includes jQuery-ui-dialog.css, e questo da solo non è molto utile.

Ho anche avuto lo stesso problema e ho trovato due opzioni. Ovvitalo in una cartella CSS e caricalo da lì, oppure caricalo tramite URL (API di Google). Per l'interfaccia utente di JQuery ho deciso di fare affidamento sul CDA di Google e ho aggiunto un modo per utilizzare il "Roller del tema". La memorizzazione di quella quantità di codice CSS sembra per cominciare, e è un peccato che WordPress non fornisca alcun supporto per lo styling come fanno con gli script JQuery-UI.

Tuttavia, WP offre script, che manterranno il CSS aggiornato con $wp_scripts->registered['jquery-ui-core']->ver. Puoi accedervi con wp_scripts(); O global $wp_scripts;.

Tema statico

$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 dinamico

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

E un esempio di conservalo a livello locale

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

Non credo che un tema dell'interfaccia utente venga preinstallato. È necessario aggiungere lo script all'intestazione.

Penso che tu stia cercando questa funzione. Ti consente di aggiungere uno script alla tua intestazione. Basta mettere i CS del tema da qualche parte nella cartella del plug -in e includerlo.

Answer 3

Per aggiungere ulteriori dettagli alla risposta di Ekojr, a partire da JQuery UI V1.11.4 Se aggiungi l'intero foglio di stile di Styles CSS di JQuery UI, potrebbe rompere lo stile del tema WordPress predefinito.

Quindi, è possibile aggiungere solo le classi CSS corrispondenti al componente del dispositivo di scorrimento. Ecco le classi che ho usato (nota: queste sono costruite per il tema della darkness ui) :

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

Inoltre, si prega di notare che puoi prefisso Quelle classi con il tuo ID contenitore. Per esempio, se il tuo cursore ha il "cursore" ID, usa:

 #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

Un aggiornamento per le modifiche che sono avvenute con WordPress da allora. I recenti pacchetti WordPress sono dotati del CSS nella scatola.

Puoi trovare allora in wp-includes\css e ACQUEUE usando wp_enqueue_style().

Penso per il caso d'uso di OP wp_enqueue_style( 'wp-jquery-ui-dialog' ); è tutto ciò che era necessario.

Spero che questo aiuti qualcuno in futuro.

Answer 5

Se usi il wp_enqueue_style() e wp_enqueue_script() Chiama correttamente e supponendo che anche altri autori li stiano usando correttamente, allora WordPress si occuperà dei conflitti.

Tuttavia, se un plug -in o un autore del tema stampa gli stili o gli script direttamente alla testa della pagina utilizzando wp_head o admin_head Azioni quindi non c'è molto che puoi fare per evitare conflitti.

Rif:
- http://codex.wordpress.org/function_reference/wp_enqueue_style
- http://codex.wordpress.org/function_reference/wp_enqueue_script

Answer 6

Ho appena affrontato questo problema e ho trovato il post, poi ho trovato un modo che inserisce la classe "subsub" al tag UL. L'elenco non sarà male. Il codice sarà:

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

Spero che possa aiutare qualcuno.