Het ontwikkelen van uw eerste WordPress-thema dag 1 van 3

Thema's maken een groot deel uit van wat WordPress net zo populair maakt als het is, en in deze driedelige serie zullen we u stap voor stap door een proces leiden dat resulteert in een voltooid, functionerend WordPress-thema. Geen voorkennis vereist, dit is de perfecte plek om te starten als WordPress helemaal nieuw voor u is!

Op zoek naar een gratis WordPress-thema om snel van start te gaan? We hebben een paar geweldige om uit te kiezen!


WordPress Thema's

Welkom bij de eerste aflevering in deze driedelige serie over hoe je kunt beginnen met het maken van thema's voor WordPress. Thema's zijn een van de beste dingen van WordPress en het gemak van het vinden, installeren en wijzigen ervan is een van de factoren die WordPress hebben geholpen om de gigant te worden die het vandaag is - meer dan 20 miljoen blogs worden gehost op WordPress.com alleen.

Van de miljoenen mensen die WordPress gebruiken, is het waarschijnlijk dat een grote meerderheid van die gebruikers niet weet hoe een websitesjabloon moet worden gemaakt, laat staan ​​dat een WordPress-thema moet worden gemaakt. Het is ook vrij waarschijnlijk dat veel WordPress-gebruikers niet bekend zijn met termen als 'FTP' of 'Uploaden'. Dankzij de ingebouwde themazoekmachine en het thema-installatieprogramma hoeven gebruikers niet de technische details of aspecten van hoe thema's werken te weten of hoe ze deze naar hun hostingaccount kunnen uploaden.

Het is dit gebruiksgemak van thema's die van WordPress het robuuste blogplatform maken dat het is, en niet alleen persoonlijke blogs en dagboeken aandrijven, maar ook enkele van de grootste technologie- en nieuwsblogs op het internet van vandaag. Er zijn zelfs hele marktplaatsen die afhankelijk zijn van WordPress-thema's, zoals ThemeForest, die elk jaar miljoenen dollars verdienen.

We hebben dus vastgesteld dat thema's belangrijk zijn, maar dit weet u waarschijnlijk al. Als je aan het lezen bent, is het duidelijk dat je aan boord wilt springen en je eigen thema's voor je eigen persoonlijke gebruik wilt maken, met anderen wilt delen of op een marktplaats of iets dergelijks wilt verkopen. Om ervoor te zorgen dat uw thema een impact heeft of populair wordt, is het belangrijk om de samenstelling van een goed thema te begrijpen.


Wat maakt een goed thema?

Een WordPress-thema is gemakkelijk samen te kloppen, maar een goed thema vereist planning, voorbereiding en veel moeite. Veel mensen verdienen een goed leven met de verkoop van WordPress-thema's omdat ze weten wat een goed thema is en ze weten hoe ze die kennis in de praktijk kunnen brengen - een talent dat je hoopt te verwerven.

Deze serie is gericht op het nemen van een bestaand, gecodeerd HTML / CSS-ontwerp en het converteren naar een levend, ademend WordPress-thema. Het is duidelijk dat dit betekent dat je een ontwerp nodig hebt dat je kunt converteren, maar maak je geen zorgen als je er geen hebt, omdat we een eenvoudig exemplaar kunnen bieden om in deel twee te oefenen..

Omdat je je thema's ontwerpt zonder onze helpende hand, laten we eens kijken naar enkele dingen die de bestverkopende thema's onderscheiden van het standaard freebie-thema dat niet veel tijd krijgt..

Algemeen ontwerp

Dit punt is een beetje moeilijk te beschrijven, maar een thema moet er goed uitzien door moderne ontwerpstandaarden. Wat ik hiermee bedoel is dat het belangrijk is om de trends en verwachtingen van een modern webdesign te kennen. Tegenwoordig zijn lettertypevervanging, CSS3-overgangen, transparante vakken en 'lawaaierige achtergronden' de online mode, maar 10 jaar geleden was het nog steeds gebruikelijk om cursor-trails, geanimeerde gifs en vlammende tekst te hebben?

Hoevelen van jullie hebben gewoon een rilling gemaakt? Natuurlijk vallen al deze trucs en trends buiten het bereik van deze serie en het is aan jou om te beslissen over de aantrekkelijkheid van een ontwerp. Het is altijd een goed idee om community-feedback te krijgen van websites zoals Dribbble of Forrst, omdat ze de thuisbasis zijn van veel gerenommeerde thema-ontwerpers en ontwikkelaars.

Widget-ondersteuning

Een van de meest populaire thema's is hun ondersteuning voor widgets. Voor degenen die al die jaren onder een rots hebben geleefd; widgets zijn kleine, aanpasbare add-ons die vaak worden weergegeven in de zijbalk of het voetgedeelte van een thema. Widgets zijn een andere uitstekende uitbreidingsmogelijkheid voor WordPress die het zo populair maken.

Veel thema's worden geleverd met aangepaste widgets die speciaal voor dat thema zijn gemaakt. WordPress wordt ook geleverd met een set ingebouwde standaardwidgets zoals een kalender, zoekvak of archief. Via het dashboard is het mogelijk om aan te passen in welke volgorde widgets worden weergegeven en zelfs in welk gebied (zijbalk, voettekst of ergens anders) ze verschijnen.

Widgets zijn geweldig omdat ze gebruikers een geweldige manier bieden om functionaliteit aan een thema toe te voegen zonder een regel code te hoeven aanraken. Widgets gebruiken (meestal) gestandaardiseerde CSS-klassen, wat betekent dat u zich niet hoeft voor te bereiden op elke gemaakte widget, u hoeft alleen enkele eenvoudige regels op te stellen die ze allemaal moeten volgen.

Opmerkingen en Trackback-ondersteuning

Een van de meest voorkomende fouten die ik veel nieuwe WordPress-themaontwikkelaars zie, is trackbacks vergeten en het reactiesysteem niet goed ondersteunen. Hoewel niet elke blog trackbacks gebruikt, is het belangrijk om te beseffen dat dit voor veel blogs een dealbreaker kan zijn do trackbacks weergeven.

Voor degenen die onbekend of niet helemaal op de hoogte zijn van wat trackbacks zijn; ze zijn een prima manier om inkomende links op te bouwen en te netwerken met andere bloggers. Maar ze zijn anders dan opmerkingen.

Een nieuw ontwikkelaarsidee van trackback-ondersteuning kan inhouden dat eenvoudigweg trackbacks gemixt worden met opmerkingen - iets dat vermeden moet worden om rommel in de reacties te voorkomen. Een gebruiker die de opmerkingen naar een bericht leest, moet door een mix van pings, trackbacks en opmerkingen bladeren om te vinden wat ze zoeken, wanneer het gemakkelijk is om dit soort gedrag te voorkomen.

Sinds WordPress 2.7 zijn geneste opmerkingen een kernfunctie. Geneste opmerkingen stellen gebruikers in staat niet alleen te reageren op het bericht of de pagina, maar ook op een opmerking te reageren, net zoals op de Tuts + -sites (zoals hierboven weergegeven). Geneste opmerkingen zijn een beetje tricker om te implementeren dan de meeste andere functies, maar zijn een fantastische functie wanneer ze correct worden uitgevoerd en kunnen de waarde van een thema enorm verbeteren, aangezien geneste opmerkingen activiteit van reacties bevorderen - iets waar bloggers graag voor hebben.

Gravatars

Wereldwijd erkende avatars zijn een geweldige functie om aan elk thema toe te voegen, ik ben er zeker van dat u ze waarschijnlijk allemaal kent, maar voor degenen die niet bekend zijn met de term; een gravatar is een avatar die is gekoppeld aan je e-mail - dus als je een blog een opmerking geeft, toont deze een avatar die je hebt ingesteld.

Gravatars zijn heel gemakkelijk te implementeren, zolang ze maar goed in je ontwerp zijn geplaatst (niet als een afweging). Hoewel sommige thema's beter werken zonder, geven gravatars in het algemeen gebruikers een nauwere band met een blog omdat het een beetje persoonlijkheid toevoegt aan opmerkingen.

Aanbevolen berichten en Avatars

Als je naar een populaire marktplaats gaat zoals ThemeForest en de populairste thema's van de week doorleest, zul je merken dat ze bijna allemaal een of andere vorm van postavatar hebben. Laten we een kijkje nemen naar een van de meest populaire thema's beschikbaar op ThemeForest - Opvallend:

Elke post heeft een afbeelding met een ingestelde breedte en hoogte die fungeert als een avatar. Door een postavatar op te nemen, helpen de afbeeldingen de tekst te doorbreken en de pagina een goede flow te geven. Natuurlijk hoeven avatars niet zo te zijn, hier is een andere manier om postavatars weer te geven die gebruikt worden op onze zustersite Nettuts +:

Een andere geweldige manier om berichten weer te geven, is door een gedeelte met aanbevolen berichten te gebruiken. Over het algemeen komen deze vaker voor in tijdschriftstijlthema's (we zullen er geen gebruiken in ons persoonlijke thema) maar geven het thema een geweldig toegevoegd niveau van functionaliteit. Hier is een voorbeeld van een populair thema:

Zoals u kunt zien, hebben we bovenaan een thema een grote afbeelding met daarop een titel en een fragment of beschrijving van de post / pagina waar het naar toe leidt. Uitgelichte berichten kunnen de meest populaire berichten van de maand zijn, of alleen de nieuwste berichten. Ze zijn vaak een beetje overweldigend voor persoonlijke blogs, dus het is geweldig om ze als een optie aan te bieden in plaats van als een verplicht onderdeel van het ontwerp. Hoe beter een thema kan worden aangepast, hoe groter de kans dat het populair wordt.

Aangepaste berichttypes

Natuurlijk is niet alles wat op een blog wordt gepost slechts een blogpost. Bloggers willen misschien ook gewoon een of andere vorm van media delen, zoals een vimeo, YouTube-video of -audio. Een fantastisch voorbeeld van dit soort integratie is in een recent thema genaamd Gridlocked:

Gridlocked gebruikt een aangepast berichttype (in dit geval het berichttype is een Vimeo-bericht) dat een vimeo prachtig in het thema insluit. Enkele van de andere opties die het thema ondersteunt zijn YouTube-video's, een audiospeler en postavatars. Alle (met behulp van hun respectieve aangepaste berichttype) zien er geweldig uit op de volledige breedte zonder marge of opvulling bovenaan de lay-out.

Aangepaste postsoorten zijn zowel effectief als eenvoudig te implementeren, de blogger specificeert eenvoudig een stukje meta-informatie, het thema neemt deze informatie en beslist welke code moet worden weergegeven.


De componenten van een thema

Zoals u vast wel weet, zijn thema's samengesteld uit veel verschillende bestanden, die elk hun respectievelijke rol spelen in de weergave of functionaliteit van een thema. Laten we een paar van de meest voorkomende bestanden bekijken die WordPress standaard herkent en waarmee we te maken hebben. De meeste bestanden verklaren zichzelf alleen door hun naam:

header.php

Gewoonlijk bevat dit bestand ons thema tot en met , het speelt ook de rol van de functie wp_head (), een van de meest essentiële haken in WordPress.

sidebar.php

Een optioneel bestand met de naam get_sidebar (), u kunt dit bestand gebruiken voor een zijbalk, navigatie of iets dergelijks. Dit is ook waar u gewoonlijk de code zult opnemen om toe te staan ​​dat widgets worden uitgevoerd, als uw thema dit toestaat.

footer.php

Een makkelijk te raden onderdeel, dit is waar het thema zich opstapelt en ook waar u een tweede gebied kunt registreren voor weergave van widgets. Natuurlijk kunt u widgets weergeven waar u maar wilt, maar zijbalk en voettekst zijn de meest voorkomende.

page.php

Wordt gebruikt om een ​​enkele pagina weer te geven - niet te verwarren met een bericht.

single.php

Het postbestand, gebruikt om een ​​enkele blogpost weer te geven, maar zeer vergelijkbaar met page.php in code.

index.php

Zoals je waarschijnlijk wel kunt raden, indexeert het stuk van het werk voor een blog; weergeven van berichten, zoekresultaten, serveren van foutmeldingen, enzovoort.

functions.php

Het functiesbestand is mogelijk nieuw voor u. Dit is waar themaspecifieke functies worden opgeslagen - meestal de functies om widget-ready-gebieden te registreren.

comments.php

Geeft een lus weer die lijkt op index.php en die itereert via opmerkingen. Dit is ook waar trackbacks, geneste opmerkingen en andere gerelateerde functionaliteit worden uitgevoerd.

Een thema kan zo veel of zo weinig themabestanden gebruiken als gewenst, maar dit zijn de bestanden die voor bijna elk thema het meest voorkomen. De structuur van het themabestand is in wezen de beslissing van de ontwikkelaar van het thema - er kunnen bijvoorbeeld vimeo.php, youtube.php en audio.php zijn die hun respectievelijke berichttypen weergeven in plaats van dat alle code is gebundeld in één pagina.php of single .php.


Uw thema aanpasbaar maken met een optiespagina

Een pagina met dashboardopties waarmee u een thema eenvoudig kunt aanpassen, kan een dealmaker zijn. Een overgrote meerderheid van populaire thema's heeft een soort optiescherm dat de behoefte van de blogger om ooit code of grafische bestanden te wijzigen, moet verlichten. Dit is een geweldig verkoopargument, omdat niet elke blogger die je nieuwe thema gebruikt weet dat # 000000 zwart betekent.

Optiepagina's kunnen een eenvoudige lay-out van één pagina zijn met een paar selectievakjes, tekstgebieden en schuifregelaars, of ze kunnen een heel admin-paneel in het dashboard zijn met meerdere pagina's om veel verschillende elementen van een thema te besturen. Doorgaans kunnen op optiespagina's elementen worden aangepast zoals:

  • Kleuren schema
  • Logo (leesbare tekst of afbeelding)
  • favicon
  • Details voor social media-streams (zoals Twitter-gebruikersnaam)
  • Verschillende stijlopties
  • Veel meer

Het is onmogelijk om alle opties op te sommen, aangezien elk thema anders is dan de vorige en verschillende optionele extra's vereist. Hoewel een klein persoonlijk thema misschien geen volledige optiespagina vereist, is het belangrijk om te onthouden dat een meerderheid van bloggers niet technisch onderlegd is.


Volgende week

Volgende week gaan we meteen naar onze codebewerkers en beginnen we aan een eenvoudig, persoonlijk WordPress-thema. Je bent meer dan welkom - aangemoedigd - om je eigen lay-out te gebruiken die je wilt converteren naar een WordPress-thema, maar maak je geen zorgen als je er geen hebt, omdat er een eenvoudige lay-out wordt geboden.

De vereisten voor de volgende week zijn basisvaardigheden van eenvoudige HTML, enige basiskennis van PHP en - idealiter - een goed begrip van CSS. U hoeft niets te weten over WordPress-thema's omdat we vanaf nul beginnen!