Good Mood

Dit wordt een leuke tutorial waar we inspecteren hoe u uw eigen WordPress thema te maken vanaf nul. In feite beginnen we met absoluut NUL bestanden en nul regels code. De enige manier om te begrijpen hoe WordPress thema ‘ s werken, is om echt springen in op een laag niveau en doe alles zelf. Ja, Het is verleidelijk om dit te vermijden, omdat je kunt maken WordPress alles voor u doen zonder enig begrip van de code die de bevoegdheden van het., Dit kan PHP, JavaScript, CSS of zelfs de basis HTML. Tegen het einde van deze stap voor stap WordPress theme tutorial, zult u begrijpen hoe alles bij elkaar past en hoe WordPress te buigen naar uw wil met gemak.

er zijn zoveel gratis thema ‘ s beschikbaar voor u wanneer u een WordPress website draait. Buiten de gratis thema ‘s, kunt u er ook voor kiezen om een premie te betalen voor professioneel gemaakte WordPress thema’ s die er geweldig uitzien en hebben fantastische functies. Dus waarom leren hoe je je eigen thema te maken vanaf nul?, Het antwoord is dat het niet uitmaakt welk thema u gebruikt, er gaat een tijd komen wanneer u wilt eenvoudige wijzigingen aan te brengen aan uw website. Sommige van deze wijzigingen kunnen worden opgevangen door een eenvoudige plugin of widget. Vele malen echter, is het zinvoller om te begrijpen wat het is dat je wilt veranderen, hoe het te veranderen, en te voorkomen dat het draaien van uw WordPress website in een puinhoop van plugins en add-ons die log worden. Met slechts een beetje van de basis niveau kennis, zult u vertrouwen in het wijzigen van uw thema, of gewoon het bouwen van uw eigen vanaf nul., U zult weten welk bestand te bewerken, en welke code toe te voegen of te wijzigen om het gewenste resultaat te creëren.

Stap 1: Maak een map aan om uw themabestanden vast te houden.

als we gaan bouwen thema ‘ s, moeten we weten waar de bestanden die deel uitmaken van een WordPress thema leven in een WordPress installatie. Dit is vrij makkelijk. We weten dat een WordPress installatie meestal een root directory heeft met de naam wordpress. Hier is hoe onze root directory eruit ziet in PHP Storm.,

Deze map bevat de volgende bestanden en mappen:

bestanden

mappen

• wp-admin
• wp-content
• wp-includes

de map waarin we nu het meest geïnteresseerd zijn is de wp-inhoudsmap. In de map wp-content bevindt zich een map met de naam thema ‘ s. Weet je waar deze map voor is? Ja, Dat klopt! Het is de map die een of meer thema ‘ s die u wilt gebruiken met uw WordPress website bevat., In deze thema ‘ s map vinden we drie extra mappen van twentyfifteen, twentysixteen, en twentyseventeen. Deze mappen bevatten de drie thema ‘ s die WordPress schepen met standaard. Merk hieronder op dat er ook een map met de naam customtheme is. Ga je gang en maak die map ook in uw installatie, want dit is waar we zullen het creëren van onze WordPress thema vanaf nul.

Stap 2: stijl aanmaken.css en index.php in uw aangepaste thema map

we weten nu waar WordPress thema bestanden zijn in het bestandssysteem., We hebben ook een nieuwe map met de naam customtheme gemaakt in onze thema ‘ s map. We gaan nu twee lege bestanden maken in deze map. Een heet index.php en de andere heet style.css.

laten we nu deze bestanden vullen met het absolute minimum dat we nodig hebben om een nieuw thema te starten in WordPress.

stijl.CSS

WordPress leest de commentaren die u in de stijl plaatst.css-bestand. Dit is waar u specifieke informatie over het thema dat u aan het bouwen bent.

De Stijl.,css is een stylesheet (CSS) bestand dat nodig is voor elke WordPress thema. Het controleert de presentatie (visueel ontwerp en lay-out) van de website pagina ‘ s.

in ons fragment wijzen we eenvoudig een Themanaam, de auteur, de auteur-URI en het versienummer van ons thema toe.,

index.,php

in dit bestand willen we gewoon iets naar het scherm uitvoeren om te bewijzen dat ons aangepaste thema werkt.

geweldig werk! Geloof het of niet, heb je je eerste WordPress thema gemaakt.,

Stap 3: Activeer uw thema vanuit het WordPress Dashboard

Op dit punt kunnen we ons WordPress Dashboard bezoeken en navigeren naar Uiterlijk->thema ‘ s en ziehier, zien we het nieuwe thema dat we hebben gemaakt.

We kunnen op” Theme Details ” klikken om ons aangepaste thema te bekijken en de informatie te vinden die we in de stijl hadden ingevoerd.css-bestand heeft gewerkt. We kunnen zien dat de hen heeft een naam van customtheme, met Versie 1.0, door de auteur Vegibit, en een link naar de URI die we hadden verstrekt. Heel cool.,

en nu het moment van de waarheid! Ga je gang en klik op “Activeren” op de nieuwe customtheme en ga dan naar de site. Het is niet van plan om een Webby awards te winnen, maar we hebben ons zelf een goede start op een nieuwe aangepaste thema!

Stap 4: Voeg Code toe om de posttitel en Posttekst uit te voeren

we hebben de vrijheid genomen om een paar voorbeeldposten in de database te vullen zodat we met die gegevens kunnen werken tijdens deze tutorial. Op dit moment, ons thema gewoon uitgangen aangepaste thema!, naar de pagina wanneer we onze site bezoeken, ongeacht hoeveel berichten er in de database staan. Laten we nu gaan naar het ophalen van enkele gegevens uit de database, en het uitvoeren van het naar de pagina. Specifiek, we willen de Post titel en inhoud van alle berichten te halen en bekijk ze op de homepage. Laten we het nu proberen. Laten we eerst eens kijken wat we hebben voor berichten in het WordPress Dashboard.

gebruikmakend van de WordPress Loop

nu kunnen we een beetje praten over de WordPress Loop. De WordPress lus is echt de motor die WordPress run maakt., Het is via deze lus, dat thema ontwikkelaars te controleren op berichten en weer te geven op de pagina als dat nodig is. Indien volgt het formaat als volgt. Als de database berichten heeft, laten we er een lus over maken terwijl er nog berichten zijn, anders laten we de gebruiker weten dat er geen berichten zijn. Het ziet er zo uit in PHP code.,

merk op dat de lus gebruik maakt van twee functies in zijn meest basale vorm. Dat zijn have_posts () en the_post (). De functie have_posts () doet maar één ding. Het vertelt je of er berichten in de database te lus over., Deze functie geeft ofwel true of false en dat is het. Als het true retourneert, dan zijn er berichten beschikbaar om over te lus. Als het false retourneert, dan zijn er geen berichten om te herhalen. De andere functie, the_post () geeft niets terug. Het is de taak om WordPress klaar te krijgen om berichten uit te voeren. Specifiek, het haalt de volgende post op, stelt de post op, stelt de eigenschap in_the_loop in op true., Tot nu toe, onze pagina zal nog steeds geen informatie over onze blog posts, maar we kunnen dat Nu bijwerken in onze index.php bestand.

Ok cool. We hebben nu gebruik gemaakt van twee extra WordPress functies, the_title() en the_content(). Meestal worden deze functies binnen de lus gebruikt en wat ze doen is om de titel en de inhoud van elk bericht op te halen terwijl de lus over elk bericht in de database itereert. Dus als de lus loopt, zal het over de eerste post komen., Op dat moment zal de functie_title() de titel van het bericht naar de pagina uitvoeren en the_content() zal de inhoud van dat bericht naar de pagina uitvoeren. In de volgende lus zullen deze functies opnieuw de volgende titel en inhoud ophalen en deze naar de pagina uitvoeren. Dus met deze op zijn plaats, zouden we nu wat informatie moeten zien over onze berichten die naar het scherm worden gestuurd. Laten we het proberen! We bezoeken http://wordpresstutorial.dev en zien dat het werkt!,

Stap 5: Voeg een Link toe aan elk bericht

hoe zit het met een link naar elk afzonderlijk bericht zodat we een bericht op zijn eigen kunnen bekijken in plaats van alleen als onderdeel van de homepage. We kunnen dat heel gemakkelijk doen, opnieuw met speciale functies die WordPress biedt. Voor deze taak kunnen we gebruik maken van de functie the_permalink (). We kunnen onze code zo bijwerken:

nu kunnen we op elke afzonderlijke posttitel klikken en naar een pagina navigeren die slechts dat ene bericht heeft. Heel cool!,

Stap 6: Voeg een kop-en voettekst toe aan het aangepaste thema

De titel en de inhoud van het bericht staan centraal bij het maken van een goed thema. Bijna net zo belangrijk is het hebben van een kop-en voettekst sectie van uw thema. Deze secties zouden de inhoud bevatten die altijd zichtbaar is op alle pagina ‘ s van de website. Deze secties zijn boven en onder de inhoud van het bericht. Om dit te doen, je raadt het al, zullen we gebruik maken van speciale functies van WordPress om de koptekst te krijgen en de voettekst te krijgen. Zie je al een patroon beginnen te ontwikkelen?, Bijna alles wat je kunt doen als een thema ontwikkelaar in WordPress is al voor u gedaan door middel van deze aangepaste functies. Dus u zult merken dat het loont om deze veelgebruikte functies in WordPress thema ontwikkeling onthouden. Laten we nu de functies get_header() en get_footer() aan ons themabestand toevoegen.

zou je dat eens willen zien?! We kunnen zien dat ons aangepaste thema nu een koptekstgebied en een voettekstgebied heeft., In de header is de naam en slogan van de site, terwijl in de voettekst zien we de vertrouwde tekst, WordPress Tutorial wordt met trots ondersteund door WordPress. Dit zijn de standaard kop-en voettekstopties bij het gebruik van deze functies. Hoe zit het met wanneer we een aangepaste kop-en voettekst willen hebben? Komt eraan!

van 2 themabestanden naar 4

tot nu toe in deze tutorial, hebben we twee bestanden die in onze customtheme map (die zelf in de thema ‘ s map) leven. Die bestanden zijn stijlvol.css en index.php. Op dit punt, we gaan nodig hebben om meer bestanden toe te voegen om verder te komen., Ga je gang en maak twee nieuwe bestanden in de customtheme map. Deze bestanden worden gemakshalve header genoemd.php en footer.php.

wat deze bestanden nu doen is om de standaard kop-en voettekst-lay-outs te overschrijven die standaard worden verstrekt wanneer u de functies get_header() of get_footer() aanroept. In feite, als we onze website vernieuwen, het lijkt erop dat de kop-en voettekst zijn verdwenen. Dit komt omdat we nog geen markup aan die bestanden hebben toegevoegd. Alleen voor grijns, stel de bestanden zo om dit uit te testen.

header.,php

footer.,php

Working with header.,php

ons voorbeeld hierboven werkte geweldig, en het laat ons zien hoe dit bestand werkt op het meest basale niveau. Header.php-bestand is eigenlijk heel belangrijk echter, dus laten we niet gloss over de details van het te snel! Dit is waar u de code die alle pagina ‘ s op uw site zal moeten toegang tot op een of andere manier. Om te beginnen zullen alle HTML pagina ‘ s een doctype hebben. Je zou dat in dit bestand specificeren. Daarnaast hebben alle pagina ‘ s een openende html tag, een head sectie en een openende body tag. Dit kan allemaal in de header.php bestand., Laten we snel een aantal van deze dingen die alle webpagina ‘ s zou gebruik maken van toe te voegen. We zullen hier ook gebruik maken van een paar nieuwe WordPress functies. Dat zijn language_attributes (), bloginfo () en body_class ().

header.php

