Creazione del proprio modello di pagina di galleria di immagini in WordPress

Oggi vi guiderò attraverso la creazione di un modello personalizzato per le pagine "Galleria" in WordPress. Ricordo che in passato volevo implementare una galleria nel mio tema e mi sentivo frustrato dalle opzioni. La galleria integrata di WordPress funziona bene, ma la maggior parte delle volte non si adatta perfettamente. Inoltre, i plugin come la galleria NexGen sono spesso più di quanto tu abbia bisogno o desideri. Ti mostrerò quanto è facile creare una pagina modello di galleria che potresti facilmente modificare e modificare per temi o versioni future.

Panoramica

Attraverso il tutorial mostrerò come creare un modello di galleria sul tema incluso in WordPress, TwentyEleven. Puoi usare qualsiasi tema tu voglia, ma per l'esempio voglio usare TwentyEleven.

Passaggio 1 Duplicare il modello di pagina esistente

Vai nella directory dei temi, wp-content / themes / tema a cui si desidera aggiungere il modello della galleria. Trova page.php e copiare e incollare e rinominare in template-gallery.php. Per i modelli personalizzati mi piace aggiungere il prefisso 'template-' in quanto rende più facile la ricerca.

Passaggio 2 Definire il modello di galleria

WordPress riconosce le definizioni dei modelli nell'intestazione dei file modello di temi. Per definire il modello, aggiungi un commento PHP come nell'esempio seguente. Per farlo apri il template-gallery.php che hai appena creato e aggiungi il blocco dei commenti che specifica il nome del modello.

http://codex.wordpress.org/Theme_Development#Custom_Page_Templates

Passaggio 3 Modificare il modello per caricare le immagini della pagina

WordPress elabora gli allegati alle pagine come post post_type - attachment con la pagina come genitore. WordPress ha una funzione integrata per interrogare i post che sono figli di una pagina specifica postale / post_type. get_children (); accetta tutti i tipi di parametri per attirare i contenuti dei bambini associati a un genitore. Controlla la documentazione su http://codex.wordpress.org/Function_Reference/get_children. Questa funzione WordPress ci consente di estrarre facilmente gli allegati per una pagina specifica.

Per la nostra galleria, vogliamo che le immagini appaiano prima del contenuto. Quindi stiamo andando a caricare le immagini della pagina nel ciclo di pagina ma prima del contenuto. Per TwentyEleven puoi inserire lo snippet qui sotto . In altri temi è possibile inserire il codice nel ciclo sopra . Controlla il codice qui sotto per vedere come get_children ($ args); è implementato e leggere la spiegazione dopo di esso.

  -1, // Uso -1 carica tutti i post 'orderby' => 'menu_order', // Questo garantisce che le immagini siano nell'ordine impostato nella pagina manager media 'order' => 'ASC', 'post_mime_type' => 'image ', // Assicurati che non carichi altre risorse, come video post_parent' => $ post-> ID, // Parte importante - assicura che le immagini associate siano caricate 'post_status' => null, 'post_type' => 'allegato'); $ images = get_children ($ args); // continua sotto ...?>

Spiegazione di $ args

'' numberposts Possiamo definire la quantità di immagini che la funzione tira. Per interrogare tutte le immagini, usa -1
'ordinato da' Potremmo ordinare per titolo o data o un'altra opzione, ma il vantaggio di "menu_order" è che l'ordine nel gestore dei media per la pagina sarà l'ordine in cui le immagini vengono caricate.
'Post_mime_type' Vogliamo solo i post che sono 'immagini'
'Post_parent' Vogliamo tirare i bambini della pagina corrente. Possiamo accedere al post $ globale e al suo ID di proprietà da passare come genitore_id
'Post_type' 'post_mime_type' si occupa di assicurarsi che vengano tirate solo le immagini, ma definire il 'post_type' come 'allegato' aiuta a ridurre la query.

Verifica che il post abbia immagini e loop

Dopo get_children ($ args); interroga gli allegati e restituisce i valori che vogliamo verificare che la query abbia restituito i risultati. Alcune pagine potrebbero non avere immagini allegate e non è necessario scorrere i risultati vuoti. Useremo un condizionale per vedere se $ immagini restituisce un valore, e se lo fa, allora sappiamo che la pagina ha degli allegati e quindi possiamo passarci sopra.

 // continua dall'alto ... if ($ images) ?>

Per ogni allegato di immagine vogliamo produrre l'immagine. Ogni $ image l'oggetto ha diverse proprietà a cui è possibile accedere e produrre. Il più importante per questo esempio è la fonte di ciascuna immagine, che è il guid proprietà. Per l'accessibilità e gli scopi SEO possiamo pubblicare il titolo dell'immagine e posizionarlo negli attributi alt immagine e titolo delle immagini.

Passaggio 4 Aggiungere il plug-in per la galleria Javascript

Per il prossimo passo aggiungeremo un plugin jQuery per dare vita alla nostra galleria. Il plug-in che utilizzeremo è Flux Slider, un plug-in Javascript / jQuery per slider. Scarica la fonte e posiziona il flux.min.js dentro il wp-content / themes / a tema / js cartella. Dal momento che sto usando il tema TwentyEleven, jQuery non è incluso sul lato pubblico, quindi dovrò assicurarmi di includerlo - se stai usando un tema diverso, assicurati che jQuery sia caricato.

modificare footer.php

Includere jQuery (se non incluso) e il flux.min.js script nel footer: assicurati flux.min.js è sotto l'inclusione di jQuery ma prima wp_footer (); funzione.

La fine

Come puoi vedere, è piuttosto semplice tirare le immagini allegate a una pagina e personalizzare il loro output. Puoi facilmente includere questo stesso ciclo nei post o in un tipo di messaggio personalizzato.

Puoi facilmente scambiare il plugin jQuery con un'altra opzione a tua scelta. Tutto quello che devi fare è modificare il ciclo HTML con il markup appropriato e includere il plugin.

WordPress è molto flessibile e questo è un altro esempio di quanto sia facile da costruire con esso!

Codice