A weboldal hangulatát úgy terveztem meg, hogy visszaadja a pálinkák fiatalos csomagolásának hangulatát, ugyanakkor letisztult és átlátható legyen. Egyszerűen imádok ránézni! Persze raktunk bele sok hasznos funkciót, hamarosan a webshop is kész lesz, illetve a testvér oldala, a bestillo.com is, angol nyelven.

Tessék megnézni és elmerülni a finom pálinka hangulatban! http://bestillo.hu/

http://mde.hu/

Az alap Wordpress motor és sablon mellett persze felturbóztuk Facebook Like funkcióval és a mi legédesebb: tartalombeküldést enged (sőt, kifejezetten kéri) a látogatónak, linkeket és képeket lehet beküldözgetni, melyekhez egyedi formok és linkkatalógus került kialakításra, ez utóbbi a Wordpress beépített Linkek (Blogroll) funkciójának segítségével.

http://uristenhazasodunk.hu/

Eddig nem készítettem még zárt weboldalt a Wordpress-szel, mely csak regisztrált felhasználóknak érhető el, de hát eljött ez is. A finomság az benne, hogy vannak olyan oldalai, melyek regisztráció nélkül is láthatóak, de természetesen a lényeg az ajtó mögött van…

http://programdeluxe.com/

A weboldal saját fejlesztésű rendszeren fut – online hitelkalkulátor és igénylés (!) fő funkciókkal, de megjelennek itt még olyan finomságok, mely szintén Zina keze nyomát viselik: a fiókkereső, a dokumentum kezelés, a deviza árfolyamok, a hitelszótár, a szakértő válaszol rovat.

http://www.aegonhitel.hu/

A design egy létező sablon finomításából és teste szabásából alakult ki, tükrözi az iskola módszerét: tisztán, gyorsan, egyszerűen.

És igen, ez itt egy kicsit a reklám helye is, én is itt készültem fel a nyelvvizsgámra ;)

http://beszeljangolul.eu/

A keresőoptimalizálást nem csak a sablon kialakítása, de plugin is segíti, amit az oldal szerkesztői kedvüknek megfelelően teletömhetnek mindeféle kulcsszóval. A közösség építést a twitter és facebook oldalak integrálása segíti.

http://sap-business-one-blog.hu/

Külön kis szívem kedvence, mert ennek a designja egyszerűen nagyon jóra sikerült! Szinte már profi :) Ránézek, és mintha el sem hinném, hogy én csináltam. Egyszerűen szeretem. Letisztult, finom, kiemeli a lényeget. És hát nem édes?

Szóval akinek kutyája vagy cicája van, biztos talál itt valami hasznos infót, úgyhogy tessék most azonnal kattintani!

http://kisallat-biztositas.hu

És itt pont a szolgáltatás a lényeg, amit a weboldal nyújt: riportot készít a (leendő) lakóhelyünkről, vagy épp, ha úgy tetszik, akkor meg is mondhatjuk, hogy mostani lakóhelyünk mennyire tetszik nekünk.

Vigyázat, még béta, mert folyamatosan fejlesztjük, de már megéri kipróbálni!

http://www.ingatlanellenor.hu/

Egy szakértő válaszol típusú plugin is található a weboldalon, amit teljes mértékben én programoztam (bár jelenleg még nincs bekapcsolva), a szakértőket admin userrel lehet kiválasztani a rögzített felhasználók közül, akik az admin felületen látják az új kérdéseket, és ott is válaszolják meg.

Másik kis szépsége, az aloldalaknál a narancs doboz felett megjelenő szürke navigációs doboz, ami az aloldalait listázza ki az adott szülőnek. Ennek programozásával is szórakoztam egy kicsit, de végül szép lett az eredmény, működik!

http://www.vallalati-biztositasok.hu/

Ő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

De hogy a fenébe szerezzünk ilyen linket? Ma már ez egyszerűnek tűnhet, építsünk blogokat, és a bejegyzésekbe rejtsük el a linkünket. Minél több jó, témába vágó blogunk van, annál nagyobb esély arra, hogy sok és értékes link kapcsolatot állítsunk fel. De hogy jön ide a blogbejegyzés címe? Hol a tisztességtelenség?

Például ha fogalmunk sincs, miről szóljon a blog, akkor lopjunk másoktól, akiknek volt!

De Zina, ilyet nem szabad csinálni! … Tudom, és én soha nem is teszem. Ha mégis, akkor is csak ihletnek használok ilyeneket, és azokat is külföldi oldalakról. Nem Ctrl+C Ctrl+V-zem más magyar blog tartalmát!!!!

Mi is történt? Nézegettem az Analytics-ben, hogy milyen weboldalakról jött rám kattintás. Találtam egy olyat, hogy honlapkeszito.blogter.hu (direkt nem linkelem be, csak azért sem). Kíváncsi voltam, milyen vonatkozásban linkel rám, de rám mutató hivatkozás helyett nem mást találtam, mint hogy ott mosolyog öt cikkem az oldalán, szóról szóra átvéve!!!! Lapozás után a bizonyíték!

Miután nem akarok neki a Google helyezésekben segíteni, hogy még több rámutató linkje legyen, ezért csak képileg mutatom meg, hogy mit lopott (illetve a blogtér-től kértem a blog törlését is plágium miatt, nem tudom, meddig lesz látható). Íme:

Webdesign hibák első rész

Eredeti cikk: Nem követendő webdesign hibák

Még arra sem vette a fáradtságot, hogy lecserélje a betű színét…

Webdesign hibák második rész

Eredeti cikk: Újabb webdesign hibák

Legjobb blogdesingok

Eredeti cikk: A 100 legjobb blog design

Blog Action Day bejegyzés

Eredeti cikk: Hogy készítsünk jó weboldalt kevés pénzből?

Egy RSS-ről szóló cikk

Eredeti cikk: Gyűjtsünk több RSS olvasót!

Egyébként itt követte el a hibát a szerencsétlen plagizáló, ugyanis az eredeti cikkben (régebben) volt egy Szójegyzék hivatkozás, amit automatikusan rápakolt az összes RSS szóra, melyet aztán átvitt a http://lemmikki.hu/szojegyzek/rss linkre. És ezt rajtahagyta… És persze néhányan rákattintottak, ami pedig megjelent a statisztikámban…

És hogy miből gondolom, hogy ez egy linképítős blog? Hát nagyon cselesen egy-két ilyen linket elrejtett a készítő a bejegyzéseiben:

Természetesen megnéztem a másik két oldalt is. A blog.hu-s oldalon nem találtam olyan írást, mely tőlem lett volna lopva, de a téma ugyanaz. De nem is ez a fontos, hanem a másik oldal, a goundzero. Ezt sem linkelem be, mert nem érdemli meg, sőt. Írtam a blog.hu-s oldal gazdájának, hogy mi köze van a blogtereshez, illetve a groundzero-n is küldtem ez üzit, hogy mi köze van a másik kettőhöz… Illetve a blogteresen minden egyes íráshoz bekommenteztem, hogy ‘anyád’. Na nem szó szerint ezt, kulturáltabb voltam, aki el akarja olvasni, meg tudja tenni…

Szinte biztos vagyok benne, hogy a groundzero-s emberke nyúlta le a bejegyzéseim… 2009. szeptemberében kezdte a blogolást, ugyanakkor, mikor a másik két blog is íródott… De a legszebb az egészben, a negyedik bejegyzésének ez a címe: Sose másoljuk weboldalak tartalmát

Ahogy közzéteszem ezt a bejegyzést, el is küldöm a linkjét ebbe a bejegyzésbe kommentnek… tanuljon az úriember…

Jelen esetben nem volt feladatom a tartalom feltöltése, lényegében a keretrendszert építettem fel, kapcsolat formok, galéria, aloldal sablonok stb. És igen Wordpress alapú weboldalról van szó.

