Brzy bude čas předělat mé webové stránky pro „věk Web 2.0“. Vážně jsem se podíval na dvě platformy, Drupal a Joomla, pomocí kterých toho lze dosáhnout.
Drupal a Joomla nabízejí komplexní balíčky, které v případě Drupalu zahrnují blog a fórum jako základní moduly. Motivování těchto platforem lze provést pomocí úprav kódu CSS (Cascading Style Sheets) a PHP (Personal Home Page nebo PHP: Hypertext Preprocessor). Tyto platformy jsou však složité a naučit se nainstalovat, spravovat a přizpůsobovat tyto platformy může být náročný úkol.
Po prostudování těchto dvou platforem, včetně jejich použití na mé testovací platformě a na internetu, jsem se rozhodl podívat se na WordPress jako možné řešení mých budoucích webových potřeb. Překvapilo mě, když jsem zjistil, že nejnovější verze WordPressu se snadno instaluje, snadno se používá a má snadné téma.
V tomto článku popíšu, jak přizpůsobit WordPress 2.5.
STYLING WORDPRESS
Existuje šest hlavních komponent, které tvoří vzhled výchozího blogu WordPress:
1. Grafika záhlaví
2. Název blogu
3. Slogan
4. Strana
5. Pozadí
6. Zápatí.
Aby se blog rychle načítal, rozhodl jsem se nepoužít grafiku záhlaví ani zápatí; a protože návrh bude v podstatě výchozím tématem WordPress s novým kabátem, je třeba udělat jen malou práci na grafickém designu. Ve skutečnosti jsem potřeboval vytvořit pouze jednu grafiku, abych vygeneroval stránku blogu s efektem dvou sloupců. Stránka blogu se bude „vznášet“ uprostřed na tmavě modrém pozadí *těla*, které bude sloužit k orámování stránky.
Vytvoření grafiky
Pohled v adresáři obrázků pro výchozí téma WordPress ukazuje výchozí obrázky použité pro vzhled Kubrick. V současné době existuje pouze jeden soubor, který je zvláště zajímavý: kubrickbgwide.jpg. Pro návrh nejsou ostatní Kubrickovy obrázky potřeba, ale budou potřeba pro „Fancy“, složitější design.
Stránka blogu bude vytvořena z „výřezu“ přes střed nového designu. Řez je úzký obrázek na šířku stránky blogu.
Svůj návrh jsem začal rozložením základní stránky (760 x 600 pixelů) v aplikaci Adobe Illustrator. Rád používám Illustrator pro umělecká díla tohoto druhu, i když lze použít i jiné programy.
Základní stránku jsem vyplnil barvou pozadí stránky (nezaměňovat s tmavě modrým pozadím *body*). Světlá barva pozadí bude „ukazovat“ barevný text, jako je název blogu a slogan.
Stránku jsem překryl dvěma obdélníky neboli „sloupci“. Levý sloupec o šířce 510 pixelů je vyplněn pastelově žlutou barvou; pravý sloupec o šířce 230 pixelů je vyplněn pastelově modrou barvou. Dva sloupce se vejdou do základní stránky s 10px okrajem pozadí stránky kolem nich.
V Illustratoru jsem pak na stránku umístil obdélník 760 x 40 pixelů a použil jsem ho k vytvoření řezu. Výseč není nic jiného než reprezentativní kus většího obrázku, v tomto případě designu blogu. Uložil jsem řez jako kubrickbgwide.jpg. Kubrickbgwide.jpg se použije ke generování pozadí stránky blogu. Když je na stránku blogu přidán nový obsah, kopie řezu budou svisle naskládány, aby „rostlo“ pozadí se dvěma sloupci. Toto je jediný obrázek, který prohlížeč potřebuje ke generování domovské stránky blogu. Blog se proto načte velmi rychle.
Zatím docela snadné, že? Zbytek návrhu se provádí prostřednictvím souboru CSS motivu a/nebo prostřednictvím administrativního rozhraní WordPress.
CSS Změny
Výchozí soubor CSS je v adresáři wp-content_themes_default. Níže uvedený text CSS ukazuje změny kódu na style.css. Před provedením jakýchkoli změn ve výchozím souboru CSS vždy vytvořím a uložím kopii originálu. Soubor CSS lze otevřít a upravit pomocí libovolného textového editoru. Text, který má být smazán, bude zobrazen v hranatých závorkách. Nový nebo upravený text se zobrazí bez závorek.
/* Začít typografii a barvy */
tělo { [pozadí: #d5d6d7 url('images/kubrickbgcolor.jpg');]
pozadí: #636f89; /* Nastavit barvu pozadí těla na modrou */
}
#page {
[barva pozadí: bílá;] [ohraničení: 1px plný #959596;]border:none;
} [#header {
pozadí: #73a0c5 url('images/kubrickheader.jpg') bez opakování dole uprostřed;
}
#headerimg {
okraj: 7px 9px 0;
výška: 192px;
šířka: 740px;
}]
#footer { [pozadí: #eee url('images/kubrickfooter.jpg') no-repeat top;]
pozadí: #fffef2; /* Velmi světle žlutá */
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [.description] {
text-dekorace: žádná; [barva bílá;]
červená barva; /* Označte nadpis červeně */
polstrování-bottom: 5em; /* Mezi nadpis a slogan dejte malou mezeru */
}
.description {
textové dekorace: žádné;
barva: modrá; /* Změňte slogan na modrý */
text-align: center;
}
/* Konec typografie a barev */
/* Začátek struktury */
#page { [barva pozadí: bílá;]
barva pozadí: ffff2; /* Velmi světle žlutá */ [ohraničení: 1px plný #959596;]
ohraničení: žádné;
}
#header { [barva pozadí: #73a0c5;]
barva pozadí: #fffef2; /* Velmi světle žlutá */
}
/* Koncová struktura */
Po provedení a uložení těchto změn do souboru style.css je nově navržená stránka blogu dokončena.
STYLING WORDPRESS — DESIGN MAKRA
Přestože se mi líbí jednoduchost designu blogu Jakob, neosloví každého. Spousta lidí prostě miluje „třpyt“. Cena efektních šatů WordPress je často pomalejší načítání blogu bez zvýšení použitelnosti. Nicméně pro ty, kteří chtějí „obléknout“ vzhled svého blogu, jsou zde další způsoby, jak toho dosáhnout.
Nejprve je třeba poznamenat, že pozadí výchozí stránky WordPress používá grafiku záhlaví (kubrickheader.jpg) a zápatí (kubrickfooter.jpg). Tato grafika není vyplněna jednolitou barvou, jako v designu Jakob, ale přechody. Také se zdá, že pod stránkou je velmi malý vržený stín.
Vzhledem ke složitosti výchozí stránky je vyžadována další grafika, a proto bude potřeba více řezů. Navíc, když je požadováno složitější pozadí těla, na kterém se „vznáší“ stránka, může být pro to vyžadován také „seed“ obrázek (k tomu slouží obrázek kubrickbgcolor.jpg).
Stejně jako předtím jsem vytvořil kresbu stránky blogu v Illustratoru. Stránka se zaoblenými rohy se vznáší na výchozím pozadí WordPress, má žlutý přechod a malý vržený stín.
Nejprve jsem vytvořil obdélník 760 x 600 pixelů na kreslicí ploše Illustratoru. Tento obdélník jsem vyplnil barvou pozadí (C:8, M:6, Y:6, K:0).
Dále jsem pomocí nástroje Zaoblený obdélník nakreslil obdélník o rozměrech 736 x 584 pixelů a vyplnil jej žlutým přechodem. V podstatě jsem udělal stránku co největší na pozadí a ponechal jsem dostatek místa pro vržený stín.
Nakonec jsem zaoblenému obdélníku dala malý vržený stín.
Aby bylo zajištěno, že se řezy dokonale spojí s pozadím *těla*, vytvořil jsem čtverec 60 x 60 pixelů stejné barvy pozadí (C:8, M:6, Y:6, K:0) a uložil jsem jej jako kubrickbgcolor.jpg. Malý obrázek bude použit k „vymalování“ pozadí těla. Toto je důležitý krok, protože pozadí použité pro tělo a pozadí použité pro stránku musí dokonale odpovídat designu Fancy.
Vytváření řezů
Pomocí nástroje Rectangle Tool jsem na výše popsané rozložení umístil obdélník 760 x 200 pixelů. Tento obdélník jsem umístil do horní části rozvržení a použil jsem ho k vytvoření řezu pro grafiku záhlaví. Než jsem to udělal, zakázal jsem tah a výplň.
Uložil jsem řez jako kubrickheader.jpg.
Vytvořil jsem zápatí a řezy stránky podobným způsobem a přejmenoval jsem je na kubrickfooter.jpg a kubrickbgwide.jpg. Kubrickfooter.jpg je 760px x 63px a kubrickbgwide je 760px x 40px.
V adresáři obrázků jsou dva další obrázky Kubrick: kubrickbg-ltr.jpg a kubrickbg-rtl.jpg (zleva doprava a zprava doleva). Tyto obrázky jsou stejné jako kubrickbgwide.jpg. Udělal jsem tedy dvě kopie kubrickbgwide.jpg a podle toho je přejmenoval.
Změny CSS
Výchozí soubor CSS je v adresáři wp-content_themes_default. Níže uvedený text CSS ukazuje změny kódu na style.css. Hranaté závorky ukazují, který kód se má smazat, a nový kód je zobrazen bez závorek. Před provedením změny jsem zkopíroval a uložil původní soubor. U Fancy designu jsou změny CSS minimální.
/* Začít typografii a barvy */
tělo { [pozadí: #d5d6d7 url('images/kubrickbgcolor.jpg');]
pozadí: #e7e7e7 url('images/kubrickbgcolor.jpg');
}
#page { [barva-pozadi: bílá;] [okraj: 1px plný #959596;]
}
#header { [pozadí: #73a0c5 url('images/kubrickheader.jpg') bez opakování uprostřed;]
pozadí: #e7e7e7 url('images/kubrickheader.jpg') bez opakování dole uprostřed;
}
#footer { [pozadí: #eee url('images/kubrickfooter.jpg') no-repeat top;]
pozadí: #e7e7e7 url('images/kubrickfooter.jpg') no-repeat top;
}
h1, h1 a, h1 a:hover, h1 a:visited, #headerimg [popis]{ [barva: bílá;]
červená barva; /* Označte název blogu červeně */
polstrování-bottom: 5em; /* Mezi nadpis a slogan dejte malou mezeru */
}
.description {
textové dekorace: žádné;
barva: modrá; /* Změňte slogan blogu na modrý */
text-align: center;
}
/* Konec typografie a barev */
/* Začátek struktury */
#page { [barva pozadí: bílá;]
barva pozadí: #e7e7e7; [ohraničení: 1px plný #959596;]
hranice: žádná; }
#header { [barva pozadí: #73a0c5;]
barva pozadí: #e7e7e7;
}
/* Koncová struktura */
Po práci s designem a CSS ukáže WordPress své nové oblečení celému internetu.
STYLING WORDPRESS — BEZ GRAFICKÉHO DESIGNU
Nic se nepokazí, když prohlížeč načte stránku z internetu, že? I kdyby tomu tak ve skutečnosti bylo, je stále moudré zvážit, jak se stránka zobrazí v případě, že grafiku nelze najít.
V případě designu Jakob, pokud by se kubrickbgwide.jpg z jakéhokoli důvodu nestáhl, stránka by se nezobrazila přijatelně. Kvůli světlému pozadí použitému pro záhlaví a zápatí se normálně zobrazují na tmavě modrém pozadí přiřazeném k tělu. Obsah stránky se však stává obtížně čitelným: téměř se ztrácí v tmavě modrém pozadí. Světlejší pozadí pro tělo mohlo být mnohem moudřejší volbou.
Tvůrce návrhu Kubrick tento problém vyřešil přiřazením alternativních barev pozadí, které se použijí, pokud grafika nebyla k dispozici. Přiřazení se provádí v souboru style.css:
body { pozadí: #d5d6d7 url('images/kubrickbgcolor.jpg'); }
#header { pozadí: #73a0c5 url('images/kubrickheader.jpg') bez opakování dole uprostřed; }
#footer { pozadí: #eee url('images/kubrickfooter.jpg') no-repeat top; }
Pokud obrázky nejsou k dispozici, použije se alternativní hodnota barvy RGB.
Pokud grafika není k dispozici, výchozí blog WordPress je stále prezentovatelný a použitelný. Pro úvodní redesign stránky, počínaje základním Kubrickovým designem, bez grafiky, může být dobrým místem, kde začít. Toho lze dosáhnout zjednodušením výše uvedených prohlášení:
tělo { pozadí: #d5d6d7; }
#header { pozadí: #73a0c5; }
#footer { pozadí: #eee; }
Barvy lze poté změnit a vyzkoušet různá barevná schémata blogu. Stačí změnit kódy barev RGB, uložit soubor CSS a aktualizovat prohlížeč, abyste změny okamžitě viděli. Doufám, že to bylo užitečné a snadno čitelné.
Příspěvek napsal Royce Tivel
