Introductie van het Genesis Framework

Er zijn veel WordPress-frameworks die er zijn. De meesten van hen worden betaald en sommige zijn verrassend gratis zoals Hybride of Thematisch. De meeste WordPress-gebruikers die frameworks gebruiken, gebruiken Thesis of Genesis. "Waarom een ​​framework gebruiken?", Zou je kunnen vragen. Het is vanwege zijn eenvoud en rechtlijnigheid. Hoewel het moeilijk is om over te schakelen naar een raamwerk, en het in de beginfase kan leren, kan het op den duur zeker lonen..

Er kunnen veel redenen zijn om te kiezen voor een framework over een standaard WordPress-thema. Sommigen van hen kunnen zijn:

  • Schone en semantische code
  • Meer controle over het uiterlijk van uw website
  • Betere SEO-opties
  • Veel thema's om uit te kiezen
  • Optie om uw eigen kindthema's te maken, (Meer over kindthema in een minuut!)
  • Aangepaste widgets en ontwerplay-out
  • En ja, de snelle klantenservice

Ik heb er misschien een paar over het hoofd gezien, maar dit zijn eigenlijk die die genoemd moesten worden.


Wat zijn kinderthema's?

In eenvoudige bewoordingen is Genesis het raamwerk, net als een fotolijst die aan een muur hangt. Dit frame is leeg en je hebt een foto nodig zodat de kijkers het kunnen zien. Deze foto is het kindthema en de kijkers zijn uw dagelijkse bezoekers op de website. Er zijn veel organisaties die u op maat gemaakte kindthema's bieden. De kindthema's hebben eigen cascadestijlvellen en u kunt ze gemakkelijk bewerken. Het kindthema heeft ook een functions.php bestand, waarin u uw eigen aangepaste code kunt toevoegen en deze kunt laten werken zoals u dat wilt. Het onderliggende thema bevat eigenlijk drie bestanden en de rest van de bestanden bevinden zich in het bovenliggende thema.


Waarom een ​​raam gebruiken?

Het antwoord is simpel: zodra u het framework begint te gebruiken, zult u er snel aan gewend raken. Je kunt je eigen wijzigingen aanbrengen in een reeds bestaand thema dat erbij hoorde, of je kunt zelf het droomthema bouwen dat je altijd al wilde.


Welke: proefschrift of genesis?

Genesis is gebouwd voor ontwerpers en thesis is gebouwd voor programmeurs

Het kiezen tussen deze twee topkaders in de WordPress-familie is best moeilijk. Wanneer u een keuze maakt tussen hen, moet u wellicht uw opties overwegen. Ze kunnen van persoon tot persoon verschillen. Sommige mensen willen graag een heel eenvoudig en minimalistisch ontwerp en sommigen houden misschien van volledig het tegenovergestelde. Bij het kiezen tussen deze twee raamwerken kan ontwerp een belangrijke factor zijn. Genesis biedt meer ontwerpmogelijkheden in vergelijking met proefschriften, maar kindthema's van Genesis zijn minder kwantitatief vergeleken met die van proefschrift. Er zijn veel kindthema's beschikbaar voor Thesis op internet, zowel gratis als betaald. Dus om de hele ontwerpmogelijkheden van het Genesis Framework te gebruiken, moet je bereid zijn om hun handen vuil te maken met haken en korte codes. Sommige mensen zeggen ook dat Genesis is gebouwd voor ontwerpers en thesis is gebouwd voor programmeurs.


Ontwerpopties

Design speelt een zeer vitale rol in ons leven. Het is een heel belangrijk element van de natuur en als je rondkijkt in je kamer, zal het een zekere weerspiegeling zijn van wie je bent. Als u naar het ontwerp van het hele Envato-netwerk kijkt, krijgt u het idee. Het integreren van ontwerpen in websites wordt tegenwoordig steeds belangrijker. Gebruikers hebben de neiging om meer en meer tijd te besteden aan websites met nieuwe en innovatieve ontwerpen. Als het gaat om het ontwerpen van uw websites, geeft Genesis zijn gebruikers veel opties. Er zijn vooraf ingestelde kindthema's die u kunt bewerken. Veel lay-outopties zijn ook inbegrepen. U kunt de typografie ook wijzigen door Google-lettertypen toe te voegen en nog veel meer.


Genesis Hooks

Elk frame wordt geleverd met een eigen set haken, waarmee u de controle over de algehele look en feel van het ontwerp kunt nemen. Deze haken bieden de gebruiker zelfs op kleine details volledige controle. Bovendien kun je het op elk gewenst moment en ook heel gemakkelijk veranderen. Dus je betaalt het in het begin en het bespaart je tijd en werk op de lange termijn. Lijkt me een leuke deal!

Het biedt je goede functionaliteit; je kunt veel widgets toevoegen en verwijderen. Uw aangepaste widgets zullen ook op dezelfde manier werken met het framework als met elk ander ontwerp. Je kunt de zijbalk spannender maken met knoppen voor het delen van sociale media, een Twitter-plug-in en nog veel meer.


