Talán a nagy fa és a fejsze esete. Az igazat megvallva magam sem hittem volna, hogy egyszer majd bele merek vágni a WP felületének átszabásába.
Ugyanakkor már él, és virul az első olyan felületem, amely magazin stílusban készült, és talán mire a cikksorozat utolsó darabja is megjelenik, addigra le is lehet tölteni a komplett témát.
A cikk írása előtt el kellett döntenem, hogyan álljak neki a magazin téma készítésének közléséhez, WP kódex-szerűen menjek-e bele a részletekbe, vagy csak a lényeget ragadjam ki.
Mivel nem szeretnék 400 részes írásban elveszni, illetve egy komplett téma legyártása némi alapismeretet is feltételez, ezért az utóbbi megoldást választottam.
Alapok
A manapság oly’ divatos magazin jellegű felületet szeretnénk?
Semmi akadálya, ha tisztában vagyunk a WP képességeivel, barátunk a PHP, és még CSS-sel is jó a viszonyunk.
Eltántorítás
NEM ajánlom azoknak ezt a cikket, akik nem ismerik a WordPress működését és felépítését, illetve azoknak sem, akik PHP-ben még nem írtak egy sort sem.
Első lépések
Papír, ceruza, radír.
Igen, kézzel skicceljük le, mit is szeretnénk. 1-2-3 oszlopos felület legyen? Milyen legyen az index oldal, a keresési eredményre milyen felületet kapjunk, illetve a lapok, oldalak, egyedi lapok, az archívum és a komment felület milyen módon mutassa meg magát.
Az sem árt, ha vannak átfedések. Gondolok itt arra, hogy elég gáz lenne, ha minden oldal más kinézettel generálódna.
Válasszunk olyan színvilágot, betűtípust, mely jól használható és jól olvasható, de kerüljük a túl sokféle betűt. Jó előre készüljünk fel lelkileg a böngésző-különbözőségek okozta stíluslap problémákra.
Aztán, ha minden kész, akkor telepítsünk egy WordPress-t a gépünkre, vagy egy tárhelyre.
WP felépítése
Ahhoz, hogy a WP-ben egyedi témát kreálhassunk, szükség van egy olyan mappára, mely a wp-content/themes/ mappában helyezkedik el. Legyen mondjuk a neve: proba_tema. A többi mappa minket most nem érdekel.
A proba_tema könyvtárnak tartalmaznia kell legalább az alábbi 2 fájlt, különben az alapértelmezett sablonra (default) kapcsol át a WP:
- style.css – a témánk stíluslapja
- index.php – a nyitóoldala fejléc és lábléc nélkül
Ezen felül lehet még:
- header.php – a témánk fejléce
- sidebar.php – az oldalsáv
- footer.php – a témánk lábléce
Ezt a fenti 3 elemet az index.php-ben csatoljuk össze a get_header(), get_sidebar(), és get_footer() függvényekkel. - screenshot.png – a téma kisképe (lehet jpg kiterjesztésű is), de nem kötelező. Ez mutatja meg nekünk a sablon előnézetét, esetleg a sablon készítőjének a logóját.
Szükség lehet továbbá:
- page.php – a lap oldala
- single.php – a cikk oldala
- comments.php – a hozzászólások
- archive.php – archívum
- search.php – kereső és a kapott eredmény
- 404.php – hibaoldal
A felület képességeit bővítmények és/vagy a funtions.php-ben elhelyezett segítő szkriptek segítségével tudjuk felturbózni, korlátozni.
Létezhetnek még:
- comments-popup.php
- home.php
- category.php
- author.php
- date.php
Funkcionalitás
Egy magazin stílusú felület megkívánja azt, hogy részletgazdag legyen a nyitó oldal. Meg kell mutassuk az új cikkeket, de az is jó, ha a népszerű cikkeket is csokorba kötve érheti el a látogató. Az sem, utolsó, ha a friss hozzászólások is kikerülnek a nyitó felületre, amolyan kedvcsinálónak.
Egy magazinban inkább rovatok, mint kategóriák vannak, így ezt az elnevezést használom a továbbiakban (és a WP fordítását is ennek megfelelően módosítottam, de ez már csak részletkérdés). Tehát gondoljuk át, milyen rovatokra lehet szükség a magazinban. Ezek átgondolt használatával profi menüt készíthetünk.
Anélkül, hogy elvesznénk a stíluslap készítésben:
Én az index.php-t le szoktam gyártani fejlécestől, láblécestől, oldalsávostól és stíluslapostól. Ügyelek persze arra, hogy később a megfelelő helyen ezek az összetevők kiollózhatóak legyenek, hiszen a csonka index.php helyére fog bekerülni később a page.php, vagy a single.php.
Az így legyártott index.php pl. a Dreamweaver-ben nagyszerűen alakítható. Ha mindenféle friss kiadású böngészőt telepítünk, akkor még le is próbálható a végeredmény úgy, hogy közel böngészőfüggetlen csomagot kapjunk.
Első körben szeretném felhívni a figyelmet: ahol lehet jpg-t és gif-et használjunk képnek, a png átlátszóságát csak az újabb böngészők támogatják. Sajnos a tapasztalat azt mutatja, hogy a netezők jelentős része még csak nem is hallott a 7-es, vagy 8-as Explorerről, így elképzelhető az is, hogy a finom gonddal, pixelpontossággal, és szabványos megoldásokkal létrehozott tökéletes stíluslap használhatatlan az IE6 alatt. Megdöbbentő ugyanakkor az, hogy az oldalaim látogatóinak közel fele IE6-tal böngészik, és arra lusta, hogy frissítse gépét valami jobb alternatívára.
Amire nekünk első körben tehát szükségünk van:
- proba_tema mappa, legyen benne az alábbi 2 fájl
- style.css – a témánk stíluslapja
- index.php – benne hivatkozva a style.css-re, és bele építve a header, footer, és sidebar, melyet később szétválasztunk.
Vegyünk elő egy html/php szerkesztőt (Dreamveawer, Notepad++), és készítsünk egy egyszerű html fájlt, ami valahogy így fog kinézni, és index.php lesz a neve:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/css" media="all" /> <title>Próba Oldal</title> </link></head> <body> </body> </html>
Aztán legyen meg a stíluslapunk is a dologhoz:
/*
Theme Name: .Első Próba Témánk
Theme URI: http://valami.hu
Description: A www.valami.hu weblap WP témája.
Version: 1.0.0 (WP2.8.4)
Author: Kovács János
Author URI: http://valami.hu/
Tags: próba, WP, téma, stíluslap
*/Mentsük el a fenti fájlokat a megadott néven és másoljuk a már említett proba_tema mappába.
Ekkor, ha belépünk az admin felületre, máris láthatóvá válik a bal oldalon lévő Megjelenés linkre kattintva a sablonok közt a kreálmányunk… persze még totálisan üres, azaz csak egy fehér oldal.
Folytatás: Építsünk magazin stílusú témát – 2. rész