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

Od napsání posledního dílu návodu, jak si vytvořit vlastní WordPress šablonu, je to již nějaká doba, je na čase přispět novým dílem. V této části si doplníme soubory šablony o single.php, page.php. Dále si vytvoříme soubor content.php a připravíme se tak na podporu post formátů, které budou součástí některého z dalších dílů. Zároveň doplníme šablonu o podporu náhledových obrázků.

Soubor single.php

Soubor single.php zobrazuje detail článku. Pokud tedy v archívu, nebo výpisu kategorie kliknete na „Celý článek“, WordPress zavolá single.php.

<?php get_header(); ?>
<div class="row-fluid">
  <div class="span8">
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <!--BEGIN .hentry -->
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <h1 class="entry-title"><?php the_title(); ?></h1>
<!--BEGIN .entry-content -->
<div class="entry-content">
<?php the_content(__('Read more...', 'theme')); ?>
      </div>
      <!--END .hentry-->  
</div>
<?php endwhile; else: ?>
<div id="post-0" <?php post_class() ?>>
<h1 class="entry-title">
<?php _e('Error 404 - Not Found', 'theme') ?>
                        </h1>
<!--BEGIN .entry-content-->
<div class="entry-content">
<p><?php _e("Sorry, but you are looking for 
something that isn't here.", "theme") ?></p>
</div>
</div>
<?php endif; ?>
</div>
  <div class="span4">
    <?php get_sidebar(); ?>
  </div>
</div>
<?php get_footer(); ?>

Jak můžete vidět, v souboru je nejprve loop a pokud není žádný odpovídající obsah, pomocí else je zobrazeno upozornění o nenalezení obsahu.

Soubor page.php

Soubor page.php je v podstatě statická stránka. Pokud vytvoříte například stránku Kontakt, při zobrazení WordPress zavolá soubor page.php.

<?php get_header(); ?>
<div class="row-fluid">
  <div class="span8">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <!--BEGIN .hentry -->
  <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h1 class="page-title"><?phpthe_title(); ?></h1>
<div class="entry-content">
          <?php the_content(); ?>
</div>
</div>
<?php endwhile; else: ?>
<div id="post-0" <?php post_class() ?>>
<h1 class="entry-title"><?php _e('Error 404 - 
        Not Found', 'theme') ?></h1>
<div class="entry-content">
<p><?php _e("Sorry, but you are looking for 
        something that isn't here.", "theme") ?></p>
</div>
 </div>
   <?php endif; ?>
</div>
  <div class="span4">
    <?php get_sidebar(); ?>
  </div>
</div>
<?php get_footer(); ?>
Čtěte  Jak vytvořit vlastní šablonu pro WordPress – 3 díl

Můžete vidět, že soubory jsou si podobné, ale oba plní jinou funkci.

Content.php

Zde bude potřeba trochu povídání.

Soubor content nám umožní zjednodušit kód v celé šabloně a zároveň si připravíme šablonu na podporu post formátů. Do content.php totiž přesuneme loop. Tedy tu část kódu, která začíná if(have_post…. Díky tomu budeme mít loop pro single, archive, category, tag, author a search na jednom místě. Pokud se pak rozhodnete, že budete chtít u příspěvku zobrazovat datum vytvoření, upravíte pouze content.php a nemusíte upravovat další soubory. Vyjímkou je page.php.

Soubor content.php budeme z ostatních souborů volat pomocí:

get_template_part( 'content', get_post_format() );

Funkce get_template_part načte definovaný soubor a funkce get_post_format určuje jeho název v závislosti na použitém post format. Jestliže tedy nemáte podporu post formátů, nemusíte si s tím dělat starosti, načte se vždy content.php. Pokud šablona podporuje například video a existuje soubor content-video.php, načte se tento soubor. V případě, že neexistuje, opět se zobrazí content.php.

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php 
  if ( is_search()|| is_home() || is_archive()
   || is_tag() || is_category() ) :
  ?>
 
  <h2 class="title">
    <a href="<?php the_permalink() ?>" 
      title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
  </h2>
 
      <div class="post-content">
     <?php echo the_excerpt();?>
   </div>
 
  <?php else: ?>
 
  <h1 class="entry-title"><?php the_title(); ?></h1>
  <div class="post-content">
<?php the_content(__('Read more...', 'theme')); ?>
  </div>
 
  <?php endif: ?>
</div>
Čtěte  Jak vytvořit vlastní šablonu pro Wordpress - 1 díl
<h2 class="title"> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <?php the_title(); ?> </a> </h2> <div class="post-content"> <?php echo the_excerpt();?> </div> <?php else: ?> <h1 class="entry-title"><?php the_title(); ?></h1> <div class="post-content"> <?php the_content(__('Read more...', 'theme')); ?> </div> <?php endif: ?> </div>

Jak vidíte, soubor je rozdělen podmínkou na dvě části. První je pro všechny archive, category, author, tag, search soubory a obsahuje excerpt, tedy výpis části článku. Druhý je pro single a obsahuje výpis celého článku – content.

Nyní musíte projít author.php, archive.php, category.php, search.php, tag.php a single.php a část mezi while a endhile nahradit

<?php get_template_part( 'content', get_post_format() ); ?>

Výsledek tedy bude:

<?php if (have_posts()) : 
     while (have_posts()) : the_post();  ?>
 
   <?php get_template_part( 'content', get_post_format() ); ?>
 
    <?php endwhile;  ?>

Tento postup vám v budoucnu ušetří spoustu práce. Možná se nyní ptáte, proč jsem to takto nepsal od začátku, je to protože jsem chtěl, aby jste viděli, jak je v souborech umístěn loop a co obsahuje.

Náhledové obrázky

Náhledové obrázky jsem popsal v článku Náhledové obrázky ve WordPressu a proto se budu zabývat jen jejich vložením do šablony.

Pro podporu náhledových obrázků musíme do functions.php vložit tento kód:

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 56, 56, true ); // Normal post thumbnails
add_image_size( 'sidebar', 50, 50, true ); // Sidebar thumbnail
        add_image_size( 'blog', 619, 300, true ); // Blog thumbnail
 
}
Čtěte  Jak vytvořit vlastní šablonu pro WordPress – 2 díl
}

Jen pro vysvětlení, rovnou vytvoříme malé náhledy pro využití v sidebaru ve velikosti 50×50 pixelů a náhledové obrázky, které použijeme ve výpisu článků budou přes celou šířku obsahu, proto 619px.

Do souboru content.php vložíme tento kód:

<?php if ( has_post_thumbnail() ) : ?>
       <div class="entry-thumbnail">
<?php the_post_thumbnail('blog'); ?>
       </div>
<?php endif; ?>

Výsledek bude vypadat takto:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <?php 
  if ( is_search()|| is_home() || is_archive()
   || is_tag() || is_category() ) :
  ?>
 
  <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
 
  <h2 class="title">
    <a href="<?php the_permalink() ?>" 
      title="<?php the_title(); ?>">
        <?php the_title(); ?>
      </a>
  </h2>
 
      <div class="post-content">
     <?php echo the_excerpt();?>
   </div>
 
  <?php else: ?>
 
  <h1 class="entry-title"><?php the_title(); ?></h1>
  <div class="post-content">
<?php the_content(__('Read more...', 'theme')); ?>
  </div>
 
  <?php endif: ?>
</div>

A to je vše.

Díky tomu, že jsme vytvořili content.php a do něj přesunuli loop, nemusíte již nikam jinam vkládat kód pro zobrazení thumbnails. V tuto chvíli máme šablonu, která umí zobrazit výpisy článků, detail článku, stránku a navíc podporuje náhledové obrázky.

Doufám, že se mi podaří další díl napsat dříve, než za tři měsíce. V něm se chci zaměřit na vytvoření custom homepage, vytvoření template pro stránku se sidebarem a se sidebarem na levé straně.

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.

Related posts

13 Comments

  1. EjsI

    Zdravím,
    návod super, kdy budeme pokračovat? :-D Jsem tedy spíše grafik, takže se ptám – jak do toho proboha nalámu design? :-D

    Díky za návod!

    EjsI

    Reply
  2. Ija

    Simply the best …. po dvouhodinovém luštění codexu WP je tohle nááááádhera, moc díky, hodně mi to pomohlo, nádherně napsáno i pro nás, neprogramátory a grafiky, co se jen umíme vrtat v CSS a HTML a zakoušíme nové cesty v bootstrapu… dobrá práce a děkuji moc za sdílení Tvého vědění ve prospěch ostatních…

    Reply
  3. Pejpa

    Super, jednoduché, stručné, naučné. Radost číst a učit se něco nového. Kdy bude pokračování? K té grafice to není špatná otázka :-), snažil jsem se dostat do šablony bootstrap 3, ale nějak mám malinko problémy. Šablona po 4.díl je holá jestli se nepletu.

    Reply
  4. Aleš Pázner

    Kéž by někdo ten seriál dokončil… český intenet je plný úvodů do tvorby šablony, ale každý se na to po pár dílech vykašle :-/

    Reply
  5. Tomas

    Zdravím, jedu dle návodu a zasekl jsem se na jedné věci, kterou nemohu dát dokupy.
    Vše jde jak má do chvíle, kdy začnu obsah stránky načítat z content.php obsah se nenačte vůbec, dokonce ani sidebar se neobjeví. Pokud vrátím původní načítání obsahu přímo v index.php obsah i se sidebarem zobrazí. Níže dávám obsah index.php a content.php jestli někdo poradíte. Děkuji
    index.php


    a content.php


    <div id="post-">

    <a href="" title="">

    Reply
    1. Tomas

      Nevšiml jsem si že komentáře neberou citovaný php kod, mohu se případně obrátit jinam?

      Reply
  6. Tomas

    Našel jsem to, může za to mé bezhlavé kopírování. V náhledu obsahu souboru index.php v tomto článku máte v uzavření cyklu dvojtečku místo středníku. Díky

    Reply
  7. Roman

    Čau, přínosný web)) Mám menší dotázek. Mám více souborů categery-neco, kde je výpis prispevku podle rubrik. Potřeboval bych rozdelit i single page podle rubrik, ale nevím jak je mám přiřadit k té dané rubrice, kategorii. Kdyz vytvorim single-nazev kategorie, tak to nefunguje.

    Reply

Leave a Reply

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