Share
Abbiamo tutti sentito parlare di domande sui media. Li abbiamo ampiamente utilizzati nei nostri temi per renderli reattivi. Sono ottimi per la maggior parte degli scopi, ma quando si tratta di layout basati su colonne, a volte abbiamo bisogno di più controllo per far risaltare i nostri progetti.
In questo articolo, imparerai a conoscere il plugin jQuery di Selector-Query e come usarlo nei tuoi temi WordPress.
Che cos'è? Beh, pensalo come qualcosa di simile alle media query, ma invece di usare la larghezza del browser come riferimento, usa la larghezza attuale dell'elemento.
Prima di andare al nocciolo duro di Selector-Query, parliamo prima di cosa sono le domande dei media. In poche parole, le query multimediali consentono di applicare gli stili del tuo CSS solo quando la larghezza del browser raggiunge un determinato intervallo.
Le domande dei media sono il cuore e l'anima del design reattivo. All'interno di una sola pagina web e file CSS, possiamo renderlo visualizzato in modo diverso se visualizzato con risoluzioni e dispositivi diversi. Con le query multimediali, non è necessario creare due diverse versioni desktop e mobile di un sito Web.
Diamo una rapida recensione sul suo utilizzo. Per desktop e tablet, possiamo avvolgere le nostre regole CSS con la seguente query multimediale. Il CSS qui sotto dovrebbe essere seguito per le larghezze del browser di 768px e al di sopra:
@media solo schermo e (min-larghezza: 768px) / * Le regole CSS vanno qui * /
Per dispositivi più piccoli come gli smartphone, possiamo usare quanto segue. Questo sarebbe seguito per larghezze di 767px e sotto:
@media solo schermo e (larghezza massima: 767px) / * Le regole CSS vanno qui * /
Quando progettiamo siti Web, possiamo adattare il nostro design esattamente al modo in cui vogliamo che guardi a diverse dimensioni dello schermo utilizzando le query multimediali. Tuttavia, quando si tratta di progettare temi WordPress, abbiamo bisogno di maggiore controllo.
Come autori di temi WordPress, vogliamo che i nostri temi siano flessibili e allo stesso tempo fantastici. Inseriamo funzionalità come shortcode e layout multi-colonna e diamo ai nostri utenti la libertà di fare ciò che vogliono.
Più felice è il cliente, più siamo felici.
Diciamo per esempio che uno dei nostri clienti voleva inserire uno shortcode testimonial all'interno di una colonna a larghezza intera. Diciamo che abbiamo progettato questo shortcode solo per essere affiancato da altre testimonianze (o da qualsiasi altro contenuto) all'interno di 3 o più colonne:
Per questo determinato scenario, potrebbe essere meglio se ci fosse un design diverso quando lo shortcode testimonial è stato inserito in un contenitore più grande. Forse un design come questo sarebbe meglio per una colonna a larghezza intera:
Sfortunatamente, le domande dei media non saranno in grado di aiutare in questo. Perché? Perché la larghezza dello schermo è sempre la stessa se la testimonianza è stata inserita in una colonna a larghezza intera o in una colonna di un terzo!
Okay, quindi potresti star pensando, "Che ne dici di usare semplicemente la classe della colonna nel CSS?" Probabilmente finirai con qualcosa di simile nel tuo file CSS:
.testimonial / * two-column o more styling qui * / @media solo schermo e (min-width: 768px) .one-column .testimonial / * override con stile a larghezza piena qui * /
Bene, qualcosa come il CSS sopra funzionerebbe. Tuttavia, ho una proposta più elegante: Selector-Query.
Selector-Query è un leggero plug-in jQuery che consente di applicare diversi stili ai tuoi elementi in base alla loro larghezza.
Fondamentalmente, ciò che questo plugin applica i nomi di classi addizionali ai tuoi elementi dipende dalla loro larghezza corrente. Quando il browser viene ridimensionato, i nomi delle classi vengono aggiornati in modo appropriato per riflettere la nuova larghezza dell'elemento.
Puoi quindi utilizzare questi diversi nomi di classe per definire i diversi layout per i tuoi contenuti.
Quello che fa Selector-Query è aspettare gli eventi di ridimensionamento del browser rimossi, quindi prende la larghezza degli elementi HTML e li confronta con una serie di larghezze chiamate widthStops. Se la larghezza dell'elemento è inferiore a uno di questi widthStop valori, i nomi di classe di quelli più grandi vengono aggiunti all'elemento.
spiegherò widthStops più avanti con un esempio, per ora parliamo di come usare il plugin.
La prima cosa che dobbiamo fare è includere lo script del plugin jQuery. Puoi scaricare Selector-Query dal suo repository GitHub e includerlo nella tua directory dei temi. Mettilo nel tuo js cartella per mantenere pulita la struttura del file.
Una volta che lo hai inserito nella tua cartella dei temi, puoi aggiungere questo codice nel tuo functions.php per accodare Selector-Query subito prima del corpo è chiuso. Ciò ci farebbe risparmiare tempo di caricamento della pagina:
Accentsconagua
function wp_enqueue_script_selector_query () wp_enqueue_script ('selector-query', get_stylesheet_directory_uri (). '/js/jquery.selectorquery.min.js', array ('jquery'), false, true); add_action ('wp_enqueue_scripts', 'wp_enqueue_script_selector_query'); Abilitare il plugin jQuery è semplice. Tutto ciò che devi fare è chiamare selectorQuery sui tuoi elementi:
jQuery (document) .ready (function ($) $ ('. selector'). selectorQuery ();); E questo è tutto!
Inoltre, il plugin ha due opzioni configurabili che puoi passare durante l'inizializzazione.
Puoi personalizzare questi valori a tuo piacimento:
$ ('. selector'). selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280], // Un array di larghezze 'classPrefix': 'max-' // Nomi delle classi di prefisso con questo ); widthStops sono le larghezze utilizzate per controllare la larghezza dell'elemento contro. Il classPrefix è usato insieme a widthStops per generare i nomi delle classi. Esaminiamo un esempio per spiegare meglio le cose.
Usiamo il nostro esempio testimoniale qui sopra e applichiamo Selector-Query in modo che possiamo ottenere un'immagine più chiara di come funziona e di come possiamo trarne beneficio. Ad esempio, diciamo che l'HTML della nostra testimonianza è scritto così:
Qualche testo di testimonianza qui
Se la nostra testimonianza div aveva una larghezza di 1000px, utilizzando i valori predefiniti per widthStops sopra, Selector-Query aggiungerebbe alcuni nuovi nomi di classe ad esso. Ci ritroveremmo con:
Quindi se la testimonianza div viene ridimensionato più piccolo a 800px, sarebbe quindi simile a questo:
Possiamo usare questi nomi di classe aggiunti dinamicamente per creare layout diversi per la nostra testimonianza. Possiamo usare .max-1024 per disegnare larghezze di 1024 e più grande; e possiamo usare .max-960 per sovrascrivere gli stili per i nostri progetti più piccoli.
Se dovessimo progettare il contenuto della testimonianza in questo modo:
Possiamo usare questo come nostro CSS:
/ * Grande testimonianza * / .testimonial img float: left; altezza: 200 px; larghezza: 200 px; .testimonial span display: block; overflow: nascosto; / * Piccolo testimonial * / .testimonial.max-640 img float: none; blocco di visualizzazione; margine: 0 auto; / * Tiny testimonial * / .testimonial.max-480 img height: 150px; larghezza: 150 px;
La cosa migliore dell'utilizzo di Selector-Query è che non è necessario sapere dove viene posizionato questo contenuto. Otterrà uno stile in base alla sua larghezza, a differenza del nostro precedente CSS in cui il nostro design per il grande contenuto testimoniale dipendeva dal suo genitore (ricorda che abbiamo usato .one-column .testimonial nell'esempio precedente).
In questo articolo, abbiamo imparato un nuovo modo di modellare i nostri contenuti in base alla loro larghezza con Selector-Query. Si spera che troviate un uso fantastico per questo plugin jQuery nei vostri progetti.
Se si desidera un esempio live di Selector-Query in azione, è possibile controllare la demo nel repository Github.
Spero che questo articolo ti sia piaciuto. Apprezzo molto qualsiasi commento, commento e suggerimento. Fammi sapere cosa pensi di Selector-Query.
Utilizzerai questo plug-in in uno dei tuoi prossimi temi WordPress? Condividi i tuoi pensieri qui sotto!
