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

  1. 1. WordPress bemutató: Hogyan lehet WordPress témát létrehozni HTML-ből (1. rész)
  2. 2. Jelenleg olvas: 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

Az oktatóanyag első részében bemutattuk a HTML sablon WordPress témává konvertálásának alapjait. Ha Ön a legkisebb kíváncsi, megtanultunk néhány dolgot a HTML sablonok PHP-fájlokba történő felosztásáról, összeillesztéséről, a WordPress-témák stílusáról és elnevezéséről. Valójában sokat tanultunk, és szeretnénk megismerkedni azokkal a fogalmakkal, amelyeket az első bemutatónkban tárgyaltunk, hogy élvezhessük ezt a második tálalást. A mai bejegyzésben a dolgok egy fokkal magasabbak lesznek. Néhány további területet lefedünk, így létrehozhat egy teljesen működőképes WordPress témát. Tehát, további beavatkozás nélkül, itt megyünk.


Képek és JavaScript fájlok konfigurálása

Ha képei voltak az eredeti HTML sablonban (index.html), valószínűleg észrevette, hogy abbahagyják a megjelenést, miután a sablont PHP-fájlokká vágták. Egyáltalán ne aggódjon, ez csak olyan, mint a PHP. Például, ha lenne logója a fejléc szakaszában, például így:

your_logo_alt_text

… Egy kicsit játszani kell a kóddal. A kód, amelyet egy pillanat alatt felfedtem, segít a böngészőknek abban, hogy megtalálják az Ön logóját (vagy bármilyen más képet) az ön weboldalán képek mappát, amely a téma főkönyvtárának almappája (vagy annak kell lennie). Tehát a logó megjelenítéséhez a fejléc szakaszban nyissa meg a header.php fájlt, és cserélje ki a fenti kódot a következőre:

your_logo_alt_text

A get_template_directory_uri () függvény visszaadja a témakönyvtár URL-jét. Ha tehát hozzáadja logóját egy képmappához, akkor a kód megragadja a logót.

Észrevetted a különbségeket? Nyilvánvaló, hogy ez a kód csak a logót javítja. Más képek kijavításához hasonló módon át kell írni a kódjaikat. Könnyű borsó cucc.

Menjünk tovább a JavaScript-hez. Ha HTML-webhelye JavaScript-et használ, hoz létre egy mappát js és tedd oda a szkripteidet. A következő kóddal hívhatja őket a header.php fájlban:

A fenti kód használja example.js mint egy illusztráció. Ne felejtsd el cserélni ezt a részt a JavaScript fájl nevére.

Természetesen, ha valaki másnak készít témát, akkor valóban töltse be a js fájlokat a wp_enqueue_scripts segítségével. Checkout AJ hozzászólásai a JavaScript hozzáadásáról a WordPress témákhoz további információkért és tippekért.

Sablon fájlok

Az oktatóanyag első részében négy alapvető sablonfájlt említettünk, nevezetesen index.php, header.php, sidebar.php és footer.php. A sablonfájlok szabályozzák, hogy webhelye hogyan jelenjen meg az interneten. A sablonok információkat szereznek a WordPress MySQL adatbázisából, és lefordítják azokat a HTML-kódba, amely a böngészőkben megjelenik. Más szavakkal, a sablonfájlok a WordPress témák építőelemei. A sablonok jobb megértése érdekében mélyítsünk bele egy, a sablonhierarchiát.

Analógiát fogunk használni. Ha a látogató egy kategória linkre (azaz egy kategóriára mutató linkre) kattint, például a http://www.yoursite.com/blog/category/your-category/, a WordPress sablon hierarchiát használ a megfelelő fájl (és tartalom) létrehozására alább:

  • Először a WordPress sablonfájlt fog keresni, amely megegyezik a kategória azonosítójával
  • Ha a kategória azonosítója például 2, akkor a WordPress a 2.php kategória sablonfájlt fogja keresni
  • Ha a 2.php kategória nem érhető el, akkor a WordPress általános kategóriasablon-fájlt fog keresni, mint például a category.php
  • Ha ez a sablonfájl szintén nem érhető el, a WordPress egy általános archívumsablont fog keresni, például archive.php
  • Ha az általános archívumsablon nem létezik, a WordPress visszatér a fő sablonfájlra, az index.php-re

Így működnek a WordPress sablonok, és ezekkel a fájlokkal testreszabhatja a WordPress témát az Ön igényei szerint. Egyéb sablonfájlok a következők:

