Se non hai avuto la possibilità di utilizzare lo Shortcode della Galleria di WordPress in passato, questo sarà un ottimo punto di partenza per te. Per gli altri che lo hanno utilizzato, copriremo alcune funzionalità dello shortcode che potresti non aver ancora considerato. In questo tutorial copriremo uno specifico shortcode di WordPress, [gallery] e diversi modi di usarlo.
introduzione
WordPress ha piccoli snippet di codice, chiamati shortcodes, che può essere utilizzato in Post, Pagine e Tipi di post. WordPress ha molti codici abbreviati, che possono essere aggiunti all'utilizzo dell'API shortcode, qui descritta. Questi shortcode, posizionati nell'area di modifica del contenuto o inseriti in un file di temi, sono connessi alle funzioni che vengono eseguite quando viene caricato il contenuto o il post. Gli shortcode di WordPress sono flessibili, spesso consentendo di specificare opzioni che personalizzano il modo in cui funziona lo shortcode.
Oggi esamineremo lo shortcode [gallery] in modo specifico, ma puoi anche consultare gli altri post introduttivi per l'utilizzo dello shortcode in WordPress:
Iniziare con gli shortcode di WordPress
Suggerimento rapido: utilizzo di Shortcode nello sviluppo del tema
Suggerimento rapido: miglioramento dei codici brevi con la funzione has_shortcode ()
Utilizzo di Shortcodes per accelerare la pubblicazione di servizi più popolari
Uso di base
Per iniziare con lo shortcode [gallery] vai alla sezione Post e aggiungi un Nuovo Post che chiameremo "Post Galleria". Nell'area dell'editor, inserisci lo shortcode [gallery] (nella vista Visual / HTML). Quindi premi Pubblica / Aggiorna.
La pagina verrà aggiornata e se si passa all'editor di Visual si vedrà una finestra tratteggiata con l'icona di una foto nel mezzo. Se fai clic sulla casella, nell'angolo in alto a sinistra vedrai un'altra icona dell'immagine. Fare clic su quell'icona e verrà visualizzata una finestra di dialogo. Questa finestra di dialogo ti consentirà di caricare e allegare immagini al post. Vai avanti e trascina le immagini nell'area di rilascio oppure premi Seleziona file e scegli le foto che desideri caricare.
Dopo aver caricato le immagini, dovrai premere "Salva tutte le modifiche". Questo ti porterà alla scheda "Galleria" nella stessa finestra di dialogo. Vedrai le miniature di tutte le immagini che hai appena caricato e alcune impostazioni. Guardati intorno, modifica alcune impostazioni per vedere le diverse opzioni. Ora regola le colonne della Galleria su 5 e quindi premi "Aggiorna impostazioni galleria".
Ora vai avanti e premi Visualizza post. Vedrai il post con una griglia di immagini galleria, con 5 colonne. Se fai clic su un'immagine, ti porterà al post allegato.
Uscita Shortcode galleria
Ora che vediamo lo shortcode [gallery] funziona, andiamo avanti e controlliamo il codice sorgente e vediamo cosa viene emesso.
Quello che vedi sopra è la prima parte del codice che WordPress genera automaticamente per lo shortcode [gallery]. Il CSS viene automaticamente emesso per ogni shortcode [galleria] che viene utilizzato. Ci sono elementi e classi predefiniti per ogni galleria e ogni elemento che avvolge un'immagine. Se avessi una seconda galleria sulla pagina, sarebbe uscita # gallery-2 ...
Di seguito è riportato il resto del codice, l'HTML generato dalla galleria. Puoi vedere la galleria è avvolta in a div e ogni immagine e didascalia è anch'essa avvolta in elementi.
Bel testo
Frutti di bosco!
Quad in River
Memorizzare
Opzioni Shortcode
Ora che abbiamo preso un assaggio dell'uso di base dello shortcode della galleria, esaminiamo tutte le diverse opzioni per personalizzare l'output [gallery]. Le opzioni di shortcode [gallery] includono colonne, id, taglia, collegamento, includere, escludere, ordinato da, ordine, itemtag, icontag, e captiontag.
colonne
[colonne della galleria = "2"]
Se torni alla scheda HTML nell'editor dei post vedrai che lo shortcode dice [gallery columns = "5"]. Quando abbiamo regolato le impostazioni della colonna nell'interfaccia della galleria, ha passato quelle impostazioni allo shortcode. Ora invece di usare l'interfaccia grafica, specifichiamo manualmente le impostazioni tramite lo shortcode. Cambiamo le colonne = "5" in colonne = "2". Ora vai Visualizza post - puoi vedere che c'è una griglia delle immagini della galleria, e invece di 5 immagini per colonna, c'è 2. Vediamo di nuovo la fonte sul "Gallery Post" e vediamo quali uscite WordPress. Subito prima della galleria nella fonte possiamo vedere il CSS - notare la differenza dall'uscita CSS precedente? Questo CSS viene generato automaticamente dallo shortcode [gallery]. Se cambi le colonne, noterai come cambia il CSS.
Il CSS regola essenzialmente la larghezza a 100 / $ colonne, $ colonne sono o 3 per impostazione predefinita o un numero specificato nello shortcode .
id
[galleria]
Per impostazione predefinita, lo shortcode della galleria estrae la galleria associata all'id post corrente. Tuttavia, se si specifica l'ID, è possibile estrarre le immagini da un altro post. Per testare questo, aggiungiamo un nuovo post e lo chiamiamo Other Page. Vai avanti e carica alcune immagini diverse nella pagina Altro e premi Pubblica. Quindi verso l'alto nell'indirizzo URL del browser, cerca post =.
Ricorda quel numero e poi torna al post Shortcode della Galleria e poi aggiungi la shortcode della galleria [gallery] (usa l'id del numero dell'altro post al posto di 99). Aggiorna il post Shortcode della galleria e quindi vai Visualizza post. Notate come ci sono ora due gallerie, una con le immagini del post "Shortcode galleria" e le altre immagini sono da "Other Page". È anche possibile regolare le opzioni sullo shortcode, cambiando colonne, ordine, ecc.
taglia
[dimensione galleria = "grande"]
La dimensione predefinita per le immagini della galleria è la miniatura. Altre opzioni includono "miniatura", "medio", "grande" e "pieno". "miniatura", "medio", "le dimensioni grandi sono specificate in Impostazioni di WordPress> Media. Le dimensioni complete sono semplicemente le dimensioni dell'intera immagine. Se cambiamo la configurazione in size =" grande ", WordPress mostrerà l'immagine e ritagli / ridimensiona le dimensioni associate. La dimensione "grande" predefinita per WordPress è Larghezza massima 1024 e Altezza massima 1024, quindi le immagini verranno ridimensionate e ritagliate per adattarle a quelle dimensioni. (nota a margine, le immagini possono essere ritagliate in WordPress come volere.)
* Nota a margine, le immagini saranno distorte se sono molto più grandi delle dimensioni specificate.
ordinato da
[gallery orderby = "menu_order"]
Per impostazione predefinita, le immagini sono ordinate per "menu_order" (che consiglio vivamente di lasciare). Altre opzioni includono "ID", "titolo" - ordine per titolo. , 'data' - ordine per data l'immagine è stata caricata, 'modificata' - ordina per ultima data l'immagine è stata aggiornata o cambiata e 'RAND' - ordina gli articoli a caso.
ordine
[ordine galleria = "ASC"]
Dopo aver impostato "orderby" è possibile impostare "ASC" o "DESC" (non utilizzare se "orderby" non è impostato o impostato su "menu_order"). Quindi, per esempio, se vuoi che le immagini siano elencate in ordine alfabetico all'indietro (Z-A) per titolo dell'immagine, assicurati che orderby = "title" e quindi specifichi anche order = "DESC" (il valore predefinito è ASC). [gallery orderby = "title" order = "DESC"]
collegamento
[galleria link = "file"]
Per impostazione predefinita, le immagini della galleria sono collegate ciascuna alla pagina di allegato di ciascuna immagine. Quindi, in altre parole, ogni immagine va essenzialmente ad un singolo post, con l'immagine. Se vuoi collegarti alla fonte dell'immagine (my-image-name.jpg) puoi passare [galleria link = "file"].
includere
[galleria include = "23,39,45"]
A volte potresti voler includere solo immagini molto specifiche. Puoi farlo usando l'opzione include, [galleria include = "23,39,45"] (23,39,45 sono un esempio, usa gli ID che corrispondono alle tue immagini) Passi nell'ID di ogni immagine che vuoi associare. Per trovare gli ID delle immagini, vai su Media> Libreria e poi fai clic su ciascuna delle immagini che desideri.
Nella barra degli indirizzi del browser cerca wp-admin / media.php? Attachment_id = e poi annota e usa quel numero nella shortcode della galleria seguendo il formato mostrato sopra.
escludere
[galleria exclude = "21,32,43"]
Questa opzione è praticamente esattamente ciò che sembra. Se segui le istruzioni per includere, trova gli ID delle tue immagini NON voglio nella galleria. Dopo aver trovato le immagini che non vuoi includere (cerca solo le immagini che non vuoi che siano allegate al post) [galleria exclude = "21,32,43"]. Si prega di notare, se si utilizza includere ed escludere Internet si romperà! Okay non proprio, ma non funzionerà! Ignorerà l'esclusione e utilizzerà solo l'inclusione.
Queste opzioni possono effettivamente modificare gli elementi HTML che WordPress produce con lo shortcode della galleria. I tag di opzione predefiniti sono i seguenti: dl ", icontag =" dt ", captiontag =" dd ". In sostanza, lo shortcode della galleria predefinito per queste opzioni è [gallery itemtag = "dl" icontag = "dt" captiontag = "dd"]. Diciamo che volevamo cambiare i tag HTML, potremmo facilmente passare nell'elemento che preferiremmo usare, quindi potremmo usare qualcosa di simile [gallery itemtag = "section" icontag = "div" captiontag = "figure"]. Prova queste opzioni e puoi vedere la differenza nell'output.
Bel testo
Frutti di bosco!
Quad in River
Memorizzare
Tormorando la galleria
Se stai creando o personalizzando un tema ci sono alcune classi primarie che vuoi cercare. Queste sono le classi che la galleria produce in HTML, ogni volta che viene utilizzato uno shortcode [galleria].
Galleria Wrap
"Galleria Wrap" avvolge ogni istanza dello shortcode [gallery]. Ciò significa che se si utilizza il codice [galleria] per tre volte, questo wrap sarà presente nel codice sorgente tre volte. Ogni volta che [la galleria] viene utilizzata in un post, l'id di output viene incrementato.
.galleria - avvolge ogni galleria inclusa in un post
.galleryid - $ id - incrementi, se in secondo luogo [galleria] il $ id sarebbe 2
.galleria-Colonne - $ colonne - cambia in base all'opzione della colonna
.galleria-colonne - $ size - cambia in base alle dimensioni
Altri elementi
.galleria-item - avvolge ogni immagine galleria e didascalia
.galleria-icon - all'interno di .galleria-item, avvolge l'ancoraggio all'immagine (file o collegamento) e all'immagine
.galleria-caption - all'interno di .galleria-item, avvolge il testo della didascalia dell'immagine
Migliorare la nostra galleria CSS
Così ora che comprendiamo le basi dello shortcode [gallery], le diverse opzioni e le CSS / classi disponibili, vediamo come possiamo migliorare il CSS che è già presente. (Per questa sezione e la successiva, stiamo assumendo che tu capisca le basi dei CSS.) Nel tema TwentyEleven, la galleria di default assomiglia alla galleria degli screenshot nelle sezioni precedenti.
WordPress pubblica già il CSS di base per il layout, ma possiamo aggiungere un po 'di stile per dare alla galleria un pizzaz in più. Nel tema con cui stiamo lavorando (per TwentyEleven /wp-content/themes/twentyeleven/style.css o altri temi /wp-content/themes/*themename/style.css) apri lo style.css in un editor aggiungi questo codice alla fine del foglio di stile.
Conoscendo le classi dell'elemento siamo in grado di indirizzare le parti specifiche della galleria. Con questo stile siamo in grado di indirizzare ciascuna delle immagini e dare loro un aspetto Polaroid
Sovrascrivere i CSS della Galleria
In alcuni casi potresti voler sostituire il CSS esistente per lo shortcode [gallery]. Dal momento che conosciamo gli elementi e il CSS, la [gallery] produce, se volessimo, potremmo facilmente scavalcare il CSS - potremmo farlo usando la specificità CSS. Poiché esiste un solo livello di specificità e l'unico id specificato è # Galleria-1 (1 per la prima galleria e la numerazione continua per ogni galleria in post) è possibile sovrascrivere il CSS semplicemente individuando un id genitore (per TwentyEleven #content funziona) e quindi specificare anche .galleria, poiché è una classe allegata a ciascuna galleria.
#content .gallery / * Questo stile sovrascrive lo stile # gallery-1 predefinito * / margin: 0px; display: none;
Ovviamente sopra è un semplice esempio di override del CSS, ma ottieni il succo!
Conclusione
Lo shortcode integrato [gallery] per WordPress è molto utile con tutti i tipi di opzioni per configurare una galleria personalizzata. Non è perfetto, come abbiamo visto in una schermata precedente, ma funziona molto bene. Resta sintonizzato e nelle prossime settimane scopri come riorganizzare lo shortcode della galleria con le opzioni lightbox e slider!
Share
Accentsconagua