Come personalizzare un NexGen galleria Template

March 1

Come personalizzare un NexGen galleria Template


NextGEN Galleria è un potente WordPress plug-in per la creazione, la gestione e la visualizzazione di album e immagini. Offre vantaggi rispetto il valore di default di WordPress Media Manager dando controllo esteso sopra l'upload, categorizzazione, ordine di visualizzazione e la visualizzazione tipo di foto. L'autore va oltre, fornendo una funzione di modello che permette di progettare modelli di pagina personalizzato per l'utilizzo con i codici NextGen. Nessuna istruzione è previsto come utilizzare questa funzione, che può lasciare gli utenti del NextGEN plug-in a grattarsi la testa.

istruzione

1 Aprire la cartella plug-in NextGEN Galleria e fare doppio clic sulla cartella "View". Aprire il file "gallery.php" in un editor HTML. Questo file è il fondamento per la pagina della galleria e visualizza i tuoi album di immagini sotto forma di miniature in base alle impostazioni configurate nel tuo pannello di amministrazione NextGEN. Per personalizzare il modello, è necessario modificare i tag HTML, modificare classi di stile o aggiungere tag modello.

2 Iniziare individuando la linea 47, che contiene il div del contenitore galleria di miniature di chiusura. Per avere una descrizione o una didascalia appare sotto ogni immagine, inserire il seguente codice:

<Div class = "tcaption"> <? Php echo $ immagine-> descrizione?> </ Div>

Sarà ora necessario modificare gli stili per personalizzare l'aspetto della tua pagina della galleria, così come aggiungere un nuovo stile "tcaption" per gestire l'aspetto della descrizione delle miniature.

3 Tornare alla cartella plug-in e aprire la cartella "css". Aprire il file "nggallery.css" nel vostro editor HTML. Personalizzare gli stili, se lo desideri. Per modificare l'aspetto delle miniature della galleria, modificare la classe ".ngg-galleria-miniature img". Ad esempio, per aggiungere gli angoli arrotondati e una goccia-ombra, modificare lo stile di qualcosa di simile a questo:

.ngg-galleria-miniature img {

background-color:#FFFFFF;

border: 1px solid # 666;

blocco di visualizzazione;

margin: 0px 4px 4px 5px;

padding: 5px;

position: relative;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

box-shadow: 1px 2px 6px # 333;

-moz-box-shadow: 1px 2px 6px # 333;

-webkit-box-shadow: 1px 2px 6px # 333;

}

4 Crea il tuo stile personalizzato per la descrizione delle miniature. Per esempio:

.tcaption {

padding: 4px;

font-size: 9px;

font-style: italic;

}

5 Salvare il foglio di stile in una nuova posizione senza modificare il nome del file. In alternativa, copiare gli stili modificati nel documento "style.css" del tuo tema WordPress. Salvare il file "gallery.php" come "galleria-mygallery.php" in una nuova posizione.

6 Connettersi al server Web e creare una nuova cartella all'interno della cartella tema WordPress. Rinominarlo "nggallery" in modo che venga riconosciuto dal plug-in. Carica il tuo file di modello in questa nuova cartella.

7 Carica la tua "nggallery.css" modificati per radice del vostro tema, o nella cartella principale in cui è presente il file "page.php" del vostro tema. Se sono stati copiati gli stili in foglio di stile del tema, si può saltare questo passaggio.

8 Creare una pagina nel pannello di amministrazione di WordPress e utilizzare il pulsante editor di NextGEN aggiungere il codice breve galleria desiderato. Inserire il seguente valore per utilizzare il nuovo modello personalizzato:

template = MyGallery

Il tuo codice corto finale dovrebbe essere simile a questo:

[Nggallery id = 2 template = MyGallery]

L'anteprima della pagina per vedere i cambiamenti e apportare modifiche ai vostri stili, se necessario.

Consigli e avvertenze

  • Utilizzare il browser Opera o il Firebug add-on per Firefox per visualizzare la versione live della pagina galleria e ispezionare ogni frammento di codice sorgente per capire visivamente quali classi fare ciò.
  • Evitare di installare il formato nel vostro CSS come questa viene gestita da NextGEN nelle impostazioni di amministrazione. Dal momento che le miniature e le immagini sono ri-size e visualizzati in modo dinamico, l'impostazione di un formato nel foglio di stile avrà risultati imprevisti o essere ignorato completamente.