Een WordPress-thema maken vanuit statische HTML - Een paginasjabloon maken

Tot nu toe in deze serie heb ik je laten zien hoe je een volledig functionerend WordPress-thema uit statische HTML kunt maken.

We hebben de volgende stappen uitgevoerd:

• voorbereiding van uw markup voor WordPress
• het converteren van uw HTML naar PHP en het splitsen van uw bestand in sjabloonbestanden
• het bewerken van het stylesheet en het uploaden van uw thema naar WordPress
• een lus toevoegen aan uw indexbestand
• het toevoegen van metatags, de wp_head hook en de titel en beschrijving van de site in uw header-bestand
• een navigatiemenu toevoegen
• widgetgebieden toevoegen aan de koptekst en zijbalk
• widget gebieden, een colofon en de wp_footer hook to the footer-bestand.

Op dit moment heeft uw thema slechts één sjabloonbestand voor het weergeven van inhoud: de index.php het dossier. Een krachtige functie van WordPress is de mogelijkheid om sjabloonbestanden te gebruiken voor verschillende soorten inhoud.

In deze zelfstudie geef ik een inleiding tot sjabloonbestanden en hoe u deze kunt gebruiken. Vervolgens laat ik u zien hoe u het meest algemene sjabloonbestand maakt-page.php-die wordt gebruikt voor het weergeven van statische pagina's.

Ik zal dat volgen door u te laten zien hoe u een tweede paginasjabloonbestand maakt voor het weergeven van pagina's op volledige breedte zonder zijbalk.

---

Wat je nodig hebt

• uw coderedacteur naar keuze
• een browser om uw werk te testen
• een WordPress-installatie, lokaal of op afstand
• Als u lokaal werkt, heeft u MAMP, WAMP of LAMP nodig om WordPress in te schakelen.
• Als u op afstand werkt, hebt u FTP-toegang tot uw site en een beheerdersaccount nodig in uw WordPress-installatie.

---

Een overzicht van sjabloonbestanden

Een WordPress-thema kan verschillende sjabloonbestanden bevatten voor het weergeven van verschillende inhoud. Deze kunnen zijn:

• een index.php bestand, wat essentieel is voor het thema om te werken en zal worden gebruikt door WordPress in afwezigheid van een sjabloonbestand dat overeenkomt met het specifieke inhoudstype dat wordt weergegeven
• een page.php bestand, voor het weergeven van statische pagina's (d.w.z. geen berichten)
• een single.php bestand voor het weergeven van afzonderlijke berichten
• een archive.php bestand voor het weergeven van archieven van berichten - u zult een van die later in deze serie creëren.
• sjabloonbestanden voor berichten van een specifiek berichttype
• sjabloonbestanden voor berichten in specifieke categorieën, tags of taxonomietermen
• archiveren van bestanden voor archieven van specifieke inhoudstypen (categorieën, tags, taxonomietermen, lijsten van posttypen, datumvermeldingen, enzovoort)

Voor een volledige lijst van de sjablonen kunt u gebruiken in uw thema's en hoe WordPress kiest welke te gebruiken, zie de Codex-pagina op de sjabloonhiërarchie of de interactieve bron op de sjabloonhiërarchie op wphierarchy.com.

---

1. Uw paginasjabloon maken

De eerste stap is het maken van het sjabloonbestand voor uw statische pagina's.

Maak in je themamap een leeg bestand met de naam page.php.

Voeg het volgende toe:

Dit maakt de basis van uw bestand, met een aanroep van de koptekst, voettekst en zijbalk omvatten bestanden op vrijwel dezelfde manier als in uw index.php het dossier. Merk op dat ik ook de. Heb geopend en gesloten #inhoud div op dezelfde manier als in de index.php het dossier.

Opmerking: u kunt ook een sjabloonbestand maken voor pagina's zonder zijbalk, waarbij de zijbalk niet is opgenomen. Ik zal je laten zien hoe je dit later in deze tutorial kunt doen.

---

2. Een lus toevoegen

Uw paginasjabloon werkt niet zonder een lus om de inhoud van de pagina uit de database te halen.

Binnen in de #inhoud div, voeg de volgende code toe:

 
>    
  
 
  

Dat is uw volledige paginasjabloonbestand!

Bekijk nu een statische pagina op uw site om te zien hoe het eruit ziet:

Zoals je kunt zien aan de screenshot, ziet mijn statische pagina er nu een beetje anders uit.

Het bevat geen metadata en op de startpagina is er geen paginatitel. De paginatitel wordt uitgesloten van de startpagina met behulp van de voorwaardelijke tag if (! is_front_page ()), die controleert of de voorpagina is niet wordt weergegeven (door het uitroepteken op te nemen) en geeft vervolgens de paginatitel weer als dit het geval is.

---

3. Een tweede paginasjabloon maken

Soms wilt u misschien dat een pagina de volledige breedte van het scherm beslaat zonder zijbalk of als u uw pagina-inhoud anders op verschillende pagina's wilt weergeven.

Hiertoe kunt u extra aangepaste paginasjablonen maken. Je kunt deze opnoemen hoe je maar wilt, zolang het achtervoegsel er maar bij hoort pagina- in hun naam. In het bestand zelf neemt u commentaar voorziene tekst op om WordPress te vertellen over de aangepaste paginasjabloon.

Begin met het maken van een kopie van uw page.php bestand en noem het page-full-width.php.

Open nu dat bestand en voeg de volgende tekst met commentaar toe bovenaan het bestand, onder de opening

/ ** * Sjabloonnaam: pagina op volledige breedte, geen zijbalk * /

Dit vertelt WordPress de naam van de paginasjabloon, zodat u deze kunt selecteren op het paginabewerkingsscherm.

Op het moment dat uw nieuwe paginasjabloon identiek is aan de standaardsjabloon, moet u dit wijzigen. Zoek de regel die luidt:

Bewerk het zodat het luidt: