WordPress, file CSS JQuery UI?
-
27-10-2019 - |
Domanda
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?
Soluzione
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);
Altri suggerimenti
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.
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
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.
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
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.