Voordat je een thema voor WordPress maakt, kun je natuurlijk proberen de kant-en-klare thema's te begrijpen (dat is wat ik deed). Maar feit is dat er soms zoveel spullen in zitten dat het niet altijd gemakkelijk is.

De basis van elk thema zijn de style.css- en index.php-bestanden

Maak eerst een map in /wp-content/themes - dit zal je toekomstige thema zijn, ik heb bijvoorbeeld misha123 gemaakt. Elk thema moet minstens 2 bestanden bevatten - index.php en style.css - maak ze in deze map.

Als je scoorde op style.css, dan in het beheerdersdashboard Uiterlijk > Thema's verwacht een fout als deze:

Als je scoorde op index.php:

Hier babbelt WordPress nog steeds iets over onderliggende thema's, let niet op, jij .

Totdat we het nog hebben bestudeerd, zal index.php verantwoordelijk zijn voor de uitvoer van elke pagina op de site, en style.css zal natuurlijk stijlen bevatten (hoewel dit niet nodig is), maar het belangrijkste is dat in de style.css bestand heb je metadata en onderwerpbeschrijving toegevoegd.

Themanaam De naam van het thema, toch? Versie Huidige versie van uw thema Beschrijving Ik weet niet wat deze parameter betekent Auteur Hier kunt u uzelf en de mensen die u hebben geholpen opgeven Auteur URI URL naar de website van de auteur, waarmee u de naam van de auteur kunt omzetten in een link in WordPress admin-licentie Als u voor WordPress maakt, raad ik u aan iets te lezen over de GPL-licentie-URI. En deze parameter specificeert een link naar de pagina met de Text Domain-licentie. Iets gerelateerd aan het vertalen van het onderwerp in andere talen, ik denk dat we het niet nodig hebben nu, maar later raad ik aan erover te lezen. Tags Als dit thema uw toekomstige website of de website van uw klant wordt, kunt u deze parameter hoogstwaarschijnlijk overslaan, maar als u uw thema vervolgens in de officiële WordPress-repository publiceert, besteed er dan speciale aandacht aan. Nee, je hoeft niet alles wat in je opkomt hier neer te gooien; de lijst met ondersteunde tags is te vinden op de officiële website.

In feite zijn geen van deze parameters vereist! En zo zal alles gaan. Bijvoorbeeld zoals hier:

Ik sluit niet uit dat deze optie geschikt is voor iemand, maar niet voor mij. Nu kopieer ik gewoon de vorige code naar het begin van style.css van het thema en dit is wat ik krijg:

De themaafbeelding instellen

Mee eens, vergeleken met andere thema's ziet het onze er nogal saai uit vanwege het ontbreken van een afbeelding! De vierkantjes flikkeren ook tijdens het scrollen 😭

Om dit op te lossen, maken we eenvoudigweg een screenshot.png-bestand en sturen dit rechtstreeks naar de themamap (aanbevolen resolutie 1200px bij 900px).

Wat de bestandsextensie betreft, zijn jpg, gif en jpeg voldoende, maar de officiële WP-code raadt het gebruik van screenshot.png aan.

Hier is nog iets:

In dit voorbeeld heb ik specifiek een vierkante afbeelding in jpg-formaat genomen en deze wordt redelijk goed weergegeven op de pagina met alle onderwerpen, maar als je informatie over het onderwerp in het pop-upvenster opent, zal het triest zijn. De afbeelding wordt uitgerekt en is van slechte kwaliteit.

Hoewel het niet verplicht is, is het hoofdthemabestand in feite functies.php

Het is moeilijk om je een thema voor WordPress voor te stellen dat geen function.php-bestand heeft; het wordt gebruikt om alle functies van het thema op te nemen, het kan bijvoorbeeld ook wat extra functionaliteit bevatten, of bestanden die erin zijn opgenomen via include() / vereisen ().

Oh ja, had ik het niet vermeld? In deze tutorial ga ik ervan uit dat je basiskennis van PHP hebt, zo niet dan.

De hoofdregel voor functies.php is dat het bestand zelf niets mag uitvoeren! 💀 Dat wil zeggen, nooit! 👿

Zoals u kunt zien, heb ik eenvoudigweg de codering gespecificeerd, het stijlblad ingevoegd, hoewel niet helemaal correct, en "Hallo wereld!" in de hoofdtekst van het document geschreven.

Je kunt het geen dynamische site noemen, maar je moet ergens beginnen. Zoals ik al zei, wordt dit bestand in dit stadium op alle pagina's van uw site geopend.

En nog iets: om WordPress te helpen met uw thema te communiceren, moet u vóór de afsluitende tag toevoegen functie en vóór de afsluitende tag

functie, zal het er ongeveer zo uitzien:

Hallo Wereld!

Als ik een thema maak, is het voor mij het leukste onderdeel om de lay-out te verdelen in de header, footer en al het andere, waarna de headercode naar het header.php-bestand wordt gestuurd en later wordt verbonden met de functie, de site voettekstcode wordt naar het voettekstbestand .php gestuurd en vervolgens verbonden door het . Laten we beginnen.

header.php

We proberen in de header op te nemen wat op alle pagina's van de site, of bijna allemaal, wordt herhaald.

Dit artikel laat zien hoe u het eenvoudigste WordPress-thema kunt maken. Hoewel Codex uitgebreide documentatie over dit onderwerp biedt, vind ik het een beetje ingewikkeld voor een nieuweling. Daarom zal ik u in deze “tutorial” de principes vertellen van hoe WordPress-thema’s werken en laten zien hoe u een onbewerkte HTML-sjabloon hieraan kunt aanpassen. Tegelijkertijd hoef je geen PHP-kennis te hebben, maar het is wel goed als je Photoshop en CSS kent om een ​​ontwerp te maken.

1. Blogfrontend

Laten we, voordat we beginnen, eens kijken naar een standaard WordPress-thema en begrijpen waaruit het bestaat. Laten we de elementen markeren (koptekst, berichttitel, zoekformulier, navigatie, voettekst, enz.).

Standaard voorpagina ( index.php)

Standaard Eenpersoonskamer ( single.php)

2. Photoshop-lay-outs

Ontwerp Photoshop-lay-outs voor uw blog op basis van de look en feel van het standaardthema. Ik gebruik bijvoorbeeld GlossyBlue, een van mijn gratis thema's. Download demo.zip om het voltooide Photoshop-bestand te bekijken.

3. HTML en CSS

Zodra het PSD-ontwerp gereed is, maakt u voor elke pagina een HTML+CSS-sjabloon. Door de stappen in deze tutorial te volgen, kun je mijn GlossyBlue HTML-bestanden gebruiken demo.zip. Nadat u het archief hebt uitgepakt, ziet u het index.html, enkel.html En pagina.html. Vervolgens zal ik ze gebruiken om er een sjabloon van te maken.

Waarom eerst statische HTML maken? Dit komt vooral omdat het het ontwikkelproces enorm zal vereenvoudigen. Meestal maak ik voor elk sjabloon een HTML-bestand en controleer de geldigheid ervan (HTML- en CSS-opmaak) in alle browsers. Daarna hoeft u alleen nog maar de WordPress-code te knippen en plakken. Je hoeft je dus geen zorgen meer te maken over fouten in HTML of CSS.

4. Hoe werkt een WordPress-thema?

Als u naar de standaardthemamap gaat ( wp-content/themes/default), zul je veel php-bestanden zien (sjabloonbestanden genoemd) en één bestand stijl.css. WordPress gebruikt meestal meerdere sjabloonbestanden ( index.php , header.php, zijbalk.php, En voettekst.php).

Meer details in Codex: “Sitearchitectuur” en “Sjabloonhiërarchie”.

5. Dupliceer sjabloonbestanden

Kopieer de HTML-map van GlossyBlue naar de map wp-inhoud/thema's. Ga daarna naar de standaardthemamap, kopieer opmerkingen.php En zoekformulier.php naar een map glanzendblauw.

6. Stijl.css

Ga naar de standaardthemamap en open het bestand stijl.css. Kopieer de commentaartekst aan het begin van het bestand en plak deze in stijl.css Glanzende blauwe thema's. Als u wilt, kunt u de titel en auteursinformatie wijzigen.

7. Bestandsscheiding

Nu moeten we uitzoeken waar we de HTML-bestanden in delen moeten splitsen: header.php, sidebar.php en footer.php. De onderstaande schermafbeelding toont een vereenvoudigde versie van mijn indexbestand, evenals het principe van de indeling ervan.

8.Header.php

Open index.html. Je moet het gedeelte vanaf de bovenkant knippen tot waar het eindigt, het in een nieuw php-bestand plakken en opslaan als header.php.
Ga naar de standaardthemamap, open nieuw header.php. Kopieer en vervang tags waar de php-code dit vereist: titel, link, stylesheets, h1 en div class=description.

Navigatie menu (wp_list_pages) Tags vervangen li V ul id=nav op ;

9. Zijbalk.php

Terug keren naar index.html, knip de code af vanaf het punt waar deze begint formulier-id=zoekformulier en totdat de tag sluit div id=zijbalk, plaats het in een nieuw php-bestand en sla het op als zijbalk.php.

• Vervangen formulier-id=zoekformulier met alle inhoud erop.
• Vervang tags li categorieën door
• Vervang tags li archieven op

10. Voettekst.php

Terug keren naar index.html. Pak de code daar uit div id=voettekst inclusief met de div id=footer-tag en tot het einde /html plaats hem dan in een nieuwe voettekst.php.

recente berichten Hier heb ik query_post gebruikt om de 5 nieuwste blogposts weer te geven.

"Laatste Reacties""Laatste reacties" gegenereerd door de plug-in (opgenomen in de themamap)

11. Index.php

Nu in uw index.html mag alleen maar blijven div-id=inhoud. Sla het bestand op als index.php. Voer de regels in: get_header, get_zijbalk, En get_footer in de volgorde waarin ze in het patroon voorkomen.

12. De lus parseren

In de lus worden blogposts opeenvolgend weergegeven op basis van uw instellingen. De onderstaande schermafbeelding illustreert hoe het werkt. In eerste instantie controleert de lus op de aanwezigheid van records en als er geen records worden gevonden, wordt er een bericht weergegeven "Niet gevonden".

13. Een cyclus kopiëren

Ga naar de standaardthemamap, open index.php. Kopieer de cyclus van de standaardcyclus index.php in je eigen - tussen div id=inhoud../div. Vervang daarna de statische tekst door WordPress-sjabloontags: postdatum, titel, categorie, opmerkingen, volgende en vorige link.

14. Themavoorbeeld

Gefeliciteerd! U hebt het openbare gedeelte (het hoofdgedeelte van de sjabloon) gemaakt. Ga nu naar het beheerdersdashboard, ga naar het tabblad Ontwerp, zou je het GlossyBlue-thema moeten zien. Activeer het en ga naar het openbare gedeelte om het resultaat in actie te zien.

15. Single.php

Het is tijd om een ​​sjabloon te maken single.php. Als je wilt, kun je de stappen herhalen en de code van het standaardthema overbrengen. Maar het lijkt mij gemakkelijker om degene te gebruiken die ik zojuist heb gemaakt index.php, en sla het op als single.php. Open single.php uit het standaardthema en kopieer de sjabloontags naar de gewenste plaatsen. Maak vervolgens verbinding opmerkingen_sjabloon. De volgende schermafbeelding toont de wijzigingen die ik heb aangebracht:

16.Pagina.php

Nu nieuw single.php opslaan met naam pagina.php. Verwijder de datum van binnenkomst, het commentaarformulier en de volgende/vorige links. Dat is alles, dat is alles: uw sjabloon pagina.php klaar .

17. HTML-bestanden verwijderen

Verwijder alle HTML-bestanden uit de map glanzendblauw(we hebben ze niet meer nodig). Technisch gezien is dit voldoende om een ​​eenvoudig WordPress-thema te maken. Het is je misschien opgevallen dat er meer PHP-bestanden in het standaardthema zitten. Nou ja, eigenlijk heb je ze niet echt nodig als je een eenvoudig thema wilt. Bijvoorbeeld als zoeken.php of 404.php staat niet in de themamap, WordPress zal er automatisch gebruik van maken index.php om de pagina weer te geven. Lees Sjabloonhiërarchie voor meer details.

18. WordPress-paginasjabloon

Voor het laatste voorbeeld laat ik je zien hoe je Paginasjabloon gebruikt om een ​​archiefpagina te maken die een lijst bevat met alle berichten op je blog (handig voor een sitemap). Kopiëren archief.php uit de standaardthemamap. Verwijder de onnodige code en krijg zoiets als dit:

WordPress-thema’s bestaan ​​uit bestanden en stijlen die samen het uiterlijk van de site bepalen. Ze kunnen erg van elkaar verschillen, waardoor gebruikers het ontwerp van de website snel kunnen wijzigen. Maar waarom zou je een eigen thema nodig hebben?

• Om uw eigen unieke website-ontwerp te creëren.
• Om te gebruiken en om verschillende inhoud en paginastijlen weer te geven.
• Om alternatieve sjablonen te maken voor speciale secties van de site, zoals categoriepagina's en zoekresultaten.
• Om snel te schakelen tussen twee site-indelingen, of om gebruikers in staat te stellen het uiterlijk van uw site te wijzigen.
• Om uw thema openbaar te maken en anderen van uw ontwerp te laten genieten.

Een WordPress-thema biedt ook enkele voordelen.

• Het scheidt presentatiestijlen van systeembestanden, waardoor updates kunnen worden doorgevoerd zonder grote veranderingen in het uiterlijk van de site.
• Hiermee kunt u themaspecifieke uitvoeropties aanpassen.
• Hiermee kun je snel het uiterlijk van een WordPress-site veranderen.
• Dankzij dit is het niet nodig dat de gebruiker CSS, HTML en PHP leert om zijn website aantrekkelijk te maken.

Maar waarom zou u uw eigen thema maken? Dat is de belangrijkste vraag.

• Dit is een kans om meer te leren over CSS, HTML/XHTML en PHP.
• Dit is een kans om te pronken met uw vaardigheden in CSS, HTML/XHTML en PHP.
• Dit is een kans om te creëren.
• Het is leuk (voor het grootste deel).
• Als je je thema openbaar hebt gemaakt, krijg je de voldoening om iets te delen en terug te geven aan de WordPress-gemeenschap (je kunt opscheppen!)

Standaarden voor het maken van thema's

Houd u bij het coderen van WordPress-thema’s aan de volgende normen:

• Gebruik correct gestructureerde, foutloze PHP-code en geldige HTML-code (zie).
• Gebruik correct samengestelde, geldige CSS-code (zie).
• Volg de aanbevelingen voor.

Anatomische onderwerpen

WordPress-thema’s bevinden zich in de submap wp-content/themes/. De themamap bevat stijlbladen, een extra functionaliteitsbestand (functions.php) en afbeeldingen. Een thema met de naam "test" zou zich bijvoorbeeld waarschijnlijk in de map wp-content/themes/test/ bevinden.

Standaard wordt WordPress geleverd met drie thema’s die zijn gemaakt door het ontwikkelingsteam van Wordpress: ‘Twenty Fifteen’, ‘Twenty Sixteen’ en ‘Twenty Seventeen’. Deze thema's verschillen van elkaar en gebruiken verschillende functies en tags om het uiterlijk van de pagina's van de site te creëren. Bekijk hun componentbestanden eens nader om beter te begrijpen hoe u uw eigen thema kunt maken.

Een WordPress-thema bestaat naast afbeeldingen uit drie hoofdbestandstypen. De eerste is een stijlblad genaamd style.css, dat het uiterlijk van de pagina's van de site bepaalt. De tweede biedt een extra functionaliteitsbestand (functions.php). De overige bestanden zijn sjabloonbestanden die bepalen hoe informatie uit de database op de webpagina wordt weergegeven. Laten we elk type afzonderlijk bekijken.

Thema-stijlblad

Naast het daadwerkelijke stylesheet van uw thema, het style.css-bestand Nodig moet informatie over uw onderwerp bevatten in de vorm van opmerkingen. Elk onderwerp moet zijn eigen unieke informatie hebben in de kopopmerkingen, anders ontstaan ​​er problemen in . Wanneer u een nieuw onderwerp maakt op basis van een bestaand onderwerp, wijzigt u eerst de titelopmerkingen.

Hieronder vindt u een stijlbladkopsjabloon voor uw Rose-thema. Het moet zich aan het begin van het style.css-bestand bevinden, in de eerste regels:

/* Themanaam: Rose Thema-URI: thema-homepage Beschrijving: korte beschrijving van het thema Auteur: uw naam Auteur URI: uw-URI Sjabloon: schrijf-bovenliggende-thema-naam-hier-optioneel-veld Versie: versie -nummer is een optioneel veld. Gedetailleerde beschrijving van het onderwerp/licentie indien nodig. . */

Het eenvoudigste thema bevat alleen een style.css-bestand plus afbeeldingen indien nodig. Om een ​​dergelijk thema te maken, moet u de naam van het bovenliggende thema opgeven in de titelbalk van de sjabloon: Als uw 'Rose'-thema bijvoorbeeld afkomstig is van het 'test'-thema (erft), schrijft u de volgende regel in de header style.css:

Sjabloon: testen

Door deze regel aan de header style.css toe te voegen, worden alle sjablonen in het "test"-thema overgenomen door uw "Rose"-thema, dat niets anders bevat dan een stylesheet-bestand met de naam style.css en mogelijk enkele afbeeldingen. Deze bestanden moeten in de map wp-content/themes/Rose worden geplaatst.

Sinds WordPress 2.7 kan een child-thema sjabloonbestanden bevatten waarvan de namen dezelfde zijn als de sjabloonnamen in het bovenliggende thema. In het beheerderspaneel kun je deze sjablonen selecteren om te gebruiken, en ze zullen worden gebruikt in plaats van de bovenliggende thema's.

De opmerkingen in de header style.css zijn voor WordPress nodig om het thema te identificeren en in het submenu > weer te geven als een geïnstalleerd thema, samen met andere geïnstalleerde thema's.

Opmerking : Wanneer u een bovenliggend thema definieert, moet u in de regel Sjabloon: commentaar de naam van de map van het thema gebruiken. Als u bijvoorbeeld het "Standaard Wordpress-thema" wilt gebruiken, schrijf dan niet

Sjabloon: WordPress-standaard

en schrijf

Sjabloon: standaard

aangezien "default" de naam is van de map van het bovenliggende thema.

Extra functionaliteitsbestand

Het thema kan bovendien een bestand gebruiken met de noodzakelijke functies om het thema te laten werken; het moet zich in de themamap bevinden en functies.php heten. Dit bestand werkt in principe als een plug-in en als het aanwezig is in de themamap die u gebruikt, wordt het automatisch geladen tijdens de initialisatie van WordPress. Dit geldt zowel voor de beheerderspagina's als voor andere (externe) beheerderspagina's. De volgende toepassingen voor dit bestand worden voorgesteld:

• Definieer de functies die worden gebruikt in de sjabloonbestanden van uw thema;
• Instellingen in het beheerdersgedeelte van uw thema waarmee gebruikers de kleuren, stijlen of andere aspecten van uw thema kunnen aanpassen.

Thema's die bij WordPress worden geleverd en standaard worden geïnstalleerd, hebben een function.php-bestand dat een aantal functies en instellingen definieert in het beheergebied van het thema, zodat u dit als model kunt gebruiken. Het function.php-bestand werkt in principe als een plug-in, de Codex-sectie is de beste plaats om meer details te krijgen over hoe u dit bestand kunt gebruiken.

Themasjabloonbestanden

Sjabloonselectie op basis van query's

Met WordPress kan de programmeur verschillende opties gebruiken om sjablonen uit een set te verbinden: ten eerste door gebruik te maken van de sjabloonhiërarchie, en ten tweede door gebruik te maken van voorwaardelijke tags binnen de verwerkingslus van het sjabloonbestand.

In het eerste geval moet u, wanneer u een sjabloonhiërarchie gebruikt, speciale sjabloonbestanden maken die automatisch op het juiste moment worden gebruikt om een ​​pagina te maken in plaats van de basisindex.php-sjabloon. Als uw thema bijvoorbeeld een sjabloon bevat met de naam categorie.php en er komt een verzoek voor een categoriepagina, dan wordt het categorie.php-sjabloon geladen in plaats van het index.php-sjabloon. Als er geen categorie.php-bestand in het thema aanwezig is, wordt de index.php-sjabloon zoals gewoonlijk geladen.

U kunt een sjabloon voor een specifieke categorie definiëren, bijvoorbeeld door een categorie-6.php-sjabloonbestand aan uw thema toe te voegen. Het bestand wordt gebruikt in plaats van index.php als de categorie-ID 6 is. Om de categorie-ID te achterhalen, gaat u naar > als u beheerderstoegang heeft in WordPress versie 2.3 of lager.

Vanaf WordPress 2.5 is de ID-kolom verwijderd uit het beheerdersdashboard. U kunt de categorie-ID bepalen door op 'Categorie bewerken' te klikken en naar de cat_ID-waarde in de URL te kijken. Het einde van de URL bijvoorbeeld:

"...categorie.php?action=bewerken&cat_ID=3"

waarbij "3" de ID van de huidige categorie is. Dit proces wordt in meer detail besproken in

Als uw thema de weergavesjabloon nog gedetailleerder moet kunnen beheren dan het controleniveau dat door de sjabloonhiërarchie wordt geboden, kunt u voorwaardelijke tags gebruiken. Voorwaardelijke tags controleren feitelijk of een speciale voorwaarde tijdens runtime waar is. In dat geval kunt u een specifieke sjabloon laden of enkele tekstvariaties op de pagina weergeven op basis van die voorwaarde.

Als u bijvoorbeeld verschillende stijlen wilt maken, afhankelijk van het categorienummer, kan de code er als volgt uitzien:

Of, met behulp van een verzoekobject, kan hetzelfde algoritme op een andere manier worden geïmplementeerd:

na; if ($post->in_category("9")) ( include(TEMPLATEPATH . "/single2.php"); ) else ( include(TEMPLATEPATH . "/single1.php"); ) ?>

In ieder geval zullen beide codevoorbeelden verschillende patronen opleveren, afhankelijk van de categorie-ID. Voorwaardelijke tags zijn niet beperkt tot categorieën, zie het artikel, daarin worden alle mogelijke opties besproken.

Pictogrammen voor bestandstypen

Wordpress gebruikt bestandstypepictogrammen () op uw blog en in de interface van het beheerdersdashboard als deze pictogrammen op de opgegeven locatie voorkomen.

Wordpress zoekt naar deze bestanden in de afbeeldingenmap van het huidige thema. (En in Wordpress 2.2 heeft het standaardthema slechts één pictogram, audio.jpg .)

Om bijvoorbeeld een pictogram van het MIME-type audio/mpeg weer te geven, zoekt Wordpress naar het pictogrambestand in de opgegeven afbeeldingenmap van het huidige thema en selecteert het het eerste overeenkomende bestand (zie functiebeschrijving):

1. mijn_thema/images/audio.jpg
2. mijn_thema /images/audio.gif
3. mijn_thema/images/audio.png
4. mijn_thema/images/mpeg.jpg
5. mijn_thema /images/mpeg.gif
6. mijn_thema /images/mpeg.png
7. mijn_thema /images/audio_mpeg.jpg
8. mijn_thema /images/audio_mpeg.gif
9. mijn_thema /images/audio_mpeg.png

Lijst met standaard themasjabloonbestanden

Hieronder vindt u een lijst met standaardsjabloonbestanden die door WordPress worden gebruikt. Uiteraard kan uw thema andere stijl-, afbeeldings- of programmabestanden bevatten. Houd er rekening mee dat de onderstaande bestandsnamen een speciale betekenis hebben voor WordPress - zie het hiërarchiesjabloon voor meer informatie.

Style.css Hoofdstijlbladbestand. Het bestand moet in het onderwerp staan Nodig en moet de hierboven beschreven opmerkingen in de bestandskop bevatten. index.php Hoofdsjabloonbestand. Als u uw eigen sjablonen in uw thema gebruikt, is dit index.php-bestand vereist. comments.php Commentaarsjabloon. Als dit niet aanwezig is, wordt het bestand comments.php uit het standaardthema gebruikt. commentaren-popup.php Voegt een pop-upmenu toe voor JS-opmerkingen. Indien niet aanwezig, wordt commentaren-popup.php aangeroepen vanuit het standaardthema. home.php Blog-startpaginasjabloon. single.php Paginasjabloon voor één bericht. Wordt gebruikt wanneer om een ​​specifiek bericht wordt gevraagd. Gebruik voor deze en andere on-demand sjablonen index.php als uw thema geen bijbehorend sjabloonbestand heeft. page.php Sjabloon voor één pagina, gebruikt om de gevraagde pagina weer te geven. categorie.php Categoriesjabloon. Wordt gebruikt bij het aanvragen van een categorie. auteur.php Blogauteursjabloon. Wordt gebruikt bij het bevragen van de blogauteur. date.php Datum-tijd uitvoersjabloon. Wordt gebruikt bij het opvragen van datum en tijd. Jaar, maand, dag van de maand, uur, minuut, seconde. archive.php Archiefsjabloon. Wordt gebruikt wanneer er om een ​​categorie, auteur of datum wordt gevraagd. Houd er rekening mee dat dit sjabloon kan worden overschreven door de sjablonen categorie.php, auteur.php en date.php voor de juiste verzoektypen. search.php Sjabloon voor zoekresultaten. Wordt gebruikt na het uitvoeren van een zoekopdracht. 404.php Sjabloon voor foutmelding. Wordt gebruikt wanneer WordPress geen bericht of pagina kan vinden die overeenkomt met een zoekopdracht.

Deze bestanden hebben een speciale betekenis in WordPress omdat ze worden gebruikt om index.php te vervangen wanneer ze zich in de themamap bevinden, volgens de sjabloonhiërarchie, en wanneer daarom wordt gevraagd; of in overeenstemming met de waarheid van voorwaardelijke tags, wanneer een functie van het type is_*(); retourneert "waar".

Als u bijvoorbeeld één bericht wilt weergeven, retourneert de functie "true" en bevindt er zich een single.php-sjabloonbestand in de actieve themamap. Dit sjabloon wordt gebruikt om de pagina te maken.

Links naar bestanden uit de sjabloon

Het standaard WordPress-thema is een goed voorbeeld van een techniek (voor het eerst beschreven door Michael Heilemann in Kubricks WordPress 1.2-indeling) van hoe zoekopdrachten in sjablonen worden weergegeven.

De volgende codevoegt de sjabloon-URL in de sjabloonuitvoer in. U kunt aanvullende informatie toevoegen om naar bestanden uit uw thema te linken.

De volgende codevoegt de URL toe van de map die de stylesheet.css-bestanden van uw thema bevat aan de sjabloonuitvoer. U kunt aanvullende informatie toevoegen om naar uw themabestanden te verwijzen, vooral de informatie die nodig is voor stylesheets (om dit te voorkomen, gebruikt u dit in plaats daarvan).

De constante TEMPLATEPATH bevat het absolute pad naar de sjabloonmap van het huidige thema (zonder de "/" aan het einde).

Houd er rekening mee dat de URI's die in het stijlblad worden gebruikt, gebonden zijn aan de map waar het stijlbladbestand zich bevindt, en niet aan de map waar de sjabloon zich bevindt die deze stijlen gebruikt. Dit elimineert de noodzaak om PHP-code aan het stylesheet-bestand toe te voegen om de huidige map in te stellen. Als u bijvoorbeeld afbeeldingen uit de map images/ van uw thema in uw stylesheet gebruikt, moet u alleen een relatief pad in de CSS opgeven, zoals dit:

H1 (achtergrondafbeelding: URL(afbeeldingen/mijn_achtergrond.jpg); )

Het is een goede optie om de hierboven beschreven methode te gebruiken om naar bestanden te linken. In dit geval heeft u geen absolute paden nodig in uw sjablonen.

Aangepaste sjabloontypen definiëren

