Home

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"><?php	the_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(); ?>

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>

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
 
}

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

Tags:

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

15 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

    Odpověď
  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…

    Odpověď
  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.

    Odpověď
  8. 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="">

    Odpověď
    1. Tomas

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

      Odpověď
  9. 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

    Odpověď
  10. 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.

    Odpověď

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

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