Share
Klaar om te leren hoe je je eerste WordPress-thema maakt? Deze tutorialserie zal een stapsgewijze benadering volgen, gebruikmakend van een "leerthema" dat liefkozend bekend staat als WordPress Trainingswielen, om het onderwerp te leren. Deze serie zal de absolute WordPress newbie door de basisstappen leiden die nodig zijn om zet elke HTML-sjabloon om in een volledig functioneel WordPress-thema.
Toen ik WordPress in 2006 begon te gebruiken, waren er toen nog niet veel tutorials over waar te beginnen met Theme Development.
Ik leerde de harde manier, door vallen en opstaan, het ontginnen van de WordPress codex, evenals van de paar tuts die toen al bestonden. Gedurende de laatste 2 - 3 jaar heb ik de algemene ontwikkeling van WordPress-thema's aan en uit geleerd en heb ik gemerkt dat de meeste tutorials die bestaan om de hele wereld te leren, veel te gecompliceerd zijn voor degenen die niet echt bekend zijn met Content Management Systems..
Ik heb dus een stapsgewijze aanpak ontwikkeld, gebruik makend van een "leerthema" dat liefkozend bekend staat als WordPress Trainingswielen, dat zal de complete WordPress newbie door de basisstappen leiden die nodig zijn om een HTML-template naar een volledig functioneel WordPress-thema te converteren. We beginnen echter langzaam, in het bijzonder voor degenen die niet de luxe hebben van eerdere ervaringen met het werken met CMS-code of PHP wat dat betreft. Vandaar de naam "Trainingswielen". Hardcore-coders stappen opzij, we staan op het punt het circuit te ontruimen!
Onze focus zal voornamelijk liggen op de WordPress-code, niet op het ontwerp. Dus de sjabloon is opzettelijk simplistisch met een lichte styling, zodat je niet uit verveling je fiets uit een klif berijdt.
Voor een geweldig begin van webontwikkeling met HTML & CSS, bekijk de tutorials van Net Tuts - Web Development From Scratch
WordPress-thema's zijn in wezen gewone HTML-sjablonen, met kleine stukjes WordPress-specifieke PHP-tags die worden weggegooid in gebieden waar dynamische inhoud uit de database moet worden geladen. Om deze reden is een goed begrip van HTML nodig om deze serie te volgen.
WordPress-thema's, hoewel voornamelijk bestaande uit HTML, kunnen niet standaard in uw browser worden weergegeven vanwege de PHP die ze bevatten, waardoor de manier waarop ze werken verandert. Ze moeten worden uitgevoerd via een server die in staat is om PHP-code te interpreteren. Daarom is het essentieel om op een PHP-geschikte webserver te werken bij het ontwikkelen van WordPress-thema's.
We overslaan nu het installatieproces voor WordPress omdat onze focus uitsluitend op themaontwikkeling zal liggen. Ik heb een Excellent Video Tutorial gelinkt aan het installeren van WordPress op een live server. Er is nog veel meer online te vinden voor zowel live- als virtuele servers.
"Een virtuele server is in wezen een server die op uw lokale desktopcomputer draait en kan worden ingesteld met behulp van MAMP (mac), XAMPP (mac & windows) of WAMP (windows)."
Zie de volgende video voor meer informatie over het lokaal installeren van WordPress op een virtuele server.
Ze noemen het geen Beroemde installatie van 5 minuten voor niets. Als je het al genoeg hebt gedaan, duurt het in feite minder dan 5 minuten.
Bekijk www.freecss templates.org voor een heleboel sjablonen die perfect zijn om aan de slag te gaan en al in gebruik zijn als WordPress-thema's.
Nadat u uw testinstallatie van WordPress heeft uitgevoerd, hebt u een eenvoudige HTML-sjabloon (index.html) nodig met een stylesheet (style.css). Ik zou iedereen die het HTML naar WordPress-conversieproces leert, willen aanmoedigen om te oefenen door eenvoudige gratis HTML & CSS-sjablonen te downloaden en een paar te converteren om te oefenen.
Ik ga het WordPress Training Wheels-thema gebruiken voor de duur van deze tutorialserie en ik dring er bij u op aan hetzelfde te doen, zodat we niet in de een of andere richting trappen om mee te beginnen. Het thema Training Wheels is een sjabloon met alleenstaande botten, niets rantsoenends of flitsen, maar bevat alle bekende componenten van een typisch WordPress-thema, d.w.z. Koptekst, menu, zijbalken, inhoudskolom en voettekst. Het thema zal worden genoemd training-wheels-0.0 in het begin, en de naam zal gestaag veranderen naarmate we meer code toevoegen en de voortgang naar een volwaardig thema is. Aan het einde van deze les verandert de naam in training-wheels-0,1
Bekijk de eenvoudige HTML-structuur hieronder. Erg makkelijk.
Mochten uw startersbestanden niet worden genoemd op de manier zoals hierboven vermeld, dan moet u deze hernoemen. WordPress Vereist bestanden met deze namen als het absolute minimum voor een thema om functioneel te zijn. Daarnaast hebben we een afbeeldingenmap om alle afbeeldingen netjes weg te stoppen.
Het bestand index.html, dat de basisstructuur voor het thema zal zijn, moet hernoemd worden naar index.php. Ik raad altijd aan om een kopie van index.html aan de zijkant te houden, voor het geval er iets wankel gaat gebeuren. Zie het als een reservewiel in het geval u een bandbotsing ervaart. Biecht: zelfs na jaren van thema-ontwikkeling doe ik nog steeds echt domme dingen, vooral na middernacht, wanneer mijn brein niet meer kan functioneren, maar de koffie me op gang houdt.
We eindigen met het volgende. De mijnen zijn ondergebracht in de map met de naam training-wielen-0.0
Als je ooit hebt geprobeerd een gewone HTML-sjabloon toe te voegen aan de WordPress-themadirectory, zou je merken dat deze niet wordt weergegeven in de opties voor het activeren van thema's. Bij oudere versies van WordPress zou je ook merken dat als je stylesheet de onderstaande stylesheet-opmerking niet bevatte, er een foutmelding zou verschijnen. Dit komt omdat WordPress het onderstaande CSS-opmerkingenfragment heeft gebruikt om uw thema te registreren als een geldig WordPress-thema. Momenteel is het niet langer nodig om deze opmerking voor uw thema te laten registreren, maar uw thema zou zonder enige details verschijnen, anders dan de mapnaam zoals hieronder weergegeven.
De onderstaande code moet worden aangepast om uw eigen unieke details te bevatten, evenals unieke informatie over het thema dat u aan het maken bent.
/ * Theme Name: Theme URI: Description: Version: Author: Author URI: * /
Met details uit mijn Training Wheels-thema inbegrepen, zou het er als volgt uitzien:
/ * Theme Name: Training Wheels Theme URI: http://www.wpbedouine.com Beschrijving: Een thema om WordPress Theme Development van Scratch-versie: 0.1 te leren Auteur: Nur Ahmad Furlong Auteur URI: http: //www.nomad -one .com * /
Er zijn enkele extra parameters die kunnen worden toegevoegd, vooral als u overweegt om uw thema openbaar te maken, het te verkopen of te laden in de officiële directory van Wordpress.org..
Een voorbeeld van een meer uitgewerkte stylesheet-opmerking om zoveel mogelijk details over het thema te geven, is te vinden in het elfentwintig standaardthema. Zoals u kunt zien, is extra tag-informatie beschikbaar om gebruikers te helpen bij het zoeken naar specifieke soorten thema's via de thema-zoekfunctie in het dashboard of in de themamap. Een gedetailleerde beschrijving en enkele informatie over bepaalde thema-licenties zijn opgenomen. We zullen deze voor deze oefening negeren.
/ * Theme Name: Twenty Eleven Theme URI: http://wordpress.org/extend/themes/twentyeleven Auteur: het WordPress-team Auteur URI: http://wordpress.org/ Beschrijving: Het 2011-thema voor WordPress is geavanceerd, lichtgewicht en aanpasbaar. Maak het van u met een aangepast menu, afbeelding van de koptekst en achtergrond - ga vervolgens verder met beschikbare thema-opties voor een licht of donker kleurenschema, aangepaste verbindingskleuren en drie lay-outkeuzes. Twenty Eleven is uitgerust met een Showcase-paginasjabloon die je voorpagina transformeert in een showcase om te laten zien wat je beste content is, widget-ondersteuning in overvloed (zijbalk, drie voetteksten en een Showcase-pagina-widget) en een aangepaste "Ephemera" -widget om uw berichten Aside, Link, Quote of Status weergeven. Inbegrepen zijn drukwerkstijlen en voor de admin-editor, ondersteuning voor aanbevolen afbeeldingen (als aangepaste koptekstafbeeldingen op berichten en pagina's en als grote afbeeldingen op "plakkerige" berichten) en speciale stijlen voor zes verschillende postformaten. Versie: 1.2 Licentie: GNU General Public License License URI: license.txt Tags: donker, licht, wit, zwart, grijs, één kolom, twee kolommen, linkerzijbalk, rechterzijbalk, vaste breedte, flexibele breedte , aangepaste achtergrond, aangepaste kleuren, aangepaste koptekst, aangepast menu, editor-stijl, featured-image-header, uitgelichte afbeeldingen, volledige-breedte-sjabloon, microformats, post-formaten, rtl-taal-ondersteuning, plakkerig -post, thema-opties, klaar voor vertaling * /
Als je je Stylesheet-commentaren hebt geplaatst, is je thema nu klaar om te worden geactiveerd via het WordPress Administration Dashboard, onder Uiterlijk "Thema's
Om uzelf en andere gebruikers van het thema te helpen het thema snel te herkennen in het installatie-gedeelte van het thema van het dashboard, is ervoor gezorgd dat een screenshot.png-afbeelding automatisch wordt weergegeven als deze wordt gevonden in de hoofdmap van de map van uw thema.
Idealiter zou je een screenshot willen hebben dat een goede weergave geeft van hoe het thema eruit ziet. Ik vind dat veel thema-ontwerpers hier een logo hebben, wat de eindgebruiker niet altijd helpt bij het identificeren van het thema waarnaar ze op zoek zijn, vooral in het geval dat de gebruiker tonnen van thema's heeft die al zijn geïnstalleerd, een veel voorkomend verschijnsel geloof ik.
De screenshot.png moet 240 px X 180 px zijn, wat de grootte is die wordt gebruikt voor de miniatuur in het dashboard. U kunt een ander formaat invoegen, maar het formaat van de afbeelding wordt aangepast aan die afmetingen. Het is het beste om de eerste keer in de buurt te blijven met de juiste maat voor een optimale weergave en laadervaring voor de pagina.
Voordat we verder gaan, moeten we ons een beetje oriënteren op de structuur van de PHP-ontwikkelingstaal en, nog belangrijker, op de structuur van WordPress-specifieke PHP. De PHP die over het algemeen wordt gebruikt in WordPress-thema's, is specifiek aangepast om alleen binnen de WordPress-omgeving te werken. We beginnen met de bevattende structuur van elke PHP-code, zoals HTML met alleen de haakjes, PHP-code is ingepakt.
Binnen in de haakjes is de plaats waar alle functionaliteit plaatsvindt, met code waarnaar we in het algemeen verwijzen bij PHP-functies. Zorg er altijd voor dat er een spatie bestaat tussen de bevattende tags en de interne PHP-code. De eenvoudigste van deze functies waar we mee te maken hebben is het bloginfo (); functie. Merk op dat we na de naam van de functie 2 afgeronde haakjes hebben, openen en sluiten, met een puntkomma aan het einde, de functie afsluit en in veel gevallen essentieel is. De afgeronde haakjes zullen soms eindigen met enkele aanvullende parameters, om de bloginfo () te vertellen; functie, in het bijzonder wat het moet doen.
Sommige WordPress-functies hebben geen parameters binnen de afgeronde haakjes nodig om een functie uit te voeren, hoewel ze eventueel een aantal kunnen hebben om hun functie specifieker te maken. De bloginfo (); parameter heeft echter een nodig om helemaal te functioneren. We zullen enkele van de extra functies bekijken die zonder parameters werken als de tijd verstrijkt.
Merk op hoe de woordnaam geschreven is met enkele aanhalingstekens eromheen binnen de afgeronde haakjes.
is de code die we gebruiken in plaats van de naam van de site, waar we die naam ook in onze sjabloon willen laten verschijnen. Waar ik bijvoorbeeld 'WordPress Training Wheels' heb geschreven, zou ik die tekst gewoon kunnen vervangen door die functie.
Besteed veel aandacht aan de structuur van deze functie, omdat de rest van de WordPress-code overal dezelfde structuur volgt. Het weglaten van een essentieel onderdeel, zoals de afgeronde haakjes, de puntkomma achter de afgeronde haakjes, of de spatie tussen php en het woord bloginfo, zal ertoe leiden dat uw code niet correct werkt. In sommige gevallen kan dit je hele pagina doden. Ik weet het, het is vervelend om voorzichtig te zijn, maar goede gewoonten ontwikkelen helpt al vroeg. Houd u aan de regels van de weg en uw reis zal veel minder hobbelig zijn.
Wanneer de WordPress-site waarop deze functie wordt uitgevoerd, wordt geladen, zoekt WordPress de database en vindt de naam die u hebt ingevoegd in het veld Blognaam onder Instellingen "Algemeen.
Het is ook de naam die u aan het begin invoegt wanneer u de installatie uitvoert om WordPress de eerste keer in te stellen. Het wijzigen van deze naam in de Algemene instellingen zal ertoe leiden dat uw sjabloon deze wijziging onmiddellijk weerspiegelt. Dit is in wezen hoe WordPress of een ander Content Management Systeem voor die kwestie werkt. Dynamische tags vervangen statische inhoud zodat inhoud kan worden beheerd via de beheerinterface in plaats van rechtstreeks de sjablonen te bewerken.
Je thema is nog steeds niet helemaal klaar om te worden geregistreerd in WordPress. Er ontbreekt een essentiële stap waarmee WordPress uw thema correct kan weergeven.
Enkele stappen terug onze index.html kon gemakkelijk koppelen aan zijn bijbehorende stylesheet, omdat deze zich in dezelfde map bevinden en alleen het invoegen van de naam van het stijlbladbestand binnen de stylesheet-link volstaat. Dit is echter niet langer het geval. WordPress-thema's bevinden zich niet op het hoogste niveau van de site, omdat ze zijn geïnstalleerd in de wp-content "-thema's map binnen de WordPress-software.
Zoals u hieronder kunt zien bij het activeren van het thema op dit moment, zien we nog steeds niet de volledige afbeelding. Hoewel de HTML-structuur wordt geladen, wordt de stylesheet niet gekoppeld, wat resulteert in een onstylede pagina.
Zonder te veel details uit te leggen over hoe WordPress de sjablonen uit deze mappen haalt, moeten we ons er nu van bewust zijn dat bestanden niet langer zo eenvoudig aan ons kunnen worden gekoppeld als we in eenvoudige HTML-sites aan hen gekoppeld zijn. We moeten enkele extra WordPress-functies gebruiken om de stappen in te vullen tussen de hoofdmap en de map van het momenteel geactiveerde thema. We doen dit met behulp van een andere bloginfo (); functie, waarbij deze keer de URL wordt gedetecteerd naar de stylesheet van het actueel geactiveerde thema. Ongeacht de naam van de themamap, WordPress vult nu de lege plekken in en voegt het pad naar het style.css-bestand in.
Deze functie wordt ingevoegd in de koppelingstag van de stylesheet
wat nu wordt
Als u uw broncode inspecteert met weergavebron of met iets als firebug, ziet u WordPress het volledige pad vanaf de hoofdmap van de site tot het stylesheet. De hoofdmap van mijn voorbeeldsite bevindt zich op http://www.wpbedouine.com/training-wheels/. WordPress genereert daarom:
Hetzelfde stylesheet_url functie zal automatisch het pad naar elk actueel geactiveerd thema invoegen op dezelfde manier, zonder dat enige broncode wordt bewerkt. Je ziet een patroon ontstaan, waarbij stukjes van hard gecodeerde inhoud worden vervangen door dynamische functies die data uit de database on the fly halen.
Voel je dat er nu lucht door je haar raast? Maak je geen zorgen, de trainingswielen zullen snel loskomen! Ik beloof.
Plaats uw index.php en style.css-bestanden in hun eigen map, met de naam op basis van wat u wilt dat het thema een naam krijgt en vervolgens naar uw wp-content "-thema's map in uw live of virtuele hostversie van uw WordPress-installatie, zoals hieronder te zien is.
En zonder verder oponthoud, ga naar Uiterlijk "Thema's en klik op activeren onder je nieuw gemaakte thema. Voor de rest van de lezers op deze site waren deze stappen misschien irritant eenvoudig, maar ik ken persoonlijk het gevoel eindelijk te klikken met dit proces en mijn allereerste thema te activeren binnen WordPress. Het is onbetaalbaar voor de nieuweling.
Voordat we verder gaan, gebruiken we nog een paar extra, heel eenvoudige bloginfo (); functies om dynamische inhoud in te vullen. We hebben het al geïntroduceerd bloginfo ( 'name'); en bloginfo (stylesheet_url);. Hieronder hebben we de eerste HTML voor de header div van ons thema.
WordPress Trainingswielen
Een beetje hulp om je gratis te laten rijden met WordPress
We zullen het inhoudskenmerk H1-link href vervangen, dat op dit moment net een hash-symbool heeft en er gewoonlijk uitziet als href = "home.html", met bloginfo ( 'url'); functie.
">
Daarnaast vervangen we de h2-tagline onder de sitenaam door:
dus ons codefragment ziet er nu veel meer woordgrijs uit.
">
Een laatste probleem dat opgelost moet worden, is de link naar de inhoudsafbeelding in de middelste kolom van de sjabloon. Net als bij het koppelen van het stylesheet, moeten we een andere bloginfo () gebruiken; functie om het beeldpad in te vullen omdat images / imagename.jpg niet langer werken.
Trainingswielen Les 1
Om dit probleem op te lossen gebruiken we de volgende code voordat de afbeeldingenmap wordt opgeroepen
Dus we zullen eindigen met het volgende.
Trainingswielen Les 1
Besteed aandacht aan de forslash net na de sluitingshaak en vóór de naam van de map met afbeeldingen!
bloginfo ( 'name');
bloginfo ( 'url');
bloginfo (beschrijving);
bloginfo (template_directory);
De bloginfo (); functie heeft een heleboel toepassingen om verschillende soorten inhoud vanuit uw site te genereren.
Voor een uitgebreidere lijst met parameters voor bloginfo (); bekijk de WordPress Codex-documentatie over deze functie - http://codex.wordpress.org/Function_Reference/bloginfo.
Een andere uitstekende bron voor de vele WordPress-functies is de DBS Interactive WordPress Tag Reference, die in essentie een nettere en meer overzichtelijke presentatie is van de code die wordt vermeld in de WordPress Codex.
Ik heb fragmenten van de code in deze les toegevoegd aan mijn snipplr-account.
Gratis wheeling met WordPress volgt binnenkort. Ik hoor die trainingwielen rammelen om los te komen :)
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )