Articles

Hvordan å Lage WordPress Tema fra Scratch : Veiledning for Nybegynnere (2020)

by admin

Opprette WordPress tema kan være veldig enkelt hvis du vet grunnleggende HTML, CSS og JavaScrip. Imidlertid, hvis du er ny til WordPress, alt du trenger å gjøre, er å følge trinnene som er nevnt i denne veiledningen for nybegynnere. Jeg har listet opp de nødvendige trinnene og diskutert de viktigste aspektene ved å opprette WordPress-tema. Så, la oss lese denne opplæringen guide og lære å lage WordPress tema fra bunnen av.,

WordPress er en mye brukt open-source content management system (CMS) rundt om i verden. Totalt 34.7% av nettsteder som bruker WordPress. Du kan også velge dette plattform for å skape en sterk tilstedeværelse på nettet og etablere din bedrift enkelt med hjelp av kraftige WordPress nettsted byggmester programvare. WordPress er et opplagt valg og den enkleste å begynne med. Og det er den viktigste grunnen til at enhver utbygger foreslår å velge det som base for ditt nettsted., Imidlertid, hvis du fortsatt ikke er sikker på hva er WordPress eller hva er open-source CMS, deretter lese denne guiden vil definitivt kaste lys av kunnskap.

Så, uten mye ado, la oss begynne med å opprette WordPress-tema trinnvis prosess.

Hvordan å Lage en WordPress Tema? Veiledning for nybegynnere

Designere og utviklere har vært ubevisst delvis mot WordPress baserte temaer for ikke bare en, men flere grunner. Til tider, noen client spesifikt ber om et WordPress nettsted. Og den viktigste årsaken bak den enorme populariteten til WordPress ligger i sin enkelhet., Faktisk, det er et meget fleksibelt og kraftig CMS. Derfor, de som jobber med alle andre CMS(s) som Joomla, Drupal, etc. kan noen ganger ønsker å migrere dvs. fra Joomla til WordPress eller så på. Så, la oss nå forstå hvorfor folk elsker denne plattformen så mye.

Hva er Kravene for å Opprette WordPress-Tema?

1. Installere WordPress Lokalt

Første ting først, du trenger for å installere WordPress. Ikke bekymre deg, det er ikke rocket science å lære hvordan å installere WordPress. Du kan enkelt gjøre det selv.

2. Prosedyren for å lage en WordPress Tema Fra Bunnen av.,

  • Manuell – lage WordPress theme via koding
  • Automatisk – lage WordPress tema ved hjelp av en WordPress Tema Builder

For WordPress tema, alt vil bli gjort i wp_content directory bare. Bare for å gjøre et nytt tema undermappe i wp_content → Temaer-mappen. La oss anta at du kaller det «mytheme».

Den andre tingen er å bestemme utformingen av tema. Her veiledningen er å vise de grunnleggende oppsett bestående av Topptekst, hovedområdet, Bunntekst, Sidebar.

i Utgangspunktet, WordPress trenger bare 2 filer dvs. stil.css og stikkordregister.php., Men for dette oppsettet, trenger du 5 filer, som følger;

  • topp.php – inneholder koden for overskriften delen av temaet.
  • indeks.php – inneholder koden for det Viktigste Området og vil spesifisere hvor de andre filene vil bli inkludert. Dette er den viktigste filen på temaet.
  • sidebar.php – inneholder informasjon om sidepanelet.
  • bunntekst.php – håndterer bunntekst.
  • stil.css – ansvarlig for styling av ditt tema.
  • bootstrap.css – ingen separat CSS-koden er nødvendig; svært responsive.
  • bootstrap.,js – gir sin egen js for navigasjon bar, eller faner, etc.

Du trenger å laste ned Bootstrap-pakken. Bootstrap.js & Bootstrap.cs-filen må kopieres til temaet mappen.

Hvordan å Lage Egendefinerte WordPress Tema trinn for trinn?

