A WordPress 3.0 újdonságai:

• Új dinamikus menu létrehozása és egyszerű kezelése a WordPress felületen keresztül.
• Dinamikus bejelentkezési form használata bárhol. wp_login_form()
• WordPress és WordPress MU egyesítése. Karbantartás egy felületen keresztül.
• Fejléc és háttér beállítási lehetőség.
• Author template (egyedi sablon szerzőkre bontva).
• Egyedi mezők egyszerűbb kezelése.
• Egyedi bejegyzés típus készítése

A WordPress 3 sokkal több mint egy blogolásra épülő rendszer. Olyan újításokkal mint az egyedi mezők, egyedi bejegyzés típus létrehozás, és dinamikus menu kezelés; csodálatos CMS rendszerré alakította át a WordPress-t.

Egyedi bejegyzés típusok

Az egyedi bejegyzés típus igazi CMS rendszerré varázsolja a WordPress-t. Ezzel a lehetőséggel könnyen le tudjuk szűrni, hogy milyen tartalmat jelenítsünk meg a látogatók számára.

WordPress & WordPress MU integrálása

Egyszerű integrálás WordPress és WordPress Multi User között.

Egyedi háttér beállítása WP-n keresztül

A weboldal háttér lecserélését nagyon egyszerűvé teszi a WordPress. Itt mindent beállíthatunk, mintha CSS-el dolgoznánk.

Az új alapértelmezett sablon

A “twenty ten” nevezetű alapértelmezett sablon a WordPress 3 minden új funkcióját hasznosította.

Dinamikus menu rendszer WordPress-ben

Az új dinamikus menu rendszer nagy újítás a WordPress 3-ban. Kezelése egyszerű és egyben nagyszerű. Testreszabásának nincs korlátja.

alpha animációk

$(“#elem”).fadeIn(ms); Az adott elemnek a láthatóságát animálja, pontosan láthatóvá teszi.

$(“#elem”).fadeOut(ms); Az adott elemnek a láthatóságát veszi el.

$(“#elem”).fadeTo(ms,opacity); Az adott elemnek a láthatóságát állítja be. Az opacity-t törtszámként adjuk meg 0tól-1ig.

height animációk

$(“#elem”).slideDown(ms); Az elemet teszi láthatóvá úgy, hogy annak a magasságát animálja.

$(“#elem”).slideUp(ms); Az elemet tünteti el úgy, hogy annak a magasságát 0-ra animálja.

$(“#elem”).slideToggle(ms); Az elemet tünteti el és teszi láthatóvá.

egyedi animációk

$(“#elem”).animate({tulajdonság:mérték},ms);

Az .animate() egy nagyon univerzális jquery függvény. Szinte majdnem minden css tulajdonsággal tud dolgozni (opacity, height, width, font-size…stb). Egy összetett animate függvénnyel már nagyon szép animációkat lehet varázsolni.

META tagek

Kulcsfontosságú a meta tagek pontos beállítása. A <meta name=”KEYWORDS” content=”"> és <meta name=”DESCRIPTION” content=”"> tagek a legfontosabbak SEO szempontjából. A “KEYWORDS” meta az oldal kulcsszavait határozza meg. Ide csak az oldalra nézve reveláns szavakat írjuk.  Hossza nem haladhatja meg az 500 karaktert, különben spamnek minősül.  A “DESCRIPTION”  meta-ban lévő szöveg fog megjelenni a találati listán. Fontos hogy ez a szöveg a weboldal tartalmából legyen beillesztve.

Kulcsszó sűrűség

Lényeges hogy a “KEYWORDS” metában szereplő szavak 2%-8%-át tegye ki az oldalnak. Tehát érdemes ezeket a szavakat az egész oldalra kiterjeszteni, anélkül hogy a tartalmat túlspamelnénk. A tartalom egyaránt a keresők és olvasók részére kell optimalizálni. Ez a SEO egyik nagy nehézsége, az egyensúly ember és gép között.

Linképítés

A Google nagy jelentőséget add a magas PR linkeknek. Nem elég már csak az oldalt a keresőkre optimalizálni. Minnél több, nagyobb PR értékű link (lehetőleg PR2-nél nagyobb) mutat az oldalra, annál értékesebbnek tekinti a google. Tehát a linképítés nélkülözhetetlen tényező, anélkül nem lehet bekerülni a magas találati listák közé. Linkelni is csak úgy érdemes, hogy használjuk a kulcsszavunkat a linkelési szövegben, azaz az anchor text kulcsszavakat tartalmazzon mert amúgy nem sokat ér.

Indexelt oldalak

A jól optimalizált aloldalak is erősítik a főoldalt, vagyis a domain egészét. Jó ha a domainünk nem csak 5-6 aloldalból áll, hanem minnél több beoptimalizált és linkelt oldalból.

Folyamatosan frissülő tartalom

A friss és értékes tartalom nemcsak a látogatót ösztönzi a viszontlátogatásra, hanem a keresőket is. Ha folyamatosan frissül a tartalmunk, annál többször látogatja meg a domainünket a kereső robotok és ezzel jobb helyezést is ér el a domain.

Még sok más tényező van ami alapján sorolnak a keresők, de ha a fent említett SEO részletekre odafigyelünk már nagyon jó helyezéseket lehet elérni. Lényeg a türelem és az oldalunk folytonos babusgatása.

Duplikált tartalom

A blog rendszerek legnagyobb problémája a duplikált tartalom. A Google és egyéb kereső rendszerek szigorúan büntetik a duplikált tartalmat. Gondoljuk át hogy egyetlen egy bejegyzés hányszor is fog megjelenni egy normál blog oldalon. Tehát megjelenik a blogban, a kategóriákban, az archívumban, a tagekban, esetleg az oldalunk főoldalán. Most ott tartunk hogy ugyanaz a bejegyzés 5x jelenik meg. Hát ez nagy gáz! A legjobb megoldás erre hogy a bejegyzésünkbe néhány sor után szúrjuk be a bővebben gombot. Így a teljes tartalom csak egy helyen fog megjelenni viszont az a pár sor még mindig ott van 5x az oldalunkon, ez is probléma lehet. Tehát a kategóriában, blogban, archívumban, főoldalon, és a tagekben is megjelenik az első pár sor. Ezekre az oldalakra no-index metát vagy canonical url-eket kell használunk.

Egyéni meta minden bejegyzéshez

A WordPress adminban be lehet állítani a kulcsszavakat és egyéb metákat. Ez mind szép és jó de sajnos minden bejegyzéshez ezt fogja felhasználni. Ez több szempontból is előnytelen de legfőbbképpen a duplikált meta description miatt. Nos ezt csak wordpress seo plugin-ekkel lehet kikerülni.

Keresőbarát url-ek

A WordPress már tudja kezelni a keresőbarát url-eket, de ezt az adminban be kell állítani. Onnan lehet tudni hogy nincs bekapcsolva ha ilyet látunk az url-ben: www.domain.hu/blog/?p=2

Seo szempontból a legelőnyösebb ha az url minnél rövidebb és ha szerepel benne a kulcsszó. Ezért a fenti képen látható beállítás a legalkalmasabb.

A WordPress több szempontból is egy csodálatos rendszer, de sajnos a seo része kicsit fejletlen. Pánikra semmi ok hiszen számos plugin található WordPress-hez amely befoltozza ezeket a hiányosságokat. Következő bejegyzésben felsorolok néhány seo plugin-t.

BOX-SHADOW:

Árnyékok renderelése css-ből. A box-shadow css3 tulajdonságot a legfrissebb böngészők támogatják (kivéve IE). Használata: Vízszintes eltolás, függőleges eltolás, blur, szín.

Firefox:
-moz-box-shadow: 10px 10px 5px #888;

Chrome & Safari:
-webkit-box-shadow:10px 10px 5px #888;

Opera:
box-shadow:10px 10px 5px #888;

BORDER-RADIUS:

A border radius segítségével a web designerek könnyebben dolgozhatnak lekerekített sarkakkal. IE kivételével minden modern böngésző támogatja.

Firefox:
-moz-border-radius: 5px 10px 5px 10px;

Chrome & Safari:
-webkit-border-radius: 5px 10px 5px 10px;

Opera:
border-radius: 5px 10px 5px 10px;

FONT-FACE:

A font-face számos egyedi betűtípus használatát teszi lehetővé. Nem újdonság ez a technológia, hisz már a css2-ben probálta a Microsoft szabványosítani a font-face-t, bár csak az .eot betűtípusokat támogatja. Mára már a modern böngészők mind támogatják a .ttf és .otf betűtípusokat. Internet Explorer-rel is működik a dolog, csak trükkösen.

@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}

h3 { font-family: Delicious, sans-serif; }

Keressük meg a beilleszteni kivánt videót youtube-on és kattintsunk az embed gombra.

1. Állítsuk be a video paramétereit (keret színét, videó nagyságát..stb).

2. Ellenőrízzük le a beállításokat az előnézet ablakban.

3. Másoljuk ki a kódot.

A bejegyzés szerkesztőjében váltsunk át html kód nézetre.

És végül illesszük bele a kimásolt youtube kódot.

Ugyanezzel a módszerrel illesztettem be ezt a wordpress videó tutoriált.

Figyelem! A videó csak kozzététel után fog látszódni, tehát ne ijedjünk meg ha az előnézetben nem jelenik meg.

Valójában sima HTML-t tudunk a helyi gépen futtatni mindenféle segéd programok nélkül is. Viszont szerver oldali skriptekhez és adatbázis kezeléshez muszáj virtuális webszervert futtatni gépünkön. WordPress és más CMS alapú weboldal készítéshez nélkülözhetetlen a helyi szerver, azaz a localhost futtatása.

A legnépszerűbb csomag windowsra a WAMP, macre a MAMP. Telepítése és beállítása pofon egyszerű. Ha feltelepítettük, célszerű egy mappát létrehoznunk, ebben fogsz dolgozni. Gondolj rá mint a webszerveren lévő public_html mappára. Ha ez megvan akkor a WAMP vagy MAMP beállításainál meg kell adni hogy ezt a mappát használja a virtuális webszerver, mint public_html. Weboldal készítéskor mindig ide dolgozzunk!

MAMP TELEPÍTÉSE

MAMP letöltése

Húzzuk a sima MAMP mappát az applications könyvtárba. Majd telepítés után indítsuk el.

Legcélszerűbb az apache portot 80-ra állítani.

És természetesen be kell állítani azt a bizonyos mappát amit public_html-ként fog kezelni. Weboldal készítés során ide mentsünk.

Ennyi a konfigja. Érdemes egy php fájlt bemásolni a könyvtárunkba és lefuttatni ellenőrzés képpen.

Ez a blog rendszer nagyon rugalmas, használhatjuk kiegészítőként meglévő oldalunkra, de képes magát az egész honlapunkat is kezelni. Ebben a bejegyzésben csak nagyvonalakban magyarázom el hogyan kell blog kiegészítőként feltelepíteni egy meglévő oldalra.

Töltsétek le a WordPress-t

Hozzunk létre egy mappát ahol a rendszer működni fog. Ezt általában egy “/blog” mappába szokták rakni. Viszont kereső optimalizálás szempontjából értékesebb lenne egy kulcsszavas mappát létrehozni (pl. “/turisztika-blog”). Másoljuk be a letöltött csomagunk tartalmát ebbe a mappába és töltsük fel ftp-n keresztül szerverünkre.

A WordPress adatbázisban tárol mindent, tehát létre kell hozni egy adatbázist és egy felhasználót phpmyadmin-on keresztül. Ha ez megtörtént nincs más hátra mint a böngészőn keresztül belépni a mappában ahová a WordPress-t bemásoltuk (www.domain.hu/blog). Itt megadjuk wp-nek az adatbázis elérhetőségét amit létrehoztunk és a többit csinálja magától.

A  fenti angol nyelvű videó és leírásom segítségével szerintem hamar megtanulhatjuk hogyan kell WordPress-t telepíteni.

1. Legyen minél tömörebb és szűkebb

A mai napig találkozok css fájlokkal amelyek 500-700 sorosak csak azért mert minden egyes stílus tulajdonságot külön sorban írnak. Ez több szempontból is hátrányos lehet. Lehet azt hisszük hogy áttekinthetőbb így, de valójában sokkal több időt vesz igénybe azt az 500 sort végig pásztázni, mint egy letömörített 200 sort. A másik probléma hogy minden új sor (enter) után nő a css fájl mérete. Nem megabyte-okról beszélünk, de akár felére is csökkenthetjük a css-ünk méretét. Ezért is szokták letömöríteni a nagyobb javascript fájlokat. Sőt, van aki a css fájlját is letömöríti, de szerintem ez már túlzás hisz bármikor adódhat weboldal készítéskor egy pillanat, hogy gyorsan bele kell nyúlni. Mondjuk IE miatt.

2. Próbáljuk a HTML felépítéssel összhangba hozni

Kezdjük a html elemeivel (body, a ,h1,h2) és utána pedig ugyanazt a sorrendet tartsuk be ami a html-ben található (head, menu,tartalom,footer). Láttam olyat is ahol az id-k meg class-ok teljesen  külön vannak szedve. Részemről ez teljes káoszt okozott, hisz így a sorrend teljesen felborul és megintcsak pásztázni kell az egész css-t.

3. Több css fájlból csináljunk egyet

Weboldal készítés közben előfordul hogy modulokkal, framework-ökkel dolgozunk és ilyenkor általában csak bemásoljuk a meglévő css fájlt a css mappánkba. Így akár 4-5 stílusfájlal is dolgozhatunk. Ilyenkor célszerű egy css-be rakni, hiszen annyival kevesebbszer kell a böngészőnek csatlakoznia a szerverhez.

Weboldal készítés helytelen CSS-sel

Weboldal készítés helyes CSS-sel

A különbség magáért beszél! Weboldal készítés során érdemes a css-t hasonló módon megírni.

Adjuk hozzá az oldalunkhoz a jquery keretrendszert. Ha még nem tudnád hogyan kell, kérlek olvasd el a “jquery telepítés” bejégyzést.

A jquery szelektor nem más mint css szelektorok szteroidon.

Nézzünk meg egy példát:

A HTML

A JQUERY

Érdemes egyenként kikommentelni a jquery parancsokat. Megfigyelhetjük hogy a jquery szelektorok működése azonos a css-ével, sőt a css3 már teljesen átvette a jquery által bemutatott szelektorokat.

Nos, nézzünk meg részletesen egy sort.

A $ jel nem más mint maga a jquery. Ezzel a karakterrel mondjuk meg a javascriptnek hogy mostantól jquery parancsokat várjon. A css fügvény meg egyértelműen css szabályokat társít a kiválasztott elemhez.

Az utolsó jquery szelektorban már láthatunk egy filtert is. Ez nagyon hasznos lehet ha nem az összes  talált elemmel szeretnénk dolgozni.

Tehát jquery, válaszd ki nekem az összes ul összes li tagját, de az “a” class elemeket hagyjad békén!

Következő jquery bejegyzésben megmutatom a lényegesebb filtereket.

A mai gyakorlat fájljait itt töltheted le >> LETÖLTÉS!