home.php vagy index.phpA blogbejegyzések indexelésére szolgál
front-page.phpStatikus oldalak vagy legfrissebb üzenetek megjelenítésére szolgál, ahogy az az első oldalon megjelenik
single.phpEgyetlen bejegyzésoldal megjelenítésére szolgál
egy- {utáni típusú} .phpEgyéni postai típusok megjelenítésére szolgál, pl. ha a post-type termék volt, a WordPress az single-product.php fájlt fogja használni
page.phpStatikus oldalak megjelenítésére szolgál
kategória.php vagy archív.phpKategória-archívum index előállítására szolgál
author.phpA szerző megjelenítésére szolgál
date.phpDátum megjelenítésére szolgál
search.phpKeresési eredmények megjelenítésére szolgál
404.phpA 404 kiszolgáló hibaoldalának megjelenítésére szolgál

Ez csak egy rövid lista, sok más is létezik WordPress sablonok. A sablonok témája nagy, és a sablonfájlokkal való játék megtanulásának legjobb módja az átfogó cikk elolvasása Témafejlesztés könyvtár a WordPress-en. Alternatív megoldásként elolvashatja a rövidebbet is Sablonok szakasz a WordPress kódexben.

Sabloncímkék

Mivel láttuk, hogy bevezettük a sablonfájlokat, csak akkor tisztességes egy vagy két dolgot megemlíteni a sabloncímkékről, valamint a WordPressben betöltött szerepükről. A WordPress.org szerint “… a sabloncímkéket a blog sablonjában használják az adatok dinamikus megjelenítésére vagy a blogjának más módon történő testreszabására, biztosítva az eszközöket, hogy az egyéni és érdekes legyen, mint te.”

Előző bemutatónkban találkozott néhány sabloncímkével, például get_header, get_sidebar, get_footer és bloginfo. A következő szakaszban néhány sabloncímkét adunk hozzá az újonnan létrehozott WordPress témához. Feltételezem, hogy már beillesztette a DOCTYPE deklarációt a header.php fájlba. Ha nem, itt van a kód:

A DOCTYPE deklaráció értelmet ad a HTML kódnak. Ha nincs ilyen lehetőség, módosítsuk a nyitó HTML címkét. A lang attribútumot felvesszük a language_attributes tag tetszik:

A fenti kód az alábbiakat generálja:

A DOCTYPE deklaráció és a language_attribute címke helyett a téma szerkezete legitim, és a böngészők megértik a kódot. Ha egy témát készít egy blog számára, akkor fontos, hogy a pingback URL-jére és az RSS-hírcsatornájára mutató hivatkozásokat helyezze a fejébe. A header.php fájlban adja hozzá a következő kódot:

Észrevetted, hogyan alkalmaztuk a bloginfo tag az RSS-hírcsatornát (‘rss2_url’) és a pingback-et (‘pingback_url’)? A header.php fájl mentése előtt adja hozzá a következő kódot:

A fenti wp_head címke behúzza a pluginshez szükséges stíluslapokat és JavaScript fájlokat. Ha elhagyja ezt az apró kódot, akkor előfordulhat, hogy a pluginok nem a kívánt módon működnek. Ha nincs ilyen lehetőség, adjunk hozzá új címeket a WordPress témához – ismét a bloginfo címkével. A header.php fájlban adja hozzá a következő kódot:

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

Az első címke wp_title hozzáadja az oldal vagy a hozzászólás címét és a bloginfo második címke (‘név’)) hozzáadja a blog nevét. Most, hogy a WordPress témának oldalcímei vannak, mi lenne, ha elkészítünk egy képernyőképet a témához, csomagoljuk újra a témát, és pihenünk?

Képernyőkép készítése a témához

A teszt témájának első feltöltésekor észre kellett vennie, hogy hiányzik a képernyőképe a WordPress téma paneljén. Félelmetesnek tűnt, különösen, ha más témákkal is rendelkezik színes képernyőképeket. De ne aggódjon, a képernyőképe létrehozása a témához nagyon egyszerű. Csak hozzon létre egy képet a kedvenc képszerkesztőjével (pl. Adobe Photoshop), vagy készítsen képernyőképet a témájához. Győződjön meg arról, hogy a kép 600 képpont széles és 450 képpont magas. Mentse a képet mint screenshot.png a témamappában. Az összes módosítás mentése, tömörítse a témamappát a ZIP-archívumba. Töltse fel a témát, és aktiválja azt az új változások megtekintéséhez changes

Következtetés

Azt akarom hinni, hogy ez a második oktatóprogram mélyebb betekintést nyújt a WordPress téma statikus HTML-ből történő létrehozásához. A közeljövőben megismertem Önt a WordPress másolásával, de közben a következő forrásokat készítettem neked:

Boldog teremtés!

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