WordPress bemutató: Hogyan lehet WordPress témát létrehozni HTML-ből (1. rész)

  1. 1. Jelenleg olvas: WordPress bemutató: Hogyan lehet WordPress témát létrehozni HTML-ből (1. rész)
  2. 2. WordPress bemutatója: Hogyan lehet WordPress témát létrehozni HTML-ből (2. rész)
  3. 3. Bevezetés a WordPress téma anatómiájához

Ha egy HTML (+ CSS) weboldallal kezdte, akkor nem kell mindent eldobnia, amikor a WordPress-re költözik. Konvertálhatja HTML-jét WordPress-ként, és futtathatja (most már erősebb) webhelyét a dinamikus WordPress-platformon.


Vagy talán nem erről van szó. Lehet, hogy csak azon töprengett, vajon hogyan lehet átalakítani az ügyfél HTML-formátumát teljes értékű WordPress-témává. Vagy szeretné megtanulni az alapvető WordPress (+ PHP) programozást a már ismert HTML oldalról.

Bármelyik okból is tartózkodik itt ma, ez a WordPress oktatóprogram bemutatja a WordPress téma HTML-ből történő létrehozásának alapjairól. Kövesse ezt az útmutatót, hogy a témát a semmiből hozzon létre, vagy eljuthat a Githubba, és letöltheti a WPExplorer kezdő témát, amely „üres vászonnal” rendelkezik a téma létrehozásához az összes szükséges sablonfájllal és kóddal az induláshoz. Tehát ha Ön azon emberek közé tartozik, akik inkább a kód olvasásával tanulnak, majd töltse le az indító témát, hagyja ki az útmutatót, és nézd meg, hogyan működnek a dolgok … Egyébként szerezzen be egy kódszerkesztőt (használom és ajánlom Jegyzettömb++, vagy SublimeText) és egy böngésző készen áll, majd kövesse ezt az egyszerű útmutatót a végéig.

A WordPress téma elnevezése

Először is, a témának egyedi nevet kell adnunk, amely nem szükséges, ha egy témát csak a webhelyére épít. Függetlenül attól, meg kell neveznünk a témáját, hogy a telepítéskor könnyen azonosíthatóvá váljon.

Általános feltételezések ezen a ponton:

  • Ön készen áll az index.html és a CSS stíluslapra.
  • Van egy működő WordPress telepítés, amely legalább egy témával rendelkezik, pl. Huszonnégy
  • Már létrehozott egy témamappát, ahol elmenti az új WordPress témát ��

Térjünk vissza a WordPress téma elnevezéséhez. Nyissa meg a kódszerkesztőt, és másolja be és illessze be a stíluslap tartalmát egy új fájlba, és mentse el mint style.css a témamappában. Adja hozzá a következő információkat a újonnan létrehozott style.css:

/ *
Téma neve: A téma neve
Téma URI: A téma URL-je
Leírás: A téma rövid leírása
Verzió: 1.0 vagy bármely más verzió, amelyet szeretne
Szerző: Az Ön neve vagy a WordPress.org felhasználóneve
Szerző URI: Az Ön webcíme
Címkék: Címkék, amelyek segítségével megtalálhatja a témát a WordPress tématárban
* /

Ne hagyja ki a (/ *… * /) megjegyzéscímkéket. Mentse el a változtatásokat. Ez az információ elmondja a WordPressnek a téma nevét, a szerzőt és az ilyen kiegészítő dolgokat. A fontos rész a téma neve, amely lehetővé teszi a téma kiválasztását és aktiválását a WP irányítópulton keresztül.

A HTML sablon felbontása a PHP fájlokba

Ez az oktatóprogram feltételezi továbbá, hogy a HTML sablon balról jobbra van rendezve: fejléc, tartalom, oldalsáv, lábléc. Ha más formatervezésű, akkor valószínűleg egy kicsit kell játszania a kóddal. Nagyon szórakoztató és nagyon egyszerű.

A következő lépés négy PHP fájl létrehozása. Kódszerkesztőjével hozza létre az index.php, header.php, sidebar.php és footer.php fájlokat, és mentse őket a témamappába. Az összes fájl ezen a pillanatban üres, tehát ne várja el, hogy tegyen semmit. Illusztráció céljából a következő index.html és CSS stíluslap-fájlokat használom:

index.html




Hogyan konvertálhatunk HTML sablont WordPress témává - WPExplorer



Ez fejléc szakasz. Helyezze ide a logóját és más részleteit.

Ez a fő tartalmi terület.

És ez a lábléc.

CSS STYLESHEET

#wrap {margin: 0 auto; szélesség: 95%; margin-top: -10px; magasság: 100%;}
.header {szélesség: 99,8%; szegély: 1 képpont szilárd # 999; magasság: 135 képpont;}
.tartalom {szélesség: 70%; szegély: 1 képpont szilárd # 999; margó felső: 5 képpont;}
.oldalsáv {float: right; margin-top: -54px; szélesség: 29%; szegély: 1 képpont szilárd # 999;}
.lábléc {szélesség: 99,8%; szegély: 1 képpont szilárd # 999; margó felső: 10 képpont;}

Megragadhatja mindkét kódot, ha nincs semmi dolgod. Csak másolja be és illessze be őket a kódszerkesztőbe, mentse el, készítse el az általunk említett négy PHP fájlt, és készüljön fel a következő részre. Nyissa meg az újonnan létrehozott (és üres) header.php. Jelentkezzen be a meglévő WordPress telepítésébe, keresse meg a Megjelenés – >> Szerkesztő és nyitva header.php. Másolja az összes kódot a címkéket, és illessze be a header.php fájlba. A következő kódot kaptam a header.php fájlból huszonnégy témában:



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

/js/html5.js">


Akkor nyisd meg index.html fájlba, és másolja a fejléc kódját (azaz a kódot a

szakasz) a header.php fájlhoz közvetlenül a címkék az alább látható módon:




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






Ez fejléc szakasz. Helyezze ide a logóját és más részleteit.

Majd adjon hozzá…

… bárhol a címkék a header.php fájlban a stíluslap összekapcsolásához. Ne felejtse el feltenni a és címkék megnyitása a header.php fájlban, a fenti ábra szerint. Mentse az összes változást.

Másolja a második részt (azaz.

az index.html-től a újonnan létrehozott index.php , és adj hozzá …

… a tetején és …


… Az abszolút aljára. Ez a három sor a head.php, sidebar.php és footer.php fájlokat (ebben a sorrendben) tölti le, és megjeleníti az index.php fájlban, amely összeállítja a kódot. Mentse az összes változást. Ezen a ponton az index.php fájlnak így kell kinéznie:



Ezután másolja a tartalmat az index.html oldalsáv és lábléc szakaszaiból az sidebar.php és footer.php sorrendbe..

Hozzászólások hozzáadása

HTML-sablonja egy WordPress-témává válik. Csak hozzá kell adnunk a hozzászólásainkat. Ha van hozzászólásod a blogodban, hogyan jelenítheted meg azokat az egyedi “HTML-to-WordPress” témában? Egy speciális típusú PHP funkciót használ, amelyet a Hurok. A hurok csak egy speciális kóddarab, amely megjeleníti a hozzászólásait és megjegyzéseit, bárhol is helyezze el.

Most, hogy megjelenítse a hozzászólásait a tartalom szakasz az index.php sablonban, másolja át és illessze be a következő kódot a

és

címkék az alább látható módon:




Ez gondoskodik a hozzászólásodról. Könnyű, mint az ABC. Ebben a szakaszban (és az ebben az oktatóanyagban szereplő mintafájlok felhasználásával) a header.php-nek így kell kinéznie:



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

/js/html5.js">


Az sidebar.php-nek így kell kinéznie:

A footer.php-nek így kell kinéznie:

És ez a lábléc

Észrevetted a bezárást és címkék a láblécben? Ne felejtsd el ezeket is belefoglalni.

A style.css-nak így kell kinéznie:

/ *
Téma neve: WordPress téma létrehozása HTML-ből
Téma URI: http://wpexplorer.com
Leírás: Ez a téma megmutatja, hogyan lehet a WordPress témákat HTML-ből létrehozni
Verzió: 1.0
Szerző: Freddy a @WPExplorer számára
A szerző URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Címkék: wpexplorer, egyedi téma, HTML a WordPresshez, hozzon létre WordPress témát
* /
test {
betűtípus-család: arial, helvetica, verdana;
betűméret: 0.8em;
szélesség: 100%;
magasság: 100%;
}

.fejléc {
háttér szín: # 1be;
bal oldali margin: 14%;
felső: 0;
határ szélessége: 0,1em;
szegélyszín: # 999;
szegélystílus: szilárd;
szélesség: 72%;
magasság: 250 képpont;
}

.tartalom {
háttér szín: # 999;
bal oldali margin: 14%;
margó felső: 5 képpont;
balra lebeg;
szélesség: 46%;
határ szélessége: 0,1em;
szegélyszín: # 999;
szegélystílus: szilárd;
}

.oldalsáv {
háttér szín: # 1d5;
jobb margó: 14%;
margó felső: 5 képpont;
úszó: jobb;
határ szélessége: 0,1em;
szegélyszín: # 999;
szegélystílus: szilárd;
felső: 180 képpont;
szélesség: 23%;
}

.lábléc {
háttér szín: piros;
bal oldali margin: 14%;
balra lebeg;
margó felső: 5 képpont;
szélesség: 72%;
magasság: 50 képpont;
határ szélessége: 0,1em;
szegélyszín: # 999;
szegélystílus: szilárd;
}

És az index.php-nek hasonlónak kell lennie:





Ismét – ez a balról jobbra mutató weboldalon található, fejléc, tartalom, oldalsáv és lábléc elrendezéssel. Követed? Az öt fájlt el kell menteni a témamappába. Nevezze el a mappát, amit csak akar, és tömörítse egy ZIP archívumba a WinRar vagy azzal egyenértékű program használatával. Töltse fel az új témát a WordPress telepítésére, aktiválja azt, és látja, hogyan működik a konvertált téma!

Ez könnyű volt, ugye? Stílusosíthatja a témát, ahogy szeretné, de a legtöbb, a WordPressben szeretett szolgáltatásunk továbbra is inaktív, mivel … ez az oktatóanyag a HTML sablonok WordPress-re történő konvertálásának alapjait tartalmazza, és kezdőként nagy jelentőséggel bír. A következő oktatóanyagban egy lépéssel magasabbra vesszük a dolgokat, és játszunk a WordPress programozás más szempontjaival (például: Sablon fájlok és Sabloncímkék), amely lehetővé teszi, hogy HTML-sablonjait bármilyen módon megfordítsa. Maradjon velünk!

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