Share
In de eerste drie delen van deze serie, hebt u geleerd hoe u statische HTML voor WordPress kunt maken en een thema kunt maken door uw HTML-bestand op te splitsen in een set sjabloonbestanden en de stylesheet te bewerken. Vervolgens hebt u uw thema geüpload naar WordPress en geactiveerd.
Het thema toont nog steeds geen inhoud die u toevoegt via de WordPress-beheerder; om dat te doen, moet je een toevoegen lus naar uw sjabloonbestanden.
Op dit moment heeft uw thema slechts één hoofdsjabloonbestand - index.php - dus daar voeg je een lus aan toe.
Ik ga ervan uit dat je al weet hoe je de WordPress admin kunt gebruiken om een pagina toe te voegen. Ik ga een pagina maken met de naam 'Huis', voeg wat dummy-inhoud toe en bewerk de'Instellingen lezen'in WordPress, zodat dit de startpagina is, in plaats van de vermelding van de blogpost.
Ik gebruik de inhoud van mijn statische site als de inhoud van mijn nieuwe pagina, behalve dat ik niet de eerste afbeelding met volledige breedte aan de inhoud toevoeg. U leert hoe u een afbeelding als deze aan uw thema kunt toevoegen als een uitgelicht afbeelding in deel 10 van deze serie.
Dus ga je gang en maak een pagina, voeg wat afbeeldingen toe als je wilt, en bewerk de 'Instellingen lezenpagina, zodat uw nieuwe pagina de startpagina is.
Nadat u uw nieuwe pagina hebt gemaakt, bezoekt u de startpagina van uw site opnieuw. U zult merken dat er niets is veranderd - WordPress toont niet de inhoud van uw pagina. Dat komt omdat je een moet toevoegen lus om het te vertellen om dit te doen. De lus haalt de pagina-inhoud uit de database en is wat WordPress doet werken.
Open je index.php het dossier. Na de opening van de .inhoud div en voor de opening tag, voeg het volgende toe:
Nu na het sluiten tag, voeg toe:
Het eerste stuk code dat je hebt toegevoegd, start de lus. Het controleert of er een bericht of pagina wordt weergegeven en opent vervolgens het eerste bericht of de eerste pagina.
Als je op een archiefpagina staat, wordt alle relevante berichten doorlopen, de laatste berichten op de hoofdblogpagina of de berichten in een bepaalde categorie op een categoriepagina.
Het tweede stuk code eindigt de lus zodat WordPress verder kan gaan naar het weergeven van inhoud zoals de zijbalk en voettekst.
De opening tag kan klassen en een ID bevatten die automatisch worden gegenereerd door WordPress. U kunt deze vervolgens op een latere datum gebruiken om CSS op dat bericht of deze pagina te targeten als u dat wilt.
Zoek de opening label:
Bewerk het zodat het luidt:
De twee functies die je hebt toegevoegd zijn:
Accentsconagua
het ID() - dit voegt een klasse toe aan de artikel element dat de unieke ID-referentie is voor de post of pagina die wordt weergegevenpost_class - dit voegt een reeks klassen toe aan de artikel element inclusief de postcategorie, het berichttype en meerDus je kunt de ID gebruiken om een specifieke post met CSS te targeten, en de klas om alle berichten in een bepaalde categorie op dezelfde manier te stijlen, bijvoorbeeld.
Het volgende dat je in je bericht of op je pagina ziet, is de titel. In de bestaande code is dit een statische titel binnen een label. Zoek de regel code die luidt:
Dit is de titel van een bericht of pagina
Bewerk het zodat het nu luidt:
"href =""rel =" bladwijzer ">
Dit voegt twee dingen toe:
the_permalink () ). Dit is handig op archiefpagina's zodat gebruikers kunnen klikken op een link naar de eigen pagina van het berichtDe eerste sectie element binnen de lus is voor post metadata - specifiek de datum en auteur van de post.
Zoek deze regel met code (of alle code daarbinnen eerst sectie element: het kan anders zijn in uw thema):
Geplaatst op 5 november door Rachel McCollin
Vervang het door:
geplaatst op door
U heeft twee sjabloontags toegevoegd:
de datum() de auteur() Het belangrijkste is om ervoor te zorgen dat de inhoud van de post of pagina wordt weergegeven en dat u dit doet met behulp van één eenvoudige sjabloontag - de inhoud().
Zoek het gedeelte met de klas .entry-inhoud en verwijder de inhoud ervan. Vervang deze door de de inhoud() label, zodat de hele sectie er als volgt uitziet:
In mijn ontwerp zijn er meer berichtmetagegevens na de inhoud van het bericht of de pagina. Dit is optioneel, maar hier gebruik ik het om een lijst met categorieën weer te geven die bij het bericht horen. U kunt ervoor kiezen om dit te missen van uw thema, afhankelijk van uw ontwerp en uw gebruik van categorieën of tags.
Wis de inhoud van het laatste gedeelte met de .entry-meta klasse en vervang ze zodat de hele sectie luidt:
Categorieën:
Het loont de moeite om even de tijd te nemen om door deze code te werken, want het is het langste fragment van PHP dat je tot nu toe hebt toegevoegd.
als statement en als dit meer dan nul is, wordt de rest van de code uitgevoerd.span element en vermeldt de postcategorieën erin, met behulp van echo get_the_catgeory_list (). De echo is belangrijk omdat zonder dit het get_the_category_list () functie zou de lijst niet echt weergeven, het zou gewoon toegang hebben tot de lijst en er niets mee doen.stop als statement sluit de als zodat WordPress door kan gaan naar het volgende stukje code.Bewaar ten slotte je index.php bestand, keer terug naar uw browser en vernieuw het startscherm. Dit had iets moeten veranderen, zoals hieronder getoond:
Zoals je kunt zien, worden de volgende items getoond:
Je thema is nu goed op weg om een volledig functionerend thema te zijn. Het heeft een lus in de plaats om inhoud toegevoegd via de WordPress admin, evenals een set sjabloonbestanden weer te geven. De volgende stap is om de header.php bestand met een haakje voor essentiële actie en nog wat sjabloontags.