– >

  1. Opprette WordPress-Tema fra grunnen av ved Koding (Manuelt)

  2. Opprette WordPress-Temaet med TemplateToaster (Automatisert)

Du kan lage disse filene lokalt med en tekst editor som Notepad. Nedenfor er de filene du trenger for å lage å komme i gang.,

Fremgangsmåten for å Opprette WordPress-Tema fra grunnen av ved Koding

Trinn 1: topp.php-Fil

Du trenger for å sette denne koden i hodet.php-filen.

Denne filen Header.php inneholder koden for overskriften del i som js og stil filen er koblet til. Det vises toppteksten på siden.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Denne linjen lagt til etter tittelen forteller WordPress for å laste inn en stil.css-filen som skal håndtere styling av nettstedet.

Her

<?php bloginfo('stylesheet_url'); ?>

er en WordPress-funksjon som faktisk laster stilark.,

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Her bruker vi Bootstrap. Det er en av de kjente responsiv web design rammer. Det gir inbuilt CSS-filer til stilen din nettside. Du kan holde bootstrap.css-filen i ditt tema/css-mappen.

Neste, en «div» med klasse ttr_header er lagt til, og dette vil være den viktigste beholder av nettstedet. Nå, sette en klasse for det, slik at du kan endre det via stil.css-filen.

Etter det, legg til en enkel etikett OVERSKRIFTEN i en «div id» med klassen «ttr_header», som senere er angitt i klassen «jumbotron».

Trinn 2: indeks.,php-Fil

Den viktigste filen index.php vil inneholde følgende kode;

Den aller første linje av koden i denne fila

<?php get_header(); ?>

vil inkludere overskrift.php-filen og kode er på hovedsiden.

koden ovenfor viser de viktigste innholdet i innlegget som du har laget gjennom WordPress administrative området.
Neste, legge til sidepanelet.php-filen som vises nedenfor

<?php get_sidebar(); ?>

I denne filen, kan du vise din siste innlegg, arkiver, kontakt info, etc.,

Etter denne linjen, en tom «div» satt inn som separate det Viktigste Området og Sidepanelet fra bunntekst.

til Slutt, lagt en siste linje

<?php get_footer(); ?>

som vil omfatte bunntekst.php-filen.

Trinn 3: Sidebar.php-Fil

I sidefeltet.php, legg til følgende kode

I denne filen, innebygde WordPress-funksjoner er kalt til å vise forskjellige Kategorier, Arkiver innlegg., WordPress-funksjonen returnerer dem som liste elementer, derfor, må du pakke den faktiske funksjoner i usortert lister (<ul> – kodene).

Trinn 4: bunntekst.php-Fil

Legg til nedenfor kode linjer til bunntekst.php-fil:

<div id= "ttr_footer"><h1>FOOTER</h1></div></div></body></html>

Dette vil legge til en enkel BUNNTEKST etiketten. Men, du kan også legge til koblinger til mer tekst, copyright-informasjon for temaet i stedet for vanlig Bunntekst tekst.

Trinn 5: stil.css-Fil

Legg til følgende linjer til stilen.,css-fil

Dette CSS-filen angir grunnleggende utseende til ditt tema. Dette vil sette bakgrunnen på siden og legg de grenser som per dine behov.

siden Din skal se ut noe som dette:

Nå kan du endre CSS-filen ved å legge til bilder, animasjoner og annet innhold til tema og gjøre det ser like vakker som du vil.

Men, dette vil kreve HTML, PHP og WordPress-funksjoner kunnskap. Dermed være et bedre alternativ er å bruke en sterk WordPress Tema Generator som ikke har en eneste kode linje. Ja! Uten koding!, En programvare som lar deg opprette din egen WordPress tema fra grunnen av, uten noen koding kunnskap.

Ivrig etter å vite om denne løsningen, vel, jeg snakker om din egen tema byggmester programvare TemplateToaster. Det gir en rekke fantastiske funksjoner med en enkel å bruke dra & – slipp-grensesnitt. Så, uten å kaste bort et minutt, la oss begynne å utvikle WordPress tema fra scratch med TemplateToaster.

Hvordan å Lage WordPress Tema med TemplateToaster?

TemplateToaster er ganske enkelt å installere, og det ikke innebærer noen koding i det hele tatt., Er det bare å besøke nettstedet og laste ned TemplateToaster installer. Men prøveversjonen er gratis. Nå, alt du trenger å gjøre er å følge disse enkle trinn for å lage din egen WordPress tema. Det første skjermbildet som vises etter installasjonen ser ut som

Følg Disse Trinnene for å Opprette WordPress Theme & Starte din WordPress Tema Utvikling

Trinn 1: Velg en Plattform

Her kan du gjøre CMS utvalget. Siden vi er å opprette WordPress-tema, så er det opplagte valget for meg her, er WordPress.,

Nå kan du se en skjerm med to alternativer dvs. Gå med Eksempel Maler og Starte fra Scratch. Du kan enkelt finne en passende mal for nettstedet ditt fra den mengde gratis WordPress temaer. Siden vi er involvert i WordPress mal utvikling og dermed, jeg vil velge «Start fra Scratch».

Nå, skal du se den aller første pop-up-dvs. for å velge farge og typografi fra den gitte alternativer. Og klikk på OK-knappen.,

Trinn 2: Lag en Overskrift

Her må du velge bredde og høyde på overskriften. Du kan holde bredden til full bredde, lik beholder bredde, og tilpasset bredden kan også stilles inn.

Velg bakgrunnsfarge for det. Du kan angi en farge, fargeovergang eller bla gjennom-et bilde fra i-bygget lager galleri eller bruk ditt eget bilde.

Nå kan du legge til «Tekst-Området» og «Sosiale Ikoner» til overskriften og gjøre det så interaktivt som du vil.

Overskriften er gjort.,

Trinn 3: Design Menyen

Nå, er det på tide å designe Menyen. Gå til meny-fanen, og velg den bredden og høyden du ønsker å sette for din Meny fra de respektive alternativene.

Du kan også angi bakgrunnsfarge, gradient eller bilde i menyen Bakgrunn fra alternativ.

Nå, legger du til en Logo på menyen fra den gitte alternativer. Men, du kan din egen Logo, så vel.,

Nå, velg Menyen «Egenskaper for Knapp», og deretter juster knappen som Justering → Horisontal → Høyre til Venstre og hvordan din meny-knappene vil være justert til høyre på siden.

Du kan også velge å angi typografi for din meny elementer.

Meny er klar nå.

Trinn 4: Opprette og Stilisere en Lysbildefremvisning

  • velg Nå Slideshow Kategorien ovenfor verktøylinjen og her kan du velge mellom alternativer for å angi dens funksjonaliteter.,

  • Du kan velge hvilken Bakgrunn Fargen du ønsker for lysbildefremvisningen, bakgrunnsbilde, etc. Videre gjelder egenskaper som posisjon, slideshow, overgangseffekter, bredde, høyde, og en tekst-området for å gjøre det så vakker som du vil. Og komponenter som Slideshow kan forbedre din web-engasjement. Og det er visse komponenter topp WordPress utviklere inkluderer i sine temaer for å gjøre dem skinnende og engasjerende.

Trinn 5: Redigere Innhold (hovedområdet)

Nå kommer det viktigste området, dvs. Innhold-området., Først av alt, angi antallet kolonner du vil i en enkelt rad.

ved å klikke på teksten, vil du være i stand til å legge til innhold til din hjemmeside. Du kan imidlertid bruke ulike alternativer som du kan sette typografi, font farge, tekstjustering, skriftstørrelse, etc. og få teksten din er klar.

Hvis du ønsker å legge til et bilde, er det bare slette innholdet fra den første kolonnen med Redaktøren Kategorien.,

Redaktør fane → Bilete → Bla gjennom bilete →Åpne→OK

på samme måte, du kan enkelt design resten av kolonnene som vises nedenfor.

Trinn 6: Design/Tilpasse Bunntekst

  • gå til Bunntekst. Det vil vise mange alternativer for å utforme en Bunntekst. For det første, angi en Bakgrunn for bunnteksten. Du kan også velge et bilde i bakgrunnen fra lager bilder eller bla gjennom ditt eget bilde.
  • Så, fra Bunntekst Celle alternativ, angi antall rader, kolonner & bredde av bunntekst., Som her, 4 kolonner i den første raden, og i sum 2 rader som er valgt. Sted social media ikoner uansett hvor du finner dem egnet.

  • Legg til innhold og stil det gjennom Typografi valg. Du kan også angi forskjellige font farger i ulike tilstander av koblinger som er Aktive, Hold, Normal.
  • på samme måte kan du stil, Designet av Tekst & Link i Andre rad. Du kan imidlertid også velge å vise/skjule dette fra avmerkingsboksen for gitt når som helst.
  • Det endelige utseendet på Bunntekst vil bli noe som dette., Så til design er det vakkert, du i utgangspunktet må en få museklikk bare.

Så, hjemmesiden er opprettet vakkert. På samme måte kan du lage andre sider på nettstedet ditt. Alt du trenger å gjøre er å klikke på ‘+’ ikonet på venstre side og legge til så mange sider som du vil.

Men hvis du ønsker å legge til et barn til side for noen bestemt side, så kan du gjøre det også., Og alt du trenger å gjøre er å klikke på ellipser (tre prikker) som svarer til navnet på siden t nødt til å høyre-klikke være tilstede på ønsket side, og velg «Legg til Barn Side’. Noe som viser en virtuell hierarki.

Siden Navnet → ⋮ → Legg til Barn Side

Her kan du se andre alternativer også dvs. Fjerne, Redigere, og Klone. Du kan bruke dem til å gjennomføre nødvendige tiltak.

Hurra!! Du har fullført prosessen med å opprette WordPress theme form bunnen av. Og du kan tjene profitt med WordPress tema utvikling og holde din lille hemmelige våpen som er trygg.,

TemplateToaster web design software har mange flere avanserte alternativer som å sette en bakgrunn med Video, lysbildefremvisning, ny meny stiler osv. Du kan lære mer om hvordan å lage en WordPress nettside, opprette en e-handel nettsted med WooCommerce, hvordan å lage profesjonelle temaer og maler, og hvordan du bruker WordPress tema sjekk plugin så videre.

Hvilken Metode Du Bruker for å Opprette WordPress-Tema?

Så, dette bringer oss til slutten av denne omfattende veiledning., Jeg er sikker på at det vil hjelpe deg å bygge din egen WordPress-tema, kan også forklare den primære aspekter av å opprette WordPress-tema fra bunnen av. Opprette WordPress-temaet er ganske enkel, og valget av CMS avhenger av ditt nettsted etableringen hensikt. Liker hvis du er i ferd med å starte netthandel utvikling av nettstedet, eller du ønsker å lage et child theme i WordPress, eller du kan selv ønsker å vite hva WordPress tema er at, det andre webområdet bruker, eller du ønsker å starte WordPress tema utvikling ved hjelp av Bootstrap, etc., Det er visse ting å huske på før du velger WordPress tema fordi å velge den beste WordPress tema er ingen lek. Sjekk ut beste WordPress temaer og gratis WordPress temaer.

Konklusjon på hvordan å opprette WordPress-tema

Så, holde alt i tankene dine klart før du går inn i arenaen av WordPress tema utvikling. Du kan imidlertid velge å jobbe med WordPress tema builder som uten å skrive en eneste linje med kode. Derfor, å opprette WordPress-tema fra scratch er ikke mer vanskelig oppgave nå., Men metoden for å opprette WordPress-tema fra scratch er helt i hendene. Uansett hva du velger, la meg vite hvordan det fungerte for deg i kommentarfeltet nedenfor.