TemplateMonster Blog Hungary

Hogyan hozzunk létre egy WordPress egyéni oldal sablont

Ingrid Almási

A hatalom mindig vonzó. Nem számít, mit mond az ember - mindenki szeretné teljesen irányítani a környezetét. Már egy kis erő és ellenőrzés is azt érezteti velünk, a világ tetején állunk. Legyünk őszinték, mégis ki ne akarná birtokolni a gyűrűt, ha tehetné?

Ugyanez a helyzet a weboldalépítéssel. A méreg lassan hat. Első WordPress weboldalad felépítéséhez még egy előre elkészített, ingyenes és egyszerű sablont választasz. Utána beszerzel egy fizetős, professzionális témát. Még ez sem felel meg minden elvárásodnak tökéletesen, ezért elkezdesz további testreszabásokon gondolkodni. Ez az a pillanat, amikor minden megváltozik. A teremtés fölötti irányítás túl édes ahhoz, hogy lemondj róla, egyre több és több testreszabásra fogsz vágyni. Egészen addig, míg a webhelyed nem lesz tökéletes.

Tényleg szuper érzés, amikor saját kezűleg formálod újra weboldaladat, éppen ezért rengeteg kezdő tovább megy és megtanulják, hogyan tegyék oldalukat igazán egyedivé. Ha ezt a bejegyzést olvasod - egy vagy közülük. Szóval, elég az üres fecsegésből, kezdjük el a végső irányításhoz vezető utadat egy WordPress egyéni oldal sablon létrehozásával.

Az oktatóanyag eredeti változata itt olvasható: How to Create a WordPress Custom Page Template: Gaining Ultimate Control

Mi az a WordPress oldal sablon?

Kezdetben volt a szó, tehát legelőször definiáljuk a terminológiát. WordPress weboldalad megjelenését sablonok határozzák meg. Milyen színt kell használni a gombokhoz, melyik oldalra helyezzük el az oldalsávot, milyen betűtípust használjunk a szövegekhez, hol helyezhetjük el a keresési űrlapot - mindezeket az utasítások össze vannak gyűjtve a sablonokba.

Az oldal sablon egy php. fájl, amely meghatározza, hogyan fog az oldalad kinézni. Minden WordPress sablon php. fájl egy "témák" mappában van elhelyezve a "wp-content" könyvtárban. Oldal sablonokat alkalmazhatsz bizonyos oldalakra, oldal részekre vagy oldal osztályokra. Egyes oldalaknak mindig máshogy kell kinézniük, például a "Rólunk" oldalnak. Általában egy témának számos kész oldala van, melyek automatikusan alkalmazhatók.

De hogyan érti meg a WordPress, melyik php. oldal sablont kell alkalmaznia minden helyzetben? Ilyenkor jön képbe a sablonok hierarchiája.

Amikor egy felhasználó böngészi az egyik webhelyed oldalát, a WordPress keres egy .php fájlt, amely megmagyarázza neki, hogy mit kell mutatni. A CMS mindig keres egy szükséges fájlt egy meghatározott, stabil sorrendben. Ezt a sorrendet sablon hierarchiának hívják. Hadd mutassam meg, hogyan működik egy példán.

Amikor a látogató egy blogbejegyzésedet szeretné elolvasni és a http://iamawesome.com/blog/category-best/coolpost linkre kattint, az első dolog, amit a WordPress ellenőriz, hogy ehhez a konkrét oldalhoz hozzárendeltél-e vagy sem bizonyos specifikus egyéni oldal sablonokat. Teljesen szabadon létrehozhatsz bármennyi WordPress egyéni oldal sablont, ezzel webhelyed minden részét egyedivé varázsolva.

Ha nincs hozzárendelt fájl, akkor a WP egy kategóriás oldal sablont keres. Így fog kinézni: category-best.php. Ez a .php oldalsablon határozza meg az oldalak teljes kategóriájának megjelenését, és beállíthatsz egy bizonyos megjelenést számos bejegyzéshez, melyek ugyanazt a témát írják le.

Ha nem foglalkoztat, hogy minden kategóriához másmilyen megjelenést válassz, és nincsen category1.php fájl, a WordPress ellenőrzi, mi a kategória azonosítója. Feltételezzük, hogy 15. A WP keresni fog egy category-15.php fájlt.

Nem fog ilyet találni, mert te nem törődsz a kategóriákkal (ezt nem rosszindulattal mondom, mindössze egy következtetés). Most a WordPress keres egy alapvető page.php fájlt. Ez így működik minden oldallal, feltéve hogy nem történt valamilyen változtatás.

Hogyan hozzunk létre egyéni WP oldal sablont

Végül kezdjünk egy kicsit gyakorolni. Először is létre kell hoznod egy php. fájlt egy általad választott kódszerkesztőben. Én az egyszerű Windows Notepadet kedvelem, de ugyanolyan jó a Notepad++, Sublime vagy bármelyik más.

Két dologra van szüksége minden weboldalnak: fejléc és lábléc. Hogy ezeket megjeleníthesd az oldal sablonodon, add hozzá a következő kódot az általad létrehozott php. fájlhoz.

<!--?php /** * Template Name: Custom Page Template */ get_header(); ?-->
 
<!--?php get_footer(); ?-->

így fog kinézni:

Most mentsd el a változtatásokat, és nyisd meg a webhelyed FTP vagy cPanel fájlkezelőjét.

Töltsd fel a létrehozott fájlt a webhely wp-content-> themes-> current theme mappába.

Ebből a mappából elérhetővé válik az oldal tervezése. Menj az Oldalak> Új hozzáadása pontra, töltsd fel az oldalt tartalommal és nézz jobbra. Van egy mező, amelynek a neve "Page Attributes". Kattints a "Sablonok" sávra, és válaszd ki az egyéni oldal sablont a legördülő menüből.

Miután megnyomtad a "Közzététel" gombot, és meglátogattad a webhelyet, egy nagyon egyszerű oldalstruktúrát fogsz látni. Lesz egy fejléc és egy lábléc, de ez minden. Unalmas, mi?

Biztos vagyok benne, hogy ez nem fog tetszeni, ezért tegyük érdekesebbé. Nagyon könnyű az egész, mindössze kicsit másolnod és beillesztened kell. Szinte minden WordPress téma további kész oldalakat tartalmaz. Például az én témám (a FreeBookot használom a TemplateMonstertől) tartalmaz egy érkezési oldalt, egy oldal lábléc és fejléc nélküli egyedi sablont. A Twenty Twelve téma (az egyik ingyenes alapértelmezett WP-téma) 404-et és archivált előre elkészített oldalakat tartalmaz. A Twenty Fourteen téma (egy másik ingyenes téma) Közreműködők oldalt is biztosít. Emellett minden témához tartozik néhány, már kódolt oldalrész, amely a wp-content/themes/your_theme mappában található. Letölthetsz ilyen fájl részt a számítógépedre, nyisd meg, és csak másold az új WordPress egyéni sablonodra. A következőképpen néz ki az én  téma oldalsáv sablonom:

Csak másolom és beillesztem a .php fájlba. Nézd, itt van egy oldalsáv!

Egyéni WordPress oldal sablon különböző használatra

Amint azt valószínűleg a WordPress sablon hierarchiájából már megértetted, létrehozhatsz .php oldal sablont nem csak egyetlen oldalhoz, hanem egy oldalcsoporthoz is. Ezek a csoportok lehetnek közösek egy kategóriával vagy típussal, és létrehozhatsz olyan WP oldal sablonokat, amelyek alkalmazhatók automatikusan vagy kiválaszthatók az új oldal létrehozásának folyamatában. Gyere közelebb, barátom, mesélek még egy kicsit arról, hogy működik ez a mágia.

WordPress egyéni oldal típus minden oldalhoz

Tegyük fel, hogy szükséged van egy olyan WordPress sablon .php fájlra, amely minden létrehozott oldalhoz elérhető lesz. Először is, figyelj a névre. Ha a .php téma címe "oldal" -lal kezdődik, a WordPress egy speciális sablonként értelmezi, amelyet egy adott oldalhoz kell használni. Szintén próbálj meg érthető nevet választani, így képes leszel visszaemlékezni  arra is egy idő után, mit tartalmaz.

Az egyéni oldalsablon létrehozása után töltsd le a wp-content / themes / your_theme mappába a FileZilla vagy a cPanel segítségével. Ez az opció akkor érhető el az adminisztrátori műszerfal "Page Attributes" legördülő menüjében, amikor szeretnél  egy új webhelyoldalt létrehozni vagy szerkeszteni.

WordPress egyéni oldal sablon csak egy oldalra

Szeretnéd, ha az egyik statikus oldalad eltérően nézne ki a többitől. Az is lehetséges, hogy minden statikus oldalad egyedi legyen (csak ne vidd túlzásba, elvégre nem lenne jó, ha az oldalad úgy festene, mint egy cirkusz, ahol mindenütt oldalsávok ugrálnak).

Hozz létre egy .php oldal sablont, nevezd el a következőképpen: page-{slug} .php vagy page-{page's ID number}.php, és töltsd le azt az aktuális téma mappádba. Ebben az esetben a WordPress automatikusan fogja használni ezt a sablont egy adott oldalra, amely megfelel az azonosítónak vagy a slugnak. Például szeretnél létrehozni egy Elérhetőségek oldalt, és tegyük fel, hogy rendelkezik egy azonosítóval, ami 9. Hozz létre egy WordPress egyéni oldal sablont, amely page-contacts.php vagy page-9.php néven van elnevezve, és csak az Elérhetőségek oldalon kerül alkalmazásra.

WordPress egyéni oldal típus a bejegyzésekhez

Most létrehoztál egy egyéni oldal sablont, de szeretnéd, ha a bejegyzéseid ugyanúgy néznének ki. Ez esetben a névváltoztatás nem segít,  ezért hozzá kell adnod egy további kódsorozatot a sablonhoz. Gépeld be a “Template Post Type: post, page“ pontot közvetlenül a Sablon név sor alá. Így fog kinézni:

Így hozzáadhatsz olyan eseményeket és egyéb tartalmakat is, amelyek a webhelyeden vannak. El kell ismernem azonban, hogy ez a módszer csak akkor működik, ha a WordPress a 4.7-es vagy újabb verzióját használod. Az idősebb verziók egyszerűen figyelmen kívül hagyják a Sablon bejegyzés típusok sorát. Vannak más okok is a WordPress legfrissebb verzióinak használatára, és megnézheted őket ebben a cikkben.

Miért jók a feltételes címkék?

Korábban már leírtam, hogyan lehet teljesen új .php oldal sablonokat létrehozni, de mi van, ha valamilyen változást szeretnénk végrehajtani egy létezőben? Vannak olyan helyzetek, amikor valami csak akkor jelenik meg, ha valamilyen feltétel teljesül, ezért nem szeretnénk olyan oldalt létrehozni, amely csak egy kis részletben, vagy csak egy adott helyzetben különbözik a többitől.

Éppen ezért jók ennyire a feltételes címkék. Használd azokat egy kódsorban, amely ellenőrzi, hogy bizonyos feltételek teljesülnek-e vagy sem. Ha ez megtörtént, a kód első része folyamatosan működik, és ha nem, akkor a "többi" végrehajtásra kerül. Például azt szeretnéd, hogy egy bizonyos típusú oldalsáv jelenjen meg azoknak a felhasználóknak, akik ellátogattak az Archívumba. A kódja így fog kinézni:

A leggyakrabban használt feltételes címkék listája:

Oldal sablon funkciók

A kész oldalas sablon másolása és beillesztése egyszerű és gyors módja annak, hogy egyedi nézetet hozz létre, de mi az, amit ezek a kódok jelentenek? Természetesen a webfejlesztők megtanulják az összes PHP-t, és pontosan tudják, hogy milyen funkciókat használnak, hogyan és mikor. Ha azonban még mindig ezt olvasod, akkor nem vagy webfejlesztő, vagy legalábbis nem túl tapasztalt. Mivel a végső hatalomról beszélünk, nem hagyhatjuk el a sabloncímkéket.

A WordPress számos különböző PHP függvényt használ, és csak a témákhoz használatosakat hívják Sablon címkéknek. Már láttad őket az első .php oldal sablon létrehozásakor, a get_header () és a get_footer () sabloncímkék. Nem fogok beszélni a meglévő címkékről, túl sok van belőlük, de menjünk át azokon, amelyekkel biztosan találkozol a weboldal tervezésekor.

get_header(), get_footer(), get_sidebar()

Ez a három sabloncímke hozzáad egy fejlécet, egy láblécet vagy egy oldalsávot a WordPress egyéni sablonhoz. Ezeket a részeket a jelenleg használt témától veszi át. Ha valamilyen speciális fejlécet, láblécet vagy oldalsávot szeretnél használni az adott oldalon, írd be a nevét a zárójelek közé. Például header-superstar.php fájl használatához szükséges lesz egy get_header (`superstar`) sablon címke.

get_template_part()

Ez szintén hozzáad egy bizonyos részt egy már elkészített sablonból a te php. témádba. A különbség az, hogy ha a zárójelek üresek maradnak - semmi sem adódik hozzá. Meg kell szabnod, hogy mit adj hozzá. Ez a sabloncímke általában arra szolgál, hogy a kód egy részét szülőből a gyermek témára mozgassa.

get_search_form()

Erre szükséged lesz, hogy kódolhasd a kereső űrlapot az oldalsávhoz. Általában a kereső widgetek is ezt a sablon címkét használják. Megkeresi a search_form.php fájlt a téma mappában, majd hozzáadja az egyéni sablonhoz.

get_page_template()

Ez a funkció átveszi az átmenetet a sablon hierarchiájának megfelelően az aktuálisan használt sablonhoz.

wp_login_form()

Ha a zárójelek üresek, ez a funkció egy egyszerű WordPress bejelentkezési űrlapot ad hozzá az egyéni sablonhoz. Ha valamilyen űrlapot szeretnél használni, írd be nevét a zárójelbe ugyanúgy, mint a get_header () sabloncímkéhez.

get_calendar()

Megjeleníti a naptárat az oldalon. Ez egy aktuális téma szerint kerül megfogalmazásra. Te is hozzáadhatsz egy módosított naptárat ízlés szerint - csak írd be a nevét a zárójelbe ugyanúgy, ahogyan azt egy eredeti oldalsávhoz vagy lábléchez tennéd.

Ez elég lesz számodra, ha a PHP megtanulása nem a vágyad. Több mint száz sabloncímke van a WordPressben, ezért azt hiszem, még a webfejlesztő guruk is hasznukat veszik. Ha valóban érdekel a további tanulás, keresd fel a WordPress Kódexet.

Hasznos WordPress oldal témák létrehozása

Képes leszel személyre szabni a webhely minden egyes részét. WP oldalsablonokat hozhatsz létre minden oldalhoz, és egyedülállóvá és bonyolultabbá teheted azokat. Az eufória első hulláma után azonban felmerül egy egyszerű kérdés - mely oldalak lesznek valóban hasznosak a weboldalamhoz? Sok weboldal készítő szembesült már ezzel a kérdéssel, ezért hadd mutassak néhány példát.

Cool 404 oldal

Senki sem szereti ezt az oldalt, azonban a kialakítása felkeltheti egy felhasználó figyelmét vagy akár visszaüldözheti a kereséshez. Az első dolog természetesen a kép, és összegyűjtöttük a legszélesebb "404-es hiba" oldalakat ebben a cikkben. Jó döntés ilyesmit elhelyezni a háttérben, de nem elég. A "404" oldalnak hivatkoznia kell a kezdőlapra és egy keresőlapra, amely arra ösztönzi a felhasználót, hogy a webhelyeden maradjon. Hát nem jobb most, hogy tudod, mit kell csinálni?

“Rólunk” oldal csapattagok listával

A "Rólunk" oldal az egyik leglátogatottabb weboldal. Az emberek szeretik tudni, kivel kommunikálnak. Ez egy nagyon fontos része a webhelynek és egy egyedi oldal sablon elengedhetetlen. Nagyszerű, amikor a csapat minden tagja szerepel egy táblázatban. Nem lesz nehéz létrehozni egy ilyen funkciót - kimásolhatod a Twenty Fourteen előre elkészített oldaláról.

Testreszabott archívum főoldal

A cél az, hogy a látogató a lehető legtöbb oldalt meglátogassa. Ezért az archív WordPress oldal típusának tartalmaznia kell linkeket a különböző kategóriákba tartozó legújabb bejegyzésekhez és a látogatók figyelmének felkeltéséhez. Nem csak a rendelkezésre álló kategóriákat és címkéket kell megjeleníteni, ez unalmas. Jó ötlet lehet a legnépszerűbb hozzászólások vagy véletlenszerű cikkek legmagasabb értékét megjeleníteni. Ez bizonyos erőfeszítéseket igényel tőled, de biztosan befolyásolja a weboldal forgalmát.

Kapcsolatfelvétel és űrlap

Nyilvánvaló, hogy az elérhetőségeket kereső felhasználó kommunikálni szeretne veled. Ennek a megvalósítása nemcsak jó ötlet, hanem kötelesség is, ha vágyod a sikert. Győződj meg róla, hogy az elérhetőségek oldalán nem csak a telefon és az e-mail szerepel, helyezz el egy űrlapot, és adj hozzá egy Google Térképet a székhelyed megadásához. Ne engedd, hogy egy potenciális ügyfél elhagyja az oldalt anélkül, hogy beszélnétek, csak mert nem tudta felvenni veled a kapcsolatot.

Betűrendes oldaltérkép

Ha sok a cikked a blogodon, akkor hozz létre egy webhelytérképet. Ez egy olyan oldal, amely felsorolja az általad írt és közzétett bejegyzéseket. Nagyon helyénvaló lenne, ha az összes posztot bizonyos sorrendbe rendeznéd. Például betűrendben. A WordPress ingyenes témái ebben is segítenek. A Twenty Fourteennak van egy "betűrendes posztok" használatra kész egyéni oldal sablonja, így elég csak áthelyezni.

JetEngine: egyszerű mód szupererő birtoklására

Annak ellenére, hogy sok hős, akik hosszú évek kemény munkája után kapják meg a hatalmukat (mint Batman, Flash vagy Fekete Özvegy), sokan vannak, akik erre gyorsabban és problémamentesebben tehetnek szert. Van mód arra, hogy egyedi oldalakat készíts kód nélkül, valami olyasmi, mint egy radioaktív pókharapás, amely erővel ruház fel erőfeszítés nélkül - ez a JetEngine Elementor plugin.

Annak ellenére, hogy élvezem beleásni magamat a WordPress funkciókba, szeretem az Elementort. Időt takarít meg, amikor egy weboldal építésére kerül sor. Ha a megélhetésért készítesz weboldalakat, a rutin munka gyors elvégzése időt takarít meg neked arra, amit igazán élvezel, ezért is használom nagyon gyakran az Elementort. Követem az új bővítményeket az Elementor számára, és így találtam rá a JetEngine-ra. Van néhány főbb jellemzője, de ebben a cikkben az egyéni oldalakról beszélünk, ezért most inkább azokra koncentrálok.

A Jet Engine kétféle widgettel rendelkezik, amelyekkel tetszőleges oldalakat hozhatsz létre - egyéni bejegyzéstípus és egyéni taxonómia. Mindkettő nagyrészt befolyásolja az adminisztrációs műszerfalat, és új eszközöket hoz létre a tartalom testreszabásához.

Általában a WordPress tartalma oldalakként vagy bejegyzésekként jelenik meg. Bizonyos változatoknál a kész sablon Galéria vagy Testimonial tabot ad hozzá, de ez minden. Az egyéni bejegyzés típusa lehetővé teszi a további bejegyzés típus tabok hozzáadását az irányítópulthoz. Portfólió vagy online bolt, videó listázás vagy munkalap - a JetEngine lehetőséget kínál arra, hogy bármit hozzá tudj adni. Itt egy részletes videó a funkció működéséről:

A taxonómia olyan címkékből áll, amelyek segítenek rendezni a dolgokat. A JetEngine esetében az Egyéni taxonómia funkció lehetővé teszi, hogy bizonyos eszközöket adj hozzá a tartalom létrehozó ablakába. Ez a widget további opcionális lapokat ad a testreszabási oldalsávhoz, és lehetővé teszi a tartalom címkével történő megjelölését, amelyet tovább lehet sorolni a rendezéshez. Ez a videó megmutatja, hogyan működik az egyéni taxonómia működése és hogyan használhatod azt:

Nagyszerű erő jutott a birtokodba. Használd bölcsen, ne ess túlzásba, és tedd weboldalad stílusossá, egyedivé és hatékonnyá. Olyan eszközöket adtam a kezedbe, amelyek segítenek egy végtelen utazáson való elindulásban a WordPress legmagasabb szintjének eléréséig. Remélem, egyéni oldal sablonod elképesztő lesz, és arra fog ösztönözni, hogy mindig felfedezz valami újat. Sok szerencsét!