http://nagykunhaz.hu

A design lényegében néhány szórólap inspirációjára készült, de megbolondítottam kis apróságokkal még, amitől ezt a hangulatot kapta. Miután a weblap mögé a megrendelő nem kért supportot, ezért minden egyes részét úgy alakítottam ki, hogy hozzáférhető legyen, programozói tudás nélkül is. Természetesen Wordpress :)

http://aegondij.hu

A multilingual pluginokkal valahogy sosem tudtam kibékülni, valami egyikben sem tetszett, így általában azt a legegyszerűbb módszert választottam, hogy telepítettem egy teljesen különálló WP-t egy almappába, és onnan futott, teljesen függetlenül a magyartól. Megvan ennek is a szépsége, de a hátrányai is, de azokat elfogadtam.

A vadjutka.hu-n egy kicsit más volt a helyzet, mert ott viszonylag nagyobb egységet képez a magyar és angol oldal, így nem volt értelme a két külön WP-nek. És itt jött a móka.

Első lépés – Alapbeállítás és a magyar oldalak létrehozása

FONTOS! Csak az egyedi permalinkekkel működik a megoldás! Első lépésként állítsuk be a Beállítások/Közvetlen linkek menüben a kedvelt formátumot, ez nálam jelenleg a %category%/%permalik%/.

Ha ez megvan, akkor létrehozzuk a magyar oldalakat. Ez nem túl bonyolult lépés, főleg nem Wordpress-szel. Lényeg, hogy nagyjából készítsük el a vázat, aztán mehetünk tovább.

Második lépés – Létrehozzuk az angol oldal szülőjét

A vadjutka.hu-n ez lényegében egy Eng nevű oldal, tartalmat nem kapott, viszont megkapta ugyanazt a Page Template-et, mint a magyar nyitólap. Ha szimpatikus, lehet máshogy is hívni, pl. En. Vagy English. Ahogy jól esik. A lényeg, hogy amilyen nevet beállítunk neki közvetlen linknek, az lesz majd az elérhetősége.

Harmadik lépés – az angol oldalak elkészítése

A magyar oldalak struktúrájához hasonlóan létrehozzuk az angolokét is, ami FONTOS, hogy ezek fő szülője az előbb létrehozott Eng oldal lesz.

Ha ez után megnézzük a menünket, akkor eléggé összevissza, tele a magyar és angol oldalak linkjével. Akkor most ezt oldjuk meg!

Negyedik lépés – a menüket rakjuk rendbe

Erre a legegyszerűbb megoldás a pageMash nevű plugin. Lényegében egyszerű drag and drop módszerrel lehet benne az oldalak sorrendjét módosítani, kivenni őket a listából. Úgyhogy következő lépés, hogy letöltjük és telepítjük a plugint.

Plugin: pageMash
Letöltés: pagemash.zip (183 KB)
Szerző: JoelStarnes

Ha telepítettük és aktiváltuk a plugint, akkor az Oldalak menüpont alatt fogjuk megtalálni. Ahogy van, szedjük ki az egész angol részt a menüből. Ha a menüpont neve felé visszük az egeret, megjelenik mellette egy vízszintes almenü, és ott a hide opciót kell használni. Valahogy így fog kinézni:

Ötödik lépés – oldallistázás a sablonból

Most jön a varázslat! Az oldal listázását a sablonból is módosítani kell. A menü legtöbbször a header.php-ban, ritkábban a sidebar.php-ban van. Most megmutatom a kódot, aztán elmagyarázom:

<?php if (is_page('eng') || is_english($post)) {
$parent = get_id_from_slug('eng');?>
<ul;>
<li><a href="<?php bloginfo('url'); ?>/eng/" class="title">Home</a></li>
<?php wp_list_pages("sort_column=menu_order&title_li=&child_of=$parent"); ?>
<li><a href="<?php bloginfo('url'); ?>">Magyar</a></li>
</ul>
<?php } else { ?>
<ul>
<li><a href="<?php bloginfo('url'); ?>" class="title">Kezdőlap</a></li&gt;
<?php wp_list_pages("sort_column=menu_order&title_li="); ?>
<li><a href="<?php bloginfo('url'); ?>/eng/">English</a></li>
</ul>
<?php } ?>

A kód első felében az angol oldalak listázása történik, a másodikban a magyar. Magánban a listázásban semmi különös nincs, egyszer kiíratom a nyitóoldal linkjét, aztán a WP beépített wp_list_pages(); függvényét használom (a menu_order szerinti rendezés a pagemash miatt fontos), majd kiíratom a nyelvválasztást.

A feltételek vizsgálatában két általam írt függvény vesz részt, melyeket a funcions.php-ban kell elhelyezni. Ez a két függvény lényegében végig kíséri az egész folyamatot (sidebar, footer, stb.).

Hatodik lépés – a függvények elhelyezése

is_english();

Persze át lehet írni a függvény nevét, illetve lehet módosítani bármilyen más névre. A függvény azt vizsgálja, hogy adott oldalnak szülője, vagy nagyszülője a harmadik lépésben létrehozott Eng oldal.

function is_english($post) {
$english = get_id_from_slug('eng');
$ancestors = get_post_ancestors($post);
 
if (in_array($english,$ancestors)) {return true;} else { return false; }
}

A második sorban van az ‘eng’, ha máshogy neveztük el oldalunkat, akkor annak a nevét kell ide írni, úgy, ahogy az URL-ben is van. Az is_english(); függvény meghívja a get_id_from_slug(); nevűt, nézzük azt is:

get_id_from_slug();

function get_id_from_slug($slug) {
global $wpdb;
$posts = $wpdb->prefix . "posts";
 
$postid = $wpdb->get_var("SELECT id FROM $posts WHERE post_name LIKE '$slug' LIMIT 1");
if ($postid) {return $postid; } else {return FALSE;}
}

Másoljuk ki ezt a kettőt és tegyük be a functions.php-be.

Hetedik lépés – a sidebar kétnyelvűsítése

A legegyszerűbb mód, ha a meglévő sidebar.php mellé készítünk pl. egy sidebar_hun.php-t és egy sidebar_eng.php-t, és ez utóbbi kettőbe a szokásos módon elkészítjük a külön nyelvű oldalsávjainkat.

Az alap sidebar.php ilyenkor nem fog mást tartalmazni, mint a feltételt, hogy mikor melyik aloldalsáv fájlt hívja meg. Ez valahogy így néz ki:

sidebar.php

<?php if (is_page('eng') || is_english($post)) {
{include (TEMPLATEPATH . '/sidebar_eng.php');
<?php } else { ?>
{include (TEMPLATEPATH . '/sidebar_hun.php');
<?php } ?>

Ugyanezt a taktikát használhatjuk az összes többi oldalra is, bár ahol kevesebb a tartalom, ott nem kell külön fájlokba elkészíteni a két nyelvű szöveget, egyszerűen betehetjük a feltételvizsgálatok közé is.

Mi van három, vagy több nyelv esetén?

A logika hasonló, csak nem egy feltételt kell vizsgálni, hogy angol-e az oldal, vagy nem, hanem többet. A több nyelvű vizsgálatok így néznek ki:

<?php if (is_page('eng') || is_english($post)) {
...
<?php } elseif (is_page('ger') || is_german($post)) {
...
<?php } else { ?>
...
<?php } ?>

Jól lekezeltük az oldalakat, de mi van a bejegyzésekkel?

Na igen, ez a fent leírt megoldás valóban nem oldja meg a bejegyzések többnyelvűsítését, de ha logikusan belegondolunk, akkor az oldalak hierarchiáját nagyjából rá lehet húzni a kategóriák hierarchizálásának lehetőségére, onnan már csak egy kis agyalás a függvényekkel, és működik az is.

Nem megy esetleg a bejegyzések többnyelvűsítése? Keress meg nyugodtan, szívesen segítek!

Miután profitorientált cégről van szó, ezért előtérbe helyeztük a termékeket és szolgáltatásokat, és minden oldalon ott van az ajánlatkérés gomb jó nagyban, véletlenül sem lehet eltéveszteni. A hírlevél, a blog, a hírek azért kerültek bele, hogy differenciálja az oldalt a jelenleg piacon lévőktől, reméljük siker lesz.

http://company-care.hu

Azt hiszem, jól teljesítettem ezt a feladatot, és utána jött a nagyobb rész: a régi weboldal kétnyelvű szerkezetét átültetni Wordpress-re, persze mindezt optimalizálva. Sok témakört ölel fel az oldal, mégis egységes szerkezetre kellett hozni, de kimondhatom: sikerült! Ékszerek, fotózás, újságírás, szociológia is megtalálható itt, és a bloggerről átexportált sokéves blog is. És a kétnyelvűség, melyet plugin nélkül, a sablon okos programozásával oldottam meg. Akit érdekel a megoldás, jelezzen, aztán később kifejtem egy blogbejegyzésben is.

Addig is tessék megnézni ezt a fantasztikus oldalt!
http://vadjutka.hu

http://dobogoko.hu/

Ha a képre kattintasz, megnézheted mozgósban, és magadról is csinálhatsz egyet ;)

A probléma: az Internet Explorer 7 a háttérnek beállított repeat-y tulajdonságú kép áttetsző png részét randomra megduplázta, mintha többször egymásra tette volna. Ahogy görgettem az oldalt, ez a duplázódás el-elcsúszott, megrövidült, megnagyobbodott, ahogy az neki tetszett. És hogy néz ki? Így:

Bal oldalon lehet látni, hogy mit csinál az IE7, jobb oldalon pedig egy normális böngésző, esetünkben a Mozilla Firefox 3.5.5.

És akkor hogy lehet megoldani?

Hosszú utánaguglizás után megtaláltam a megoldást: arra a div-re (vagy bármi másra), aminek be van állítva az áttetsző png-s háttér, adni kell egy ilyen stílust:

.divclass {
background: url(/images/transparent.png) center repeat-y;
min-height:0;
}

És hogy miért? Az ún “haslayout” probléma miatt, ami a kedvenc böngészőnk, az IE fantasztikus tulajdonsága. És igen, továbbra is ironikusan írom ezt. Aki szeretne további részleteket megtudni erről, itt talál: hasLayout – Webmaster World.com. Aki meg az egyszerű megoldásokat keresi, annak ott a min-height: 0; És élünk tovább boldogan :)

És hogy ez miért is fontos nekem? Igen sok munkám van benne, úgy nézzetek rá, hogy két kezem munkája :)

Szóval tessék kattintani, szétnézni és kötelező biztosítást váltani november 1-től:

Kötelező biztosítás

Úgy érzem, sikerült!

http://figurkadesign.hu/

http://ejszakaicsuszdazas.hu/

Amiért igen közel áll a szívemhez az oldal, hogy szoros együttműködésbe kezdtünk, és mostantól a Mákgubón keresztül is lehet ZINA LEMMIKKI weblapot rendelni, sokféle verzióban – olyan célcsoportnak alakítottunk ki különböző csomagokat, akik a weblapokkal csak mostanában kezdenek el foglalkozni, és szeretnék a lehetőségeiket kipróbálni.

http://makgubo.hu/

Mivel a blu-ray egy igen finom jövőbemutató technika, ezért mindenképpen a letisztultsághoz nyúltam (divatos szóval minimal designt alkottam), kevés színnel, sok white-space-szel. Végre egy kicsit saját szám ízének megfelelően bátrabban használhattam a nekem oly’ kedves vektoros motívumokat.

Isteni izgi blog egyébként, tessék odafigyelni rá ;)

http://bluray.blog.hu

Mert büszke vagyok rá, de nem tudom, és nem is akarom úgy átalakítani, hogy az az üzlettársam nélkül műkdöjön. A http://galaxnet.hu-ra most kiraktam az oda tervezett galériát, ide pedig kirakom a weboldalt, mely soha nem kelt életre…

Természetesen Wordpress, amolyan magazin szerű stílusban…

Norbi, téged pedig mindig szeretni foglak!

http://lemmikki.hu/galaxnet/

Wordpress alapra épült, különlegessége, hogy minden oldal más színű, melyet úgy oldottam meg, hogy van egy nagy style.css, és minden oldalban meghívok egy-egy másikat, amelyikben csak a színek és a képek vannak definiálva, így a fő css és a kiegészítő tökéletesen megférnek egymás mellett.

Figyelem! Webshop is van benne, melyet a WP E-Commerce nevű pluginnal oldottam meg, mely az egyik legjobb plugin: és tényleg sokat tud, ahhoz képest, hogy ugye ingyen van, nem kerül százezrekbe.

http://dotty.hu

CSAJOKNAK KÖTELEZŐ!!!

Összességében jól használható, átlátható oldal lett, büszke vagyok rá.

http://presidentpoker.hu

http://upfront.hu

És hogy mik ezek? Csak egy kisebb válogatás, amikre büszke vagyok:

• legjobb webdesign (1)
• képkeresők (6)
• honlap háttér (1,2)
• css shadow (2)
• weblap motor (1)
• blog design (1)
• legjobb blog (1)
• png IE6 (2)
• min-height IE6 (2)
• wordpress (24)
• wordpress sablon (6)
• photoshop brushok (8)
• gmail téma (5)

Hogy sikerült? Leginkább úgy, hogy ezek a szavak szerepeltek a <title> tagben és <h2>-ben is megjelennek az oldalakon. Gyakorlatilag ezt a Wordpress alapból tudja.

Érdemes lehet azért egy-két cselt még pluszban bevetni. Mik ezek?

Például van egy csodás plugin, amit úgy hívnak: All in One SEO Pack. Természetesen nálam is telepítve van, de nem igazán használom. A lényege annyi, hogy egyedileg megszabhatjuk, hogy nézzen ki úgy általában az oldal <title> tagje (ami valljuk be, az egyik legfontosabb tényező a tartalom mellett), illetve ugyanezt megadhatjuk minden egyes oldalnak és bejegyzésnek is. 

Emellett a <head> részbe belekerülő description-t is megadhatjuk egyedileg, ugyanígy a keywords mezőt is. 

Ennek a bejegyzésnek  most megadtam az alábbiakat: 

<title> Wordpress SEO – Keresőoptimalizálás a legjobb weblap motorral
<meta name=”description” content=”" /> A Wordpress maga már SEO csoda, de segíthetünk keresőoptimalizálni plugin-ekkel is. Itt van néhány tipp, hogy tehetjük ezt meg könnyedén! 
<meta name=”keywords” content=”" />  wordpress, weboldal, SEO, keresőoptimalizálás, howto, plugin, siker, blog

Keresőoptimalizáció teszt

Ha minden jól megy, akkor igen gyorsan fel kell kerüljek a magyar Google találati listáján a “Wordpress” “SEO” és “keresőoptimalizálás” kulcsszavakra, vagy ezek bármilyen kombinációra.

Ha így találtál rám, mindenképp írj egy kommentet, de én is bele fogom írni, hogy mikor hányadik vagyok a listán.

Ha ez bejön, akkor egyértelművé válik, hogy mi a  SEO titka: amit leítam fent. Ha ez bejön, akkor egyértelmű, mit fogok tenni a jövőben az összes oldalammal és bejegyzésemmel :) 

Hajrá ZINA! Hajrá SEO!