A szerzőről

Nick Schäferhoff vállalkozó, online marketingszakember és profi blogger Németországból. Amikor nem épít weboldalakat, nem hoz létre tartalmat vagy segít ügyfeleinek … További információ a Nickről↬

Szeretem azt gondolni a WordPress-ről, mint a webfejlesztés átjáró gyógyszeréről. Sokan, akik elkezdik használni a platformot, eleinte pusztán egy kényelmes (és ingyenes) módszert keresnek egy egyszerű weboldal létrehozására, gyakran egy WordPress-oldal segítségével. builder plugin. Olyan, mint “Csak egyszer megpróbálom.”

Azonban a felhasználók jó része nem áll meg itt. Ehelyett belekötnek. Jöjjön elő újabb ötletekkel. Kísérlet. Próbálja ki az új beépülő modulokat. Fedezze fel a Firebug-ot. Bumm. Hamarosan nincs visszaút. Úgy hangzik, mint a története? WordPress-felhasználóként természetes, hogy egyre több irányítást akar a webhelye felett. Egyéni tervezésre, egyedi funkcionalitásra, mindenre szabott vágyakozásra.

További információ a SmashingMag-ról:

• WordPress gyermek téma létrehozása és testreszabása
• Épület Egyéni archív oldal a WordPress számára
• A WordPress archívumok testreszabása

Szerencsére a WordPress pontosan erre készült. Rugalmas felépítése és szétválasztott architektúrája lehetővé teszi, hogy bárki gyakorlatilag bármit megváltoztathasson a webhelyén.

A teljes ellenőrzési törekvés legfontosabb eszközei közé tartoznak az oldalsablonok. Lehetővé teszik a felhasználók számára, hogy drámai módon megváltoztassák weboldaluk felépítését és funkcionalitását. Szeretne testreszabott fejlécet az első oldalához? Kész. További oldalsáv csak a blog oldalához? Nincs mit. Egyedülálló 404-es hibaoldal? Lenni. Az én. Vendég.

Ha szeretné tudni, hogy a WordPress oldalsablonjai hogyan segíthetnek ennek megvalósításában, olvassa el tovább. De először egy kis háttérinformáció.

Sablonfájlok a WordPress-ben

Miről beszélünk, amikor sablonokról beszélünk a WordPress kontextusában? A rövid verzió az, hogy a sablonok olyan fájlok, amelyek megmondják a WordPressnek, hogy miként jelenítsenek meg különböző típusú tartalmakat.

A valamivel hosszabb verzió: valahányszor valaki kérést küld a webhely egy részének megtekintésére, a WordPress platform rájön. milyen tartalmat akarnak látni, és hogyan kell megjeleníteni webhelyének adott részét.

Ez utóbbi esetében a WordPress megpróbálja a témájában talált legmegfelelőbb sablonfájlt használni. Melyiket egy meghatározott sorrend, a WordPress sablonhierarchia alapján döntik el. Az alábbi képernyőképen vagy ebben az interaktív változatban láthatja, hogyan néz ki ez.

A sablonhierarchia a WordPress által ismert sablonfájlok listája, amelyeket rangsorolva állapítanak meg a fájl elsőbbséget élvez egy másikkal szemben.

Úgy gondolhat rá, mint egy döntési fára. Amikor a WordPress megpróbálja eldönteni, hogyan jelenjen meg egy adott oldal, akkor a sablonhierarchiában halad lefelé, amíg meg nem találja az első sablonfájlt, amely illeszkedik a kért oldalhoz. Például, ha valaki megpróbálta elérni az http://yoursite.com/category/news címet, a WordPress ebben a sorrendben keresi a megfelelő sablonfájlt:

A hierarchia alján található az index .php. Olyan tartalom megjelenítésére szolgál, amelynek nevéhez nincs csatolva egy konkrétabb sablonfájl. Ha egy sablonfájl a hierarchiában magasabb helyet foglal el, akkor a WordPress automatikusan felhasználja ezt a fájlt a kérdéses tartalom megjelenítéséhez.

Oldalsablonok és azok használata

Az oldalaknál a szokásos sablon általában a találatosan elnevezett page.php. Hacsak nincs elérhető konkrétabb sablonfájl (például egy archív oldal archive.php), a WordPress a page.php-t használja a weboldal összes oldalának tartalmának megjelenítéséhez.

Sok esetben azonban előfordulhat, hogy módosítania kell a webhely egyes részeinek kialakítását, megjelenését, hangulatát vagy működését. Itt jönnek létre az oldalsablonok.A testreszabott oldalsablonok lehetővé teszik a WordPress-webhely bármely részének testreszabását anélkül, hogy befolyásolnák a többi részét.

Lehet, hogy már látta ezt a munkahelyén. Például manapság sok WordPress-témához tartozik az oldal teljes szélességre változtatása, egy második oldalsáv hozzáadása vagy az oldalsáv helyének megváltoztatása. Ha ez a helyzet a tiéd, valószínűleg sablonfájlokon keresztül történt. Ennek többféle módja van, és később áttekintjük őket.

Először azonban egy figyelmeztetés: mivel a sablonokkal való munka az aktív témában lévő fájlok szerkesztését és megváltoztatását jelenti, mindig jó ötlet, hogy az ilyen típusú testreszabások elvégzése során egy gyermek témát kell választani. Így nem áll fenn annak a veszélye, hogy felülírja a változtatásokat, amikor a szülő téma frissül.

Az oldalak testreszabása a WordPress programban

Az egyéni használatnak három alapvető módja van. oldalsablonok a WordPress-ben: feltételes utasítások hozzáadása egy meglévő sablonhoz; meghatározott hierarchiában magasabb rangú oldalsablonok létrehozása; és sablonok közvetlen hozzárendelése adott oldalakhoz. Ezeket sorban megvizsgáljuk.

Feltételes címkék használata az alapértelmezett sablonokban

Az oldalspecifikus változtatások egyszerű módja, ha a WordPress sok feltételes címkét hozzáad egy sablon már használatban van. Ahogy a neve is sugallja, ezeket a címkéket olyan funkciók létrehozására használják, amelyek csak akkor teljesülnek, ha egy bizonyos feltétel teljesül. Az oldalsablonok összefüggésében ez valami az “X műveletet csak az Y oldalon hajtsa végre” sorban.

Általában feltételes címkéket adna hozzá a téma page.php fájljához (kivéve, ha természetesen a webhelyének egy másik részét szeretné testreszabni). Ezek lehetővé teszik, hogy a kezdőlapra, az első oldalra, a blog oldalára vagy a webhely bármely más oldalára korlátozódjon.

Íme néhány gyakran használt feltételes címkék:

Például, ha hozzáadjuk a page.php-hez a szokásos get_header(); címke helyett, a következő kód betölteni fog egy egyedi fejlécfájlt, amelynek neve header -shop.php az http://yoursite.com/products oldal megjelenítésekor.

Erre jó felhasználási lehetőség lenne van egy bolt a webhelyén, és egy másik fejlécképet vagy testreszabott menüt kell megjelenítenie a bolt oldalán. Ezután hozzáadhatja ezeket a testreszabásokat a header-shop.php fájlba, és ez a megfelelő helyen jelenik meg.

A feltételes címkék azonban nem li egy oldalra párosítva. Több állítást is megtehet egymás után, így:

Ebben a második példában két feltétel megváltoztatja a webhely különböző oldalainak viselkedését. A fent említett boltspecifikus fejlécfájl betöltése mellett most egy header-about.php fájlt is betölt egy 42 azonosítójú oldalra. Az összes többi oldalra a szokásos fejlécfájl vonatkozik.

További információ a feltételes címkék használatával kapcsolatban a következő forrásokat javasoljuk:

• WordPress Codex: Feltételes címkék
• ThemeLab: A végső útmutató a WordPress Feltételes címkékhez

Oldalspecifikus fájlok létrehozása a WordPress hierarchiában

A feltételes címkék kiválóan alkalmasak kisebb változtatások bevezetésére az oldalsablonokban. Természetesen nagyobb testreszabásokat is létrehozhat, ha egymás után sok feltételes utasítást használ. Ezt azonban nagyon nehézkes megoldásnak találom, és inkább kijelölt sablonfájlokat választanék.

Ennek egyik módja a WordPress sablonhierarchia kiaknázása. Mint láttuk, a hierarchia áthalad a lehetséges sablonfájlok listáján, és kiválasztja az elsőt, amelyet talál. Az oldalak esetében a hierarchia a következőképpen néz ki:

• Egyéni oldalsablon
• page- {slug} .php
• page- {id} .php
• page.php
• index.php

Első helyen az egyedi oldalsablonok állnak, amelyeket közvetlenül egy adott oldalhoz rendeltek. Ha ezek egyike létezik, a WordPress használja, függetlenül attól, hogy mely sablonfájlok vannak még jelen. Egy kicsit többet fogunk beszélni az egyéni oldalsablonokról.

Ezt követően a WordPress olyan oldalsablont keres, amely tartalmazza a kérdéses oldal slugját. Például, ha a témafájlokba belefoglal egy page-about.php nevű fájlt, a WordPress ezt a fájlt fogja használni a „Névjegy” oldal megjelenítéséhez, vagy bármelyik oldal megtalálható a http://www.yoursite.com/about alatt. .

Alternatív megoldásként ugyanezt elérheti az oldal azonosítójának megcélzásával is. Tehát, ha ugyanazon oldal azonosítója 5, a WordPress a page.php előtti page-5.php sablonfájlt használja, ha létezik; vagyis csak akkor, ha nincs elérhető magasabb rangú oldalsablon.

(BTW, minden oldal azonosítóját megtudhatja, ha a címe fölé viszi az egérmutatót a WordPress „Minden oldal” alatt. -end. Az azonosító a böngészője által megjelenített hivatkozásban jelenik meg.)

Egyéni oldalsablonok hozzárendelése

A sablonok megadása mellett a WordPress által automatikusan használt formában is rendelkezésre áll. egyedi sablonok manuális hozzárendelése adott oldalakhoz.Amint a sablonhierarchiából látható, ezek meg fogják ütni a sablonfájlokat, amelyek a téma mappában találhatók.

Csakúgy, mint az oldalspecifikus sablonok létrehozása a WordPress hierarchiához, ehhez meg kell adnia egy sablonfájlt, majd kösd össze azzal az oldallal, amelyhez használni szeretnéd. Ez utóbbi két különböző módon végezhető el, amelyeket Ön már ismer. Csak abban az esetben, ha nem az, itt van, hogyan kell csinálni.

1. Egyéni oldalsablonok hozzárendelése a WordPress szerkesztőből

A WordPress szerkesztőben az „Oldalattribútumok” nevű opciómezőt találja egy legördülő menüvel a „Sablon” alatt.

Ha rákattint, megjelenik a WordPress webhelyén elérhető oldalsablonok listája. Válassza ki a kívánt elemet, mentse vagy frissítse az oldalát, és kész.

2. Egyéni sablon beállítása gyorsszerkesztéssel

Ugyanez érhető el a WordPress szerkesztőbe történő belépés nélkül is. Lépjen az „Összes oldal” elemre, és vigye az egérmutatót az ott található lista bármely elemére. Láthatóvá válik egy menü, amely tartalmazza a „Gyorsszerkesztés” elemet.

Kattintson rá, hogy az oldal beállításait közvetlenül a listából szerkessze. Ugyanaz a legördülő menü jelenik meg egy másik oldalsablon kiválasztásához. Válassz egyet, frissítsd az oldalt, és kész.

Végül is nem olyan nehéz, igaz? De mi van, ha még nincs egyéni oldalsablonja? Hogyan hozza létre úgy, hogy webhelye pontosan úgy nézzen ki, ahogy szeretné? Ne aggódjon, erről szól a következő rész.

Lépésenkénti útmutató az egyéni oldalsablonok létrehozásához

Nem egyedi testreszabott sablonfájlok összerakása az oldalaihoz nehéz, de itt van néhány részlet, amire figyelned kell. Ezért nézzük át a folyamatot apránként.

1. Az alapértelmezett sablon megkeresése

Jó módszer az, ha másolja a módosítani kívánt oldal által jelenleg használt sablont. Könnyebb módosítani a meglévő kódot, mint egy teljes oldalt írni a semmiből. A legtöbb esetben ez a page.php fájl lesz.

(Ha nem tudja, hogyan lehet megtudni, hogy melyik sablonfájlt használja a szerkeszteni kívánt oldalon, akkor a Mi a fájl plugin lesz hasznosnak bizonyulnak.)

A Huszonkettő témát fogom használni bemutatásra. Így néz ki a szokásos oldalsablonja:

Amint láthatja, itt semmi sem divatos: a fejléc és a lábléc, valamint a hurok közepén szokásos hívások. A kérdéses oldal így néz ki:

2. A sablonfájl másolása és átnevezése

Az alapértelmezett sablonfájl azonosítása után itt az ideje, hogy másolatot készítsen. A másolt fájlt felhasználjuk az oldalunkon a kívánt változtatások elvégzéséhez. Ehhez azt is át kell neveznünk. Nem lehet két azonos nevű fájl, ez mindenki számára zavaró.

Szabadon adhatsz tetszőleges nevet a fájlnak, amennyiben az nem a fenntartott téma fájlnevekkel kezdődik. . Tehát ne nevezze el page-something.php fájlnak vagy bármi másnak, ami arra késztetné a WordPresset, hogy ez egy dedikált sablonfájl legyen.

Célszerű olyan nevet használni, amely könnyen azonosítja, hogy ezt a sablonfájlt hogyan használják for, például my-custom-template.php. Esetemben a custom-full-width.php fájlt fogom használni.

3. A sablonfájl fejlécének testreszabása

Ezután el kell mondanunk a WordPressnek, hogy ez az új fájl egy egyedi oldalsablon. Ehhez a fájl fejlécét a következőképpen kell beállítanunk:

A ‘Sablon neve’ alatt látható név jelenik meg az ‘Oldal alatt. Attribútumok ‘a WordPress szerkesztőben. Ne felejtse el igazítani a sablon nevéhez.

4. A kód testreszabása

Most itt az ideje, hogy eljussunk az oldalsablon húsához és burgonyájához: a kódhoz. Példámban csak az oldalsávot szeretném eltávolítani a bemutató oldalamról.

Ez viszonylag egyszerű, mivel csak annyit kell tennem, hogy eltávolítom a <?php get_sidebar(); ?> elemet oldalsablon, mivel ez hívja az oldalsávot. Ennek eredményeként az egyéni sablonom így néz ki:

5. Az oldalsablon feltöltése

A testreszabott fájlom mentése után itt az ideje, hogy feltöltsem a webhelyemre. Az egyéni oldalsablonokat több helyre el lehet menteni, hogy a WordPress felismerhesse őket:

• Az aktív (gyermek) téma mappája
• a fő szülő téma mappája
• Almappa ezek bármelyikén belül

Én személy szerint szeretnék létrehozni egy mappa page_templates nevű gyermekem témában, és minden testreszabott sablont elhelyezni benne.Úgy találom, hogy ezt a legkönnyebb megőrizni a fájljaim és a testreszabásaim áttekintését. A sablon aktiválása

Utolsó lépésként aktiválnia kell az oldalsablont. Mint korábban említettük, ezt a WordPress szerkesztő Oldalattribútumok → Sablonok menüpontjában tehetjük meg. Mentse el, nézze meg az oldalt és voilà! Itt van a testreszabott oldalam oldalsáv nélkül:

Nem olyan nehéz, igaz? Ne aggódjon, gyorsan rájön. Annak érdekében, hogy jobb benyomást szerezhessek arról, mire használhatók ezek az oldalsablonok, további felhasználási eseteket (beleértve a kódot is) bemutatok a cikk hátralévő részében.

Öt különböző módszer az oldalsablonok használatára

Mint már említettük, az oldalsablonok sokféle célra használhatók. Segítségükkel bármelyik oldalon nagyjából bármit testre szabhat. Csak a képzelete (és a kódolási képességei) állja az útját.

1. Teljes szélességű oldalsablon

Az első eset, amelyet megnézünk, a fentiekben létrehozott demo sablon speciális verziója. Odafent már eltávolítottuk az oldalsávot azáltal, hogy töröltük a kódból az <?php get_sidebar(); ?> -t. Amint azonban a képernyőképen látta, ez valójában nem eredményez teljes szélességű elrendezést, mivel a tartalom szakasz a bal oldalon marad.

Ennek kezeléséhez különösképpen a CSS-sel kell foglalkoznunk. ez a rész:

A width attribútum a rendelkezésre álló terület 65.1042% -ára korlátozza azt az elemet, amely tartalmunkat tartja. . Ezt növelni szeretnénk.

Ha csak 100% -ra változtatjuk, akkor ez hatással lesz webhelyünk minden más oldalára, ami messze van attól, amit szeretnénk. Ezért itt az első sorrend az, hogy az egyéni sablonunk elsődleges div osztályát megváltoztassuk valami másra, például class="site-content-fullwidth”. Az eredmény:

Mostantól beállíthatjuk a CSS-t az új egyéni osztályunkhoz:

Ennek eredményeként a tartalom most mindenre kiterjed az út a képernyőn.

2. Dinamikus 404-es hibaoldal widget-területekkel

A 404-es hibaoldalon minden olyan ember leereszkedik, aki megpróbál elérni egy olyan weboldalt a webhelyén, amely nem létezik, legyen az elgépelés, hibás link vagy a az oldal állandó linkje megváltozott.

Annak ellenére, hogy a 404-es beszerzését mindenki nem szereti az interneten, ha weboldalt üzemeltet, a 404-es hibaoldal nem kevés jelentőséggel bír. A tartalma lehet a döntő tényező abban, hogy valaki azonnal elhagyja-e webhelyét, vagy kitart-e, és megnézi-e a többi tartalmát.

A testreszabott hibaoldalak a semmiből történő kódolása nehézkes, különösen, ha nem vagy biztos benne a képességeidben . Jobb módszer a widget-területek beépítése a sablonba, így rugalmasan megváltoztathatja az ott megjelenítetteket a fogd és vidd módszerrel.

Ehhez megfogjuk és szerkesztjük a 404.php fájlt, amelyet a Twenty Twelve ( sablonhierarchia, emlékszel?). Mielőtt azonban bármit megváltoztatnánk, először létre kell hoznunk egy új modult azáltal, hogy a következő kódot illesztjük be a functions.php fájlunkba:

Ennek meg kell jelenítenie az újonnan létrehozott modult a WordPress hátterében. Annak érdekében, hogy valóban megjelenjen a webhelyen, hozzá kell adnia a következő kódsort a 404-es oldalához a megfelelő helyen:

Utána feltöltve a sablont a webhelyemre, itt az ideje, hogy feltöltsem az új widget területemet:

Ha most megnézem a 404-es hiba oldalt, ott megjelennek az újonnan létrehozott kütyüim:

3. Oldalsablon az egyéni bejegyzési típusok megjelenítéséhez

Az egyéni bejegyzési típusok nagyszerű módja annak, hogy olyan adattartalmat vezessenek be, amely rendelkezik saját adatpontokkal, dizájnnal és egyéb testreszabásokkal. Ezeknek a bejegyzési típusoknak a kedvenc használati esete a felülvizsgálati cikkek, például könyvek és filmek. Esetünkben egy olyan sablont szeretnénk létrehozni, amely portfólió elemeket mutat.

Először létre kell hoznunk az egyéni bejegyzés típusunkat (CPT). Ez történhet manuálisan vagy plugin segítségével. Az egyik plugin opció, amelyet teljes szívvel ajánlok, a Types. Ez lehetővé teszi, hogy egyszerűen hozzon létre egyedi bejegyzéstípusokat és egyéni mezőket.

Telepítse és aktiválja a Típusokat, adjon hozzá egy egyéni bejegyzést, ellenőrizze, hogy a csiga „portfólió”-e, testre szabhatja a szükséges mezőket (például kiemelt kép hozzáadása) ), állítsa be az összes többi lehetőséget és mentse.

Most, hogy megvan a portfólió bejegyzés típusa, azt akarjuk, hogy megjelenjen a webhelyünkön. Az első dolog, amit meg fogunk tenni, a kérdéses oldal létrehozása.Ne feledje, hogy ha a „portfóliót” választotta a CPT slugjának, akkor az oldalon nem lehet ugyanaz a slug. Elmentem a clients-portfolio fájlommal, és néhány példaszöveget is felvettem.

Miután felvett néhány elemet a ‘portfólió’ bejegyzés típusába, azt szeretnénk, hogy megjelennek az oldalunkon közvetlenül a az oldal tartalma.

Ennek eléréséhez ismét a page.php fájl származékát fogjuk használni. Másolja, hívja portfólió-template.php-nek, és változtassa meg a fejlécet erre:

Ebben az esetben azonban néhány módosítást kell végrehajtanunk az eredeti sablonon. Amikor megnézi a page.php kódját, látni fogja, hogy a közepén egy másik sablonfájlt hív meg, a content-page.php nevet viselve (ahol ez azt írja, hogy <?php get_template_part( ‘content’, ‘page’ ); ?>). Ebben a fájlban a következő kódot találjuk:

Mint láthatja, itt hívják meg az oldal címét és tartalmát. Mivel mindenképpen szeretnénk azokat, akik a portfóliónkon vannak, le kell másolnunk a sablon szükséges részeit a page.php fájlunkba. Az eredmény így néz ki:

A portfólióelemek oldalunkra való bejutásához a következő kódot adjuk hozzá közvetlenül a the_content() hívás alá.

Ezáltal a CPT megjelenik az oldalon:

Biztos vagyok benne, hogy mindannyian egyetértünk abban, hogy kevesebbnek tűnik, mint a csillag, ezért bizonyos stílusok rendben vannak.

Sokkal jobb, nem gondolja?

És itt van a portfólió sablon teljes kódja:

4. Közreműködő oldal Avatar képekkel

Az oldalsablon használatának eseteiben a következő a közreműködő oldal. Honlapunkon fel akarjuk állítani a szerzők listáját, amely tartalmazza a képeiket és a nevük alatt közzétett bejegyzések számát. A végeredmény így fog kinézni:

Újra kezdjük a korábbi hibrid fájlunkkal, és hozzáadjuk a közreműködők listájának kódját. De mi van, ha nem tudod, hogyan lehet ilyet létrehozni? Semmi gond, intelligens lopással is kijön.

Látja, hogy a Huszonnégy tizennégy alapértelmezett téma alapértelmezés szerint járulékos oldallal rendelkezik. A sablonját az oldal-sablonok mappában találja meg a contributors.php néven.

A fájl keresésekor azonban csak a következő hívást találja meg: twentyfourteen_list_authors();. Szerencsére lelkes WordPress felhasználóként arra a következtetésre jutott, hogy ez valószínűleg a Twenty Fourteen function.php fájljában található funkcióra vonatkozik, és igaza lenne.

Amit ott találunk, az az a rész, amely minket érdekel ez:

Ismét felvesszük a the_content() hívás alá a következő eredménnyel:

Most egy kis stílussal:

És ennek lennie kell. Köszönet huszonnégy!

5. Testreszabott archív oldal

A Huszonkettő saját sablonnal rendelkezik az archív oldalak számára. Ez akkor lép működésbe, amikor megpróbálja megtekinteni az összes korábbi bejegyzést egy adott kategóriából.

Viszont szeretnék egy kicsit többet, mint amit a Problogger tett: egy oldalt, amely lehetővé teszi az emberek számára, hogy további információkat találjanak meg. a webhelyem tartalma többféle módon. Ez megint egy oldalsablonnal történik.

Az előző vegyes sablonunknál maradva a következőket adjuk a the_content() hívás alá:

Ráadásul egy kis stílus a keresősávhoz:

És az eredménynek kicsit így kell kinéznie:

A befejezés kedvéért itt van a teljes fájl:

Ne felejtsen el hozzárendelni egy oldal!

WordPress oldalsablonok dióhéjban

A WordPress elsajátításában fontos lépés az oldalsablonok használatának megtanulása. Nagyon, nagyon egyszerűvé tehetik a webhely testreszabását, és lehetővé teszik egyedi funkciók és kialakítás hozzárendelését annyi vagy kevés oldalra, amennyit csak akar. A widget-területek hozzáadásától az egyedi bejegyzéstípusok megjelenítésén át a webhely közreműködőinek listájának megjelenítéséig – a lehetőségek gyakorlatilag végtelenek.

Az, hogy feltételes címkéket használ-e, kihasználja-e a WordPress sablonhierarchiát, vagy oldalspecifikus sablonfájlokat hoz létre, teljes mértékben rajtad múlik, és mit akar elérni. Kezdje kicsiben, és haladjon tovább bonyolultabb dolgokig. Nem sokkal később WordPress-webhelyének minden része válaszol minden hívására.