Ez lesz egy szórakoztató bemutató, ahol megvizsgáljuk, hogyan lehet saját WordPress témát létrehozni a semmiből. Valójában abszolút nulla fájlokkal és nulla kódsorokkal kezdjük. Az egyetlen módja annak, hogy megértsük, hogyan működnek a WordPress témák, az, hogy valóban alacsony szinten ugorjunk be, és mindent megteszünk. Igen, csábító elkerülni ezt, mert a WordPress mindent megtesz az Ön számára anélkül, hogy megértené a kódot, amely ezt hatáskörébe helyezi., Ez lehet PHP, JavaScript, CSS vagy akár az alapvető HTML. A végén ezt a lépésről lépésre WordPress téma bemutató, meg fogja érteni, hogy minden illik össze, és hogyan kell hajlítani WordPress az akarat könnyedén.
olyan sok ingyenes téma áll rendelkezésre az Ön számára, amikor WordPress webhelyet futtat. Az ingyenes témákon túl dönthet úgy is, hogy prémiumot fizet a professzionálisan készített WordPress témákért, amelyek nagyszerűen néznek ki, fantasztikus funkciókkal rendelkeznek. Akkor miért tanulja meg, hogyan hozhat létre saját témát a semmiből?, A válasz az, hogy nem számít, milyen témát használ, eljön az idő, amikor egyszerű változtatásokat szeretne végrehajtani a webhelyén. Néhány ilyen változás lehet képes befogadni egy egyszerű plugin vagy widget. Sokszor azonban több értelme van megérteni, hogy mit akarsz megváltoztatni, hogyan kell megváltoztatni, és elkerülni, hogy a WordPress webhelyét rendetlen pluginokká és bővítményekké alakítsa, amelyek nehezebbé válnak. Csak egy kis alapszintű tudással biztos lehet benne, hogy módosítja a témát, vagy egyszerűen csak a semmiből építi a sajátját., Tudni fogja, hogy melyik fájlt kell szerkeszteni, és milyen kódot kell hozzáadni vagy módosítani a kívánt eredmény létrehozásához.
1. lépés: Hozzon létre egy mappát a témafájlok tárolásához.
ha témákat fogunk építeni, akkor tudnunk kell, hogy a WordPress témát alkotó fájlok hol élnek egy WordPress telepítésben. Ez elég egyszerű. Tudjuk, hogy egy WordPress telepítésnek általában van egy wordpressnevű gyökérkönyvtára. Itt van, amit a gyökér könyvtár néz ki, mint a PHP Storm.,
Ez a könyvtár a következő fájlokat és mappákat tartalmazza:
Files
mappák
- wp-admin
- wp-content
WP-includes
A mappa, amelyet most leginkább érdekel, a wp-content mappa. A wp-content mappában található egy témák nevű mappa. Tudod, mire való ez a mappa? Igen, így van! Ez a mappa tartalmaz egy vagy több témát, amelyet használni szeretne a WordPress webhelyén., Ebben a témák mappában találunk három további mappák twentyfifteen, twentysixteen, twentyseventeen. Ezek a mappák tartalmazzák azt a három témát, amelyet a WordPress alapértelmezés szerint szállít. Az alábbiakban vegye figyelembe, hogy van egy customtheme nevű mappa is. Menj előre, és hozza létre a mappát, valamint a telepítés, mivel ez az, ahol mi lesz létre a WordPress téma a semmiből.
2.lépés: stílus létrehozása.css és index.php az egyéni téma mappában
most már tudjuk, hol vannak a WordPress témafájlok a fájlrendszerben., Létrehoztunk egy customtheme nevű új mappát is a témák mappában. Most két üres fájlt fogunk létrehozni ebben a könyvtárban. Az egyik az index.php, a másik pedig stílus.css.
most töltsük fel ezeket a fájlokat a lehető legkisebbre, hogy új témát kapjunk a WordPress-ben.
stílus.css
a WordPress valóban elolvassa a stílusban elhelyezett megjegyzéseket.css fájl. Itt ad meg konkrét információkat az Ön által épített témáról.
a stílus.,a css egy stíluslap (CSS) fájl, amely minden WordPress témához szükséges. Ez vezérli a bemutató (vizuális tervezés, elrendezés) a honlap oldalak.
a részletünkben egyszerűen hozzárendelünk egy Témanevet, a szerzőt, a szerző URI-t, valamint a témánk verziószámát.,
|
1
2
3
4
5
6
|
/*
Téma Neve: customtheme
Szerző: Vegibit
Author URI: https://vegibit.com
Verzió: 1.0
*/
|
index.,php
ebben a fájlban csak valamit szeretnénk kiadni a képernyőre, hogy bebizonyítsuk, hogy az egyéni témánk működik.
|
1
td> |
< h1 > egyéni téma!</h1>
|
nagyszerű munka! Hiszed vagy sem, létrehoztad az első WordPress témát.,
3. Lépés: Aktiválja a témát a WordPress Műszerfal
ezen A ponton tudunk, látogasson el a WordPress Műszerfal, majd keresse Megjelenés->Témák pontot, majd íme, látjuk, hogy az új téma hoztunk létre.
rákattinthatunk a” Téma részletei ” elemre, hogy lefúrjuk az egyéni témát, és megállapítsuk, hogy a stílusba bevitt információk.css fájl működött. Láthatjuk, hogy a Vegibit szerző customtheme nevű, 1.0-s verziójú, valamint egy linket az URI-hoz, amelyet nyújtottunk. Nagyon király.,
és most az igazság pillanata! Menjen előre, kattintson az” Aktiválás ” gombra az új customtheme-en, majd látogasson el a webhelyre. Ez nem fog nyerni semmilyen Webby awards, de megvan a magunk egy jó kezdet egy új egyéni téma!
4.lépés: kód hozzáadása a Post cím és a Post Text
kiadásához bátorságot merítettünk arra, hogy néhány példabeszédet feltöltsünk az adatbázisban, hogy ezzel az adatokkal dolgozhassunk ebben a bemutatóban. Most, a téma csak kimenetek egyéni téma!, az oldalra, amikor meglátogatjuk webhelyünket, függetlenül attól, hogy hány hozzászólás van az adatbázisban. Most lépjünk át néhány adat lekérésére az adatbázisból, majd adjuk ki az oldalra. Pontosabban, szeretnénk letölteni az összes hozzászólás címét, tartalmát, valamint megtekinteni őket a honlapon. Próbáljuk meg most. Először nézzük meg, mi van a WordPress irányítópulton található hozzászólásokhoz.
A WordPress hurok kihasználása
most egy kicsit beszélhetünk a WordPress hurokról. A WordPress hurok valójában a motor, amely a WordPress futtatását teszi lehetővé., Ez a hurok, hogy a téma Fejlesztők ellenőrizze a hozzászólásokat, majd megjeleníti azokat az oldalon, ha szükséges. Ha követi a formátumot az alábbiak szerint. Ha az adatbázisnak vannak hozzászólásai, nézzük át őket, amíg még vannak Hozzászólások, különben tudatjuk a felhasználóval, hogy nincsenek hozzászólások. Úgy néz ki, mint ez a PHP kódot.,
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php
if ( have_posts() ) :
míg ( have_posts() ) : the_post(); ?>
<?,php endwhile;
else :
echo ‘<p> nincsenek hozzászólások!</p>’;
?>
|
vegye figyelembe, hogy a hurok két funkciót használ a legalapvetőbb formájában. Ezek: have_post () és the_post (). A have_posts () függvény csak egy dolgot tesz. Azt mondja, ha vannak olyan bejegyzések az adatbázisban, hogy hurok át., Ez a függvény vagy true vagy false és ennyi. Ha true értéket ad vissza, akkor vannak olyan bejegyzések, amelyek átkerülhetnek. Ha false értéket ad vissza, akkor nincs olyan hozzászólás, amelyet át kellene hurkolni. A másik funkció, the_post () nem ad vissza semmit. A feladat az, hogy a WordPress készen álljon a hozzászólások kiadására. Pontosabban letölti a következő bejegyzést, beállítja a bejegyzést, beállítja a in_the_looptulajdonságot ., Eddig oldalunk továbbra sem ad ki semmilyen információt blogbejegyzéseinkről, de ezt most az indexünkben frissíthetjük.php fájl.
Ok cool. Most két további WordPress funkciót használtunk, a the_title () – t és a the_content () – t. Leggyakrabban ezeket a funkciókat használják a hurok belsejében, és amit csinálnak, az az, hogy az egyes bejegyzések címét és tartalmát lekérik, amikor a hurok az adatbázisban mindegyik felett megismétlődik. Tehát, ahogy a hurok fut, akkor találkoznak az első bejegyzést., Ekkor a the_title () függvény a post címét adja ki az oldalnak, a the_content () pedig a post törzsét adja ki az oldalnak. A következő hurokban ezek a funkciók ismét lekérik a következő címet és tartalmat, majd kimennek az oldalra. Tehát ezekkel a helyén, most látnunk kell néhány információt a hozzászólásainkról, amelyeket elküldünk a képernyőre. Próbáljuk meg! Meglátogatjuk http://wordpresstutorial.dev és látjuk, hogy működik!,
5. Lépés: adjon Hozzá egy Link, Hogy Minden Post
Mi a helyzet összekötő, hogy minden egyes hozzászólást, így megtekintheti egy-egy posztot a saját, mint inkább részeként csak a honlap. Ezt meglehetősen könnyen megtehetjük, ismét a WordPress által biztosított speciális funkciókkal. Ehhez a feladathoz felhasználhatjuk a the_permalink () funkciót. Így frissíthetjük a kódunkat:
most rákattinthatunk minden egyes bejegyzés címére, majd navigálhatunk egy olyan oldalra, amely csak egy bejegyzést tartalmaz. Nagyon király!,
6.lépés: fejléc és lábléc hozzáadása az egyéni témához
a cím és a Post tartalom központi szerepet játszik egy jó téma létrehozásában. Majdnem olyan fontos, hogy a téma fejléc-lábléc része legyen. Ezek a szakaszok tartalmazzák azt a tartalmat, amely mindig látható a weboldal minden oldalán. Ezek a szakaszok a post tartalom felett és alatt vannak. Ehhez kitaláltad, hogy a WordPress által biztosított speciális funkciókat fogjuk használni, hogy megkapjuk a fejlécet, hogy megkapjuk a láblécet. Látsz már egy mintát, ami elkezd fejlődni?, Szinte bármit, amit tehetünk, mint egy téma fejlesztő WordPress már megtörtént az Ön számára útján ezeket az egyéni funkciókat. Tehát meg fogja találni, hogy megéri megjegyezni ezeket a gyakran használt funkciókat a WordPress téma fejlesztésében. Most adjuk hozzá a get_header() és get_footer () függvényeket a témafájlunkhoz.
! Láthatjuk, hogy az egyéni témánknak most van egy fejléc területe, valamint egy lábléc területe., A fejlécben a webhely neve és címkéje, míg a láblécben az ismerős szöveget látjuk, a WordPress oktatóanyagát büszkén hajtja végre a WordPress. Ezek az alapértelmezett fejléc-lábléc opciók, amikor ezeket a funkciókat használjuk. Mi van, ha egyéni fejlécet és láblécet akarunk? Máris hozom!
2 Témafájlról 4
eddig ebben a bemutatóban két fájlunk van, amelyek a customtheme mappában élnek (amely maga a témák mappában található). Azok a fájlok stílusosak.css és index.php. Ezen a ponton több fájlt kell hozzáadnunk, hogy tovább haladjunk., Hozzon létre két új fájlt a customtheme mappában. Ezeket a fájlokat kényelmesen fejlécnek nevezik.php és lábléc.php.
most, amit ezek a fájlok fognak tenni, hogy felülírja az alapértelmezett fejléc és lábléc elrendezések alapértelmezés szerint, ha hívja vagy a get_header() vagy get_footer() függvények. Valójában, ha frissítjük a honlapunkat, úgy tűnik, hogy a fejléc és a lábléc eltűnt. Ennek oka az, hogy még nem adtunk hozzá semmilyen jelölést ezekhez a fájlokhoz. Csak a vigyorogáshoz állítsa be a fájlokat, hogy tesztelje ezt.
fejléc.,php
|
1
2
|
<h2>The Header!</h2>
<hr>
|
footer.,php
|
1
2
|
<hr>
<h2>The Footer!</h2>
|
Working with header.,php
a fenti példánk jól működött, és megmutatja, hogyan működik ez a fájl a legalapvetőbb szinten. A fejléc.a php fájl valójában nagyon fontos, ezért ne fényezzük túl gyorsan a részleteket! Ez az, ahol olyan kódot tartalmaz, amelyhez a webhely összes oldalának valamilyen módon hozzáférnie kell. Először is, az összes HTML oldalnak doctype lesz. Ezt a fájlban megadná. Továbbá, minden oldalon lesz egy nyitó html tag, egy fej rész, és egy nyitó test tag. Mindez mehet a fejlécben.php fájl., Gyorsan adjunk hozzá néhány ilyen dolgot, amelyet az összes weboldal használna. Néhány új WordPress funkciót fogunk használni itt is. Ezek lesznek language_attributes (), bloginfo () és body_class ().
fejléc.php
ha újratöltjük az oldalt, majd megtekintjük az oldal forrását a böngészőnkben, akkor képet kaphatunk arról, hogy mit csinálnak ezek a funkciók. Kiemeljük azokat a sorokat, amelyek kimenete az alábbi funkciókból származik:
ismét láthatjuk a WordPress funkciók nagyon liberális használatát a Saját témák fejlesztésekor a WordPress-ben., Valójában még nem írtunk semmilyen egyedi kódot. Egyszerűen megtanuljuk, hogy a különböző WordPress funkciók mit kínálhatnak nekünk, majd az egyéni témánkba helyezzük őket.
beleértve a Wp_head()
wp_head() egyfajta speciális funkció, Ha WordPress témákkal dolgozik. Ez nem olyan egyszerű, mint az összes többi, amit eddig megvizsgáltunk. Ennek a függvénynek az a célja, hogy véglegesítse a kimenetet a<head> fejléc szakaszában.php fájl., Valójában ez azt jelentette, hogy menjen csak a zárás előtt < / head> tag. Ez akkor válik fontossá, amikor elkezdi hozzáadni a különböző plugineket a webhelyéhez. Parancsfájlokat vagy adatokat nyomtat a fejcímkében az előlapon. Ez egy jó gyakorlat, hogy mindig tartalmazza wp_head () a témák, mint sok más plugin támaszkodhat ez a horog hozzá stílusok, szkriptek, vagy meta elemeket a <head> terület a helyszínen. Itt adjuk hozzá:
fejléc.php
A lábléc kitöltése.,php
befejeztük a fejlécben szükséges alapok hozzáadását.php fájl. Most menjünk, és kerekítsük ki a láblécet.php fájl. A néhány dolog, amit meg kell tennünk. Emlékezzünk erre a fejlécünkben.php fájl van nyitó html és body tags. Ezeket valamikor le kell zárni. A lábléc.php fájl egy tökéletes hely erre. Így hozzá zárás < / html >és </test> címkék mellett, hogy egy hívást a wp_footer() függvény.
lábléc.,php
|
1
2
3
4
5
6
7
|
<footer class=”site-footer”>
<p><?php bloginfo( ‘name’ ) ?,></p>
</footer>
<?php wp_footer() ?,>
</body > >
</html>
|
Változó Helyszínen Információ A WordPress Műszerfal
lehet, Hogy vajon miért kellett hogy használja ezeket a díszes funkciók felépíteni a téma. Például, amikor azt akartuk, hogy felsorolja a nevét, szlogenjét honlapunkon, mi élt a bloginfo () funkció átadásával paraméterek név és leírás., Ennek oka az, hogy általában, soha nem akarja ezeket az értékeket kemény kódolni a webhelyére. Ez olyan információ, amely megváltozhat. Továbbá, ha a témát a nyilvánosság számára elérhetővé teszi, saját nevük és szlogenjük lesz a weboldalukhoz. Képesnek kell lenniük arra, hogy egyszerűen látogassanak el a WordPress adminisztrációs irányítópultjára, és frissítsék Általános beállításaikat, hogy ezeket az adatokat automatikusan feltöltsék.
A honlap címe hivatkozás készítése
a legtöbb téma lehetőséget ad arra, hogy rákattintson a weboldal címszövegére, majd irányítsa a felhasználót a webhely honlapjára., Így, függetlenül attól, hogy a felhasználó hol tartózkodik a webhelyen, mindig rákattinthat a cím szövegére, majd visszatérhet a weboldal főoldalára. Adjuk hozzá ezt a linket most a fejlécben.php.
7. lépés: funkciók hozzáadása.php fájlt a téma
Ezen a ponton, van négy fájlt az egyéni téma. Ezek indexek.php, stílus.css, fejléc.php, és lábléc.php. Valószínűleg a következő legfontosabb fájl, amire szükségünk van, a funkciók.php fájl.
a funkciók.a WordPress php fájlja sok dolgot tesz a témájához. Ez az a fájl, ahol kódot helyez el a WordPress alapértelmezett viselkedésének módosításához., Szinte gondolhat a funkciókra.php formájában egy plugin a WordPress egy pár fontos dolgot kell megjegyezni:
- nem igényel egyedi Fejléc szöveg
- a mappában Tárolt, hogy tartja a téma fájlok
- Hajtja végre, csak akkor, ha a jelenleg aktív téma könyvtár
- kizárólag az aktuális téma
- hívja PHP függvények, WordPress funkciók, vagy egyedi funkciók
az Egyik dolog, amire szükségünk rosszul a téma jobb stílus! Hozzunk létre egy funkciót a funkcióinkban.php fájl tartalmazza a stílust.css fájlt a téma., Itt van, hogyan tudjuk elérni ezt a célt.
Ez a kódrészlet tartalmazza vagy aktívvá teszi az egyéni téma stíluslapját. Most lehet, hogy kíváncsi, hogy miért használunk egyéni funkciót, amikor úgy tűnik, hogy ugyanolyan könnyen manuálisan kapcsolódhatunk a fejlécben lévő stíluslaphoz.php fájl. Nos, ez jön le, hogy csinál egy kicsit több munkát elöl egy nagyobb visszatérés a erőfeszítés később. Mivel a témák egyre összetettebbek és több eszköz kerül hozzáadásra, akkor boldog lesz, hogy ezt a funkciót, amely képes kezelni az összes nehéz emelés az Ön számára.,
most itt az ideje, hogy a dolgok kicsit csinosabbak legyenek. Először adjunk hozzá egy csomagolást <div> egy konténercsoporttal. A nyílás <div> lesz fejlécben.php, míg a záró <div> lesz lábléc.php. A post kimenetet az indexbe is becsomagoljuk.php with an <article> tag that has a class of post. Ez ad nekünk osztályok cél a mi stílus.,css fájl, így többek között beállíthatjuk az oldal szélességét. Azt is hozzá néhány jobb stílus stílus.css ebben a lépésben.
8. lépés: Adjon hozzá néhány stílust a témához
fejléc.php
nyitó hozzáadása <div> a fejléchez.php fájl.
lábléc.php
záró </div> hozzáadása a lábléchez.php fájl.
index.php
<article> tag
style.,css
végül hozzáadunk néhány különféle CSS stílusjavítást, hogy a téma kissé szebbnek tűnjön.
amikor most meglátogatjuk teszt weboldalunkat a böngészőben, láthatjuk, hogy a WordPress téma, amelyet lépésről lépésre fejlesztettünk ki ebben az oktatóanyagban, nagyon jól néz ki!
WordPress Theme Development Tutorial lépésről lépésre összefoglaló
nézzük át mindent, amit tanultunk ebben az alapvető lépésről lépésre WordPress Theme tutorial kezdőknek., Megtanultuk, hogyan lehet létrehozni az első egyéni témát a WordPress-ben azáltal, hogy saját mappát készítünk a WordPress telepítésünk témák mappájának oldalán. Ebben a mappában különböző fájlokat adtunk hozzá, amelyek megfelelnek a webhely különböző szakaszainak. A bemutatónkban elkezdtük azokat a csupasz minimumokat, amelyeknek egy WordPress témában kell lennie. A jövőben sokkal több fájlt adna hozzá ehhez a mappához, mint amit lefedtünk. Nézzük át minden fájlt hoztunk létre ebben a bemutatóban, és mit tettek értünk.
- stílus.,css ez a fájl, ahol hozzá néhány css megjegyzéseket, hogy a WordPress tudja, néhány információt az egyéni téma. Azt is tartja az egyéni css stílus, hogy alkalmazni fogja a témát.
- index.php ez a fájl vezérli a HTML általános kimenete a téma. Ez a fő fájl, amelyet az adatok kiadására használnak a kezdőlapon.
- fejléc.,php lehetővé teszi, hogy adjon meg egy területet, hogy tartsa fontos információkat a honlapon a <head> terület, valamint beleértve a nyitó <html>, <test>, és, <div class=”container”> címkék.
- lábléc.php a lábléc bezárja a fejléc területén megadott nyitó címkéket, amellett, hogy helyet ad a wp_footer() funkció hívásához.
- funkciók.,a php lehetővé teszi a funkciók hívását, mind a PHP, mind a beépített WordPress, valamint a saját funkciók meghatározását a WordPress
alapértelmezett viselkedésének megváltoztatása érdekében, így ott van! Tudtuk, hogy hozzon létre egy teljesen működő egyéni WordPress téma csak 5 fájlokat. Ez ad nekünk az alapítvány szintű tudás építeni fejlettebb WordPress témák, funkciók. Szép Munka!