als we de pagina herladen en dan de bron van de pagina in onze browser bekijken, kunnen we een idee krijgen van wat deze functies doen. We benadrukken de lijnen die output hebben die uit deze functies kwamen hieronder:

opnieuw zien we het zeer liberale gebruik van WordPress functies bij het ontwikkelen van uw eigen thema ‘ s in WordPress., In feite hebben we nog helemaal geen aangepaste code geschreven. We zijn gewoon te leren wat de verschillende WordPress functies ons kunnen bieden, en dan zetten ze om te werken in onze aangepaste thema.

met inbegrip van wp_head ()

wp_head() is een soort van een speciale functie wanneer u werkt met WordPress thema ‘ s. Het is niet zo eenvoudig als alle anderen die we tot nu toe hebben bekeken. Het doel van deze functie is om de uitvoer af te ronden in de <head> sectie van uw header.php bestand., In feite is het de bedoeling om vlak voor het sluiten van de </head> tag te gaan. Dit wordt belangrijk wanneer u begint met het toevoegen van verschillende plugins aan uw site. Het print scripts of gegevens in de head tag op de voorkant. Het is een goede gewoonte om altijd wp_head() in uw thema ‘ s op te nemen, omdat veel andere plugins op deze hook kunnen vertrouwen om stijlen, scripts of meta-elementen toe te voegen aan het <head> gebied van de site. We zullen het hier als zodanig toevoegen:

header.php

voettekst invullen.,php

We zijn klaar met het toevoegen van de basis van wat we nodig hebben in de header.php bestand. Laten we nu gaan en rond de voettekst.php bestand. Er zijn een paar dingen die we moeten doen. Onthoud dat in onze kop.php-bestand we hebben het openen van html en body tags. Die moeten op een gegeven moment gesloten worden. Voettekst.php-bestand is een perfecte plek om dat te doen. Dus we zullen het sluiten van </html> en </body> tags toevoegen naast het aanroepen van de functie wp_footer ().
voettekst.,php

Wijzigen van Site-Informatie In De WordPress Dashboard

U vraagt zich misschien af waarom moesten we gebruik maken van al deze mooie functies om te bouwen tot ons thema. Bijvoorbeeld, toen we wilden een lijst van de naam en slogan van onze site, maakten we gebruik van de functie bloginfo() passeren parameters van naam en beschrijving., De reden hiervoor is omdat u over het algemeen deze waarden nooit hard wilt coderen in uw site. Dit is informatie die kan veranderen. Bovendien, als u uw thema beschikbaar voor het publiek, zullen ze hun eigen naam en slogan voor hun website. Ze moeten in staat zijn om gewoon een bezoek aan de admin dashboard in WordPress en hun algemene instellingen bij te werken om te zien dat deze gegevens automatisch bevolken.

het koppelen van de sitetitel naar de Homepage

De meeste thema ‘ s bieden de mogelijkheid om op de titeltekst van de website te klikken en de gebruiker naar de homepage van de site te leiden., Op deze manier, het maakt niet uit waar de gebruiker kan zijn op de site, ze kunnen altijd klikken op die titel tekst en ga direct terug naar de hoofdpagina van de website. Laten we die link nu toevoegen in header.php.

Stap 7: een functie toevoegen.php-bestand naar uw thema

Op dit punt hebben we vier bestanden in ons aangepaste thema. Dat is index.php, stijl.css, koptekst.php, en footer.php. Waarschijnlijk het volgende belangrijkste bestand dat we nodig hebben zijn de functies.php bestand.

De functies.php-bestand in WordPress doet veel dingen voor uw thema. Het is het bestand waar u code plaatst om het standaardgedrag van WordPress te wijzigen., Je kunt bijna denken aan de functies.php als een vorm van een plugin voor WordPress met een paar belangrijke punten om te onthouden:

• vereist geen unieke Header tekst
• opgeslagen in de map die uw thema bestanden bevat
• voert alleen uit als in de huidige map van het thema
• geldt alleen voor het huidige thema
• kan PHP functies, WordPress functies, of aangepaste functies

een ding dat we nodig hebben in ons thema is een betere styling! Laten we een functie creëren in onze functies.php-bestand om de stijl op te nemen.css-bestand in ons thema., Hier is hoe we dat doel kunnen bereiken.

Dit stukje code zal het stylesheet van ons aangepaste thema bevatten of actief maken. Nu vraag je je misschien af waarom we een aangepaste functie gebruiken, als het lijkt alsof we net zo gemakkelijk handmatig naar het stylesheet zelf in de koptekst kunnen linken.php bestand. Nou, dit komt neer op het doen van een beetje meer werk vooraf voor een groter rendement op uw inspanning later. Als thema ‘ s krijgen complexer en meer activa worden toegevoegd, zult u blij zijn om deze ene functie die al het zware werk voor u kan verwerken.,

nu is het tijd om dingen er wat mooier uit te laten zien. Laten we eerst een wrapping <div> toevoegen met een klasse van container. De opening <div> zal in header staan.php, terwijl de afsluitende <div> in de voettekst zal staan.php. We wikkelen ook de post output in index.php met een <article> tag die een klasse post heeft. Dit zal ons klassen te richten in onze stijl te geven.,css-bestand, zodat we Pagina breedte onder andere kunnen instellen. We zullen ook wat betere styling toevoegen aan stijl.css in deze stap.

Stap 8: Voeg wat stijl toe aan uw thema

header.php
Het toevoegen van een opening <div> aan de header.php bestand.

voettekst.php
Een afsluitende </div> toevoegen aan de voettekst.php bestand.

index.php
De postuitvoer wordt afgesloten met een <artikel> tag

stijl.,CSS
ten slotte voegen we een aantal verschillende verbeteringen in de CSS-stijl toe om het thema er wat mooier uit te laten zien.

wanneer we onze test website nu bezoeken in de browser, kunnen we zien dat het WordPress thema dat we stap voor stap hebben ontwikkeld in deze tutorial ziet er vrij goed uit!

WordPress Theme Development Tutorial Stap voor stap samenvatting

laten we bekijken alles wat we hebben geleerd in deze eenvoudige stap voor stap WordPress Theme tutorial voor beginners., We hebben geleerd hoe we onze eerste aangepaste thema in WordPress te maken door het maken van onze eigen map in de zijkant van de map thema ‘ s van onze WordPress installatie. In deze map hebben we verschillende bestanden toegevoegd die overeenkomen met verschillende secties van uw website. In onze tutorial, we zijn begonnen met de kale minima die u moet hebben in een WordPress thema. In de toekomst zou u veel meer bestanden aan deze map toevoegen dan wat we hebben behandeld. Laten we elk bestand bekijken dat we in deze tutorial hebben gemaakt en wat ze voor ons hebben gedaan.

• stijl.,css dit bestand is waar u een aantal CSS opmerkingen toe te voegen, zodat WordPress weet wat informatie over uw aangepaste thema. Het houdt ook de aangepaste CSS-styling die u van toepassing zal zijn op uw thema.
• index.php dit bestand controleert de html en de Algemene uitvoer van uw thema. Het is het belangrijkste bestand dat wordt gebruikt voor het uitvoeren van gegevens op uw startpagina.
• header.,php Kunt u geeft een gebied aan te houden van belangrijke informatie over uw website in de <kop> regio, aangevuld met het openen van <html>, <inhoud>, en ,<div class=”container”> – tags.
• voettekst.php de voettekst sluit alle openingstags die u hebt opgegeven in het koptekstgebied, naast het geven van u een plaats om de functie wp_footer() aan te roepen.
• functies.,php stelt u in staat om functies aan te roepen, zowel PHP als ingebouwde WordPress, en om uw eigen functies te definiëren om het standaardgedrag van WordPress

te veranderen, dus daar heb je het! We waren in staat om een volledig functionerende aangepaste WordPress thema te creëren met slechts 5 bestanden. Dit geeft ons de basis niveau kennis om meer geavanceerde WordPress thema ‘ s en functies te bouwen. Goed Gedaan!