Introduksjon til Genesis Framework

Det er mange WordPress-rammer der ute. De fleste av dem er betalt, og noen overraskende er gratis som Hybrid eller Tematisk. De fleste WordPress-brukere som bruker rammebetingelser, bruker enten avhandling eller genesis. "Hvorfor bruke et rammeverk?", Kan man spørre. Det er på grunn av sin enkelhet og rettferdighet. Selv om det er vanskelig å bytte til et rammeverk, og lære det i begynnelsen, kan det være ganske vanskelig, det vil definitivt lønne seg i det lange løp.

Det kan være mange grunner til å velge å bruke et rammeverk over et standard WordPress-tema. Noen av dem kan være:

  • Rent og semantisk kode
  • Mer kontroll over utseendet på nettstedet ditt
  • Bedre SEO-alternativer
  • Mange temaer å velge mellom
  • Mulighet for å lage dine egne barnemner, (Mer om barnetema på et minutt!)
  • Egendefinerte widgets og designoppsett
  • Og ja rask kundeservice

Jeg har kanskje savnet noen, men det er ganske mye de som måtte nevnes.


Hva er barnemner?

I enkle ord, er Genesis rammen som en bildestamme som henger på en vegg. Denne rammen er tom, og du vil trenge et bilde slik at seerne kan se det. Dette bildet er barnetemaet, og seerne er dine daglige besøkende på nettstedet. Det er mange organisasjoner som gir deg tilpassede barnetemaer. Barnetemaene har sine egne cascading stilark, og du kan enkelt redigere dem. Barnetemaet har også en functions.php fil, der du kan legge til din egen egendefinerte kode og få den til å fungere som du liker den. Barnetemaet inneholder faktisk tre filer, og resten av filene er i foreldetemaet.


Hvorfor bruke et rammeverk?

Svaret er enkelt, når du begynner å bruke rammen du vil bli vant til det på kort tid. Du kan lage dine egne endringer i et eksisterende tema som fulgte med det, eller du kan bygge deg selv det drømstema som du alltid ønsket å.


Hvilken: Oppgave eller Genesis?

Genesis er bygget for designere og avhandling er bygget for programmerere

Å velge mellom disse to topp hakkrammene i WordPress-familien er ganske vanskelig. Når du velger mellom dem, må du kanskje vurdere alternativene dine. De kan variere fra person til person. Noen mennesker vil ha en veldig enkel og minimalistisk design, og noen kan like helt motsatt. Når du velger mellom disse to rammene, kan design være en viktig faktor. Genesis gir flere designalternativer sammenlignet med oppgaven, men Barnas temaer i Genesis er mindre i mengde enn i oppgaven. Det er mange barnemner tilgjengelig for oppgaven på internett, både gratis og betalt. For å kunne bruke alle designegenskapene i Genesis Framework, må man være villig til å få hendene skitne med kroker og kortkoder. Noen sier også at Genesis er bygget for designere og avhandling er bygget for programmerere.


Utforming av alternativer

Design spiller en svært viktig rolle i livet vårt. Det er et veldig viktig element i naturen, og hvis du ser deg rundt i rommet ditt, vil det få en viss refleksjon av hvem du er. Hvis du ser på utformingen av hele Envato-nettverket, får du ideen. Integrerende design på nettsteder blir stadig viktigere i disse dager. Brukere har en tendens til å bruke mer og mer tid på nettsteder som har nye og innovative design. Når det gjelder å designe dine nettsteder, gir Genesis sine brukere mange alternativer. Det er premade barn temaer som du kan redigere. Mange layoutalternativer er også inkludert. Du kan også endre typografien ved å legge til Google Fonts og så mye mer.


Genesis kroker

Hvert rammeverk kommer med sitt eget sett med kroker, som lar deg ta kontroll over det generelle utseendet på designet. Disse krokene gir brukeren fullstendig kommando selv på mindre detaljer. I tillegg kan du endre det når du vil, og det også, veldig enkelt. Så du betaler for det i starten, og det sparer deg tid og arbeid i det lange løp. Ser ut som en fin avtale for meg!

Det gir deg god funksjonalitet; Du kan legge til og fjerne mange widgets. Dine tilpassede widgets vil også fungere på samme måte med rammen som om med hvilken som helst annen design. Du kan krydre sidebjørnet med sosiale medier, og et twitter-plugin og mye mer.


Søk optimalisert