U kunt het WordPress-plug-insysteem gebruiken om uw eigen sjabloontypen toe te voegen die in specifieke gevallen worden gebruikt. Dit is nodig als u bijvoorbeeld verschillende lay-outs voor verschillende cases of een eigen commentaarsjabloon wilt maken, enz. Deze WordPress-extensie kan worden bereikt door de template_redirect-gebeurtenis te onderscheppen, zie . Meer informatie over het maken van plug-ins vindt u hier.

Vereiste gebeurtenisoproepen voor compatibiliteit

Bij het ontwerpen van een thema is het raadzaam om er rekening mee te houden dat je thema zo moet worden geconfigureerd dat het goed kan werken met elke WordPress plugin die jij of een andere gebruiker van jouw thema wil installeren. Plug-ins breiden de functionaliteit van WordPress uit door het gebruik van event hooks ("Action Hooks", zie voor meer informatie). De meeste gebeurtenissen vinden plaats in de WordPress-kern, dus uw thema hoeft geen aangepaste gebeurtenissen aan te roepen om te functioneren. Maar sommige onderschepte gebeurtenissen zullen nog steeds moeten worden aangeroepen zodat de geïnstalleerde plug-ins informatie correct kunnen weergeven, rechtstreeks in de koptekst (header) en voettekst (footer), in de zijbalk of in het hoofdgedeelte van de pagina. Hier is een lijst met speciale gebeurtenistags die in uw thema moeten worden aangeroepen om plug-ins correct te laten werken:

Wp_head Treedt op wanneer de code van het element wordt weergegeven in de header.php-sjabloon. Voorbeeld van gebruik in de plug-in: javascript-code toevoegen. Gebruik: -of- wp_footer Treedt op wanneer de "voettekst"-header van het thema wordt weergegeven in de footer.php-sjabloon. Een voorbeeld van gebruik in de plug-in: het invoegen van PHP-code die na alles moet worden uitgevoerd, de allerlaatste op de pagina. Gebruik: -of- wp_meta Gebeurtenis vindt meestal plaats wanneer een tag wordt verwerkt

Meta

bij het renderen van een menu of in een zijbalkmenu in de sidebar.php-sjabloon. Gebruiksvoorbeeld: Voeg een 360-graden-advertentie of tagwolk toe aan uw zijbalk. Gebruik: -of- comment_form Treedt op wanneer de templatescripts comments.php en comments-popup.php worden verwerkt, onmiddellijk voordat de tag voor het commentaarformulier wordt gesloten (). Gebruiksvoorbeeld: toon een voorbeeld van nieuw toegevoegde opmerkingen. Gebruik:ID KAART); ?>

Voor een voorbeeld uit de echte wereld kunt u deze evenementoproepen voor plug-ins vinden in hun respectievelijke standaardthemasjablonen.

Algemene opmerkingen voor thema-ontwikkelaars

Wees duidelijk en beschrijf in uw themadocumentatie (een README-bestand dat bij uw thema wordt geleverd, zal veel gebruikers helpen eventuele struikelblokken te omzeilen):

1. Geef precies aan waarvoor uw thema- en sjabloonbestanden dienen.
2. Volg de naamgevingsconventie in de standaardthemahiërarchie.
3. Vermeld de eventuele tekortkomingen van uw thema.
4. Schrijf eenvoudig en duidelijk commentaar, vooral op complexe plaatsen, in sjablonen en stijlbestanden. Voeg opmerkingen toe waar u het standaardgedrag van sjablonen en stijlen hebt gewijzigd.
5. Als u speciale vereisten heeft, waaronder mogelijk aangepaste herschrijf- of wijzigingsregels of het gebruik van enkele aanvullende, speciale sjablonen, afbeeldingen of andere bestanden, geef dan duidelijk aan welke gebruikersactiestappen hij moet ondernemen om uw thema volledig functioneel te krijgen.
6. Probeer uw thema in verschillende browsers te testen om ten minste enkele van de problemen op te vangen die gebruikers kunnen tegenkomen.
7. Geef indien mogelijk contactinformatie (webpagina of e-mail) op voor informatieondersteuning en gebruikersvragen.

Links en bronnen

Een volledige lijst met bronnen met betrekking tot thema's en sjablonen is beschikbaar in het artikel.

Houd er rekening mee dat WordPress een aantal klassen genereert die aanwezig moeten zijn in het stijlblad. Bijvoorbeeld lessen aligncenter, alignleft en alignright dienen om afbeeldingen uit te lijnen en elementen te blokkeren, en ze moeten worden opgenomen in uw stylesheet (kan worden gekopieerd van de stylesheet van het standaardthema):

.Tekst in het midden uitlijnen,
div.aligncenter(
weergave: blok;
marge-links: auto;
marge-rechts: auto;
}
.alignleft(
zweven: links;
}
.rechts uitlijnen(
zweven: rechts;
}

De volgende klassen worden gebruikt om afbeeldingen met bijschriften uit te lijnen (kan worden gekopieerd van het standaardthema, later indien nodig gecorrigeerd):

.wp-bijschrift (
rand: 1px effen #ddd;
tekst uitlijnen: centreren;
achtergrondkleur: #f3f3f3;
opvulling bovenaan: 4px;
marge: 10px;
/*optionele parameters die afgeronde hoeken maken in ondersteunde browsers*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
randradius: 3px;
}
.wp-caption img (
marge: 0;
opvulling: 0;
rand: 0 geen;
}
.wp-caption p.wp-caption-tekst (
lettergrootte: 11px;
lijnhoogte: 17px;
opvulling: 0 4px 5px;
marge: 0;
}

Daarnaast zijn er nog verschillende andere WordPress-klassen die niet in de stylesheet beschreven hoeven te worden, maar omdat... WordPress genereert er pagina's mee en u kunt ze opmaken:

.categorieën(...)
.cat-item /* Deze klasse is toegewezen aan alle categorieën */)
.current-cat (/* huidige categoriestijl */)
.current-cat-parent (/* stijl voor de voorouder(s) van de huidige categorie */)
.children (/* klas voor kind */)
.pagenav (/* paginanavigatie */)
.page_item (/* elk lijstelement */)
.current_page_item (/* deze klasse wordt in de lijst met pagina's toegewezen aan de huidige actieve pagina */)
.current_page_parent (/*klasse voor de bovenliggende pagina in relatie tot de huidige */)
.current_page_ancestor (/* elke pagina van de bovenste niveaus ten opzichte van deze */)
.widget (/* alle widgets zijn in deze klasse verpakt */)

Gebruik tijdens het opmaakproces blokken en stijlen ervoor, zoals gedefinieerd in de schermafbeeldingen aan het begin van het artikel. Dit is niet noodzakelijk, maar wel zeer wenselijk.

Zo zullen we in de toekomst via special een zoekformulier aan de site koppelen. wordpress-tag , waardoor WordPress het volgende formulier zal weergeven:

Vinden:

Daarom houden we hier rekening mee bij het ontwerpen van het thema.

En het laatste dat u aan style.css hoeft toe te voegen, is informatie over uzelf en het gemaakte thema. De informatie wordt aan het begin van het bestand in de opmerkingen geplaatst:

/*
Themanaam: Creëer een unieke themanaam
Thema-URI: http://link-naar-thema-homepage
Beschrijving: Beschrijving van het onderwerp
Auteur: onderwerpauteur
Auteur-URI: http://link-naar-auteur-pagina
Sjabloon: voorouderthemanaam
Tags: thematags - alleen uit de lijst aangeboden door wordpress.org
Versie: versie
Nou, hier is de tekst van de licentie
*/

Vergeet ook niet te doen screenshot.png en plaats het in de map met de sjabloon (in de root). Informatie die op deze manier in het stijlblad wordt geplaatst, wordt weergegeven in het beheerderspaneel in de sectie Beheer van "Thema's".. We testen de ontworpen sjabloon in browsers, als alles in orde is, kun je verder.

Ik zal de code voor de pagina's van de ontworpen sjabloon niet verstrekken, omdat... het is groot genoeg, download het gewoon en dan gaan we ermee aan de slag.

Hoe een wp-thema werkt:

Als je de standaard themamap (wp-content/themes/default) opent, zie je veel PHP-bestanden (themabestanden) en één style.css-bestand. Wanneer we een blog bekijken, bevat WP de themabestanden (index.php<

Op dit punt is de voorbereidende voorbereiding voltooid en kunnen we doorgaan met het maken van een thema op basis van het beschikbare bronmateriaal.

Stap 1:
Maak eerst in de WordPress-themamap (wp-content/themes) een map met de naam van ons thema. Laat maar zo ruseller_lessen. Kopieer vervolgens de bestanden vanuit de standaardthemamap (wp-content/themes/default). opmerkingen.php, zoeken.php En 404.php naar onze themamap. Deze bestanden zijn verantwoordelijk voor opmerkingen en zoekopdrachten op de blog. Dan in ruseller_lessen kopieer het stijlblad stijl.css ons sjabloon, screenshot.png (300x225) en map afbeeldingen.

Nu moeten onze sjabloonbestanden worden “geknipt”, d.w.z. extraheer de voettekst, zijbalk en koptekst in afzonderlijke bestanden. Het diagram toont een vereenvoudigde weergave van het bestand index.php met markeringen volgens welke we het zullen snijden:

Stap 2 - Koptekst.php
Opening index.html en knip alles uit vóór de opmerking, maak een nieuw bestand header.php en plak de knipcode erin, sla deze op in de map van ons thema ruseller_lessen: