Het aanpassen van een sjabloon NexGEN galerij

Het aanpassen van een sjabloon NexGEN galerij


NextGEN Gallery is een krachtige WordPress plug-in voor het maken, beheren en weergeven van albums of afbeeldingen. Het biedt voordelen ten opzichte van de standaard WordPress Media Manager doordat u controle over de upload, categorisering, orde van de vertoning en weergavetype van foto's uitgebreide. De auteur gaat een stap verder door het verstrekken van een sjabloon-functie die u toelaat om het ontwerpen van aangepaste paginasjablonen voor gebruik met de NextGEN korte codes. Geen instructie is bedoeld voor het gebruik van deze functie, die gebruikers van de NextGEN plug-in krabben hun hoofd kan verlaten.

Instructies

1

Open de NextGEN Gallery plugin map en dubbelklik op de map "View". Open het bestand "gallery.php" in een HTML-editor. Dit bestand is de basis voor de galeriepagina met en uw beelden van het album weergegeven als miniaturen op basis van de instellingen die u in uw NextGEN Administratiepaneel configureert. Voor het aanpassen van de sjabloon, moet u de HTML-codes bewerken, wijzigen van de stijl klassen of sjabloontags toevoegen.

2

Allereerst vinden van lijn 47, waarin de afsluitende div van de galerij thumbnail container. Als u wilt een omschrijving of een bijschrift worden weergegeven onder elke afbeelding, voeg de volgende code:

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

U moet nu de stijlen om het uiterlijk van uw galeriepagina aanpassen, evenals het toevoegen van een nieuwe stijl "tcaption" om het uiterlijk van de miniatuur beschrijving bewerken.

3

Terug naar de plug-in map en open de map "css". Open het bestand "nggallery.css" in uw HTML-editor. De stijlen desgewenst aanpassen. Bewerken om het uiterlijk van uw galerie miniaturen wijzigen, de ".ngg-galerie-thumbnail img" klasse. Bijvoorbeeld, om toe te voegen afgeronde hoeken en een slagschaduw, verander de stijl aan iets als dit:

.NGG-galerij-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

Maak uw aangepaste stijl voor uw miniaturen beschrijving. Bijvoorbeeld:

.tcaption {}

padding: 4px;

font-size: 9px;

font-style: italic;

}

5

Sla het opmaakmodel naar een nieuwe locatie zonder het wijzigen van de naam van het bestand. Afwisselend, kopieer de gewijzigde stijlen in uw wordpressthema's "style.css" document. Sla het bestand "gallery.php" als "galerij-mygallery.php" in een nieuwe locatie.

6

Verbinding maakt met uw webserver en maak een nieuwe map in de map van uw WordPress thema. Noem het "nggallery", dus het zal worden herkend door de plug-in. Upload uw sjabloonbestand naar deze nieuwe map.

7

Upload uw gewijzigde "nggallery.css" naar de root van uw thema's, of de hoofdmap waar uw thema's "page.php" bestand bestaat. Als u de stijlen in uw thema's opmaakmodel hebt gekopieerd, kunt u deze stap overslaan.

8

Maak een pagina in uw WordPress Administratiepaneel en de NextGEN editor knop gebruiken om de gewenste galerij short code. Voeg de volgende waarde als uw nieuwe aangepaste sjabloon wilt gebruiken:

sjabloon = mygallery

Uw definitieve korte code moet als volgt uitzien:

[nggallery id = 2 template = mygallery]

Voorbeeld van de pagina om te zien uw wijzigingen en aanpassingen aan uw stijlen maken als dit nodig is.

Tips & waarschuwingen

  • De Opera-browser of de Firebug add-on voor Firefox gebruiken om te bekijken van uw live-versie van de galeriepagina met en inspecteren van elk fragment van de broncode te visueel te begrijpen welke klassen doen wat.
  • Vermijd het instellen van de grootte in je CSS, zoals dit wordt afgehandeld door de NextGEN in de beheerinstellingen. Aangezien miniaturen en afbeeldingen zijn opnieuw formaat en dynamisch weergegeven, instellen van een grootte in uw stylesheet onvoorspelbare resultaten tot gevolg zal hebben of volledig worden genegeerd.