Jak vytvořit vlastní šablonu pro WordPress – 6 díl

Vítám vás již u šestého dílu seriálu Jak vytvořit vlastní šablonu pro WordPress. V minulém díle jsme si vytvořili dvě šablony stránek, upravili jsme css třídy pro novější verzi Bootstrapu a přidali trochu stylů.

Dnes se budeme věnovat zobrazení metadat u výpisu článků a zobrazení komentářů.

Co jsou post meta?

Nejsem si jist, zda se jedná o oficiální název, ale v šabloně jsou většinou tyto informace takto nazvány a jedná se o data, která jsou nějakým způsobem spojena s článkem.

Například:

  • Autor
  • Počet komentářů
  • Výpis kategorií
  • Tagy
  • Počet shlédnutí
  • A další…

V tuto chvíli se náš výpis článků zobrazuje takto:

  1. Náhledový obrázek
  2. Titulek
  3. Zkrácený výpis článku

A právě mezi titulek a zkrácený výpis vložíme tato metadata.

Otevřeme si soubor content.php a do něj vložíme nový div přímo za h2:

<!-- Post meta -->
<div class="entry-meta">
</div>

Autor článku

Pro zobrazení jména autora článku použijeme funkci the_author_posts_link(), jenž nám zobrazí jméno autora, společně s odkazem na výpis jeho další články. Div upravíme:

<!-- Post meta -->
    <div class="entry-meta">
      <span class="entry-author">
          <?php the_author_posts_link(); ?>
      </span>
    </div>

A protože jsme použili Bootstrap, který má celkem dost komponent, můžeme jednoduše před autora vložit ikonku:

<!-- Post meta -->
    <div class="entry-meta">
      <span class="entry-author">
        <span class="glyphicon glyphicon-user"></span>
          <?php the_author_posts_link(); ?>
      </span>
    </div>

V tuto chvíli vypadá výpis takto:

Blank

Datum publikování

Podobně, jako autora, přidáme datum publikace, pouze použijeme funkci the_time(), pomocí níž definujeme tvar zobrazovaného data. Já jsem použil j – pro den, n – pro měsíc a Y – pro rok.
Za span autora přidáme další span, pro datum:

<span class="entry-date">
  <span class="glyphicon glyphicon-calendar"></span>
    <?php the_time( 'j.n. Y' ); ?>
</span>

Počet komentářů

Pro zobrazení počtu komentářů, společně s odkazem na ně, použijeme funkci comments_popup_link(). Ta umožňuje definovat text pro nula komentářů, jeden komentář a více komentářů. To sice není ideální, ale existuje plugin, který toto dokáže vyřešit správným způsoben.
Za span data publikace, přidáme počet komentářů:

<span class="entry-comments">
  <?php comments_popup_link(__('No Comments', 'theme'), 
  __('1 Comment', 'theme'), 
  __('% Comments', 'theme')); ?>
</span>

Kategorie

Výpis všech kategorií, ve kterých je článek zařazen, dosáhneme pomocí funkce get_the_category, výsledek pak projdeme pomocí cyklu a seznam kategorií vypíšeme.

<span class="entry-category">
<?php 
$categories = get_the_category();
$separator = ', ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= '<a href="'.get_category_link($category->term_id ).'" 
title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category->name ) ) . '">'.
$category->cat_name.'</a>'.$separator;
}
echo trim($output, $separator);
}
?>
</span>

Výsledek

Kód, který jsme vytvořili, nám zobrazí takto vypsaná meta data:

Blank (2)

Drobné úpravy

Protože je zkrácený výpis ihned pod post meta, přidáme třídě entry-meta spodní margin, aby to nebylo tak sražené.
Co ještě musíme udělat, je odkaz na detail článku. sice můžeme kliknout na nadpis, ale běžný čtenář očekává viditelné tlačítko, či odkaz na detail.

Nejprve tedy přidáme tlačítko a opět využijeme Bootstrap, tentokrát css třídu btn a btn-danger:

<a class="btn btn-danger" href="<?php the_permalink(); ?>">
  <?php _e('Read more','theme'); ?>
</a>

Nakonec upravíme styl:

/* Entry */
.entry-meta{
  margin-bottom:10px;
}
.post-content{
  margin-bottom:34px;
}

Výsledek

Blank (3)

Komentáře

Pokud v tuto chvíli kliknete na vytvořené tlačítko Read more, zobrazí se vám detail článku, ale bez komentářů. Výpis komentářů a formulář pro jeho přidání, můžeme zobrazit dvěma způsoby. Dnes si ukážeme ten snazší.
Otevřeme si soubory single.php a page.php, najdeme následující kód:

<div class="entry-content">
  <?php the_content(); ?>
</div>

a ten upravíme:

<div class="entry-content">
  <?php the_content(); ?>
</div>
<?php comment_form(); ?>

Před úpravou

Neztrácejte drahocenný čas   Blank

Po úpravě

Neztrácejte drahocenný čas   Blank (1)

Bohužel však tato funkce zobrazí jen formulář pro přidávání komentářů. Pro zobrazení schválených komentářů, musíme ještě použít funkci wp_list_comments().
Bohužel však tato funkce nepracuje správně v single.php a proto musíme nahradit comment_form() funkcí comments_template(). Kód v single.php a page.php bude vypadat takto:

<div class="entry-content">
  <?php the_content(); ?>
</div>
  <?php comments_template(); ?>
</div>

Dalším krokem je vytvoření souboru comments.php, do nějž vložíme kód:

<ol class="commentlist">
  <?php wp_list_comments(); ?>
</ol>
<?php comment_form(); ?>

Výsledek

Neztrácejte drahocenný čas   Blank (2)

Tím jsme vytvořili soubor pro definování vzhledu komentářů a jeho úprava bude součástí sedmého dílu.
Doufám, že si na další díl najdu čas co nejdříve a seriál bude brzy pokračovat.

Seriál: Jak vytvořit vlastní šablonu pro WordPress

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

2 Comments

  1. Pingback: Jak vytvořit vlastní šablonu pro WordPress – 3 díl - Musilda.cz

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *