Nwlapcug.com


Come personalizzare un modello di NexGEN Gallery

Come personalizzare un modello di NexGEN Gallery


NextGEN Gallery è un potente plug-in per la creazione, la gestione e la visualizzazione di album e immagini di WordPress. Offre vantaggi sopra il default WordPress Media Manager dandovi esteso controllo sul caricamento, categorizzazione, ordine di visualizzazione e tipo di visualizzazione delle foto. L'autore fa un passo avanti fornendo una funzione di modello che consente di progettare modelli di pagina personalizzati per l'utilizzo con i codici brevi NextGEN. Nessuna istruzione è fornita per l'utilizzo di questa funzionalità, che può lasciare gli utenti della NextGEN plug-in grattarsi la testa.

Istruzioni

1

Aprire la cartella plug-in NextGEN Gallery e fare doppio clic sulla cartella "Vista". Aprire il file "gallery.php" in un editor HTML. Questo file è il fondamento per la pagina della Galleria e visualizza le immagini di album come miniature in base alle impostazioni configurate nel tuo pannello di amministrazione di NextGEN. Per personalizzare il modello, sarà necessario modificare i tag HTML, modificare le classi di stile o aggiungere tag dei template.

2

Iniziare individuando linea 47, che contiene il div di chiusura del contenitore miniature Galleria. Per una descrizione o didascalia visualizzata sotto ogni immagine, inserire il seguente codice:

< div class = "tcaption" ><? php echo $image -> Descrizione? >< / div >

Ora sarà necessario modificare gli stili per personalizzare l'aspetto della tua pagina di raccolta, nonché di 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" nell'editor HTML. Personalizzare gli stili come desiderato. Per modificare l'aspetto delle vostre miniature Galleria, modificare la classe di ".ngg-Galleria-thumbnail img". Ad esempio, per aggiungere angoli arrotondati e un ombra, modificare lo stile di qualcosa come questo:

.NGG-Galleria-thumbnail img {

background-color:#FFFFFF;

border:1px solid #666;

display:block;

margin:4px 0px 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

Creare uno stile personalizzato per la tua 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 qualsiasi stili modificati nel documento "Style. css" del vostro 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 del tema WordPress. Rinominarlo "nggallery" in modo che venga riconosciuto da plug-in. caricare file di modello in questa nuova cartella.

7

Caricare il tuo modificate "nggallery.css" alla radice del vostro tema, o la cartella principale dove esiste il file "Page. php" del vostro tema. Se hai copiato gli stili nel foglio di stile del tema, si può saltare questo passaggio.

8

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

modello = mygallery

Il codice breve finale dovrebbe essere simile a questo:

[nggallery id = 2 template = mygallery]

Anteprima della pagina per visualizzare le modifiche e adeguamenti ai vostri stili come necessario.

Consigli & Avvertenze

  • Utilizzare il browser Opera o il componente aggiuntivo Firebug per Firefox per visualizzare la versione dal vivo della pagina della Galleria e ispezionare ogni frammento del codice sorgente capire visivamente quali classi fanno cosa.
  • Evitare di impostare la dimensione nel tuo CSS come questo viene gestito da NextGEN nelle impostazioni di amministrazione. Poiché le miniature e le immagini sono ridimensionate e visualizzati in modo dinamico, impostare una dimensione nel tuo foglio di stile avrà risultati imprevisti o completamente ignorati.