Dizajn v redakčnom systéme WordPress

Dizajn webu je z pohľadu začínajúcich tvorcov webov často tou prvou vecou, na ktorú sú zvedaví. To sa týka hlavne ľudí, ktorí s internetom začínajú a majú málo skúseností. Začínajúci tvorca webu sa často pýta: akej farby to celé bude, ako budú vyzerať tlačítka a podobne. Z pohľadu internetového marketingu, či stratégie webu a hlavne jeho ziskovosti už dizajn nebýva medzi prvými faktormi, je to skôr nástroj.

Stručne sa dá povedať.

• Začiatočníci považujú dizajn za obsahovú zložku webu.
• Profesionáli považujú dizajn za zložku funkcionality webu – za formu.

Skúsení tvorcovia webu odporúčajú, aby ste spravili návrh svojich web stránok v poradí, kedy návrh finálneho dizajnu bude jedna z posledných vecí, ktoré sa budú vytvárať a bude podriadený zámerom a stratégiám.

Dôležitejšie než dizajn sú totiž informačná architektúra, marketingová stratégia, analýza cieľovej skupiny a podobne. Keď tieto faktory máte jasné, potom prichádza na rad aj dizajn, ktorý bude podriadený účelu vášho webu.

A tú mám pre vás ďalšiu z dobrých správ týkajúcich sa redakčného systému WordPress. Redakčný systém WordPress má úplne oddelený dizajn od obsahu.

Pred časom takáto vec nebola možná. Kedysi okolo roku 2000 sme vyrábali weby tak, že dizajn a obsah web stránky boli vždy jedna časť kódu stránky a neboli od seba jednoduchým spôsobom oddeliteľné. Tento trend sa postupne začal meniť a v súčasnosti je situácia taká, že na webe dokážeme úplne oddeliť obsah od dizajnu.

To v praxi znamená, že vy môžete začať budovať svoj web, písať články, publikovať fotografie, vyrábať čo potrebujete a to celé môžete robiť v ľubovoľnom dizajne. Inými slovami to znamená, že vy môžete nastaviť marketingovú stratégiu na internete, začať podľa nej budovať váš web a ešte stále nemusíte vedieť ako presne bude vyzerať, čo, kde, na ktorej stránke bude zobrazené. To je veľmi výhodné, pretože máte k dispozícii čas.

Pri návrhu dizajnu webu je totiž často otázne nielen to kde a aký prvok chceme umiestniť, ale dôležité je aj to, čo vlastne na webe bude. Ak vy v redakčnom systéme wordpress pripravíte svoj návrh webu v podobe, ktorá po obsahovej stránke bude prakticky hotová a toto predstavíte svojmu webdizajnérovi bude tento môcť navrhovať ostrý skutočný webdizajn na základe skutočných dát nachádzajúcich sa na webe. O to efektívnejší a lepšie nastavený dizajn môže potom takýto grafik pre vás pripraviť.

Nemusíte hneď začať v grafickom štúdiu. Je veľa webov, ktoré nevyžadujú žiadny špecializovaný dizajn a na nich je možné použiť niektoré z existujúcich dizajnových šablón, ktoré sa na internete dajú stiahnuť zadarmo alebo niektoré kvalitnejšie za triezve poplatky. Hotové šablóny dizajnu vo WordPresse majú tú výhodu, že môžete okamžite na nich postaviť svoj web, netreba dohromady nič vedieť a všetko vám bude fungovať. Nevýhoda týchto šablón je tá, že absolútna väčšina z nich sú prakticky rovnaké. Rozdiely sú minimálne a je to spôsobené tým, že väčšina autorov dizajnových šablón vo WordPresse sa snaží akceptovať a rešpektovať možnosti, ktoré dáva redakčný systém WordPress.

Ako príklad môžeme uviesť napríklad to, že WordPress je blogový systém (aspoň pokiaľ hovoríme o jeho primárnej funkcii). Prakticky každý tvorca dizajnu potom sa snaží rešpektovať všetky možnosti, ktoré WordPress ponúka. Takže ak WordPress umožňuje registráciu nových členov, v dizajne nájdete políčko pre registráciu. Keďže WordPress umožňuje zobrazenie kategórií, nájdete tieto možnosti. Týmto spôsobom sa dá pokračovať až sa dostanete do situácie, že všetky možnosti, ktoré umožňuje WordPress dizajnér dá do svojho návrhu.

Keďže webdizajn sa predsa len riadi istými konvenciami a štandardami – často hlavne logikou – je umiestnenie týchto rôznych prvkov v dizajnovom rozvrhnutí stránky často univerzálne platné a preto v rôznych dizajnoch nakoniec nájdete väčšinu ovládacích prvkov zhruba na rovnakých miestach. Práve z toho dôvodu sa väčšina dizajnérskych šablón pre WordPress podobá ako vajce vajcu.

Jednoducho všetky umožňujú všetko.

Pokiaľ chcete navrhnúť vlastný dizajn v redakčnom systéme WordPress nie je to problém, ale budete musieť niečo vedieť. Rozdielnosť vášho dizajnu od univerzálnych šablón bude spočívať spravidla v tom, že svoj návrh výrazne zjednodušíte. Jednoducho zbavíte WordPress typických vlastnosti. Vznikne tak jednoduchší návrh, ktorý bude rešpektovať potreby vášho webu.

V každom prípade prácu na tvorbe webu máte v redakčnom systéme WordPress oddelenú od dizajnovej zložky a to vám dáva široké pole pôsobnosti, napríklad aj neskôr, pokiaľ sa rozhodnete zmeniť dizajn vašich stránok radikálne, spravidla je to možné spraviť bez problémov. Inými slovami to znamená, že sa neskôr rozhodnete, že menu bude vpravo, že bude iným písmom, že bude ináč zoradené a podobne, nemusíte nič meniť na obsahu vášho webu, stačí ak sa zmení dizajnová šablóna, to je veľká výhoda tohto nového systému dizajnu, ktorý redakčný systém WordPress ponúka podobne ako mnohé iné progresívne redakčné systémy.

Práca s dizajnom vo WordPresse

Redakčný systém WordPress umožňuje prácu s grafikou v úplne ľubovoľnom rozsahu. Inými slovami to znamená, že váš web postavený na platforme WordPress môže mať absolútne ľubovoľný dizajn, všetko čo chcete spraviť sa vo WordPresse spraviť spravidla dá. V niektorých prípadoch môžu byť trochu problémy pokiaľ si zvolíte veľmi náročný koncept, ale aj veľmi náročné koncepty sa vo WordPresse realizovať dajú.

Ak sa pozriete na weby a blogy postavené na redakčnom systéme WordPress zistíte, že sa podobajú ako vajce vajcu, skoro všetky majú rovnakú funkcionalitu, rovnaké možnosti a rovnaký dizajn.

Možno je jeden červený, možno je na druhom list alebo okuliare na kuse papiera, v každom prípade väčšina dizajnov je podobných. To však neznamená, že takto musí vyzerať aj váš dizajn. Väčšina webových tvorcov je pohodlná a pri návrhu dizajnu vychádzajú z existujúcej štruktúry, ktorú WordPress ponúka vo svojom štandardnom nastavení. Vy túto chybu urobiť nemusíte. Vy si môžete rozhodnúť čo presne chcete mať na webe a tieto veci vybrať z možností, ktoré umožňuje WordPress a vytvoriť si tak vlastné šablóny.

Práca so šablónami WordPress je na prvý pohľad veľmi zložitá, pretože štandardná šablóna, ktorú WordPress automaticky v sebe obsahuje po inštalácii je neprehľadná, pretože predvádza prakticky všetky možnosti, ktoré tento redakčný systém umožňuje. Pokiaľ sa budete snažiť túto šablónu čiastočne modifikovať zrejme sa dostanete tam, kde väčšina tvorcov a váš dizajn bude podobný ako vajce vajcu iným webom. To v zásade nie je problém pokiaľ vám to strategicky neprekáža a hlavne pokiaľ vyrábate blog. U firemného webu by som však radil iné rozvrhnutie.

V nastaveniach vzhľadu máte kartu, ktorá sa volá editor a v nej budete môcť nastavovať všetky vlastnosti vášho dizajnu. Tu určujete css štýly aj všetky ostatné parametre. Viem pokiaľ sa neživíte internetovým dizajnom tieto veci vám nebudú nič hovoriť a ani vám neodporúčam niečo skúšať v tejto oblasti meniť, pretože môže sa stať, že neodborným zásahom v tejto sekcii môžete poškodiť celý dizajn vášho webu.

Pred úpravou dizajnu vo WordPresse zálohujte

Pokiaľ sa v tom čiastočne vyznáte a nie ste si istí, radšej si najprv zálohujte všetky svoje nastavenia dizajnu tak ako sú a tak ako fungujú a až potom začnite robiť zmeny.

Najjednoduchšie je cez FTP zálohovať všetko čo sa týka dizajnu. Nájdete to v adresári /wp-content/themes/ ak potom niečo pokazíte, stačí stiahnuté súbory vrátiť na pôvodné miesto a web je ako bol.

Dizajn sa vo WordPresse generuje pomocou šablóny stránky alebo šablóny príspevku. Podľa toho, či sa čitateľ nachádza na stránke alebo na príspevku. Všetky ostatné položky dizajnu sú voliteľné. V praxi teda znamená, že celý dizajn sa dá postaviť aj na jednom jedinom súbore šablóny a nemusí byť tak zložitý ako ho vidíte v štandardnej schéme vo WordPresse. Tam sa pre prehľadnosť dizajn rozdeľuje na to, čo bude v záhlaví stránky, čo v obsahovej časti, v inej šablóne sa generuje menu, v inej komentáre. Takže pozrime sa na štruktúru dizajnovania v editore WordPress (alebo si súbory stiahnite a editujte u seba – čo vám je ľahšie).

Šablóna css štýl bude obsahovať všetky potrebné značky pre dizajnovanie vášho webu. Ak ostane prázdna a nepoužívate css štýly nič sa nestane. Ak chcete, môžete CSS štýl vložiť do hlavičky stránky a ušetriť tak požiadavku na server – pri krátkom kóde to môže byť užitočné. Predpokladajme v ďalšom, že váš web bude postavený len na stránkach. Budeme sa teda venovať iba šablóne pre stránky. Príspevky sú generované podobne, ak porozumiete ako sa dizajnujú vo WordPresse stránky, príspevky pochopíte.

Ak sa pozriete na štruktúru návrhu šablóny dizajnu stránky (teda Page Template (page.php)) objavíte tam PHP kód. Máte to zálohované? OK.

Postupne si prejdeme čo tam budete mať.

V hlavičke stránky je dobré mať niečo takéto:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Určí, aké kódovanie diakritiky sa používa.

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Určí čo bude v parametri <title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Načíta CSS štýly do stránky

<?php wp_head(); ?>

Načíta ďalší obsah hlavičky z dát ktoré pošle WordPress.

</head><body>

Koniec hlavičky stránky.

<?php wswwpx_fold_page_list ('sort_column=menu_order&exclude=193'); ?>

Toto vygeneruje menu (potrebujete mať inštalovaný plugin "Folder Pages & List) ale menu sa dá generovať aj inak. Na&príklad

<?php wp_list_pages('sort_column=menu_order&exclude=193' ); ?>

Parameter sort_column=menu_order znamená, že menu má byť zoradené podľa toho, ako určíte v poradí stránok pri ich zadávaní. Ak neurčíte nič, stránky budú v poradí, ako ste ich vytvárali. Ak určíte číselné poradie, bude sa rešpektovať toto poradie.

Parameter exclude=193 znamená, že v menu sa nemá objaviť stránka s interným označením 193 – ja pri generovaní menu nedávam vypísať hlavnú stránku do menu. Číslo stránky zistíte v menu spravovať stránky. Keď na niektorú stránku kliknete, otvorí sa linka váš-veb.sk/wp-admin/page.php?action=edit&post=123 a číslo 123 je číslom stránky.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_title(); ?>

Vygeneruje názov článku

<?php the_content(__('(more…)')); ?>

Vygeneruje text článku

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Uzatvorenie kódu

<?php if ( comments_open() ) : ?>
<?php comments_template(); ?>
<?php endif; ?>

Ak chcete, aby pod článkom boli komentáre…

</body>
</html>

Koniec stránky.

Toto je všetko. Takýto kód vyhodí na webe korektný kód stránky bez dizajnu. Ak chcete dizajn, vsuňte ho medzi jednotlivé príkazy. Teda napríklad ak chcete vytvoriť tabuľku, kde v ľavom stĺpci by bolo menu a v pravom text aktuálneho článku, kód by mohol vyzerať takto (len časť bez hlavičiek) časť dizajnovú dám červenou farbou:

<table border="1" width="700" style="border-collapse: collapse" cellspacing="0" bordercolor="#000000" cellpadding="10">
<tr>
<td width="300">
<?php wp_list_pages('sort_column=menu_order&exclude=193' ); ?>
</td>
<td width="400">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(__('(more…)')); ?>
<?php edit_post_link(); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php if ( comments_open() ) : ?>
<?php comments_template(); ?>
<?php endif; ?>
</td>
</tr>
</table>

Teraz poznáte princíp, ako generovať jednotlivé príkazy WordPress a kam ich posielať v dizajnovej šablóne. Do obyčajného html kódu teda na správnych miestach dáte vložiť menu <?php wp_list_pages(); ?> alebo názov článku <?php the_title(); ?> a tak postupujete, až kým web nerobí to, čo chcete a nevyzerá tak, ako chcete.

Akonáhle budete chcieť aby dizajn bol zložitejší, najlepšie je ak sa začítate do manuálu, ktorý je vo WordPress k dispozícii na webe u jeho výrobcu. Nájdete ho na codex.wordpress.org, je tam všetko s funkčnými príkladmi. Všetko čo môže WordPress vygenerovať je možné nájsť na týchto stránkach a budete veľmi prekvapení aké bohaté možnosti tam sú. Menu môžete napríklad generovať staticky, dynamicky, môžete nechať, aby sa jednotlivé položky takpovediac otvárali, jednoducho všetko čo chcete v dizajne dosiahnuť je možné úpravou týchto a podobných príkazov, ktoré ste videli pár riadkov vyššie.

Samozrejme pracovať s dizajnom je na prvý pohľad neprehľadné, pretože je to nová oblasť, človek sa v tom nevyzná a ak ste netrpezliví tak sa vám nemusí páčiť, že sa musíte zas niečo naučiť. Po niekoľkých rokoch skúseností s týmto publikačným systémom som však zistil, že ak potrebujem vyriešiť nejakú konkrétnu situáciu alebo úlohu, stačí ak pozriem na Google s vhodne zvolenou otázkou a za niekoľko minút nájdem spravidla niekoľko rôznych riešení, ktoré riešia aj moju otázku.

Preto sa pri návrhu dizajnu nebojte. Samozrejme ak sa v dizajne nevyznáte a nevyznáte sa ani v programovaní, WordPress vám túto situáciu neuľahčí. Jednoducho ak niečo neviete máte len dve možnosti.

• Buď si zaplatíte konzultáciu u niekoho kto sa v tom vyzná,
• alebo sa to začnete učiť sami.

Pokiaľ riadite svoj firemný web a venujete sa svojmu biznisu, nemyslím si, že je dobrá cesta, aby sa z vás mal po nociach stávať amatérsky dizajnér HTML kóder, či PHP programátor. Sú to zaujímavé profesie, je dobré vedieť, ako sa stavia web a prečo, avšak mať tieto znalosti vyžaduje veľa času. Je pravdepodobné, že ak ste dobrý obchodník, tak asi zarobíte lepšie obchodovaním, ako programovaním. Na vašom biznise zarobíte lepšie pokiaľ sa budete venovať svojím zákazníkom ako keby ste sa mali snažiť prebiť implementáciou príkazov v PHP kóde, ktorým možno ani poriadne nerozumiete. Jednoducho delegujte. Pokiaľ potrebujete riešiť nejakú úlohu vo WordPress to je možné, ale neznamená to, že sa z vás má stať žiak. Používajte WordPress ako nástroj, ktorý je veľmi silný a má veľa možností, ale nepokúšajte sa robiť všetko vždy sami.