WordPress šablony s hlavou a patou

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ů.

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: 12

Přehled komentářů

mmartin odkaz na výskedek
wicc Re: odkaz na výskedek
Martin Hložek wp_head
wicc Re: wp_head
brano Pre prehlad dobre
wicc Re: Pre prehlad dobre
Milan Re: Pre prehlad dobre
Lukenzi drobnosti
fronty Nepoužívat wp_head()?
Vojtěch Semecký Re: Nepoužívat wp_head()?
Čelo fajn
dilong jedna zakladna vec
Zdroj: https://www.zdrojak.cz/?p=3758