1. 1. Acum citesc: Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 1)
  2. 2. Tutorial WordPress: Cum să creezi o temă WordPress din HTML (partea 2)
  3. 3. O introducere în anatomia unei teme WordPress

Dacă ați început cu un site HTML (+ CSS), nu trebuie să îl aruncați pe tot atunci când vă mutați pe WordPress. Puteți converti HTML-ul dvs. în WordPress și puteți rula site-ul dvs. (acum mai puternic) pe platforma dinamică WordPress.


Sau poate nu este cazul. Poate că vă întrebați doar cum puteți converti designul HTML al unui client într-o temă WordPress complet dezvoltată. Sau poate doriți să învățați programarea de bază WordPress (+ PHP) din partea HTML, care este mai familiară.

Indiferent de motivul pentru care vă aflați astăzi, acest tutorial WordPress vă va prezenta elementele de bază ale creării unei teme WordPress din HTML. Puteți urma acest ghid pentru a crea tema de la zero sau puteți să vă adresați Github și să descărcați tema de pornire WPExplorer care oferă o „pânză goală” pentru a vă crea tema cu toate fișierele șablon și codul necesare pentru a începe. Așadar, dacă sunteți unul dintre acei oameni care învață mai degrabă citind codul, apoi descărcați tema de pornire, săriți ghidul și să vedeți cum funcționează lucrurile … În caz contrar, obțineți un editor de cod (eu îl folosesc și recomand Notepad++, sau SublimeText) și un browser gata, apoi urmați acest ghid simplu până la sfârșit.

Denumirea temei dvs. WordPress

În primul rând, trebuie să dăm temei dvs. un nume unic, ceea ce nu este necesar doar dacă creați o temă doar pentru site-ul dvs. web. Indiferent, trebuie să numim tema dvs. pentru a o face ușor identificabilă la instalare.

Ipoteze generale în acest moment:

  • Aveți gata fișa de stil index.html și CSS.
  • Aveți o instalare WordPress funcțională cu cel puțin o temă, de ex. Douăzeci și paisprezece
  • Ați creat deja un folder cu teme în care vă veți salva noua temă WordPress ��

Să revenim la denumirea temei dvs. WordPress. Deschideți editorul de coduri și copiați-lipiți conținutul foii de stil într-un fișier nou și salvați-l ca style.css în folderul dvs. cu temă. Adăugați următoarele informații chiar în partea de sus a stil nou-creat.css:

/ *
Numele temei: numele temei dvs.
Tema URI: adresa URL a temei dvs.
Descriere: O scurtă descriere a temei
Versiune: 1.0 sau orice altă versiune doriți
Autor: Numele dvs. sau numele de utilizator WordPress.org
Autor URI: adresa dvs. web
Etichete: etichete pentru a localiza tema dvs. în depozitul de teme WordPress
* /

Nu lăsați etichetele de comentarii (/ * … * /). Salvați modificările. Această informație spune pe WordPress numele temei tale, autorul și chestii de acest fel de complimente. Partea importantă este numele temei, care vă permite să alegeți și să activați tema prin tabloul de bord WP.

Dezvoltarea șablonului dvs. HTML în fișiere PHP

Acest tutorial presupune în continuare că aveți șablonul HTML aranjat la stânga la dreapta: antet, conținut, bară laterală, subsol. Dacă aveți un design diferit, poate fi necesar să vă jucați puțin cu codul. Este distractiv și super ușor.

Următorul pas implică crearea a patru fișiere PHP. Utilizând editorul de coduri, creați index.php, header.php, sidebar.php și footer.php și salvați-le în folderul dvs. tematic. Toate fișierele sunt goale în acest moment, deci nu vă așteptați să facă nimic. În scop ilustrativ, folosesc următoarele fișiere de stil index.html și CSS:

index.html




Cum să convertiți șablonul HTML în temă WordPress - WPExplorer



Aceasta este secțiunea antet. Puneți logo-ul și alte detalii aici.

Acesta este principalul domeniu de conținut.

Și acesta este subsolul.

CSS STYLESHEET

#wrap {margin: 0 auto; lățime: 95%; margin-top: -10px; înălțime: 100%;}
.antet {lățime: 99,8%; margine: 1px solid # 999; înălțime: 135px;}
.conținut {width: 70%; graniță: 1px solid # 999; marginea de sus: 5px;}
.Sidebar {float: right; margine-top: -54px; lățime: 29%; graniță: 1px solid # 999;}
.subsol {lățime: 99,8%; margine: 1px solid # 999; margine de sus: 10px;}

Puteți apuca ambele coduri dacă nu aveți cu ce să lucrați. Doar copiați-lipiți-le în editorul de cod, salvați-le, creați cele patru fișiere PHP pe care tocmai le-am menționat și pregătiți-vă pentru următoarea parte. Deschideți nou-creata (și goală) header.php. Conectați-vă la instalarea WordPress existentă, navigați la Aspect – >> Editor și deschis header.php. Copiați tot codul între etichetează-l și lipește-l în fișierul tău header.php. Următorul este codul pe care l-am obținut din fișierul header.php din tema Douăzeci și paisprezece:



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

/js/html5.js">


Apoi deschideți-vă index.html fișierează și copiază codul antetului (adică codul din

secțiune) la antetul dvs..php chiar sub Etichete după cum se arată mai jos:




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






Aceasta este secțiunea antet. Puneți logo-ul și alte detalii aici.

Apoi adauga…

… oriunde între etichetele din fișierul header.php pentru a conecta fișa de stil. Amintiți-vă, de asemenea, pentru a pune și deschiderea etichetelor în antetul.php așa cum se arată mai sus. Salvați toate modificările.

Copiați a doua secțiune (adică.

de la index.html la index nou-creat.php , si adauga…

… în vârf și …


… până la fundul absolut. Aceste trei linii preiau header.php, sidebar.php și footer.php (în acea ordine) și le afișează în index.php, care reface codul împreună. Salvați toate modificările. În acest moment, fișierul dvs. index.php ar trebui să arate astfel:



Apoi copiați conținutul din secțiunile barei laterale și ale subsolului din index.html în sidebar.php și respectiv footer.php.

Adăugarea postărilor

Șablonul HTML este pe cale să se transforme într-o temă WordPress. Trebuie doar să adăugăm postările tale. Dacă aveți postări pe blogul dvs., cum le puteți afișa pe tema personalizată „HTML-la-WordPress”? Utilizați un tip special de funcție PHP cunoscut sub numele de Buclă. Bucla este doar o bucată de cod specializată care afișează postările și comentariile dvs. oriunde l-ați plasa.

Acum, pentru a afișa postările dvs. în secțiunea conținut a șablonului index.php, copiați și lipiți următorul cod între

și

Etichete după cum se arată mai jos:




Asta va avea grijă de postările tale. Usor ca ABC. În acest moment (și folosind fișierele de exemple furnizate în acest tutorial), header.php ar trebui să arate astfel:



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

/js/html5.js">


Sidebar.php dvs. ar trebui să arate astfel:

Footer.php dvs. ar trebui să arate astfel:

Și acesta este subsolul

Ai observat închiderea și etichete în subsol? Nu uitați să le includeți și pe acestea.

Stilul dvs..css ar trebui să arate așa:

/ *
Nume temă: Crearea temei WordPress din HTML
Tema URI: http://wpexplorer.com
Descriere: Această temă vă arată cum puteți crea teme WordPress din HTML
Versiune: 1.0
Autor: Freddy pentru @WPExplorer
URI autor: http://WPExplorer.com/create-wordpress-theme-html-1/
Etichete: wpexplorer, temă personalizată, HTML la WordPress, crea temă WordPress
* /
corp {
font-familie: arial, helvetica, verdana;
font-size: 0,8em;
latime: 100%;
inaltime: 100%;
}

.antet {
culoare de fundal: # 1be;
marja-stanga: 14%;
top: 0;
lățime de graniță: 0,1em;
culoare de bordură: # 999;
stil de graniță: solid;
lățime: 72%;
inaltime: 250px;
}

.continut {
culoare de fundal: # 999;
marja-stanga: 14%;
margine de sus: 5px;
plutește la stânga;
lățime: 46%;
lățime de graniță: 0,1em;
culoare de bordură: # 999;
stil de graniță: solid;
}

.bara laterală {
culoare de fundal: # 1d5;
marja-dreapta: 14%;
margine de sus: 5px;
float: dreapta;
lățime de graniță: 0,1em;
culoare de bordură: # 999;
stil de graniță: solid;
partea de sus: 180px;
latime: 23%;
}

.subsol {
fundal-culoare: roșu;
marja-stanga: 14%;
plutește la stânga;
margine de sus: 5px;
lățime: 72%;
inaltime: 50px;
lățime de graniță: 0,1em;
culoare de bordură: # 999;
stil de graniță: solid;
}

Iar index.php dvs. ar trebui să arate similar cu:





Din nou – aceasta se bazează pe un site de la stânga la dreapta, cu un antet, conținut, bară laterală, aspect de subsol. Urmărești? Toate cele cinci fișiere ar trebui salvate în folderul dvs. tematic. Denumiți folderul cum doriți și comprimați-l într-o arhivă ZIP folosind WinRar sau un program echivalent. Încărcați-vă noua temă în instalarea dvs. WordPress, activați-o și vedeți-vă tema convertită în acțiune!

A fost ușor, nu? Puteți stabili tema dvs. oricum doriți, dar majoritatea funcțiilor pe care le iubim în WordPress sunt încă inactive, deoarece … acest tutorial acoperă elementele de bază ale convertirii șabloanelor HTML în WordPress și ar trebui să vă fie de mare valoare ca începător. În tutorialul următor, vom lua lucrurile cu o notă mai mare și ne vom juca cu alte aspecte ale programării WordPress (cum ar fi, de exemplu Fișiere de șabloane și Etichete de etichetă) care vă vor permite să transformați șabloanele HTML, după cum doriți. Rămâneți aproape!

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