WordPress – tvorba šablony od A do Z – 2.díl – První dynamické prvky


V minulém díle jsme si ukázali, jak málo stačí k tomu, abychom spustili WordPress šablonu. Dnes začneme naší šablonu doplňovat o první dynamické prvky, výpisy, WordPress Loop a další části. Z minulého dílu má naše šablona Hlavičku, titulní stránku v podobě index.php a patičku. Dnes si ukážeme, jak na titulní stránku vypisovat nejnovější příspěvky, přidáme si detail samotného příspěvku a detail statické stránky. Na začátek trocha teorie…

Rozdělení prvků ve WordPressu

V základu má WordPress několik typů obsahů (post_type) v kterých se tvoří různý obsah. Kouzlo těchto „post_type“ je v tom, že jich můžeme prostřednictvím Wp funkcí založit kolik chceme a můžeme na ně používat všechny náležitosti, které nám WP nabízí (stránkování, editory, nahrávání obrázků, vlastní formuláře, atd.). Pro začátek se budeme zabývat pouze základní nabídkou a postupem času se dostaneme na tak zvané – „custom post_type“.

Základní sada post_type ve WordPressu

  • „post“ – příspěvek
  • „page“ – statická stránka
  • „link“ – uživatelsky definovaný odkaz
  • „attachments“ – obrázky a soubory – jinak řečeno přílohy

Komentáře už do sekce post_type nepatří, byť se tváří velmi podobně. Pro komentáře je připraven samostatný typ a databázový model.

Na všechny výše uvedené typy obsahu se dá použít takzvaná „WordPress Loop“ neboli cyklus, který je schopen na základě defaultních (nebo uživatelem definovaných) parametrů požadovaný obsah vyčíst a vepsat ho do webové stránky. Detailní popis a možnosti WP Loopy můžete najít na WP Codexu


<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		# code	
	<?php endwhile; ?>
<?php endif; ?>

Tento cyklus a podmínka se v šabloně bude objevovat velmi často. Jedná se o základní prvek, jak z WP databáze dostat potřebných obsah bez složitostí.

Výpis příspěvku na titulní stránce

Z minulého dílu seriálu jsme měli vytvořený index.php a to v této podobě:


<?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>
</div> 
<?php get_footer(); ?>

Proto, aby nám začal systém na titulní stránku vypisovat naposledy přidané příspěvky (post), upravíme index.php takto:


<?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(); ?>
		<h3><?php the_title();?></h3>
		<?php the_excerpt(); ?>
	   <?php endwhile; ?>
        <?php endif; ?>

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

Protože systém při volání Index.php defaultně vrací 10 naposledy přidaných příspěvků (pokud nastavení neříká jinak), nemusíme už Loopu nastavovat. Výsledek této změny bude ten, že se pod nadpis H2 vypíše H3 s titulkem (názvem) příspěvku – to zajistí wp funkce the_title() a funkce the_excerpt() vrátí krátký popisek z úvodu článku včetně <p> tagu. Toto se provede pro každý příspěvek do maximální počtu (lze nastavit ve WP administraci).

Všimněte si také, že funkce nemají žádné parametry. Dalo by se říct, že WP má dva typy funkcí a to ty, které se musí použít v těle WP loopy a ty mimo. Pokud se jedná o první typ funkce, stačí je volat v loopě a WordPress se díky globální proměnné $post (která je v loopě dostupná) postará o to, že se budou vracet správné hodnoty. Ti, kteří WordPressu trochu rozumí si teď budou ťukat na hlavu, že je to hloupost, vždyť proměnná $post je dostupná všude. Ano, je tomu tak, ale tím Vám teď nechci motat hlavu. I k tomu se postupem času dostaneme a vysvětlení, že je tam proměnná dostupná Vám bude ještě nějaký díl stačit.

Zobrazení celého příspěvku na nové stránce (šabloně)

Ve chvíli, kdy si necháme zobrazit celý příspěvek (uživatel klikne na link, směřující na detail příspěvku), WordPress bude ve složce se šablonou hledat soubor single.php. Tento soubor se bude volat vždy, když budete chtít v detailu zobrazit post_type typu post. Ale moment, kde máme ten link na příspěvek? Pojďme si upravit ještě index.php a rozšíříme si ho o link do příspěvku.


<?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(); ?>
		<h3> <a href="<?php the_permalink(); ?>"><?php the_title();?></a></h3>
		<?php the_excerpt(); ?>
	   <?php endwhile; ?>
        <?php endif; ?>

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

Funkce the_permalink() – nutné použít uvnitř loopy – nám vygeneruje link, který uživatele nasměruje do single.php a vrátí do něj potřebné data právě s jedním příspěvkem.

Jak bude tedy vypadat single.php?

V našem případě základní šablony bude vypadat velmi podobně jako index.php, ale s tím rozdílem, že systém vrátí do single.php pouze jeden post a ne celou sadu.


<?php get_header(); ?>
<div id="content">
        <?php if (have_posts()) : ?>
	   <?php while (have_posts()) : the_post(); ?>
		<h1> <?php the_title();?></h1>
		<?php the_content(); ?>
	   <?php endwhile; ?>
        <?php endif; ?>
</div> 
<?php get_footer(); ?>

V tomto případě se do WP loopy vrátí pouze jeden záznam a to právě ten, který uživatel požadoval. A co se stane v tomto případě? Do single.php se načte hlavička, do nadpisu H1 se vypíše název příspěvku, funkce the_content() – opět nutné v loopě – nám vrátí celý obsah příspěvku včetně html tagů.

A je to, v tuto chvíli máme na úvodní stránce výpis posledně přidaných příspěvků s linkem na detail příspěvku. Stačí už jen trocha CSS stylů, nějakého html a máme malou funkční šablonu.

Statické stránky a jejich šablona

Pro zobrazení detailu stránky, tedy post_type typu page nám bude sloužit soubor page.php. Úplně stejně jako u příspěvku se bude volat v případě, že si někdo klikne na stránku. Jak vytvořit základní menu si ukážeme v příštím díle. Jak tedy bude vypadat obsah souboru page.php?


<?php get_header(); ?>
<div id="content">
        <?php if (have_posts()) : ?>
	   <?php while (have_posts()) : the_post(); ?>
		<h1> <?php the_title();?></h1>
		<?php the_content(); ?>
	   <?php endwhile; ?>
        <?php endif; ?>
</div> 
<?php get_footer(); ?>

Říkáte si, že v tom není od single.php žádný rozdíl? Ano, je to tak… Opět se vypíše název stránky a její obsah. To nám bude pro tuto chvíli úplně stačit.

Závěrem

K dnešnímu dni máme v naší šabloně následující soubory:

  • Header.php – Hlavička webových stránek
  • Index.php – Úvodní stránka s výpisem příspěvků
  • Footer.php – Patička webových stránek
  • Single.php – Šablona stránky s detailem příspěvku
  • Page.php – Šablona stránky s detailem statické stránky – page
  • Style.css – CSS styly pro šablonu

Šablona se nám začíná rozšiřovat o další prvky a funkcionality. V příštím díle si ukážeme jak vytvořit základní menu pro statické stránky a vytvoříme si rozdílné šablony pro post a page. Také si uděláme nějaký lepší výpis a ukážeme si, jak používat funkci get_template_part(), která je velmi užitečná pro přehled šablony.

Tomáš Kocifaj, KTStudio.cz

, , ,

  1. #1 z28 23.11.2013 - 20:52

    Omlouvám se za hloupý dotaz, jsem úplný začátečník.

    Postupoval jsem přesně podle návodu, v administraci WP jsem si vytvořil příspěvky a jednu novou stránku, ale v kapitole „Výpis příspěvku na titulní stránce“ se mi zobrazuje ve výpisu jen nově vytvořená stránka, ale vytvořené příspěvky nikoliv.

  2. #2 Tomáš Kocifaj 24.11.2013 - 18:24

    Ahoj, o nic nejde, proto to píšu, aby ty případné dotazy vznikaly a bylo tu třeba o to více informací. Pokud ti WP vrací na úvodní stránku naposledy přidanou stránku, podíval bych se do nastavení WP. Je tam možnost volby, kde se dá na titulní stránku poslat „stránka“ jako taková – ale volá se template Page ne index.php – pokud ani to nepomůže, zkusil bych loopě poslat data pouze pro příspěvky

  3. #3 z28 26.11.2013 - 10:44

    Ahoj, děkuju za odpověď. Už jsem trochu pronikl do loopy a teď mi to dělá přesně to, co potřebuju.

  4. #4 dakarin 18.1.2014 - 22:31

    super návod – jednoduchý, přehledný a především perfektní metodika :-) děkuji

  5. #5 Tomáš Kocifaj 19.1.2014 - 10:24

    Zdravím, jsem rád, že se seriál líbí – pro rychlejší „nalejvárnu“ mohu nabídnout – http://www.ktstudio.cz/skoleni-tvorba-wordpress-sablon-praha/

Komentáře jsou uzavřeny.