Share
Pagina's zijn enorm handig bij het gebruik van WordPress als een CMS, en wanneer u een website maakt, is het niet ongebruikelijk dat twee pagina's totaal verschillende lay-outs hebben. Soms zal een if-statement het lukken; zo niet, dan hebt u een eigen paginasjabloon nodig.
Een aangepaste paginasjabloon is een bestand in uw themamap. Hiermee kunt u de lay-out van een pagina wijzigen of andere inhoud tonen aan de standaardpaginasjabloon (page.php). U kunt een onbeperkt aantal paginasjablonen hebben en het kiezen van de sjabloon die u voor een bepaalde pagina wilt gebruiken, is net zo eenvoudig als het selecteren van een bestaande sjabloon in een vervolgkeuzelijst in de WordPress-pagina-editor..
Soms is het onnodig om een aangepaste paginasjabloon te maken. Zeg bijvoorbeeld dat uw page.php-bestand, dat wordt gebruikt om alle pagina's op uw website weer te geven, een functieaanroep heeft met pictogrammen voor sociale netwerken, zoals:
Stel dat u een 'Contact'-pagina op deze website had en op die' Contact'-pagina wilde u de pictogrammen voor sociale netwerken niet weergeven. U kunt natuurlijk een aangepaste paginasjabloon maken met de naam 'Contactpagina' en niet de functieaanroep op sociale netwerkpictogrammen opnemen. Een eenvoudigere methode zou echter eenvoudigweg zijn om de functieaanroep in een if-instructie te plaatsen, die de pictogrammen toont als de pagina waarop u zich bevond was niet de 'Contact'-pagina, zoals:
Het is vaak de moeite waard om te overwegen of de functionaliteit die u wenst eenvoudiger te bereiken is door een paar if-statements te gebruiken.
Een perfect voorbeeld van een populair gebruik voor een aangepaste paginasjabloon is een pagina met de volledige breedte. Een overgrote meerderheid van WordPress-sjablonen heeft twee of drie kolommen: één kolom 'hoofdinhoud' waarop inhoud van posts / pagina wordt vastgehouden en één of twee zijbalken die widgets en call-to-action weergeven. Soms wil een gebruiker profiteren van de volledige breedte van de container waarin die kolommen worden bewaard, en ervoor kiezen om de zijbalkkolom (men) weg te laten, ten gunste van het vergroten van de kolom 'hoofdinhoud'. Pagina's met media zoals afbeeldingsgalerijen of video's zullen vaak profiteren van dit type aangepaste paginasjabloon.
Het maken van een aangepaste paginasjabloon kan een eenvoudige of moeilijke bewerking zijn, afhankelijk van de functionaliteit die u wilt bereiken. Het hebben van een goed gecodeerd thema helpt; HTML-elementen worden vaak in het ene bestand geopend en in het andere gesloten en als de code niet goed is gestructureerd of georganiseerd, kan het gebruik van aangepaste paginasjablonen effectief een afmattende taak worden!
Houd er rekening mee dat deze wijzigingen van invloed zijn op de lay-out van uw pagina, dus als u deze wijzigingen op een live website aanbrengt, kunnen gebruikers fouten en anomalieën zien. Het is het beste om deze wijzigingen te oefenen op een privéwebsite of nadat u uw website in een onderhoudsmodus hebt geplaatst. Een back-up van uw gegevens maken 'voor het geval dat' wordt ook altijd aanbevolen.
Alle aangepaste paginasjablonen moet begin met de volgende code. Het vertelt WordPress dat het bestand een aangepaste paginasjabloon is en stelt de naam van de sjabloon in.
Natuurlijk kan 'Mijn aangepaste paginasjabloon' worden gewijzigd in elke gewenste naam!
Even terzijde, het is het beste om uw aangepaste paginasjabloonbestanden een naam te geven met het voorvoegsel 'page_' ('page_contact.php', 'page_fullwidth.php'). Het groepeert alle paginasjablonen samen in uw themamap.
Ik denk dat de snelste manier om vast te lopen aan aangepaste paginasjablonen, is door de code eenvoudig van je standaardpaginap.php-bestand naar een nieuw bestand te kopiëren en het nieuwe bestand een eigen paginasjabloon te maken. Op die manier kunt u de code wijzigen en verwijderen en het effect ervan op een pagina bekijken. Laten we dat nu doen!
Wanneer u nu uw pagina bekijkt, zou deze eruit moeten zien precies dezelfde! Dat komt omdat we nog niets hebben gedaan om onze aangepaste paginasjabloon aan te passen! Maar het is goed om te zien dat de pagina nog steeds werkt. Als je een foutmelding krijgt, zorg er dan voor dat je de code correct hebt gekopieerd.
Om te bevestigen dat uw pagina het nieuwe 'page_test.php' bestand gebruikt in plaats van 'page.php', verwijdert u elk stuk code uit 'page_test.php' ('the_content ();' is meestal een goede bit om te verwijderen), sla het vervolgens op (en upload het). Vernieuw de pagina op uw website en het bit dat u heeft verwijderd, moet ontbreken. Als het ons is, ongedaan maken van de wijziging die u hebt gemaakt en opslaan (en uploaden) opnieuw. Als dat niet het geval is, controleert u of u de code uit deze zelfstudie en het pagina.php-bestand correct hebt gekopieerd.
Vanaf hier sta je open voor een wereld van mogelijkheden! Zolang die 'Sjabloonnaam:' code bovenaan het bestand blijft staan, kunt u doen wat u maar wilt! Uw paginasjabloon hoeft geen WordPress-syntaxis te gebruiken, het kan gewoon een statische HTML-sjabloon zijn - wat u maar wilt!
Als een beetje een bonus, zal ik de gemeenschappelijk stappen bij het maken van een aangepaste paginasjabloon op volledige breedte. Deze stappen zijn mogelijk niet correct op basis van de code in uw thema, maar u zou in staat moeten zijn om de kern ervan te achterhalen.
Begin met het aanmaken van een nieuw bestand genaamd 'page_fullwidth.php'. Voeg de onderstaande code helemaal toe en kopieer en plak de code van uw 'page.php'-bestand eronder, zoals eerder.
Ik ga ervan uit dat ergens binnen de code in dat bestand het volgende is:
get_sidebar ();
Als dat het geval is, verwijder deze dan - elke instantie ervan indien nodig. Als het zich in elementen bevindt, zoals divs, die de lay-out van de pagina kunnen beïnvloeden - verwijder die ook. Bij deze dingen is vaak een hoeveelheid vallen en opstaan betrokken als je het thema niet zelf hebt gemaakt.
Ik ga er ook van uit dat de HTML-inhoud van de pagina begint met een div die een CSS-verklaring heeft die de breedte instelt en deze mogelijk naar links of rechts zweeft. In de thema's die ik maak, zou ik meestal een div hebben met een id van 'pagecontent'. 'left', 'content' of 'post' zijn populaire alternatieven, maar je zult het moeten onderzoeken! Voeg aan die div de klasse 'fullwidth' toe. Bewaar (en upload) het bestand. Vergeet niet om ook een van uw pagina's in WordPress in te stellen om de sjabloon te gebruiken.
Open het bestand 'style.css' in uw thema. Bij voorkeur op een logische plaats, maar het maakt niet echt uit (zolang het geen andere verklaringen verstoort), voeg de volgende code toe:
.fullwidth width: 100%;
Sla 'style.css' op (en upload) en laad vervolgens de pagina waaraan u de sjabloon 'Volledige breedte' hebt toegewezen. U kunt teruggaan en de CSS-verklaring indien nodig aanpassen, maar hopelijk is de kolom die uw pagina-inhoud bevat uitgebreid om een grotere ruimte te vullen. Als dat niet het geval is, is dat helemaal afhankelijk van hoe je thema is geschreven. Als u een premium-thema gebruikt, is het wellicht de moeite waard om de documentatie te controleren of contact op te nemen met de ontwikkelaar. Anders kunt u vragen over het oplossen van problemen plaatsen in de onderstaande opmerkingen en ik zal mijn best doen u tips te geven.
Accentsconagua