Dynamische paginasjablonen in WordPress, deel 1

WordPress paginasjablonen zijn een geweldige manier om volledig te veranderen hoe bepaalde webpagina's worden weergegeven. U kunt ze gebruiken om een ​​breed scala aan functionaliteit aan uw site toe te voegen.

Ze hebben echter één beperking omdat ze 'statische' sjablonen zijn. U kunt ze op geen enkele manier aanpassen of hun gedrag beïnvloeden. U kunt alleen kiezen of u een paginasjabloon inschakelt of niet. Standaard voert een paginasjabloon eenvoudig een vaste functie uit, bijvoorbeeld een sitemap weergeven of de zijbalk verwijderen om een ​​pagina op volledige breedte weer te geven.

In deze zelfstudiereeks zal ik bekijken hoe u paginasjablonen kunt uitbreiden om flexibeler te zijn, waardoor hun functionaliteit aanzienlijk wordt verbeterd. Ik zal beginnen met de introductie van een standaardpaginasjabloon via een kindthema, voordat ik ga overgaan op een meer flexibele aanpak waarbij ik een algemene paginasjabloon voor algemene doeleinden maak.

Ten slotte laat ik u drie voorbeelden zien van volledig werkende dynamische paginasjablonen. Ik zal ook geavanceerde onderwerpen behandelen, zoals hoe paginasjablonen aan aangepaste berichttypen toe te wijzen.

Wilt u volgen?

Volg deze tutorialserie om een ​​WordPress-site met beheerdersrechten te hebben. Verreweg de gemakkelijkste manier om dit te doen, is door gebruik te maken van een lokale ontwikkelomgeving. Een speciale teksteditor is ook nuttig maar niet essentieel.

Als je toevallig met WordPress aan het ontwikkelen bent via een externe server, dan moet je in staat zijn themabestanden te bewerken via de WordPress-beheerder, of bestanden lokaal bewerken en FTP-software gebruiken om ze terug naar de server over te zetten. Eenvoudigheidshalve ga ik er vanuit dat je in de rest van deze tutorial lokaal met WordPress werkt.

Om onze paginasjablonen te implementeren, gebruik ik een kindthema op basis van het Twenty Seventeen ouderthema, dat (op het moment van schrijven) het nieuwste standaard WordPress-thema is. Dus als je meegaat, is het een goed idee om dit te installeren voordat je verdergaat.

Je kunt een kindthema gebruiken op basis van een ander ouderthema als je dat wilt, maar je moet een deel van de code aanpassen om het naadloos te laten werken met je specifieke thema. De basismethode is echter vrijwel hetzelfde voor elk kindthema.

WordPress-paginasjablonen

Voordat we leren hoe u paginasjablonen flexibeler kunt maken, gaan we eerst wat basisdetails bespreken.

WordPress gebruikt een sjabloonhiërarchie om te beslissen welke sjabloon de huidige pagina rendert. De sjabloon die in de meeste scenario's voor pagina's wordt gebruikt, is page.php maar kan anders zijn als u een pagina bekijkt met een bepaalde ID of slug. Als u echter een paginasjabloon voor een bepaalde pagina selecteert, wordt deze altijd bij voorkeur gebruikt, waardoor het heel eenvoudig is om elke pagina aan te passen met behulp van een paginasjabloon..

Hier zijn enkele typische voorbeelden van veelgebruikte WordPress-paginasjablonen:

• Contact Formulier
• portefeuilles
• Veel Gestelde Vragen
• Aangepaste 404 pagina
• Aangepaste loginpagina
• Sitemap
• Volledige Paginabreedte
• Blog Posts pagina
• Widgetized-pagina
• En nog veel meer…

Ik zou door kunnen gaan, maar je snapt het wel. Paginasjablonen zijn cool! Je kunt ze voor bijna alles gebruiken.

Als u WordPress voor langere tijd hebt gebruikt, is het zeer waarschijnlijk dat u een of meer van de bovenstaande voorbeelden al tegenkomt. De meeste thema's bevatten paginasjablonen om de themafunctionaliteit aan te vullen, en u kunt uw eigen thema eenvoudig toevoegen via een kindthema. Ik zal dit binnenkort behandelen.

Paginasjablonen zijn zo handig omdat ze u volledige controle geven over de hele pagina. U kunt de koptekst, voettekst en / of sidebars weglaten als u dat wilt. Dit is een van de redenen waarom paginasjablonen op volledige breedte zo vaak voorkomen, omdat het heel eenvoudig is om de zijbalken te manipuleren via een paginasjabloon.

Om alle momenteel beschikbare paginasjablonen te bekijken, gaat u naar de WordPress-pagina-editor en opent u de Sjabloon drop-down via de Paginasjablonen metabox. Selecteer eenvoudig de gewenste paginasjabloon en zodra de pagina is bijgewerkt, is deze zichtbaar wanneer de pagina de volgende keer wordt bekeken.

Paginasjablonen toevoegen via een kindthema

Zoals hierboven vermeld, zullen we een aangepast WordPress-thema voor kinderen gebruiken om alle paginasjablonen in deze zelfstudie te implementeren. Ik begin met een eenvoudig kindthema en een paginasjabloon en voeg er vervolgens meer complexiteit aan toe.

Het hele proces wordt stap voor stap behandeld, dus maak je geen zorgen als je niet bekend bent met kindthema's en / of paginasjablonen. Je bent aan het einde van de tutorial!

Het basisidee achter kindthema's is dat ze u in staat stellen het uiterlijk van uw huidige thema aan te passen (een bovenliggend thema genoemd) op een manier die niet wordt beïnvloed wanneer het bovenliggende thema wordt bijgewerkt.

Als code direct aan het bovenliggende thema wordt toegevoegd, worden alle aanpassingen overschreven en verloren tijdens een geplande thema-update. Dit is een belangrijk punt, aangezien elk goed onderhouden thema regelmatig zal worden bijgewerkt. Als u meer wilt weten over kindthema's, raad ik u aan de officiële documentatie te bekijken. 

Het is interessant om op te merken dat het technisch mogelijk is om een ​​WordPress-plug-in te gebruiken om paginasjablonen toe te voegen, maar het is veel eenvoudiger om een ​​kindthema te gebruiken. Ik wil dingen niet onnodig ingewikkeld maken met externe code, dus ik blijf bij kindthema's voor onze paginasjabloonimplementatie.

Laten we beginnen!

Ok, zo genoeg theorie - laten we onze eerste paginasjabloon maken! Het wordt geplaatst in een aangepast Twenty Seventeen kindthema dat als onze paginasjabloondoos zal fungeren, dus we moeten eerst het kindthema maken.

Open uw themamap en maak een nieuwe map voor uw kindthema. Volgens de aanbevolen procedures van WordPress is het aanbevolen dat u de onderliggende themamap hetzelfde noemt als het bovenliggende thema waarop het is gebaseerd, gewijzigd met '-kind'. Zoals onze bovenliggende themamap genoemd is twentyseventeen, geef de themamap van uw kind een naam twentyseventeen-kind. Maak in deze nieuwe map een enkel bestand met de naam style.css en voeg het volgende commentaarblok bovenaan toe.

/ * Theme Name: Twenty Seventeen Child Beschrijving: Twenty Seventeen Child Theme Auteur: David Gwyer Sjabloon: twentyseventeen Versie: 0.1 Licentie: GNU General Public License v2 of later Licentie URI: http://www.gnu.org/licenses/gpl- 2.0.html Tekstdomein: twintig-zeventien-kind * /

We moeten nu refereren aan alle stijlen uit het twintigentwintigste ouderthema. Als je ooit eerder met kindthema's hebt gewerkt, dan ben je misschien gewend aan het toevoegen van een CSS @importeren verklaring direct onder het commentaarblok. Dit wordt niet langer beschouwd als een WordPress-best practice vanwege snelheidsoverwegingen. In plaats daarvan nemen we de bovenliggende themastijlen in gebruik, wat efficiënter zal zijn.

Open de hoofdmap van het kindthema en maak een functions.php bestand en voeg de volgende code toe om een ​​lege klassencontainer in te stellen. We zullen deze klasse gebruiken voor al onze setup-code.

in het();

Opmerking: de afsluitende PHP-instructie is niet nodig, maar u kunt deze toevoegen als u dat wilt.

Voeg nu een hook en callback toe om de twintigentwintig parent-themastijlen in te schakelen, in plaats van ze rechtstreeks in het style.css-bestand te importeren. Doe dit door twee nieuwe klassemethoden toe te voegen.

Sla uw wijzigingen op en activeer het kindthema. Je hebt nu een volledig functionerend, zij het eenvoudig Twenty Seventeen kindenthema. Om te testen of het goed werkt, voegt u een regel aangepaste CSS toe aan style.css.
* color: red! important; 
Als alles goed is, zou je al je sitetekst nu een leuk, fel rood moeten zien gekleurd!
Vergeet niet om de test-CSS te verwijderen voordat u verdergaat. Nu het kindthema actief is, kunnen we onze eerste paginasjabloon gaan gebruiken.
Onze eerste paginasjabloon toevoegen
Een ding is vermeldenswaard over waar u paginasjablonen opslaat in uw kindthema. U kunt de paginasjablonen ofwel rechtstreeks opslaan in de hoofdkind themamap of in een map op het hoogste niveau. Het maakt niet uit welke je kiest; beide locaties zijn prima.
Als u echter sjablonen met meerdere pagina's hebt, kunt u besluiten ze in een map op te slaan voor organisatiedoeleinden. De mapnaam is niet belangrijk, maar deze moet zich direct in de hoofdmap van het onderliggende kind bevinden, anders herkent WordPress uw paginasjablonen niet. Voor deze zelfstudie gebruik ik een map met de naam pagina-templates.
Laten we nu een nieuwe paginasjabloon toevoegen aan het onderliggende thema. De standaardmanier om dit te doen is om een ​​kopie van het ouderthema te maken page.php themasjabloonbestand en voeg het toe aan uw kindthema. U kunt het bestand een naam geven die u wilt, maar ik raad u aan om iets op te nemen dat het herkenbaar maakt als paginasjabloon. Ik ga wel mee testpagina-template.php.
Nadat je de hebt gekopieerd page.php bestand (en hernoemd) naar de pagina-templates map, de structuur van uw kindthema zou er nu als volgt uit moeten zien:
Doe open testpagina-template.php en vervang het commentaarblok aan de bovenkant van het bestand met het volgende.
Deze stap is erg belangrijk omdat het commentaarblok WordPress vertelt om het bestand te herkennen als een paginasjabloon en het zal toevoegen aan de lijst met beschikbare paginasjablonen op het pagina bewerkerscherm.
De sjablooncode voor de volledige pagina zou er nu zo uit moeten zien.
 
 
 
  
 
 
 
Laten we onze paginasjabloon testen. Ga naar de WordPress-beheerder en bewerk een bestaande pagina of maak een nieuwe aan. Selecteer in het scherm van de pagina-editor de Sjabloon drop-down van de Paginakenmerken metabox om onze paginasjabloon toe te wijzen aan de huidige pagina.
Omdat we eenvoudig het ouderthema hebben gekopieerd page.php sjabloonbestand, onze aangepaste paginasjabloon doet niets meer dan het uitvoeren van de huidige pagina, wat niet erg handig is. Ook hoeven we de editorinhoud of opmerkingen niet uit te voeren, dus verwijder deze van de paginasjabloon terwijl loop en voeg een aangepast bericht toe. Wijzig de inhoud van de terwijl loop naar het volgende.
Dit is onze aangepaste paginasjabloon!
"; endwhile; // Einde van de lus.
Sla dit op en bekijk de pagina aan de voorkant.
Opmerking: als u het aangepaste bericht niet kunt zien, controleer dan of u het aangepaste paginasjabloon hebt geselecteerd in de pagina-editor en hebt opgeslagen in de update-instellingen..
Laten we nu onze aangepaste paginasjabloon iets nuttiger maken. Vervang het bericht dat we hierboven hebben toegevoegd met de volgende code om een ​​sitemap van alle gepubliceerde pagina's weer te geven.
Sitemap"; echo"
". wp_list_pages (array ('title_li' =>")). "
"; endwhile; // Einde van de lus.
Dit zal resulteren in de volgende uitvoer.
Het is gemakkelijk te zien hoe nuttig paginasjablonen kunnen zijn. Maar we kunnen het nog beter doen!
Conclusie
Tot nu toe hebben we een kindthema gemaakt en dit gebruikt om onze standaardpaginasjabloon te implementeren. In de volgende zelfstudie laat ik je stap voor stap zien hoe je dit kunt uitbreiden, en laat je zien hoe paginasjablonen flexibeler kunnen worden gemaakt.
We zullen in het bijzonder een dynamische paginasjabloon voor algemene doeleinden maken door aangepaste besturingselementen toe te voegen aan het paginabewerkingsscherm. De besturingslogica wordt vervolgens toegevoegd aan de paginasjabloon zodat we direct kunnen aanpassen hoe de paginasjabloon wordt weergegeven.
WordPress heeft een ongelooflijk actieve economie. Er zijn thema's, plug-ins, bibliotheken en vele andere producten die u helpen uw site en project uit te bouwen. De open source aard van het platform maakt het ook een geweldige optie van waaruit je je programmeervaardigheden kunt verbeteren. Hoe het ook zij, u kunt zien wat we beschikbaar hebben op de Envato Marketplace.
Dit is mijn eerste tutorial (wees zacht!) Dus aarzel niet om eventuele feedback achter te laten in de commentaarfeed hieronder. Ik zal mijn best doen om elke vraag te beantwoorden.



		
			
	   
	




Code