Geoptimaliseerd zoeken

Het raamwerk is mooi gebouwd rekening houdend met SEO. De code is semantisch en je hebt nooit een SEO-plug-in nodig zoals Yoast of All-in-One. Volgens StudioPress hebben ze samengewerkt met Greg Boser, een partner en SVP van zoekmachine marketinghuis BlueGlass Interactive.

Alle opties met betrekking tot SEO zijn geïntegreerd in het framework en u hebt absoluut geen plug-in nodig. De SEO-opties bieden ook aangepaste Canonical-URL's voor post en pagina's. Er is ook een optie voor Aangepaste omleidings-URL en u kunt dit gebruiken om uw vorige bericht om te leiden naar elke gewenste URL. Een ding dat ik het leukste vond aan de SEO-opties, was dat het aangepaste zoekwoorden biedt voor elk artikel dat u op uw website plaatst. Het wordt gemakkelijk voor u om zoekwoorden voor uw artikel toe te voegen zonder dat u extra plug-ins nodig heeft. Dus zoekmachines zullen het gemakkelijker vinden om het artikel te vinden op basis van de aangepaste zoekwoorden!


Wat te doen als je op een bepaald punt vastzit

Als je net als ik bent en door de code snuffelt, weet ik zeker dat je op een of ander moment vastloopt. Er is geen reden tot paniek, want er zijn talloze artikelen en tutorials over Genesis die je kunnen helpen. En als dat specifieke probleem nog steeds bestaat, kunt u altijd terecht voor de ondersteuning door het StudioPress-team. Ze zullen zeker fouten verwijderen die u mogelijk heeft gemaakt bij het onderzoeken van de code.

Er zijn ook enkele eenvoudige tutorials op de StudioPress-website. Ze bieden ook videozelfstudies, die geweldig en gemakkelijk te volgen zijn, en ze zullen zeker helpen om aan de slag te gaan met het framework nadat je het hebt gekocht. Er zijn ook veel ontwikkelaars die je kunt huren als je extra munten in je zak hebt!


Genesis instellen op uw WordPress-installatie

Het is zo simpel als het maar kan zijn. Pak het Genesis map op uw bureaublad; nu heb je een nieuwe map met de naam Genesis.

Log vervolgens met uw FTP-software in op uw FTP-account. Ik gebruik FTP Zilla. Navigeren naar wp-content / themes en upload de Genesis map die u eerder hebt uitgepakt. Nadat de upload is voltooid, uploaden we een kindthema voor het Genesis Framework. U kunt kindthema's kopen via de website van StudioPress of u kunt er zelf een maken. Het thema Kind fungeert in principe als kostuum voor onze website. We kunnen het uiterlijk van onze website veranderen door ons thema Kind aan te passen.

Dat is het vrij veel. U hebt zojuist uw eerste WordPress-thema ingesteld met behulp van het Genesis Framework.


Styling Your Genesis With Responsive Childtheme

In plaats van vanaf het begin een eigen kindthema te bouwen, kun je een voorbeeld van een kinderthema downloaden van de website van StudioPress. Het heeft alle basiscode erin om het op een webpagina te laten lijken. De meeste veranderingen die u gaat doen, zijn de "styles.css" en de "functions.php"Bestanden. Het beste aan het thema van het voorbeeldkind is dat de lay-out responsief is, wat vrij zoet is gezien het feit dat het gratis is.


Ontwerp jezelf een kindthema

De eerste stap is om jezelf een kindthema te ontwerpen in Photoshop of Gimp. Ik ga het oude WordPress Kubrick-thema voor deze tutorial als een voorbeeld maken. De reden waarom ik het Kubrick-thema gebruik, is dat het eenvoudig en gemakkelijk te volgen is. Je kunt ook je eigen website ontwerpen in Photoshop en deze omzetten in een kindthema voor Genesis.


Ontwerp de koptekst

We zullen ons best doen door eerst de achtergrondkleur van de website te veranderen. In het afbeeldingsbestand ziet u dat de achtergrond grijstinten is. Dus we zullen wat styling toevoegen in het CSS-bestand van het thema Sample Child. Zorg ervoor dat u het bestand van het voorbeeldkindthema bewerkt en niet dat van het Genesis Framework. Nu voegen we de volgende code toe in onze styles.css bestand en sla het op.

 body color: # d5d6d7; 

Onthoud dat het thema van het kind al een eigen stijl heeft. Het enige wat u hoeft te doen is de juiste div of klasse te vinden en er styling aan toe te voegen.

Soortgelijk styliseer de kop van uw website. Ik zal de CSS-code voor het stylen van de header toevoegen en de tekst gecentreerd maken met de volgende code.

 #wrap doosschaduw: 0 0 5px # 999999; marge: 15px auto; opvulling: 0; breedte: 960 px;  #header background: none repeat scroll 0 0 #FFFFFF; grensradius: 5px 5px 0 0; marge: 0 auto; minimale hoogte: 140 px; opvulling: 10px 10px 0;  # titelgebied background: none repeat scroll 0 0 # 73A0C5; grensradius: 5px 5px 5px 5px; zweven: links; overloop verborgen; opvulling: 30px 0; text-align: center; 

Typografie

Nu gaan we onze aandacht verleggen naar het maken van de algemene typografie van de website. Om de titel in een witte kleur weer te geven, vinden we de div van "titel" en de hex-code voor witte kleur. Op dezelfde manier voegen we een witte kleur toe aan de div van "description".

 #title a, #title a: hover color: #FFF; opvulling: 0 0 0 20px; tekstdecoratie: geen;  #description color: #FFF; lettergrootte: 14 px; opvulling: 0 0 0 20px; 

Ik hou van de typografie van het voorbeeldkindthema, dus ik laat dit zoals het is. Het beste aan Genesis is dat het Google Fonts gebruikt. Dit maakt het gemakkelijker voor u om verschillende stijlen in uw website op te nemen, precies zoals u het wilt. Google Fonts zijn gratis en u kunt het thema gebruiken op uw website. U kunt hier meer informatie vinden over het gebruik van Google-lettertypen.


Navigatie en zijbalk

U kunt instellen dat Navigatie wordt weergegeven in de thema-instellingen van Genesis. Blader naar beneden naar navigatie-instellingen en kies degene die aan uw behoeften voldoet. Voordat u een navigatiebalk kunt toevoegen, moet u een "Nieuw menu" maken via het tabblad "Uiterlijk". Voeg een nieuw menu toe en maak nieuwe koppelingen voor uw pagina's of categorieën in het nieuw gemaakte menu. Omdat er in dit voorbeeld geen menu is, selecteren we om de primaire navigatie niet te tonen.

Het stylen van de zijbalk is een stuk eenvoudiger en vereist geen codering of misschien een beetje, afhankelijk van uw behoeften. Om verschillende elementen in de zijbalk toe te voegen, gaat u naar het gebied Widgets vanuit Dashboard en voegt u een zoekvak toe. Je kunt ook recente berichten, categorieën en andere widgets toevoegen volgens jouw keuze.

Hoewel het thema van het voorbeeldkind beter is gestileerd dan dat van het oorspronkelijke ontwerp, draait het allemaal om persoonlijke mening. Voor de vormgeving kunt u de onderranden verwijderen en de grootte van het lettertype klein maken in de CSS van de widgets, waardoor het lijkt op het oorspronkelijke ontwerp.


Laatste details

Voor de laatste hand leggen we wat personalisatie aan het thema toe. Hiervoor bewerken we de kop van de styles.css. Hoewel het het eerste is om te doen bij het bouwen van een thema, maar om een ​​vreemde reden doe ik dit meestal het laatst.

Vervolgens veranderen we de voettekst die nog steeds het thema "Voorbeeld van het kind" weergeeft. Om het te bewerken, open je je kindthema's functions.php en voeg de onderstaande code onderaan toe.

 / ** Pas de credits * / add_filter aan ('genesis_footer_creds_text', 'custom_footer_creds_text'); function custom_footer_creds_text () $ creds = '

'; $ creds. = 'Copyright ©'; $ creds. = datum ('Y'); $ creds. = ' · Kubrik Genesis · Gebouwd op het Genesis Framework '; $ creds. = '

'; return $ creds;

Verander de mywebsite.com naar uw gewenste. Druk op Opslaan en upload het naar de server en ververs uw website. Uw instellingen zullen meteen plaatsvinden.


Conclusie

De thema-opties van Genesis schieten enigszins tekort in vergelijking met die van Thesis. Ook als er een sitemap-generator in Genesis was ingebouwd, zou het geweldig zijn geweest. Maar ik veronderstel dat je nooit iets aanschaft dat compleet is in elk aspect. Het is niet nodig om een ​​extra ontwikkelaarslicentie te kopen om Genesis op meer dan één website te gebruiken, waardoor u uiteindelijk geld bespaart. Anders dan dat, de veiligheid en ondersteuning, beide zijn top.

Voor het ontwerpen van uw website lijkt het eenvoudig en ongecompliceerd. De veranderingen zijn meestal heel gemakkelijk te maken. U krijgt een responsief thema waaraan u, afhankelijk van uw smaak, wijzigingen kunt aanbrengen. U mag duizenden Google-lettertypen gebruiken voor uw website. U kunt uw website zo kleurrijk maken als u maar wilt. Er zijn ook enkele sluwe thema's van StudioPress met enige artistieke smaak. U krijgt goede en krachtige SEO-opties voor uw website. Voor mij is het een redelijk goed afgeronde aanbieding. Dus al met al is het een mooi kader en je kunt het in een zeer korte tijd leren. Hoe heb je Genesis gevonden? Laat het ons weten in de comments hieronder.