WordPress Tutorial: het ontwikkelen van een WordPress Thema vanaf nul

u kent HTML, CSS en JavaScript. Je kunt mooie websites maken. Misschien heb je “ve gehoord over WordPress, maar zijn” T helemaal zeker hoe het uit te voeren, of waarom je het nodig zou kunnen hebben. Misschien een klant gevraagd voor WordPress, maar je ” bent niet echt bekend met het. Misschien heb je er eerder mee gewerkt, maar weet je niet hoe je je eigen thema vanaf nul moet maken. Wat het geval ook is, dit artikel is voor jou.

vereisten

alles wat u nodig hebt om te starten is een website. Elke website is voldoende., U don”t nodig om een PHP kennen, of hebben een eerdere ervaring met WordPress. Uw website kan worden aangepast, of gebouwd op Bootstrap / een ander kader.

u moet weten hoe u een lokale serveromgeving kunt instellen. Gelukkig, als je niet weet hoe, schreef ik een kort, lief artikel over het opzetten met een. Het duurt maar een paar minuten, dus ga je gang en doe dat eerst.,

doelen

• installeer WordPress lokaal
• neem een bestaande HTML-website en converteer deze naar een aangepast WordPress-thema

delen

Ik heb extra tutorials gemaakt om aan deze toe te voegen.

wat kan WordPress voor mij doen?

WordPress werd oorspronkelijk gebouwd als een blogging platform, maar is nu wat bekend staat als een CMS – Content Management Systeem.

elke website waarop u updates wilt maken, kan profiteren van een CMS. Als het ‘ s een blog, u wilt in staat zijn om berichten toe te voegen. Als het ’s een restaurant website, u wilt in staat zijn om toe te voegen en bij te werken menu’ s., Als het ” is een bedrijf website, u wilt in staat zijn om prijzen bij te werken, pakketten, en ga zo maar door.

als iemand je betaalt om een website te maken, is dat omdat ze niet weten hoe of geen tijd hebben om met code om te gaan. Het moet zo eenvoudig mogelijk zijn voor de klant. WordPress kan helpen met dit alles en meer.

aan de slag: het ontwerp

Ik kan niet genoeg benadrukken hoeveel het niet uitmaakt wat u gebruikt voor uw ontwerp – Bootstrap, Foundation, Skeleton, custom CSS. Het punt is dat je een website hebt en je houdt van hoe het eruit ziet.,

Ik ga een bestaande eenvoudige starter template nemen en converteren naar WordPress voor dit artikel. Hier is de Bootstrap Blog Template. Dit is een van de standaard thema ’s op Bootstrap’ s officiële website.L

Ik heb handig een GitHub repository opgezet van de code die je naar een lokale directory kunt Pullen en met mij kunt volgen.

weet u niet hoe Git/GitHub te gebruiken? Je kunt dat verhelpen door mijn aan de slag met Git artikel te lezen., Als je gewoon aan de slag wilt zonder met Git te werken, maak dan gewoon een directory aan op je computer met index.html en blog.css en jij zijn klaar om te gaan.

WordPress installeren

Er zijn tal van artikelen beschikbaar over hoe WordPress te installeren. Ze laten het proces lang en eng lijken, en de eerste keer dat je het doet, kan het zeker een beetje verwarrend zijn. Hier is de officiële gids voor het krijgen van set-up.

omdat we een lokale server en MAMP gebruiken, Weet ik al dat je alle vereisten hebt om te installeren, en FTP is niet nodig.,

Maak een plek voor WordPress om te leven

Maak een lege map op uw computer ergens, en wijs uw localhost of virtuele host naar die map.

Download WordPress

Ga naar de WordPress downloadpagina en download de nieuwste versie van WordPress.

Unzip WordPress

Unzip WordPress en plaats de inhoud van de map in uw map.

Maak een database

Update 2017: de nieuwste versies van MAMP worden niet geleverd met phpMyAdmin voorgeïnstalleerd., In plaats daarvan, u “ll Downloaden SequelPro op een Mac, of SQLYog op Windows, beide gratis programma’ s. Om de database na het downloaden in te voeren, logt u in op de host locahost (of 127.0.0.1), met gebruikersnaam root en wachtwoord root. De rest van de instructies zal hetzelfde zijn.

Als u nu naar uw lokale server in de browser gaat, ervan uitgaande dat de servers aan staan en alles in de juiste richting is gericht, krijgt u dit bericht.

u zult leren van dat bericht te houden., Klik in MAMP op Open WebStart page. Vind dit bovenaan:

klik op phpMyAdmin. Klik op Databases > create database. Ik ga de mijne startwordpress noemen. Dat is alles wat je hoeft te doen in phpMyAdmin!

configureer WordPress

Goed, laatste stap. Zoek wp-config-sample.php in uw map.

Het zal er precies zo uitzien.

wees niet nerveus. Wijzig de naam van de database, de gebruikersnaam en het wachtwoord van deze:

naar dit:

zoek Dit:

en verander het in letterlijk alles met cijfers en letters. Voor de veiligheid. xyz_ of 735hjq9_, enz.

sla het bestand op als wp-config.php in je directory.

nu, wanneer u terug gaat naar uw website en ververst, zou u dit scherm moeten zien.

u moet een paar dingen invoeren – gebruikersnaam, wachtwoord, e-mailadres, en dan bent u klaar. Gefeliciteerd, je hebt met succes WordPress geïnstalleerd!, U wordt doorgestuurd naar /wp-login.php, waar u uw referenties kunt invoeren om in te loggen op de backend. Als u naar uw belangrijkste URL, ziet u de standaard WordPress blog en “Hallo, wereld!” post.

het maken van uw eigen thema

buiten het configureren van WordPress, zal bijna alles wat je doet in WordPress in de wp-content map; al het andere is kerncode, en je”t wilt knoeien met dat.

vanaf dit moment worden de WordPress Codex en StackOverflow je beste vrienden., Ik “ll laten zien hoe je een basisthema te bouwen, maar hoe u ervoor kiest om uw thema’ s aan te passen dan dat is helemaal aan jou.

volg in Finder het pad van wp-content > thema ’s om bij uw map thema’ s te komen. Je ziet de WordPress standaard thema ‘ s – twentyfifteen, twentyfurteen, twentythirteen – en index.php. Maak een nieuwe map voor uw thema; ik noemde mijn startwordpress.

Een WordPress thema heeft slechts twee bestanden nodig om te bestaan – stijl.css en index.php.

maak stijl aan in uw eigen themamap.css., Het bevat gewoon een opmerking die WordPress waarschuwt dat er een thema bestaat hier. Wijzig de naam, auteur, beschrijving, enzovoort.

herinner je de Bootstrap blog broncode van eerder in het artikel? Verplaats deze twee bestanden – index.html en blog.css – naar uw eigen themamap. Hernoem index.html naar index.php.

uw thema is nu aangemaakt. Ga naar het WordPress dashboard en klik op Appearance > Themes., U ziet het thema in de collectie met alle standaard thema ‘ s.

Activeer het thema en ga terug naar uw hoofd-URL. Ja, zo simpel is het. Je hebt technisch al een aangepast thema gemaakt. Natuurlijk doet het niets meer dan wat een statische HTML-site kan doen, maar je bent nu helemaal ingesteld.

Er is één ding dat je zou kunnen opmerken – blog.css wordt niet geladen. Bootstrap “s belangrijkste CSS en JS bestanden worden geladen via CDN, maar mijn lokale CSS bestand isn” t Laden. Waarom?,

mijn lokale URL kan startwordpress.dev zijn, maar het”s echt pulling from wp-content/themes/startwordpress. Als ik link naar blog.css met <link href="blog.css"> probeert startwordpress.dev/blog.css te laden, wat niet bestaat. Leer nu dat je nooit kunt linken naar iets in een WordPress pagina zonder wat PHP.

opmerking: Chrome staat niet langer.dev lokale URL ‘ s toe. Dit voorbeeld zal .dev gebruiken, maar u kunt .test of iets anders van uw keuze gebruiken.,

gelukkig is dit gemakkelijk te verhelpen. Er zijn een paar manieren om dit te doen, maar ik laat je de makkelijkste manier zien om te beginnen.

zoek waar u naar het CSS-stylesheet in het hoofd van de index hebt gelinkt.php. Zo ziet het er nu uit, maar we moeten het veranderen.

We moeten het vertellen om dynamisch te linken naar de map thema ‘ s. Vervang de bovenstaande code door de onderstaande code.

Als u de pagina herlaadt, zult u zien dat CSS nu wordt ingeladen., Als het niet wordt geladen, voer dan een harde verversing uit. Het concept zal hetzelfde zijn voor afbeeldingen, javascript, en de meeste andere bestanden die je hebt in de map thema ‘ s, met uitzondering van PHP-bestanden.

Als u niet in staat was om de CSS te laden, klik dan op “View Source” en zoek het pad van uw CSS-bestand in de code. Het zou startwordpress moeten zijn.dev/wp-content / themes / startwordpress / blog.css. Zorg voor blog.css wordt opgeslagen op de juiste locatie.

merk op dat dit niet de meest correcte manier is om scripts in uw site te laden., Het is het makkelijkst te begrijpen en het werkt, dus het is hoe we het nu gaan doen.

uw pagina opdelen in secties

Op dit moment is alles in index.php. Maar natuurlijk willen we dat de koptekst, voettekst en zijbalk op alle pagina ‘ s hetzelfde zijn, toch? (Misschien hebben sommige pagina ‘ s een kleine aanpassing, maar dat komt later.)

We gaan index delen.php in vier secties-header.php, footer.php, zijbalk.php en inhoud.php.

Hier is de oorspronkelijke index.php. Nu beginnen we te snijden en plakken.,

alles van <!DOCTYPE html> tot de hoofdblogheader zal in het headerbestand staan. De header bevat meestal alle benodigde head stijlen en de top navigatie naar de website. De enige toevoeging aan de code is het toevoegen van <?php wp_head(); ?> vlak voor het sluiten </head>.

De meeste websites, in het bijzonder blogs, hebben een side area Voor het opnemen van inhoud zoals Archieven, tags, categorie, advertenties, en wat al niet. (Inhoud verwijderd voor beknoptheid.)

als de zijbalk is waar alle secundaire informatie naartoe gaat, is de inhoud waar alle artikelen en hoofdinhoud van de website naartoe gaan. (Inhoud verwijderd voor beknoptheid.)

Index

het indexbestand zou nu vrij schaars moeten zijn. In feite zou het alleen dit moeten zijn:

nu gaan we alles weer toevoegen. Hier “s uw nieuwe index.php.

zelfs als je ” ve nooit eerder PHP gebruikt, deze code is allemaal zeer vanzelfsprekend., get_header();, get_sidebar(); en get_footer(); zijn alle functies die naar hun respectievelijke zoeken .php bestanden en voeg de code. Natuurlijk gaan ze allemaal in hun eigen <?php ?> tags om de server te laten weten dat ze als HTML moeten worden verwerkt. De inhoudsfunctie is iets anders, maar doet hetzelfde.

Als u uw URL opnieuw laadt, wordt uw hele site nu geladen, net als voorheen. U zult een bovenste balk merken als u bent ingelogd op de back-end.,

Main Settings

voordat we berichten en pagina ‘ s binnenhalen, moeten we enkele hoofdinstellingen van WordPress configureren. Bijvoorbeeld, mijn titel op dit moment is “de Bootstrap Blog”, hard gecodeerd in HTML. Ik wil dat de <title> en <h1> van mijn site kan worden gewijzigd via de back-end.

ga in uw dashboard naar Settings > General. Zet je Titel.

In header.,php, verander de inhoud van de title tag en main H1 tag naar deze code:

en de beschrijving naar deze.

ten slotte wil ik dat de titel me altijd terugbrengt naar de hoofdblogpagina. bloginfo("wpurl"); is de code die dat doet.

Hier is de volledige code voor het geval u in de war bent.

we hebben eindelijk de eerste dynamische verandering in de pagina gemaakt. De front-end moet weerspiegelen wat u in uw instellingen.,

ga nu naar Instellingen > Permalinks. Standaard is WordPress ingesteld op dag en naam, dat is een echt lelijke URL-structuur. Klik op de naam van de Post en de wijzigingen toe te passen.

de lus

het meest opwindende deel is de mogelijkheid om dynamisch inhoud in te voegen, en in WordPress doen we dat met de lus. Het is de belangrijkste functie van WordPress. Al uw inhoud wordt gegenereerd via een lus.

in het dashboard, als u op berichten klikt, ziet u een ” Hallo, wereld!”post daar standaard., Ons doel is om die post weer te geven in de blog.

de lus zelf is vrij eenvoudig.

het verklaart zichzelf – als er berichten zijn, terwijl er berichten zijn, Toon de post. Alles binnen de lus zal herhaald worden. Voor een blog, Dit zal de post titel, de datum, de inhoud, en opmerkingen. Waar elke individuele post moet eindigen is waar de lus zal eindigen. We gaan de lus toevoegen aan index.php.

Hier is uw nieuwe indexbestand.

index.php

het enige in je lus is inhoud.,php, die de inhoud van een enkele post zal bevatten. Dus open content.php en verander de inhoud als volgt:

Awesome. Laten we de zijbalk ook dynamisch maken. Er zou een beschrijving en archieflijst in de zijbalk moeten staan. In het dashboard, ik”m gaat mijn gebruikersbeschrijving bewerken om te zeggen “Front-end webontwikkelaar en professionele nerd.”

Verwijder alle <li>s Onder Archieven en verander het in deze code.

voor mijn beschrijving ga ik metadata ophalen van mijn gebruikersaccount.

nu wordt deze inhoud ook dynamisch binnengehaald.

Hier is mijn blog tot nu toe.

Menu en pagina ‘ s

Oké. Nu weten we hoe je een blog te maken, en bewerken sommige sidebar inhoud. Slechts een belangrijk aspect van deze pagina blijft – de navigatie, en waar het leidt. Goed, er zijn twee belangrijke aspecten van WordPress-berichten en pagina ‘ s., Ze lijken erg op elkaar omdat ze allebei de lus gebruiken. Echter, pagina ’s zijn waar je inhoud die isn”t een blog post. Dit is waar het CMS aspect van WordPress komt-elke individuele pagina kan zo aangepast als je wilt.

in het dashboard heb ik een pagina toegevoegd zodat we er twee kunnen zien. Eerst gaan we de navbar bewerken zodat de links naar de pagina ‘ s leiden. Terug in kopbal.php, zoek en verander deze code.

header.php

wp_list_pages(); zal alle pagina ‘ s in een ongeordende lijst weergeven., "title_li=" vertelt de code om geen” Pages ” titel toe te voegen voor de lijst. Helaas voor ons ziet dit er verschrikkelijk uit; de originele blog.css heeft de koppelingen gecodeerd in a tags, niet li tags.

gelukkig is dit een zeer eenvoudige oplossing. Ik ga gewoon de stijl van de ene op de andere toepassen. Voeg dit toe aan blog.css

blog.css

nu moet het correct worden weergegeven., Echter, als de CSS is niet van toepassing, bekijk dan de bron van uw HTML-uitvoer en ontdek wat de URL van uw CSS is. Het moet startwordpress.dev/wp-content/themes/startwordpress/blog.csszijn. Zorg ervoor dat je een harde refresh doet.

veel beter.

pagina ‘s

Ik wil dat de pagina’ s een andere opmaak hebben dan de blogberichten; Ik wil geen zijbalken erop. Zie index.php als de blog-index en page.php als de pagina-index., Ik “m going to create page.php, die zeer vergelijkbaar zal zijn met de index, behalve een volledige 12-brede raster in plaats van een 8-brede inhoud en 4-brede zijbalk.

page.php

wanneer ik op mijn voorbeeldpagina klik, is de lay-out nu anders dan de lay-out van de blogpost.

conclusie

Er is veel, veel meer te leren over WordPress. Ik hoop van harte dat dit artikel een wereld van mogelijkheden voor u heeft geopend. Nu weet je dat elke website kan worden omgezet in een WordPress thema – zonder gebruik te maken van plugins, widgets, of iemand anders ‘ s thema.,

als er iets niet duidelijk was, laat het me dan weten. Als ik ” ve gepost een schaamteloos onjuiste informatie, laat het me weten! Alle feedback wordt zeer gewaardeerd! Mijn doel was om het artikel Ik wou dat ik had voor me toen ik voor het eerst begon te leren hoe je WordPress en PHP te gebruiken.

Als u wilt weten hoe u deze lokale instantie kunt migreren naar een live server, bekijk dan deze kleine tutorial: