1. 1. Leser for øyeblikket: WordPress-opplæring: Hvordan lage et WordPress-tema fra HTML (del 1)
  2. 2. WordPress-opplæring: Hvordan lage et WordPress-tema fra HTML (del 2)
  3. 3. Et intro til anatomi av et WordPress-tema

Hvis du startet med et HTML (+ CSS) nettsted, trenger du ikke å kaste det hele når du flytter til WordPress. Du kan konvertere HTML-en din til WordPress og kjøre din (nå kraftigere) webside på den dynamiske WordPress-plattformen.


Eller kanskje er det ikke tilfelle. Kanskje lurer du bare på hvordan du kan konvertere en klients HTML-design til et fullverdig WordPress-tema. Eller kanskje du vil lære grunnleggende WordPress (+ PHP) programmering fra den mer kjente HTML-siden.

Uansett årsak til at du er her i dag, vil denne WordPress-opplæringen introdusere deg det grunnleggende for å lage et WordPress-tema fra HTML. Du kan følge denne guiden for å lage ditt tema fra bunnen av, eller du kan gå over til Github og laste ned WPExplorer starttema som gir et “tomt lerret” for å lage ditt tema med alle nødvendige malfiler og kode for å komme i gang. Så hvis du er en av de menneskene som heller lærer ved å lese gjennom kode, last ned starttemaet, hopp over guiden og se hvordan ting fungerer … Ellers, skaff deg en koderedigerer (jeg bruker og anbefaler Notisblokk++, eller SublimeText) og en nettleser klar, følg deretter denne enkle guiden til slutt.

Navngi ditt WordPress-tema

Først må vi gi temaet ditt et unikt navn, som ikke er nødvendig hvis du bare bygger et tema for nettstedet ditt. Uansett må vi navngi temaet ditt for å gjøre det lett identifiserbart ved installasjonen.

Generelle forutsetninger på dette punktet:

  • Du har index.html og CSS stilarket klart.
  • Du har en fungerende WordPress-installasjon med minst ett tema, f.eks. Tjue fjorten
  • Du har allerede opprettet en temamappe der du lagrer det nye WordPress-temaet ��

La oss komme tilbake til å navngi WordPress-temaet ditt. Åpne koderedigereren, og kopier inn innholdet i stilarket i en ny fil og lagre det som style.css i temamappen din. Legg til følgende informasjon helt øverst i nyopprettet stil.css:

/ *
Tema Navn: Temaets navn
Tema URI: Temaets URL
Beskrivelse: En kort beskrivelse av temaet ditt
Versjon: 1.0 eller hvilken som helst annen versjon du ønsker
Forfatter: Ditt navn eller WordPress.org sitt brukernavn
Forfatter URI: Din nettadresse
Tagger: Merkelapper for å finne temaet ditt i WordPress-temaregisteret
* /

Ikke legg igjen (/ *… * /) kommentar taggene. Lagre endringene. Denne informasjonen forteller WordPress navnet på temaet ditt, forfatteren og gratis ting som det. Den viktige delen er navnet på temaet, som lar deg velge og aktivere temaet via WP-dashbordet.

Å dele opp HTML-malen din i PHP-filer

Denne veiledningen forutsetter videre at du har HTML-malen din arrangert fra venstre til høyre: topptekst, innhold, sidefelt, bunntekst. Hvis du har et annet design, kan det hende du må spille litt med koden. Det er morsomt og superenkelt.

Neste trinn innebærer å lage fire PHP-filer. Bruk koderedigereren din til å lage index.php, header.php, sidebar.php og footer.php og lagre dem i temamappen. Alle filene er tomme på dette tidspunktet, så ikke forvent at de skal gjøre noe. For illustrasjonsformål bruker jeg følgende index.html og CSS stilarkfiler:

index.html




Hvordan konvertere HTML-mal til WordPress Theme - WPExplorer



Dette er overskriftsseksjonen. Legg din logo og andre detaljer her.

Dette er hovedinnholdsområdet.

Og dette er bunnteksten.

CSS STYLESHEET

#wrap {margin: 0 auto; bredde: 95%; margin-top: -10px; høyde: 100%;}
.header {bredde: 99,8%; kant: 1px solid # 999; høyde: 135px;}
.innhold {bredde: 70%; kant: 1px solid # 999; margin-top: 5px;}
.sidefelt {float: høyre; margin-top: -54px, bredde: 29%; border: 1px solid # 999;}
.bunntekst {bredde: 99,8%; kant: 1px solid # 999; margin-top: 10px;}

Du kan ta begge kodene hvis du ikke har noe å jobbe med. Bare kopier og lim dem inn i kodeditoren din, lagre dem, lag de fire PHP-filene vi nettopp nevnte, og gjør deg klar for neste del. Åpne den nyopprettede (og tomme) header.php. Logg deg på din eksisterende WordPress-installasjon, naviger til Utseende – >> Redaktør og åpne header.php. Kopier all koden mellom koder og lim den inn i header.php-filen. Følgende er koden jeg fikk fra header.php-filen i Twenty Fourteen-tema:




<?php wp_title( '|', true, 'right' ); ?>




Åpne deretter din index.html arkiver og kopier overskriftskoden (dvs. koden i

seksjonen) til header.php rett under tagger som vist nedenfor:





<?php wp_title( '|', true, 'right' ); ?>







Dette er overskriftsseksjonen. Legg din logo og andre detaljer her.

Legg så til…

… hvor som helst mellom tagger i header.php-filen for å koble stilarket ditt. Husk også å sette og Åpne koder i header.php som vist over. Lagre alle endringene.

Kopier den andre delen (dvs..

fra index.html til nyopprettede index.php , og legg til …

… helt øverst og …


… til absolutt bunn. Disse tre linjene henter header.php, sidebar.php og footer.php (i den rekkefølgen) og viser dem i index.php, som setter koden sammen igjen. Lagre alle endringene. På dette tidspunktet skal index.php-filen se ut:



Deretter kopierer du innholdet fra sidefeltet og bunntekstseksjonene i indeksen.html til sidelinjen.php og bunnteksten.php.

Legger til innlegg

HTML-malen din er i ferd med å omformes til et WordPress-tema. Vi trenger bare å legge til innleggene dine. Hvis du har innlegg på bloggen din, hvordan vil du vise dem i det skreddersydde “HTML-til-WordPress” -temaet? Du bruker en spesiell type PHP-funksjon kjent som Løkke. The Loop er bare en spesialisert kode som viser innlegg og kommentarer uansett hvor du plasserer den.

Nå, for å vise innleggene dine i innholdsseksjon av index.php-malen, kopier og lim inn følgende kode mellom

og

tagger som vist nedenfor:

>

Det vil ta seg av innleggene dine. Lett som ABC. I dette tidspunktet (og ved å bruke eksempelfilene som er gitt i denne opplæringen), skal header.php se slik ut:




<?php wp_title( '|', true, 'right' ); ?>




Sidefeltet.php skal se slik ut:

Bunnteksten din.php skal se slik ut:

Og dette er bunnteksten

Merket du avslutningen og koder i bunnteksten? Ikke glem å ta med dem også.

Stilen din.css skal se slik ut:

/ *
Tema Navn: Opprette WordPress Theme fra HTML
Tema URI: http://wpexplorer.com
Beskrivelse: Dette temaet viser deg hvordan du oppretter WordPress-temaer fra HTML
Versjon: 1.0
Forfatter: Freddy for @WPExplorer
Forfatter URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tagger: wpexplorer, tilpasset tema, HTML til WordPress, lag WordPress-tema
* /
kropp {
font-family: arial, helvetica, verdana;
skriftstørrelse: 0,8 em;
bredde: 100%;
høyde: 100%;
}

.Overskrift {
bakgrunnsfarge: # 1be;
margin-venstre: 14%;
topp: 0;
kantbredde: 0,1 em;
kantfarge: # 999;
kantstil: solid;
bredde: 72%;
høyde: 250px;
}

.innhold {
bakgrunnsfarge: # 999;
margin-venstre: 14%;
margin-top: 5px;
flyte: venstre;
bredde: 46%;
kantbredde: 0,1 em;
kantfarge: # 999;
kantstil: solid;
}

.sidefelt {
bakgrunnsfarge: # 1d5;
margin-høyre: 14%;
margin-top: 5px;
flyte: høyre;
kantbredde: 0,1 em;
kantfarge: # 999;
kantstil: solid;
topp: 180px;
bredde: 23%;
}

.bunntekst {
bakgrunnsfarge: rød;
margin-venstre: 14%;
flyte: venstre;
margin-top: 5px;
bredde: 72%;
høyde: 50px;
kantbredde: 0,1 em;
kantfarge: # 999;
kantstil: solid;
}

Og din index.php skal se ut som:





Igjen – dette er basert på et venstre til høyre nettsted med overskrift, innhold, sidefelt, bunntekst. Følger du med? Alle de fem filene skal lagres i temamappen. Navngi mappen hva du vil, og komprimer den til et ZIP-arkiv ved hjelp av WinRar eller et tilsvarende program. Last opp det nye temaet til WordPress-installasjonen, aktiver det og se det konverterte temaet ditt i aksjon!

Det var lett, ikke sant? Du kan style temaet ditt du vil, men de fleste funksjonene vi elsker i WordPress er fremdeles inaktive siden … denne opplæringen dekker det grunnleggende om å konvertere HTML-maler til WordPress og bør være av stor verdi for deg som nybegynner. I neste opplæring vil vi ta ting et hakk høyere og leke oss med andre aspekter ved WordPress-programmering (som f.eks Malfiler og Maletiketter) som lar deg snu HTML-maler uansett hva du vil. Følg med!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me