Přejít k navigační liště

Zdroják » Různé » WordPress šablony s hlavou a patou

WordPress šablony s hlavou a patou

Články Různé

Většina z vás WordPress jistě zná, ale pro ty ostatní zmíním, že se jedná o velice populární content management systém, pro blogery, menší weby či eshopy, a podobně. Je postavený na PHP/MySQL, a protože je zdarma, stává se ideální volbou pro ty, kteří nemají velký rozpočet. To potvrzuje i nepřeberné množství volných i komerčních šablon, pluginů a jiných doplňků.

Nálepky:

Popularita je rozhodně fajn věc a rozvoji systému pomohla, ale autoři vše „zjednodušili“ natolik, že si web dokáže vytvořit uživatel s minimálními znalostmi, a v tom je kámen úrazu. Pro běžného uživatele není důležité, jakým způsobem se vytváří šablona, že zdrojový kód je neorganizovaný chaos, nebo že každé zobrazení stránky dělá 150 requestů na server. Hlavně, že to funguje.

Představte si, že za vámi přijde potenciální zákazník, který chce web a rád by měl možnost jeho správy, jenže na to má jen desítky tisíc korun místo stovek tisíc, ale vy pro něj stejně chcete pracovat. Třeba protože se vám líbí jeho produkt, nebo si prostě lidsky sednete.

Pokud pracujete jen v trošku renomované společnosti, nebo nechcete odevzdávat odbytý projekt, nezbývá, než se poohlédnout na poli open source. WordPress se přímo nabízí, ale co s tím spaghetti kódem, který generuje, a chaotickými šablonami, za něž byste se museli stydět?

Na následujících řádcích vám zkusím ukázat, jak optimálně připravit HTML šablonu, jak ji rozporcovat a rozdělit tak, abyste se ve struktuře snadno orientovali. Důležitou součástí bude také minimalizace WordPress footprintu, celková optimalizace a pár tipů, jak upravit věci, které nefungují podle vašich představ.

Co přesně budeme dělat

Skočíme v čase malinko dopředu, kdy už máme zákazníka s omezeným rozpočtem, seznámeného s WordPressem i všemi jeho úskalími a omezeními. Máme jasně definované jeho potřeby a požadavky na funkcionalitu a schválené grafické návrhy.

Web má umět

  • Informace o firmě
  • Reference
  • Aktuality
  • Články
  • Videa
  • Galerie
  • Kontakty – formulář, mapa, apod.

Jak na HTML šablonu

Zde hodně záleží na zpracování grafiky webu, ale pokud grafickému návrhu předcházel wireframe, určitě půjde rozdělit do logických celků, jako například navigace, článek, patička, a podobně. Toto rozdělení je alfou a omegou celé naší snahy o WP šablonu, která bude mít hlavu a patu.

Správné rozdělení na logické celky není nějak zvlášť komplikované. Níže uvádím, jak v našem případě připravíme homepage.

  • Homepage
    • Hlavička
    • Navigace
    • Obsah
      • Reference
      • Články
        • Článek
        • Video
    • Stránkování
    • Patička

Nezapomeňte, že každý logický celek musí být izolovatelný. To znamená, že například v bloku, kde je článek, nebude současně i vyhledávání, a podobně. Zní to směšně, ale není zase takový problém na podobné příklady narazit.

Adresářová a souborová struktura šablony

V této části si ukážeme, jak rozdělit naše logické celky do souborů a později z nich poskládat WP šablonu.

  • Root šablony
    • Složka assets
      • Složka img
      • Složka scripts
      • Složka styles
  • Soubor header.php
  • Soubor footer.php
  • Soubory content-<název logického celku>.php
  • Soubor style.css

Rozdělení složky assets netřeba příliš popisovat.

Soubory header.php a footer.php obsahují to, co mají všechny stránky společné na začátku a konci. V našem případě to je hlavička a navigace nahoře a patička dole.

Do souborů content-<název logického celku>.php izolujeme logické celky, které se dále nedělí. V našem případě to budou: navigace, reference, detail reference, článek, detail článku, video článek a stránkování.

Soubor style.css klame názvem. V našem případě bude sloužit pouze k popisu šablony.

Oživení izolovaných logických celků

