WordPress-tutorial: Sådan opretter du et WordPress-tema fra HTML (del 1)

  1. 1. I øjeblikket læser: WordPress-tutorial: Sådan opretter du et WordPress-tema fra HTML (del 1)
  2. 2. WordPress-tutorial: Sådan opretter du et WordPress-tema fra HTML (del 2)
  3. 3. En introduktion til anatomi af et WordPress-tema

Hvis du startede med et HTML (+ CSS) -websted, behøver du ikke smide det hele, når du flytter til WordPress. Du kan konvertere din HTML til WordPress og køre dit (nu mere kraftfulde) websted på den dynamiske WordPress-platform.


Eller måske er det ikke tilfældet. Måske spekulerer du bare på, hvordan du konverterer en klients HTML-design til et fuldt udbygget WordPress-tema. Eller måske vil du gerne lære grundlæggende WordPress (+ PHP) programmering fra den mere velkendte HTML side.

Uanset hvorfor du er her i dag, vil denne WordPress-tutorial introducere dig til det grundlæggende ved at oprette et WordPress-tema fra HTML. Du kan følge denne vejledning for at oprette dit tema fra bunden, eller du kan gå over til Github og hente WPExplorer-starttemaet, som giver et “tomt lærred” til at oprette dit tema med alle de nødvendige skabelonfiler og -koder for at komme i gang. Så hvis du er en af ​​de mennesker, der hellere lærer ved at læse gennem kode, skal du downloade starttemaet, springe over guiden og se, hvordan tingene fungerer … Ellers skal du få en kodeditor (jeg bruger og anbefaler notepad++, eller SublimeText) og en browser klar, følg derefter denne enkle guide til slutningen.

Navngiv dit WordPress-tema

Først skal vi først give dit tema et unikt navn, hvilket ikke er nødvendigt, hvis du kun bygger et tema til dit websted. Uanset hvad er vi nødt til at navngive dit tema for at gøre det let identificerbart ved installationen.

Generelle antagelser på dette tidspunkt:

  • Du har dit index.html- og CSS-stilark klar.
  • Du har en fungerende WordPress-installation med mindst et tema f.eks. Tyve fjorten
  • Du har allerede oprettet en temamappe, hvor du gemmer dit nye WordPress-tema ��

Lad os komme tilbage til at navngive dit WordPress-tema. Åbn din kodeditor, og kopiér indholdet af dit stilark i en ny fil, og gem det som style.css i din temamappe. Tilføj følgende oplysninger øverst på siden nyoprettet style.css:

/ *
Tema Navn: Dit temas navn
Tema URI: Dit temas URL
Beskrivelse: En kort beskrivelse af dit tema
Version: 1.0 eller en hvilken som helst anden version
Forfatter: Dit navn eller WordPress.org's brugernavn
Forfatter URI: Din webadresse
Mærker: Mærker for at lokalisere dit tema i WordPress-temaregisteret
* /

Lad ikke kommentarer (/ *… * /) -kommenterne undgå. Gem ændringerne. Denne info fortæller WordPress navnet på dit tema, forfatteren og gratis lignende ting. Den vigtige del er temaets navn, som giver dig mulighed for at vælge og aktivere dit tema via WP-instrumentbrættet.

Opdeling af din HTML-skabelon i PHP-filer

Denne tutorial antager endvidere, at du har din HTML-skabelon arrangeret fra venstre til højre: header, indhold, sidebjælke, sidefod. Hvis du har et andet design, skal du muligvis spille lidt med koden. Det er sjovt og super let.

Det næste trin involverer oprettelse af fire PHP-filer. Brug din kodeditor til at oprette index.php, header.php, sidebar.php og footer.php, og gem dem i din temamappe. Alle filerne er tomme på dette tidspunkt, så forvent ikke, at de gør noget. Til illustration bruger jeg følgende index.html- og CSS-stilarkfiler:

index.html




Sådan konverteres HTML-skabelon til WordPress-tema - WPExplorer



Dette er overskriftsafsnit. Læg dit logo og andre detaljer her.

Dette er det vigtigste indholdsområde.

Og dette er sidefoden.

CSS STYLESHEET

#wrap {margin: 0 auto; bredde: 95%; margin-top: -10px; højde: 100%;}
.header {bredde: 99,8%; kant: 1px solid # 999; højde: 135px;}
.indhold {width: 70%; kant: 1px solid # 999; margin-top: 5px;}
.sidebjælke {float: højre; margin-top: -54px; bredde: 29%; kant: 1px solid # 999;}
.sidefod {bredde: 99,8%; kant: 1 px solid # 999; margin-top: 10px;}

Du kan gribe begge koder, hvis du ikke har noget at arbejde med. Bare kopiér og indsæt dem i din kodeditor, gem dem, opret de fire PHP-filer, vi lige har nævnt, og gør dig klar til næste del. Åbn din nyoprettede (og tomme) header.php. Log ind i din nuværende WordPress-installation, naviger til Udseende – >> Editor og åben header.php. Kopier al koden mellem koder og indsæt den i din header.php-fil. Følgende er den kode, jeg fik fra filen header.php i temaet Twenty Fourteen:




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




Åbn derefter din index.html arkiver og kopier overskriftskoden (dvs. koden i

afsnit) til din header.php lige under tags som vist nedenfor:




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







Dette er overskriftsafsnit. Læg dit logo og andre detaljer her.

Tilføj derefter …

… hvor som helst mellem -koder i filen header.php for at linke dit stilark. Husk også at placere og åbning af tags i header.php som vist ovenfor. Gem alle ændringer.

Kopier det andet afsnit (dvs..

fra index.html til nyligt oprettede index.php , og tilføj …

… helt øverst og …


… til den absolutte bund. Disse tre linjer henter header.php, sidebar.php og footer.php (i den rækkefølge) og viser dem i index.php, som sætter din kode sammen igen. Gem alle ændringer. På dette tidspunkt skal din index.php-fil se ud:



Kopier derefter indholdet fra sidepanelet og sidefodssektionerne i dit indeks.html til sidepanel.php og sidefod.php.

Tilføjelse af indlæg

Din HTML-skabelon er ved at ændre sig til et WordPress-tema. Vi skal bare tilføje dine indlæg. Hvis du har poster på din blog, hvordan ville du vise dem i dit skræddersyede tema “HTML-til-WordPress”? Du bruger en speciel type PHP-funktion kendt som Loop. Loop er bare et specialiseret stykke kode, der viser dine indlæg og kommentarer, uanset hvor du placerer den.

Nu, for at vise dine indlæg i indholdssektion af index.php-skabelonen, kopier og indsæt følgende kode mellem

og

tags som vist nedenfor:

>

Det vil tage sig af dine indlæg. Let som ABC. På dette tidspunkt (og ved hjælp af eksempelfiler, der findes i denne tutorial), skal din header.php se sådan ud:




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




Din sidebar.php skal se sådan ud:

Din footer.php skal se sådan ud:

Og dette er sidefoden

Bemærkede du afslutningen og tags i sidefoden? Glem ikke at medtage dem også.

Din style.css skal se sådan ud:

/ *
Temanavn: Oprettelse af WordPress-tema fra HTML
Tema URI: http://wpexplorer.com
Beskrivelse: Dette tema viser dig, hvordan du opretter WordPress-temaer fra HTML
Version: 1.0
Forfatter: Freddy for @WPExplorer
Forfatter URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Mærker: wpexplorer, brugerdefineret tema, HTML til WordPress, opret WordPress-tema
* /
krop {
font-familie: arial, helvetica, verdana;
skriftstørrelse: 0,8 em;
bredde: 100%;
højde: 100%;
}

.header {
baggrundsfarve: # 1be;
margin-venstre: 14%;
top: 0;
kantbredde: 0,1 em;
kantfarve: # 999;
kantstil: solid;
bredde: 72%;
højde: 250px;
}

.indhold {
baggrund-farve: # 999;
margin-venstre: 14%;
margin-top: 5px;
flyde: venstre;
bredde: 46%;
kantbredde: 0,1 em;
kantfarve: # 999;
kantstil: solid;
}

.sidebjælke {
baggrund-farve: # 1d5;
margin-højre: 14%;
margin-top: 5px;
float: højre;
kantbredde: 0,1 em;
kantfarve: # 999;
kantstil: solid;
top: 180px;
bredde: 23%;
}

.sidefod {
baggrundsfarve: rød;
margin-venstre: 14%;
flyde: venstre;
margin-top: 5px;
bredde: 72%;
højde: 50px;
kantbredde: 0,1 em;
kantfarve: # 999;
kantstil: solid;
}

Og din index.php skal ligne:





Igen – dette er baseret på et venstre til højre websted med en overskrift, indhold, sidefelt, sidefodslayout. Er du med? Alle de fem filer skal gemmes i din temamappe. Navngiv mappen, hvad du vil, og komprimér den til et ZIP-arkiv ved hjælp af WinRar eller et lignende program. Upload dit nye tema til din WordPress-installation, aktiver det og se dit konverterede tema i aktion!

Det var let, ikke? Du kan style dit tema, uanset hvor du vil, men de fleste af de funktioner, vi elsker i WordPress, er stadig inaktive, da … denne tutorial dækker det grundlæggende ved at konvertere HTML-skabeloner til WordPress og bør være af stor værdi for dig som nybegynder. I den næste tutorial tager vi tingene et hak højere og leger rundt med andre aspekter af WordPress-programmering (som f.eks Skabelonfiler og Skabelon-tags), der giver dig mulighed for at dreje dine HTML-skabeloner, uanset hvilken måde du vil. Bliv hængende!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map