WordPress – tvorba šablony od A do Z – 3.díl – Rozšiřujeme šablonu


Z předchozího seriálu už naše šablona umí zobrazovat příspěvky, vypisovat je a zároveň umí používat statické stránky. Takové stránky jsou nám ale tak nějak k ničemu, pokud k nim nemáme žádné uživatelské menu. V dnešním díle si tedy ukážeme, jakou možnost nám WordPress pro práci s menu nabízí a jak na to. Poté si upravíme trochu výpis příspěvků a ukážeme si, co vše je možné v příspěvku vypisovat a uděláme si „pártu“. Jdeme na to…

WordPress – uživatelské menu

Redakční systém WordPress skutečně myslí na komfort uživatelů, kteří budou WordPress používat z hlediska administrace (správci) a připravil tak velmi efektní záležitost pro práci s menu. Celé menu uživatel ovládá pomocí Drag and Drop. Jak takové menu vypadá?

Ukázka WP menu

Wordpress menu

Na obrázku můžete vidět, jak takové menu v administrace pro uživatele vypadá. V základní šabloně zatím toto menu, nemáme. Pojďme si ho v šabloně aktivovat. Pro psaní různých funkcí nebo takto definovaných vlastností WP používá soubor functions.php, který je umístěn v šabloně.

Do functions.php přidáme následující kód


<?php

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Search menu' ),
      'main-menu' => __( 'Horní menu' ),
      'left-menu' => __( 'Levé Menu' ),
      'category-menu' => __( 'Kategorie Menu' )
    )
  );
}

?>

Touto částí kódu říkáme, že budou existovat 4 pozice v šabloně, kam si bude uživatel schopen menu přidat. V praxi to vypadá tak, že si uživatel založí nové menu nazve ho třeba „Moje menu“ a jak je vidět na obrázku vlevo, vybere si, kde se bude zobrazovat.

Máme tedy založené menu, WP už tuto funkci nabízí v administraci a už nám jenom chybí říct, kde v šabloně budeme menu vypisovat, od toho nám slouží wp funkce – wp_nav_menu(). Na WP codexu naleznete parametry, které funkce přijímá a co který dělá. Nám bude postačovat následující kód.


<?php
wp_nav_menu(
	array(
		'theme_location' => 'header-menu',
		'container' => 'false',
		'items_wrap' => '%3$s',
		'fallback_cb' => false,
		'depht' => 1
	)
);
?>

Tato funkce nám vrátí li položky s odkazama na příslušný obsah, pojďme si upravit například naš header.php


<!DOCTYPE html>
<html lang="cs">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Nějaký popisek webových stránek" />
	<meta name="keywords" content="sada, klíčovýc, slov, webových, stránek" />
	<meta name="author" content="www.ktstudio.cz">
	<meta name="robots" content="index,follow" />
	<meta name="googlebot" content="index, follow, snippet, archive" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
	<title>Titulek webových strnek</title>
        <?php wp_head(); ?>
</head>

<body>

<ul id="menu">
<?php

wp_nav_menu(
	array(
		'theme_location' => 'header-menu',
		'container' => 'false',
		'items_wrap' => '%3$s',
		'fallback_cb' => false,
		'deph' => 1
	)
);

?>
</ul>

A je to. Právě nám šablona začne vypisovat menu, které uživatel zařadí do místa „header-menu“. Tímto způsobem pak můžeme určovat, kde se jaké položky a jak budou vypisovat. Těchto „míst“ můžeme založit kolik chceme a stejně tak je i na uživateli, kolik jednotlivých menu si založí a kam si je přiřadí.

Když už máme menu a uživatel může návštěvníkovi konečně servírovat obsah pomocí odkazů v nějaké navigaci, pojďme si ukázat, co lze udělat s výpisem příspěvků. Vraťme se k našemu souboru index.php a trochu si ho upravme.


<?php get_header(); ?>
<div id="content">
	<h1>Nějaký nadpis na titulní stránce</h1>
	<p>A třeba text na titulní stránce napsaný uživatelem.</p>

        <h2>Naposledy přidané články</h2>
        <?php if (have_posts()) : ?>
	   <?php while (have_posts()) : the_post(); ?>
		<?php get_template_part('loop', 'single'); ?>
	   <?php endwhile; ?>
        <?php endif; ?>

</div> 
<?php get_footer(); ?>

Moc úprav jsme neudělali, že? Pouze jsme vyměnili nadpis a popisek příspěvku novou funkcí get_template_part(), která nám dělá to, že volá na základě parametru příslušný php soubor. V našem případě bude teď index loopa volat loop-single.php pro každý příspěvek. Tato funkce se dá ale použít i v případě, že chcete třeba část kódu oddělit. Například: budu mít složitou funkci pro nějaký slider, abych zachoval přehlednost šablony, vytvořím si nový php soubor a nazvu ho slider.php a kdekoliv pak jen volám get_template_part(‚slider‘). Tuto funkci doporučím hodně používat, budete mít díky tomu hezké, čisté a přehledné šablony. PhPéčkáři si řeknou, to je prostý include – ano, máte pravdu, ale takto je to napsáno „WordPress way“ :-)

A jak bude vypadat nový soubor loop-single.php? Jdeme na něj…


<?php
$category = get_the_category(); // načtení všech rubrik, kam příspěvek patří. 
?>
<div class="post">
	<h2><?php the_title(); ?></h2>
	<p>Datum publikace: <?php the_time('d.m.Y'); ?></p>
	<p>Kdo napsal článek: <?php the_author(); ?></p>
	<p>Krátký popisek: <?php the_excerpt(); ?>
	<p>link na příspěvek: <a href="<?php the_permalink(); ?>">Přečíst více</a></p>
	<p>V jaké rubrice je příspěvek umístěn: <a href="<?php get_category_link($category[0]->term_id); ?>"><?php echo $category[0]->cat_name; ?></a></p>
</div>

V tuto chvíli můžeme ve WP loop v libovolném souboru šablony volat tuto „partu“, která vypíše vždy nadefinované data. Je to přehledné a kód budeme upravovat vždy na jednom místě.

Závěrem

Dnes jsme si do šablony přidali menu a ukázali si, jak lehce pracovat s funkcí pro vkládání jednotlivých částí šablony a udržet si tak přehledný kód. Všem opravdu vřele doporučuji to používat klidně v případě, že se kód vyskytne v šabloně pouze jednou, když se jedná o nějakou funkční část. V dalším díle se pustíme do kategorií příspěvků.

Tomáš Kocifaj, KTStudio.cz

, , ,

  1. #1 Daniel 16.12.2012 - 23:03

    Opravte si drobný překlep Drak and Drop. Jinak díky za podrobný seriál a čekám na další díly.

    • #2 Tomáš Kocifaj 17.12.2012 - 07:30

      Díky za upozornění, překlep jsem opravil a na další díl se chystám tento týden.

  2. #3 Bylinky 28.7.2013 - 15:51

    Neměl by být ten kód ve functions.php být takto:


    'Search menu',
    'main-menu' => 'Horní menu',
    'left-menu' => 'Levé Menu',
    'category-menu' => 'Kategorie Menu'
    )
    );
    }

    ?>

    • #4 Tomáš Kocifaj 29.7.2013 - 05:44

      Ahoj, ano, otazníky tam byly špatně. Při peřvodu kódu do HTML podoby došlo k chybě. Děkuji za upozornění

  3. #5 Wordpress Beginner 16.8.2013 - 15:57

    Tak jsem strávil hodinu hledáním chyby. Snažil jsme se přidat menu přesným postupem (kopírováním) a přišel jsem na to, že soubor pro funkce se musí jmenovat functions.php, když jsem ho pojmenoval jen function.php, bez (s), tak mi to pořád nechtělo chodit ;)

    Možná to někomu, kdo si s tím láme hlavu, stejně jako já pomůže.

  4. #6 Zluna 10.12.2013 - 16:09

    Dobrý den,
    díky za zde publikovaný seriál ohledně tvorrby šablon pro WordPress. Já se začal s tímto redakčním systémem seznamovat prakticky nedávno a tak mne velice potěšil nález právě tohoto seriálu, kterým se od jeho prvních kapitol postupně propracovávám dál.
    Vím, k této kapitole následující dotz zrovna nepatří, ale jestli mohu, tak bych se rád zeptal na něco ohledně tvorby wordpewss menu, se kterým se právě teď potýkám. Konkrétně mi jde o možnosti jeho stylování, které jsem zatím nikde v dostatečné míře nenalezl. Jedná se mi o to, jestli je možné v šabloně nějak zařídit, aby každý odkaz v menu měl trochu jiný styl. Pro upřesnění svého dotazu se rovnou zeptám, jestli je možno wordpress menu nastylovat tak, aby se v konečné fázi na stránkách tvářilo zhruba stejně jako v tomto příkladu, který jsem napsal natvrdo v HTML kodu zde: http://predslav.cz/tmp/test/index.html
    Pokud můžete poradit zda (a v případě, že ano, tak jak) toho lze docílit, budu velmi potěšen.

  5. #7 Tomáš Kocifaj 10.12.2013 - 16:27

    Zdravím tě, pokud budeš používat tu správnou funkci pro výpis menu – wp_nav_menu() je možné potom v administraci každému odkazu přidat vlastní classu. Můžeš tak určit třeba ony použité barvy. Pokud nevidíš vstupní pole pro zadání CSS třídy, tak v administraci nahoře vedle nápovědy je taková malá „šipička“. Blok si otevři a CSS třídu si tam nech zobrazovat.

    A za použitý tabulkový layout příkladu by sis měl minimálně 100krát opsat – „Tabulkový layout už se nepoužívá, je to zastaralý, neefektivní a nekorektní!“ :-) :-)

  6. #8 Zluna 10.12.2013 - 20:47

    Opravdu díky moc za radu. Hodlám předělávat jeden stařičký web, kde však trvají na některých prvcích původního vzhledu. Uvedený příklad byl vlastně jen „výstřižkem“ toho starého kódu a proto jsou v něm ještě ty tabulky. Psát to nově, tak bych je tam nepoužil. Takhle to pro mne bylo ale rychlejší.
    Tak ještě jednou díky moc, hlavně za tu radu ohledně zpřístupnění pole pro zadání CSS třídy. :o)

  7. #9 Radovan 12.10.2014 - 21:22

    ‚deph‘ => 1
    by melo byt
    ‚depth‘ => 1

    • #10 Tomáš Kocifaj 13.10.2014 - 06:27

      Zdravím, super, díky… Aspoň vidíte, že kódy nekopíruji, ale skutečně je píšu z hlavy :-) Překlep jsem v tutoriálu opravil.

  8. #11 Pavel 13.10.2014 - 22:44

    Ahoj, proč mi nefunguje odkaz na rubriku titulní stránce za textem: „V jaké rubrice je příspěvek umístěn:“?
    Díky :)

  9. #13 Pavel 14.10.2014 - 07:10

    Ahoj Tomáši, mám vše kopírované od Tebe, v loop-single.php mám:
    V jaké rubrice je příspěvek umístěn: <a href="cat_ID); ?>“>cat_name; ?>
    Ale ten link je na hlavní stránku a ne na kategorii.
    Díky

  10. #14 Pavel 14.10.2014 - 07:12

    Omlouvám se, nevzalo to celý kód, zde je celý soubor loop-single.php k nahlédnutí.
    https://dl.dropboxusercontent.com/u/7205420/loop-single.php

    • #15 Tomáš Kocifaj 14.10.2014 - 07:29

      Je mi to jasné, oprav prosím zápis v get_category_link() na – ($category[0]->term_id). Moje omluva :-)

      • #16 Pavel 14.10.2014 - 07:39

        :) … Bohužel stále nic.

        • #17 Radovan 14.10.2014 - 14:56

          U toho jsem se taky chvili zasekl … tak jsem pouzil

          a to mi funguje

          • #18 Radovan 14.10.2014 - 14:57

            omlouvam se, dal jsem spatne kod, takze:

            echo get_the_category_list(‚,‘);

        • #19 Radovan 14.10.2014 - 15:04

          uf tak snad naposled dobre:
          echo get_the_category_list();

          v zavorce muze byt parametr oddelovac, predtim mi to hodilo spatne apostrofy

          • #20 Pavel 14.10.2014 - 15:27

            Původní kód Tomáše jsem nezprovoznil, škoda :(, chtěl jsem do toho trochu víc vidět, ale tohle chodí, takže Radovane, dík moc :)

  11. #21 Martin 12.6.2015 - 12:55

    ahoj, v upraveném header.php uz neni pred ukoncovacim tagem .
    To tak ma byt?
    díky

  12. #22 Martin 12.6.2015 - 12:59

    aha tak znova, melo tam byt, ze tam chybi funkce wp_head(), to jest dobre?

    • #23 Tomáš Kocifaj 12.6.2015 - 13:06

      Ahoj Martine – funkce wp_head(); se většinou do hlavičky zapisuje. V tomto dílu ale header.php neprezentuji proto si nejsem jistý, kam směřuje tvá otázka :)

  13. #24 Martin 12.6.2015 - 13:22

    je to v casti: pojdme si upravit nas header.php, jak se do nej vklada ta cast na vypisovani menu. Tak tam to v headu chybi :)

    • #25 Tomáš Kocifaj 12.6.2015 - 13:24

      Aaaa, chápu pravděpodobně mi to uteklo – hned v první dílu je ale wp_head(); zapsaný. Jdu to hned opravit a díky za upozornění ;)

  14. #26 Martin 12.6.2015 - 13:30

    jojo, v prvnim dilu to je, proto me to zmatlo, jeste mam prosim jeden dotaz, snazim se to rozchodit dle tveho tutorialu – mimochodem je super :) ale vyhazuje mi to stale chybove hlasky, ktere chapu tak napul:
    Warning: Cannot modify header information – headers already sent by (output started at C:\Complex-Web-Server-2\www\wordpress\wp-content\themes\martin\functions.php:17) in C:\Complex-Web-Server-2\www\wordpress\wp-login.php on line 424
    tohle je treba pri pokusu o prihlaseni do WP, diky moc!

    • #27 Tomáš Kocifaj 12.6.2015 - 13:34

      Tato chyba vyskakuje v případě, že se snažíš poslat do prohlížeče nějaké data, když už server začal rendrovat nějaký obsah.

      To se může stát několika způsoby – hlavně tedy v tom případě, když špatně ukončíš nějaký PHP soubor a zbyde ti tam například prázdný řádek v případě otevřeného zavřeného PHP :) Takových chyb jsem se nahledal až jéje…

      Například budeš mít soubor:

      < ?php // nějaký kód ?>
      // a tady ti zbyde prázdný řádek.

      Pokud za značkou ?> už není žádný obsah, nikdy značky PHP neukončuj – těmto chybám se pak vyhneš, protože to bude server brát jako „enter“ v kódu, který se nerendruje do pozice HTML. Ale prázdný řádek za značkou ?> je obsah a ten bude chtít vypsat a pak nastane popisovaná chyba.

      Dobré také je používat na programování nějaké IDE – třeba NetBeans nebo PHPStorm – ti toto hlídají včetně správné znakové sady, aby se ti to nestávalo. Pokud používáš nějaký textový editor, můžeš na problém často narazit jen díky své nepozornosti – to se ale stává – jsme lidi ;)

  15. #28 Martin 12.6.2015 - 13:40

    díky moc zkusím, používám NetBeans a ted jsem koukal, že on mi ty ukončovací znaky ?> oznacoval jako chybu a ja to nebral v potaz – holt je chytrejsi nez jsem myslel :)

  16. #29 Martin 30.6.2015 - 18:30

    Ahoj Tomáši, mám dotaz ohledně souboru loop-single.php, je možné k údajům které zobrazuje přidat i obrázek? Je na to nějaká vestavěná funkce? Já ho tam sice vložím pomocí img, ale potřeboval bych, aby to mohl udělat uživatel jednoduše v administraci, třeba že by se zobrazila miniatura obr. který je obsažen v příspěvku.

    • #30 Tomáš Kocifaj 1.7.2015 - 07:51

      Ahoj Martine,

      obrázek se řeší pomocí „Náhledového obrázku“ – v rámci WordPressu se tomu říká post thumbnail. Hodně se o tom dočteš na codexu – https://codex.wordpress.org/Post_Thumbnails není to nic složitého. Stačí použít pár základních funkcí pro jeho vyčtení a je to.

  17. #31 Vlado 30.10.2015 - 09:39

    Ahoj, ak by mi vedel niekto poradit s WP iba zacinam
    na stranke potrebujem mat dva menu – hlavne v header, kde polozky budu ketegorie
    a potom vedlajsie v bocnom paneli, kde polozky by mali byt podkategorie jednotlivych kategorii z hlavneho menu
    cize do vedlajsieho menu by sa mali vybrat polozky podla toho aku kategoriu mam vybranu v hornom menu
    dik

  18. #32 Vlado 30.10.2015 - 09:42

    este by som doplnil
    na zaklade toho by sa potom vykreslovali prispevky na stranke: ak tuknem na hlavnu kategoriu v hornom menu, clanky, ktore boli zadane v tejto kategorii
    ak tuknam na niektoru podkategoriu v bocnom menu, tak clanky iba z tejto podkategorie

    • #33 Tomáš Kocifaj 30.10.2015 - 09:46

      Ahoj,

      tohle už je trochu složitější a je potřeba už znát trochu programování a WordPress. V principu musíš dělat dvě věci:

      1) Když někdo stojí na kategorií, zjistit, zda má své „děti“. Na to se dá použit funkce WordPressu get_categories() kde je možné předat parametr na rodiče (to je ten aktuální). Pokud stojíš na podkategori, zjistit si rodiče dané kategorie, následně vzít jeho potomky (děti) a ty znovu vykreslit v menu.

      2) Když někdo stojí na detailu článku, měl bys zjistit jeho kategori, zjistit jeho zda má rodiče, pokud ano, zjistit jeho děti a opakovat proces z bodu 1.

      Myslím, že tato operace není úplně pro začátečníky :) Ale když na to půjde dle mého tipu, měl bys k tomu dojít.

      • #34 Vlado 30.10.2015 - 10:20

        vdaka za odpoved
        s wp som doteraz nerobil a php da sa povedat, ze ovladam na stredne pokrocilej urovni, zial moja najvacsia slabina je, ze velmi neovladam anglictinu

        pre vykreslenie menu sluzi funkcia wp_nav_menu, v ktorom parametri mozem urcit, ktore polozky ma vykreslit (predam jej zrejme pole zistenych podkategorii)
        aku funkciu mozem pouzit pre zistenie clankov v konkretnej kategorii (podkategorii)

        • #35 Tomáš Kocifaj 4.11.2015 - 12:30

          Dle mého názoru wp_nav_menu není úplně případ použití, který jsi popisoval. wp_nav_menu vykresluje položky v menu, které se definují v administraci pomocí nástroje WP Menu. Není ale možné dynamicky měnit obsah vykresleného menu pomocí PHP kódu.

          Funkci wp_nav_menu nelze předat kolekci „záznam“, které má vykreslovat. Řídí se tím, co jí dodá WordPress z pozice systému (administrace a nastavení uživatele).

          Takové menu, které požaduješ, musí být napsané ručně na základě toho, co jsem psal výše. Na výčet článků (příspěvků) na základě různých parametru se používáš objekt WP_Query() nebo případně get_posts();

Komentáře jsou uzavřeny.