Rammen er pent bygget med tanke på SEO. Koden er semantisk, og du vil aldri trenge noen SEO-plugin som Yoast eller All-in-One. Ifølge StudioPress har de samarbeidet med Greg Boser som er partner og SVP for søkemarkedsvirksomhet BlueGlass Interactive.

Alle alternativene knyttet til SEO er integrert i rammen og du trenger absolutt ingen plugin. SEO-alternativene gir også egendefinerte kanoniske nettadresser for innlegg og sider. Det er også et alternativ for tilpasset viderekoblingsadresse, og du kan bruke dette til å omdirigere det forrige innlegget til en hvilken som helst nettadresse du vil. En ting som jeg likte mest om sine SEO-alternativer var at den tilbyr egendefinerte søkeord for hver artikkel som du legger inn på nettstedet ditt. Det blir enkelt for deg å legge til søkeord for artikkelen uten å trenge noen ekstra plugins. Så søkemotorer vil ha en lettere tid å finne artikkelen basert på de egendefinerte søkeordene!


Hva du skal gjøre når du sitter fast på et punkt

Hvis du er som meg og pokker rundt koden, er jeg sikker på at du vil bli sittende fast på et eller annet tidspunkt. Det er ikke nødvendig å panikk fordi det er tonnevis av artikler og opplæringsprogrammer om Genesis som vil hjelpe deg. Og hvis det spesifikke problemet fortsatt eksisterer, kan du alltid gå til Støtten som tilbys av StudioPress-teamet. De vil sikkert fjerne eventuelle feil du måtte ha gjort når du graver inn koden.

Det er også noen grunnleggende opplæringsprogrammer på StudioPress-nettstedet. De gir også videoopplæringer, som er flotte og enkle å følge, og de vil sikkert hjelpe deg med å komme i gang med rammen etter at du har kjøpt den. Også det er mange utviklere som du kan leie hvis du har ekstra mynter i lommen!


Sette opp opprinnelse på WordPress-installasjonen

Det er så enkelt som det kan være. Trekk ut genesis mappe på skrivebordet ditt; nå har du en ny mappe som heter genesis.

Deretter logger du deg på FTP-kontoen din med FTP-programvaren. Jeg bruker FTP Zilla. Navigere til wp-content / themes og last opp genesis mappe du hentet tidligere. Etter at opplastingen er fullført, laster vi opp et barnemne for Genesis Framework. Du kan kjøpe barnemner fra StudioPress 'nettsted, eller du kan lage en selv. Barnets tema fungerer i utgangspunktet som en kostyme for nettstedet vårt. Vi kan endre utseendet på nettstedet vårt ved å redigere Barnets tema.

Det er det ganske mye. Du har nettopp installert ditt første WordPress-tema ved hjelp av Genesis Framework.


Styling din opprinnelse med Responsive Childtheme

I stedet for å bygge ditt eget barn tema fra bunnen av, kan du laste ned et eksempel barn tema fra StudioPress 'nettsted. Den har all grunnkoden der inne for å gjøre det til en nettside. De fleste endringene du skal gjøre er å "styles.css" og "functions.php"Filer. Det beste med prøve barnet temaet er at utformingen er responsiv som er ganske søt vurderer at den er ledig.


Design deg selv et barn tema

Det første trinnet er å designe deg selv et barntema i Photoshop eller Gimp. Jeg skal gjøre det gamle WordPress Kubrick-temaet for denne opplæringen som et eksempel. Grunnen til at jeg bruker Kubrick-temaet er at det er enkelt og enkelt å følge. Du kan også designe ditt eget nettsted i Photoshop og kan konvertere det til et barnemne for Genesis.


Design toppteksten

Vi vil jobbe vår måte ved å endre bakgrunnsfargen på nettstedet først. I bildefilen kan du se at bakgrunnen er av gråskala. Så vi legger til noen styling i CSS-filen i Sample Child-temaet. Forsikre deg om at du redigerer filen til prøve barnet temaet og ikke til Genesis Framework. Nå legger vi til følgende kode i vår styles.css filen og lagre den.

 kropp farge: # d5d6d7; 

Husk at barnetemaet har sin egen styling allerede der. Alt du trenger å gjøre er å finne riktig div eller klasse og legge til styling til den.

På samme måte styler toppteksten til nettstedet ditt. Jeg vil legge til CSS-koden for styling av overskriften og gjøre teksten sentrert med følgende kode.

 #wrap box-shadow: 0 0 5px # 999999; margin: 15px auto; polstring: 0; bredde: 960px;  #header background: none repeat scroll 0 0 #FFFFFF; border-radius: 5px 5px 0 0; margin: 0 auto; Min høyde: 140px; polstring: 10px 10px 0;  # tittelområde bakgrunn: ingen repetisiell rulle 0 0 # 73A0C5; grense-radius: 5px 5px 5px 5px; flyte: venstre; overløp: skjult; polstring: 30px 0; tekst-align: center; 

typografi

Nå skifter vi vårt fokus for å lage den generelle typografien til nettstedet. For tittelen som skal vises i en hvit farge finner vi div av "tittel" og heksekoden for hvit farge. Tilsvarende legger vi hvit farge til div av "beskrivelse".

 #title a, #title a: hover color: #FFF; polstring: 0 0 0 20px; tekst-dekorasjon: ingen;  #description color: #FFF; skriftstørrelse: 14px; polstring: 0 0 0 20px; 

Jeg liker typografi av prøve barnet tema, så jeg vil forlate dette som det er. Det beste med Genesis er at det bruker Google Fonts. Dette gjør det lettere for deg å inkorporere forskjellige stiler på nettstedet ditt, akkurat slik du liker det. Google Fonts er gratis, og du kan bruke tema på nettstedet ditt. Du kan finne ut mer om hvordan du bruker Google-skrifter her.


Navigasjon og sidefelt

Du kan sette opp Navigasjon for å dukke opp i temasettene til Genesis. Bla ned til Navigasjonsinnstillinger og velg den som passer til dine behov. Før du kan legge til en navigeringslinje, må du lage en "Ny meny" fra "Utseende" -fanen. Legg til en ny meny og opprett nye linker for sidene eller kategoriene i den nylig opprettede menyen. Siden det ikke er noen meny i dette eksemplet, velger vi ikke å vise Primærnavigasjon.

Sidebar styling er mye enklere og krever ingen koding eller kanskje bare litt, avhengig av dine behov. Hvis du vil legge til forskjellige elementer i sidefeltet, går du til Widgets-området fra Dashboard og legger til en søkeboks. Du kan også legge til nylige innlegg, kategorier og andre widgets etter eget valg.

Selv om Sample Child Theme har bedre styling enn den i det opprinnelige designet, handler det om personlig mening. For stylingen kan du fjerne bunngrensene og gjøre størrelsen på skrifttypen liten i widgets 'CSS som vil gjøre den til å ligne den opprinnelige utformingen.


Final Touches

For de siste detaljene legger vi til noen tilpassing til temaet. For dette vil vi redigere toppteksten til styles.css. Selv om det skal være den første tingen å gjøre når man bygger et tema, men for en eller annen grunn gjør jeg vanligvis det siste.

Deretter endrer vi bunntekstteksten som fortsatt viser "Sample Child Theme". For å redigere det, åpne opp ditt barntema functions.php og legg til følgende kode nederst.

 / ** Tilpass kreditter * / add_filter ('genesis_footer_creds_text', 'custom_footer_creds_text'); funksjon custom_footer_creds_text () $ creds = '

'; $ creds. = 'Copyright ©'; $ creds. = dato ('Y'); $ creds. = ' · Kubrik Genesis · Bygget på Genesis Framework '; $ creds. = '

'; returner $ creds;

Endre mywebsite.com til ønsket en. Hit lagre og last opp det til serveren og oppdatere nettstedet ditt. Dine innstillinger vil finne sted med en gang.


Konklusjon

Temaoppsettene til Genesis blir noe svake når de sammenlignes med oppgavene. Også hvis det var en sitemap generator bygget inn i Genesis ville det vært bra. Men jeg antar at du aldri får noe som er komplett i alle aspekter. Det er ikke nødvendig å kjøpe et ekstra utviklere lisens for å bruke Genesis på mer enn ett nettsted, slik at du ender opp med å spare penger. Annet enn det, sikkerhet og støtte, begge er topp hakk.

For å designe nettstedet ditt virker det enkelt og ukomplisert. Endringene er vanligvis veldig enkle å lage. Du får et responsivt tema som du kan gjøre endringer avhengig av din smak. Du kommer til å bruke tusenvis av Google Fonts for nettstedet ditt. Du kan gjøre nettstedet ditt så fargerikt du liker. Det er også noen smarte temaer fra StudioPress med litt kunstnerisk smak. Du får gode og kraftige SEO-alternativer for ditt nettsted. For meg er det et ganske godt avrundet tilbud. Så alt i alt er det et fint rammeverk, og du kan lære det på en veldig kort tid. Hvordan har du funnet Genesis? Gi oss beskjed i kommentarene nedenfor.