Őszintén? Regényt lehetne róla írni. Viszont nem is olyan rég egy szakdolgozat vázlatához összeszedtem a leghasznosabb tudnivalókat, amit most közkinccsé tennék.

SPOILER ALERT! Angol tudás szükséges, magyar infók ritkán vannak róla…

A weblapjaim alapja tehát a Wordpress nevű weblap motorra épül. Alapvetően a Wordpress-t még mindig sokat csak blogmotornak tartják, de én azért szeretem, mert nagyon jól testre szabható, rengeteg kiegészítő van hozzá, és mindemellett az adminisztrációs felület felhasználójának is könnyen áttekinthető, szerkeszthető, szemben sok egyéb bonyolult CMS rendszerrel, mint a Drupal, Joomla stb. (Drupal mániásoktól szorri…

A Wordpress-nek a hivatalos oldala a http://wordpress.org/ Itt rengeteg leírás van, de leginkább a fejlesztőknek szól, hogy induljunk neki egy wordpress-es oldal fejlesztésének, milyen lépésekben alakítsuk ki a sablont, stb. Hasznos funkciója, hogy összegyűjti a kiegészítőket (pluginek), és nem kell sok-sok egyéb weboldal böngészésével megtalálni a legmegfelelőbbet. Van néhány wordpress szerelemes emberke Magyarországon is, akik indítottak egy magyar oldalt neki, ez a http://word-press.hu/. Itt jellemzően annyi infó nincs fent, inkább hírek, a legújabb magyar verzió letöltése, illetve a fórum funkcióját használom. Mondjuk a Codexben itt is vannak hasznos infók erről a rendszerről: http://dokumentacio.word-press.hu/ meg egy két apróság az én oldalamon is van: http://lemmikki.hu/wordpress/wordpress-a-weblap-motor/

Első lépések

A Wordpress telepítése lényegében annyi, hogy letöltöd a legfrissebb csomagot, amit kapsz, abban a wp-config.php fájlban egy-két apróságot beállítasz (http://codex.wordpress.org/Editing_wp-config.php), majd az egész mehet fel ftp-vel a kiszemelt tárhelyre. Aztán egy-két egyéb lépés ott, és az alap gép már fut is. (http://codex.wordpress.org/Installing_WordPress) Nem is ez a bonyolult része a dolognak, hanem ami ez után jön. (Első lépésekről ezek jó infók: http://codex.wordpress.org/New_To_WordPress_-_Where_to_Start)

A weblap design kialakítása Wordpress-ben

A wordpress weboldalak felépítését, arculatát a hozzá beállított sablonok adják meg. Ha megnézed a weboldalam portólióját, akkor ott nagy hányadban wp oldalak vannak, mégsem hasonlítanak egymásra. A folyamatnak ez a része szokott tartani a legtovább általában. Mindig ezzel kezdek, először megtervezem az arcát a weblapnak (ezt általában photoshopban), majd ha azt leegyeztettem a megrendelővel, akkor csinálok belőle wp sablont. Hála égnek a wp sablonkezelése nagyon programozóbarát, igazából csak html-css formában kell előállítani a photoshop tervet, aztán szétvagdosni megfelelő részekre. 4 alapvető része van, a header, a sidebar, a footer, és természetesen a törzs, amit indexnek hívunk. Bővebb infókat a technikai oldaláról a sablon építésnek itt találsz:

http://codex.wordpress.org/Stepping_Into_Templates
http://codex.wordpress.org/Theme_Development
http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-wordpress-theme-from-scratch/
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
http://wordpress-sablon-keszites.efrud.eu/
http://codeedesign.hu/blog/category/wordpress

Kb ez az a rész, amiről tényleg regényeket lehet írni… nekem több évbe telt, míg a finom technikákat kitanultam. Persze alap tudással is el lehet boldogulni, maximum a bonyolult megoldásokkal még vársz egy kicsit.

A weboldal struktúrája

Ha kész a sablon, akkor érdemes elkezdeni az oldal struktúráját felépíteni. Ez lényegében két dologból áll: Bejegyzések (Posts) és Oldalak (Pages) szerkezetéből. A kettő között a lényeges különbség, hogy a bejegyzések amolyan hírszerűségek, egymás után írhatjuk őket, kategóriákba sorolhatjuk, címkéket adhatunk hozzájuk, általában rendszeresen frissülő tartalmakat takarnak. Az oldalak inkább a statikus részét jelentik a weblapnak.  Az oldalakat lehet egymás alá, mellé hierarchizálni, a bejegyzéseket nem, azokat leginkább a kategóriák kötik össze.

Ezek megértéséről néhány hasznos infó:
http://blogmum.com/2009/05/whats-the-difference-between-wordpress-posts-and-pages/
http://en.support.wordpress.com/post-vs-page/

Wordpress plugin-ok, bővítmények

Ha megvan a kezdő struktúra, akkor érdemes a szükséges kiegészítőket betenni. Két módon működik: vagy letöltöd, és ftp-n keresztül a kinevezett wp-content/plugins/ mappába berakod, és az adminban a bővítmények oldalon aktiválod, vagy az újabb wp verziókban már lehet az admin felületen is keresni, onnan telepíteni (ehhez megfelelő szerver jogosultságok kellenek). (http://codex.wordpress.org/Managing_Plugins)

A kiegészítőket általában nem elég aktiválni, el kell végezni a szükséges beállításokat. Ehhez általában minden bővítmény csinál magának menüpontot, vagy a Beállítások alatt, vagy sajátot, néhány extrém esetben máshol. Egyes plugineknél szükség van arra is, hogy egy működéséhez szükséges kódot elhelyezz abban az oldalban, ahol használni akarod a kimenetet, vagy a sidebar kódjában, esetleg widgetként be tudod pakolni.

Hasznos Wordpress bővítmények

http://contactform7.com/
A kapcsolat formokat, ajánlatkéréseket lehet vele kivitelezni. Használatához a megadott kódot kell elhelyezni abban az oldalban, ahol a kódot akarod látni.
Bővebb leírást a pluginről az oldalon olvashatsz.

http://alexrabe.de/wordpress-plugins/nextgen-gallery/
Galéria plugin, nagyon okos, szinte mindent tud. Sok galériát lehet létrehozni, azokat albumba rendezni, szinte határtalan a megjelenítések módja is. Ha komolyabb galériát szeretnél látni a pluginnel, akkor itt nézz szét: http://vadjutka.hu/ vagy itt http://www.aegondij.hu/

http://joelstarnes.co.uk/blog/pagemash/
Az oldalak a menüben megjelenő sorrendjét szabályozza. Alap esetben a sablonban lehet megadni, hogy milyen sorrendben listázza az oldalakat, ezt a wp beépített wp_list_pages() nevű függvénye kezeli. Itt van róla infó, mit tud: http://codex.wordpress.org/Template_Tags/wp_list_pages Sajnos egyedi sorrendet nem kezel, így ehhez kell a pagemash, azzal olyan sorrendet lehet létrehozni, amit szeretnénk. A kívánságunkat adatbázisban tárolja, és onnan szedi ki minden oldalletöltéskor.

http://projects.jesseheap.com/all-projects/wordpress-highslide-js-plugin
Ez csak a szépség kedvéért: egy speciális képmegjelenítő. A galéria pluginhez pluszba tettem hozzá, mert helyesen jeleníti meg a képeket, ha rákattint a bélyegképekre a látogató.

A weboldal tartalma

Ha megvan minden plugin, akkor igazából már csak a tartalom feltöltése van hátra. Írtam az előbb, hogy az oldal struktúrát létrehozzuk, azt még tartalom nélkül szoktam csinálni, mert így legalább addig is halad a munka, és általában a tartalom szokott lenni az utolsó, amit a megrendelő lead. Kedvenc weboldalam ilyen szempontból a http://lipsum.com, ahol állati fake szövegeket lehet generálni, és így tényleg nem kell a tartalommal törődni, csak a végén.
A tartalom feltöltése kb úgy működik, mintha egy word dokumentumba írnánk, amit a weboldalon látni szeretnénk, wysiwyg szerkesztővel. (Persze lehet html-ben is, ez akkor jó, ha aprólékosabb munkát szeretnénk végezni, és értünk a html-hez).

Legvégső állomás a tesztelés, többen kipróbálunk minden funkciót, aztán mehet élesbe :) Aztán hogy lásd is az admint: http://php.opensourcecms.com/scripts/details.php?scriptid=88

Mert nincs rá pénz, ingyen kellne, de azért jó legyen. Segítek benne, hogy lehet megoldani. Internet sajnos kell hozzá, de a szerencsésebbeknek van olyan munkahelye, ahol megoldható.

Szóval először kell egy tárhely. Ha nem szeretnénk rá pénzt szánni, akkor keressünk egy ingyen tárhely szolgáltatót, ezek közül is szerintem a legtöbb iszonyat gagyi, telenyomják popup és frame reklámmal. Nem kell ez nekünk. Ötvözzük a kellemeset a hasznossal, és regisztráljunk a Wordpress.com oldalon.

Weboldalt egyébként is az egyik legegyszerűbb és kényelmesebb Wordpress-szel építeni, itt meg már előre fel van telepítve. Kell-e ennél jobb? Kezdetnek semmiképp.

Szóval akkor regisztráljunk. Ez nem egy bonyolult dolog. Ha kész, akkor pedig készítsünk egy “blogot”. Ki lehet választani a magyar nyelvet a profilnál, de egész sok dolog még angolul fog megjelenni. Így például a Register a blog link is. Nem baj, nyomjuk meg.

Meg kell adni az oldal nevét, címét, és nyelvét. És lényegében kész is. Elkészült az oldalad, melyet a http://oldaladneve.wordpress.com/ címen tudsz megtekinteni. Az én próbaoldalam a http://ingyendemo.wordpress.com/ lett. Alapbeállításból így néz ki:

Most akkor ideje testre szabni a kinézetet. És nem feltétlenül kell a dizájnnal bajlódni. Egyszerűen keresünk valami nekünk való témát, melyet a Kinézet menüpontban találunk meg. Sajnos ide saját témát nem tölthetünk fel, de jó hír, hogy a meglévő téma css-ét módosíthatjuk. Ám ez maradjon máskorra. Én a Garland nevű témát választottam, de van itt szép kínálat, nagyjából mindenki stílusának megfelelő.

Ha megvan a nekünk tetsző kinézet, akkor már csak a tartalmat kell feltöltenünk. Két csoport közül válaszhatunk. Vannak a bejegyzések, melyek a főoldalon jelennek meg hírszerű formában, és vannak az oldalak, melyeket Page-nek nevez a Wordpress. A Page-ek különálló oldalak, az általam válaszott témában bal szélső sávban és fent jobb sarokban jelennek meg. Ide érdemes önállóan is megálló tartalmakat tenni, kapcsolat oldalt létrehozni, stb.

És nézzük az eredményt:

Nem a legtökéletesebb, de kiinduló alapnak megállja a helyét. Úgyis az lesz a fontos, ami az oldalon van, és ahogyan az fent van. A többi már csak néhány apróság kérdése…

Itt van. Igen, a PC World Online-on.

Igen kíváncsi leszek, mivel akarnak majd elcsábítani, mik lesznek az érvek mellette. 

A program szerint a fő téma a Joomla! 1.5 verziója lesz, leginkább a keresőoptimalizálást várom, milyen okosságokat találnak ki. 

Ha te nem jösz, de lenne kérdésed, tedd fel nyugodtan a kommentben, én meg majd jól megpróbálok rá választ találni. :)

Szándékaim szerint olvashattok majd (előre is elnézést mindenkitől a tegezésért, de imádom a bizonyos svéd bútoráruházat…) trendekről, hogy mi fontos egy-egy oldal megalkotásakor, mi az, amire feltétlenül figyelni kell. Ezt mind majd szeretném hasznos példákkal alátámasztani, összeszedni sok hasznos forrás oldalt, melynek segítségével még könnyebben is dolgozhatunk. Szándékozom a dotkommentar.hu példája alapján tanácsadást is indítani, melyet remélek, majd sikerül gyakrabban megvalósítani, mint Pécsi Ferenc kollégának.

Röviden: ha bárkinek szüksége van tanácsra, ötletre, tippekre, forrásokra ahhoz, hogy egy kicsit jobban el tudjon igazodni a weblapkészítés rejtelmeiben – nyugodtan jöjjön ide. Zina.hu.