Share
Vandaag ga ik je helpen met het maken van een aangepaste sjabloon voor "Galerij" -pagina's in WordPress. Ik herinner me dat ik in het verleden een galerij wilde implementeren in mijn thema en gefrustreerd raakte over de opties. De ingebouwde galerij van WordPress werkt goed, maar voldoet meestal niet. Bovendien zijn plug-ins zoals NexGen-galerij vaak meer dan je nodig hebt of wilt. Ik zal je laten zien hoe eenvoudig het is om een galerijsjabloonpagina te maken die je gemakkelijk kunt aanpassen en aanpassen voor toekomstige thema's of versies.
Via de tutorial ga ik je laten zien hoe je een galerij-template kunt maken over het thema van WordPress, TwentyEleven. Je kunt elk thema gebruiken dat je wilt, maar omwille van dit voorbeeld gebruik ik TwentyEleven.
Ga naar de themamap, wp-content / themes / thema waaraan u de galeriasjabloon wilt toevoegen. Vind page.php en kopiëren en plakken en hernoemen naar template-gallery.php. Voor aangepaste sjablonen vind ik het leuk om het voorvoegsel 'sjabloon' toe te voegen, omdat het gemakkelijker te vinden is.
WordPress herkent sjabloondefinities in de koptekst van de sjabloonbestanden van de thema's. Om de sjabloon te definiëren, voegt u een PHP-opmerking toe, zoals het onderstaande voorbeeld. Open hiervoor de template-gallery.php die u zojuist hebt gemaakt en voeg het opmerkingenblok toe wat de sjabloonnaam aangeeft.
http://codex.wordpress.org/Theme_Development#Custom_Page_Templates
WordPress verwerkt bijlagen naar pagina's als berichten post_type - bijlage met de pagina als ouder. WordPress heeft een ingebouwde functie om berichten te zoeken die kinderen van een specifieke pagina zijn post / post_type. get_children (); accepteert allerlei parameters voor het ophalen van inhoud voor kinderen die aan een ouder is gekoppeld. Bekijk de documentatie op http://codex.wordpress.org/Function_Reference/get_children. Met deze WordPress-functie kunnen we eenvoudig bijlagen voor een specifieke pagina ophalen.
Voor onze galerij willen we dat de afbeeldingen vóór de inhoud worden weergegeven. Dus we gaan de paginabeelden laden in de lus van de pagina maar vóór de inhoud. Voor TwentyEleven kun je het fragment hieronder neerzetten . In andere thema's kunt u de code invoegen in de bovenstaande lus . Bekijk de onderstaande code om te zien hoe get_children ($ args); is geïmplementeerd en lees de uitleg erna.
-1, // Met -1 worden alle berichten 'orderby' => 'menu_order', // geladen. Dit zorgt ervoor dat afbeeldingen in de volgorde staan die ingesteld is in de paginamedia-manager 'order' => 'ASC', 'post_mime_type' => 'image ', // Zorg ervoor dat er geen andere bronnen worden opgehaald, zoals video's' post_parent '=> $ post-> ID, // Belangrijk onderdeel - zorgt ervoor dat de bijbehorende afbeeldingen worden geladen' post_status '=> null,' post_type '=> 'bijlage'); $ images = get_children ($ args); // vervolg hieronder ...?>
Na get_children ($ args); zoekt bijlagen op en retourneert waarden die we willen verifiëren dat de query resultaten opleverde. Sommige pagina's bevatten mogelijk geen afbeeldingen en we hoeven niet door lege resultaten te bladeren. We gebruiken een voorwaardelijke om te zien of $ images retourneert een waarde en als dit het geval is, weten we dat de pagina bijlagen heeft en kunnen we deze doorlopen.
// vervolg van boven ... if ($ images) ?>
Voor elke afbeeldingbijlage willen we de afbeelding uitvoeren. Elk image $ object heeft verschillende eigenschappen die u kunt openen en uitvoeren. Het belangrijkste voor dit voorbeeld is de bron van elk beeld, dat is de GUID eigendom. Voor toegankelijkheids- en SEO-doeleinden kunnen we de afbeeldingstitel ontgrendelen en plaatsen in de afbeelding alt & title attributen van de afbeeldingen.
Voor de volgende stap gaan we een plug-in voor jQuery toevoegen om onze galerij tot leven te brengen. De plug-in die we gaan gebruiken is Flux Slider, een slider Javascript / jQuery plug-in. Download de bron en plaats de flux.min.js binnen in de wp-content / themes / thema / js map. Omdat ik het thema TwentyEleven gebruik, is jQuery niet opgenomen in de openbare ruimte, dus ik moet er zeker rekening mee houden - als je een ander thema gebruikt, zorg er dan voor dat jQuery is geladen.
Inclusief jQuery (indien niet inbegrepen) en de flux.min.js script in de voettekst - zorg ervoor flux.min.js is onder de jQuery-insluiting maar eerder wp_footer (); functie.
Zoals u kunt zien, is het vrij eenvoudig om afbeeldingen die aan een pagina zijn gekoppeld, naar hun pagina te sturen en hun uitvoer aan te passen. Je zou deze zelfde loop gemakkelijk in berichten of een aangepast berichttype kunnen opnemen.
U kunt de jQuery-plug-in eenvoudig omwisselen voor een andere optie naar keuze. Het enige wat u hoeft te doen is de loop-HTML bewerken met de juiste markup en de plug-in opnemen.
WordPress is erg flexibel en dit is nog een voorbeeld van hoe eenvoudig het is om ermee te bouwen!
Accentsconagua