V celé šabloně pracujeme s jednou sadou funkcí, které zobrazují obsah, nebo nám zobrazování usnadňují. Tyto funkce zapracujeme do našich základních logických celků, které jsme si izolovali do souborů content-<název logického celku>.php, header.php a footer.php. Zobrazovací funkce například jsou:

  • the_title() – nadpis entity
  • the_excerpt() – úvodní text entity
  • the_content() – obsah entity
  • the_permalink() – stálý odkaz na entitu
  • the_author() – autor entity
  • the_date() – datum vytvoření

Kompletní seznam funkcí použitelných v šabloně i cyklu naleznete zde.

Nastavení WordPressu

Než začneme šablonu oživovat, je třeba nastavit WordPress dle potřeb naší šablony. K tomu slouží soubor functions.php. Všechny úpravy se dělají pomocí akcí a filtrů.

Akce jsou spouštěny specifickými událostmi, které vyvolává WordPress. Akce mohou upravit chování WordPressu podle vašich potřeb. Seznam událostí, na které lze reagovat, najdete zde.

Filtry jsou funkce, které upravují předávání dat mezi databází a prohlížečem. Mohou vám například pomoci upravit délku úvodního textu článku, a podobně. Seznam filtrovatelných položek najdete zde.

Všechny základní úpravy provádíme v akci reagující na událost after_setup_theme. Zde nastavíme podporované formáty článku, speciální typ entity pro reference a velikosti generovaných obrázků.

    function moje_sablona_setup()
    {
        // krome standardniho clanku budeme podporovat jeste video clanky
        add_theme_support('post-formats', array('video'));

        // na prispevek se muze vazat nejaky titulni obrazek
        add_theme_support( 'post-thumbnails' );

        // velikosti obrazku
        add_image_size( 'loop_main', 300, 300, true );
        add_image_size( 'slider_slide', 950, 280, true );

        // specificky typ entity reference
        register_post_type( 'reference',
            array(
                'labels' => array(
                    'name' => __( 'Reference' ),
                    'singular_name' => __( 'Reference' )
                ),
                'public' => true,
                'has_archive' => true,
            )
        );

        // vlastni menu
        register_nav_menus( array(
            'main_menu' => 'Hlavní menu'
        ) );

    }

    // na akci after_setup_theme navazeme funkci moje_sablona_setup
    add_action('after_setup_theme', 'moje_sablona_setup');

Pro skrytí komentářového systému vytvoříme akci reagující na událost admin_menu.

    function moje_sablona_remove_menu_pages() {
        remove_menu_page('link-manager.php');
        remove_menu_page('edit-comments.php');
    }

    add_action( 'admin_menu', 'moje_sablona_remove_menu_pages' );

Upravení délky úvodního textu článku provedeme filtrem vlastnosti excerpt_length.

    function moje_sablona_excerpt_length( $length ) {
        return 45;
    }

    add_filter( 'excerpt_length', 'moje_sablona_excerpt_length');

Oživování šablony

Blížíme se do finále. V tuhle chvíli už je dobré mít nainstalovaný WordPress, aktivovanou naši šablonu a umístěný nějaký vzorový obsah.

Ve složce naší šablony vytvoříme několik souborů, které budou řídit zobrazování našich dat. Formu, jakou budou data zobrazena, jsme si připravili izolováním logických celků do souborů content-<název logického celku>.php, které už jen jako puzzle spojíme.

  • index.php – homepage
  • page.php – samostatná stránka
  • single.php – detail článku
  • signle-reference.php – detail reference
  • category.php – seznam článků z rubriky
  • search.php – výsledky vyhledávání
  • archive.php – seznam všech článků
  • archive-reference.php – seznam všech referencí
  • 404.php – obsah nenalezen

Obsah těchto souborů bude velmi podobný, protože zobrazování jakéhokoli obsahu se provádí pomocí jednoduchého cyklu. Kromě cyklu mají tyto soubory další společné vlastnosti – hlavičku a patičku, které jsme izolovali do souborů header.php a footer.php, také by měly by umět reagovat, pokud nebudeme mít k dispozici data. Základ každého ze souborů by tedy měl vypadat zhruba takto:

    // hlavicka z header.php
    get_header();

    // pokud jsou nejake prispevky
    if( have_posts() )
    {
        // zakladni cyklus
        while( have_posts() )
        {
            the_post();
            // vlozi a zpracuje data ve forme, kterou zrovna potrebujeme
            get_template_part('content', 'nazev_logickeho_celku');
        }
    }
    // pokud nejsou, zobrazime 404 stranku
    else
    {
        // umisti obsah ze souboru content-404.php
        get_template_part('content', '404');
    }

    // paticka z footer.php
    get_footer();

Výjimkou budou soubory 404.php, kde není třeba žádný cyklus a postačí jen statická data, případně vyhledávací formulář, a index.php, kde budeme tvořit malinko víc.

Naše šablona podporuje více formátů článků, které se v cyklu dají snadno identifikovat a tedy i zobrazovat v podobě vhodné pro daný formát. Toto řešení budeme používat v případě našich článků, kde kromě standardního článku podporujeme i video článek.

    // zakladni cyklus
    while( have_posts() )
    {
        the_post();

        // clanek s videem
        if( has_post_format('video') )
        {
            // vlozi a zpracuje data ve forme specifikovane v content-loop-videoclanek.php
            get_template_part('content', 'loop-videoclanek');
        }
        // standardni clanek
        else
        {
            // vlozi a zpracuje data ve forme specifikovane v content-loop-clanek.php
            get_template_part('content', 'loop-clanek');
        }
    }

V případě referencí se musíme v cyklu dotazovat na specifický typ dat, který jsme si vytvořili ve functions.php. Dále s daty pracujeme naprosto standardním způsobem.

    // specifikace dotazu na data, ve ktere se dotazujeme na prispevky typu reference
    $args = array( 'post_type' => 'product');

    // ze specifikaci vytvorime dotaz pro WordPress
    $loop = new WP_Query( $args );

    // data zpracovavame standardnim cyklem
    while( $loop->have_posts() )
    {
        $loop->the_post();

        // vlozi a zpracuje data ve forme specifikovane v content-loop-reference.php
        get_template_part('content', 'loop-reference');
    }

Jsou případy, kdy na stránce chceme mít články i reference. Tohoto docílíme použitím více cyklů.

    ////////////////////////////////////////////
    // Reference
    ////////////////////////////////////////////

    // specifikace dotazu na data, ve ktere se dotazujeme na prispevky typu reference
    $args = array( 'post_type' => 'product');

    // ze specifikaci vytvorime dotaz pro WordPress
    $loop = new WP_Query( $args );

    // data zpracovavame standardnim cyklem
    while( $loop->have_posts() )
    {
        $loop->the_post();

        // vlozi a zpracuje data ve forme specifikovane v content-loop-reference.php
        get_template_part('content', 'loop-reference');
    }

    /////////////////////////////////////////////////
    // Clanky
    /////////////////////////////////////////////////

    // upravime specifikaci dotazu, protoze nas ve druhem cyklu budou zajimat standardni clanky
    $args = array( 'post_type' => 'post');

    // ze specifikaci vytvorime dotaz pro WordPress
    $loop = new WP_Query( $args );

    // data zpracovavame standardnim cyklem
    while( $loop->have_posts() )
    {
        $loop->the_post();

        // clanek s videem
        if( has_post_format('video') )
        {
            // vlozi a zpracuje data ve forme specifikovane v content-loop-videoclanek.php
            get_template_part('content', 'loop-videoclanek');
        }
        // standardni clanek
        else
        {
            // vlozi a zpracuje data ve forme specifikovane v content-loop-clanek.php
            get_template_part('content', 'loop-clanek');
        }
    }

Jsou případy, kdy se budeme potřebovat dotázat na specifická data. Vhodným příkladem může být zobrazení dalších článků ze stejné rubriky na detailu článku, nebo třeba slide. I toto řeší stejný cyklus, jen mu na začátku řekneme, o jaká data máme zájem – podobně jako v případě referencí.

    // specifikace dotazu na data, ve ktere se dotazujeme na poslednich 10 prispevku z kategorie novinky
    $args = array(
                'post_type' => 'post',
                'category_name' => 'novinky',
                'posts_per_page' => 10
            );

    // ze specifikaci vytvorime dotaz pro WordPress
    $loop = new WP_Query( $args );

    // data zpracovavame standardnim cyklem
    while( $loop->have_posts() )
    {
        $loop->the_post();

        // vlozi a zpracuje data ve forme specifikovane v content-loop-reference.php
        get_template_part('content', 'loop-clanek');
    }

K samostatným stránkám či detailům článků nebo referencí přistupujeme stejným způsobem jako k seznamům.

    // hlavicka z header.php
    get_header();

    // pokud jsou nejake prispevky
    if( have_posts() )
    {
        // zakladni cyklus
        while( have_posts() )
        {
            the_post();
            // vlozi a zpracuje data ve forme specifikovane v content-stranka.php
            get_template_part('content', 'stranka');
        }
    }
    // pokud nejsou zobrazime 404 stranku
    else
    {
        // umisti obsah ze souboru content-404.php
        get_template_part('content', '404');
    }

    // paticka z footer.php
    get_footer();

Když se na všechny řídicí soubory šablony podíváte, zjistíte, že je to v podstatě pořád to samé. Data budou zobrazována vždy jen v izolovaných logických celcích, v nichž se každý snadno zorientuje, a tak mohou případné úpravy bezbolestně provádět i vaši kolegové, kteří šablonu nevytvářeli. Kdyby vypadala jako většina WP šablon, byl by to pro ně očistec.

Pluginy či nepluginy

Při vytváření header.php se vyvarujte použití funkce wp_head(), která do hlavičky vloží meta informace o dané stránce, a doplní styly a skripty pluginů. Proč? Zastávám názor, že pluginy, které manipulují se šablonou, jsou spíše pro nadšence, kteří si s Wordpressem hrají a vytváří si svůj web. V profesionálním nasazení nemají místo – tedy pokud se nejedná o vaše vlastní pluginy, které se chovají tak, jak mají, a zbytečně celý web nezatěžují. Většinu front-endových věcí lze snadno naprogramovat, tak proč používat pluginy.

Znamená to, že pluginy je lepší nepoužívat vůbec? Určitě ne. Osobně se ale omezuji jen na ty, které rozšiřují možnosti redakčního systému. Mezi mé oblíbené patří:

  • Wysija newsletters – newsletterový systém dotažený téměř k dokonalosti
  • Crop-Thumbnails – umožňuje specifikování výřezů pro jednotlivé formáty obrázků
  • Force Regenerate Thumbnails – přegeneruje všechny výřezy
  • Akismet – ochrana před komentářovým spamem

Co vy na to?

Souhlasíte s takovým postupem při vytváření standardního webu? Máte lepší řešení? Dá se něco udělat lépe?

Článek nepokrývá zdaleka všechny možnosti WordPressu. Zajímalo by vás něco dalšího? Zkuste se seznamu níže vybrat položky, které vás zaujaly, a uveďte je do komentářů. Mohl bych na dané téma připravit další článek.

  • Komentáře
  • Shortcodes
  • Integrace s Facebookem
  • Šablony stránek
  • Uživatelská pole
  • Všechny formáty příspěvků
  • Vlastní typy entit
  • Taxonomie

Pokud vás baví nad prací přemýšlet a dávat dohromady chytrá i složitá front-endová řešení a připravovat promyšlené šablony, napište mi. V SiteOne máme místo pro lidi, kteří při práci uvažují, a dělají ji dobře – je fajn, když si vás zaměstnavatel váží za to, co děláte rádi.

Komentáře

Subscribe
Upozornit na
guest
12 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
mmartin

Hodil by se odkaz na výsledek.
Možná jsem se špatně díval, ale nikde jsem jej nenašel.

wicc

Žádný výsledek není. Článek nebyl o tom, jak udělat krok za krokem šablonu, ale jak postupovat při vytváření, aby byl výsledek udržitelný a bylo možné se v něm orientovat.

Martin Hložek

Tuhle větu jsem nějak nepochopil: „Při vytváření header.php se vyvarujte použití funkce wp_head(), která do hlavičky vloží meta informace o dané stránce, a doplní styly a skripty pluginů.“

wp_head totiž doplňuje i styly a skripty tématu – nebo by aspoň měla. Právě tím, že do header natvrdo dám styly a skripty můžu udělat víc škody než užitku. Styly i javascripty by se měly také zaregistrovat ve functions.php a vložit přes wp_head. Díky tomu se pak nestane, že v hlavičce se 4x vloží jQuery pokaždé v jiné verzi apod.

wicc

Právě proto, aby se v hlavičce 4x nevkládala jQ a podobně wp_head nepoužívam. Bohužel jen minimum vývojářů používá korektně wp_enqueue_script, aby se volání wp_head chovalo jak má. Navíc jsem zmiňoval, že pro front-end je lepší nepoužívat pluginy (alespoň pro mě), tudíž je snadnější a výhodnější mít hlavičku pod svou kontrolou.

brano

Vdaka za clanok. WP sice pravdepodobne napriek tomu nepouzijem, ale rad si precitam aj dalsie casti o tom co to vie a ako to tak asi funguje. Je to dobra inspiracia pre dalsiu pracu, usetri mi to kopec casu pri spekulovani co a ako sa da spravit, takze som urcite za dalsie pokracovania.

wicc

Díky za feedback. Pokračování bude začátkem příštího roku.

Milan

Zdravím s dotazem – kdy se dočkáme pokračování?

Lukenzi

Díky za článek, konečně nějaký návod pro WP, který se dá dočíst až do konce :)

Nějaké tipy do dalších článků:
Nastavení kvality obrázků – v šablonách docela opomíjená věc, změna komprese z výchozích 90% na 70% dokáže hlavně na mobilu znatelně zrychlit načítání webu

Vlastní výchozí ikonka avataru v komentářích – na některých webech jsou výchozí ikonky jak pěst na oko, vůbec nezapadají do designu a stačí tak málo…

Automatické odstranění query stringu za zdroji (css,js soubory) – také zrychlí načítání

Přidání vlastního CSS do editoru pro publikování článků – není nad to když v editoru vidím článek tak jak bude vypadat po publikování na webu

Drobečková navigace, podobné články, shortcode, widgety v článcích a podobné stupidní věci týkající se šablony, které se obvykle řeší pomocí hromady pluginů.

fronty

Děkuji za jeden z nejlepších článků, které jsem poslední dobou o vývoji WP šablon četl, přesto si ale myslím, že wp_head() by se používat měla. Je to určitě do jisté míry věc osobních preferencí, ale přesně jak píše Martin Hložek, skrze tuto funkci jsou mimo jiné inicializovány js a css soubory s docela pěkně vyřešeným dependency a verzovacím systémem (hodí se když potřebujete ukázat web klientovi a nechcete mu vysvětlovat význam Ctrl+R).
Co se týče používání pluginů v ‚profesionálním prostředí‘, při takovém pohledu by pak neměl v ‚profesionálním prostředí‘ co dělat ani WordPress. Většinu front-endových věcí opravdu lze naprogramovat jednoduše, ale s jakým dopadem na backend? Měli bychom taky myslet na své kolegy copywritery…

Vojtěch Semecký

K tomu se musím přidat. Nepoužívat wp_head() je proti logice i kodexu WordPressu.

Pokud děláte šablonu jen pro sebe, je to vaše věc. Ale pokud to má být pro veřejnost, tak vám jí bez wp_head() vůbec nevezmou do WordPress Theme Directory. Viz podmínky: http://codex.wordpress.org/Theme_Review#Template_Tags_and_Hooks

Jinak super článek.

Čelo

Uvítám jakýkoliv další navazující článek. Fajn pohled do WordPressu, který již delší dobu míjím, ale přecijen cítím, že je vhodné o něm aspoň něco tušit.

dilong

vo wordpresse som zaciatocnik. Doteraz som robil s inymi vecami. Navod vizera fajn ale pre zaciatocnika je tam jeden zasadny problem:
„… Základ každého ze souborů by tedy měl vypadat zhruba takto: …. “ „… Naše šablona podporuje více formátů článků, které se v cyklu dají snadno identifikovat a tedy“ a nasleduje mnozstvo kodu. KAM S NIM??? index.php? alebo vsetky kody do vsetkych suborov logickeho celku? kam???? To index.php je tam spomenute len ako nahodou a je velmi tazko si spojit index.php s nasledujucimi riadkami – ze to patri prave do neho …

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.