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

Po měsíční pauze je zde další díl seriálu, v kterém se naučíte vytvořit vlastní šablonu pro WordPress. V minulém díle jme si vytvořili základní kostru naší theme a dnes si ji doplníme o další soubory, pro výpis kategorie, archívu, vyhledávání, stránky 400 a vyhledávacího formuláře. Také si vytvoříme vyhledávací formulář. Takže pojďme na to.

Nejprve shrnutí toho, co jsme si již vytvořili. Máme složku šablony, v které jsou následující soubory:

  • footer.php
  • functions.php
  • header.php
  • index.php
  • style.css
  • sidebar.php

Dnes si do šablony doplníme další soubory. Protože ve functions.php načítáme pomocí enqueue soubory bootstrapu, tak vytvoříme složku bootstrap, kam požadované soubory vložíme. Když už jsme v tom připravování, vytvoříme si i složky js, pro javascriptové soubory a images, pro obrázky. V šabloně máme tedy zatím tři složky:

  • bootstrap
  • images
  • js

Screenshot.png

Ještě než se pustíme do vytváření nových souborů, připravíme si screenshot.png, což je obrázek, který reprezentuje šablonu v administraci. Doporučený rozměr je 600 x 450 px, dříve byl standart poloviční, ale s nástupem hd přístrojů doporučuje WordPress tuto velikost. Já jsem vytvořil jednu nádheru :-) , která nám bude muset stačit

Nové soubory

A už se můžeme pustit do nových souborů, vytvoříme si následující php soubory:

  • 404.php
  • author.php
  • archive.php
  • category.php
  • search.php
  • searchform.php
  • tag.php

Stránka 404

První z nich je stránka 404, která se zobrazí, pokud WordPress nenalezne obsah který hledáte. Můžete namítnout, že na to stačí podmínka v šabloně, kterou tam stejně máme. To je sice pravda, ale stránka 404 vám dává možnost vložit například vyhledávací formulář, nebo nasměrovat čtenáře žádoucím směrem, tedy mu nabídnout jiný obsah.

Vytvoříme tedy soubor 404.php a do něj vložíme následující kód:

<?php
header("HTTP/1.1 404 Not Found");
header("Status: 404 Not Found");
get_header(); 
?>
<div class="span12" >
   <div id="post-0" <?php post_class() ?>>
   <h1 class="title-404"><?php _e('Error 404 - Not Found', 'theme') ?></h1>
   <div class="content-404">
<?php _e('The page you are looking for does not exist, it may have been moved, 
or removed altogether. You might want to try the search function. 
Alternatively, return to the <a href="/">front page</a>.','theme') ?>
  </div>
  </div>
</div>
<?php get_footer(); ?>

Archiv.php, category.php a další

Těmto stránkám já osobně říkám „výpisové“, protože se starají s výpis obsahu, který má nějakou společnou vlastnost, například se jedná o články od jednoho autora, z jedné kategorie, či dle vyhledávacího dotazu. Ve valné většině šablon se setkáte s tím, že existuje search.php pro výpis hledání a pak archiv.php, který má na začátku ukrutnou konstrukci, která rozlišuje, zda se jedná o výpis dle měsíce, autora, atd…
Může se zdát, že jsou tedy další soubory zbytečné, ale díky nim můžete šablonu daleko více upravovat pro vaše potřeby. Například v author.php můžete mít na začátku výpisu informace o konkrétním autorovi, dle jeho profilu. A to je určitě zajímavé. Protože jsou však všechny tyto soubory velmi podobné, nebudu je blíže rozebírat, rozdíly uvidíte na první pohled.

Čtěte  Jak vytvořit vlastní šablonu pro Wordpress - 5 díl

Archive.php

<?php get_header(); ?>
<div class="row-fluid">
  <div class="span8">
  <?php if (have_posts()) : ?>   
<h1 class="archive-title"><?php
   if ( is_day() ) :
printf( __( 'Daily Archives: %s', 'theme' ), '<span>' . get_the_date() . '</span>' );
   elseif ( is_month() ) :
printf( __( 'Monthly Archives: %s', 'theme' ), '<span>' . 
        get_the_date( _x( 'F Y', 'monthly archives date format', 'theme' ) ) . '</span>' );
   elseif ( is_year() ) :
printf( __( 'Yearly Archives: %s', 'theme' ), '<span>' . 
        get_the_date( _x( 'Y', 'yearly archives date format', 'theme' ) ) . '</span>' );
   else :
_e( 'Archives', 'theme' );
   endif;
?>
</h1>
    <?php while (have_posts()) : the_post(); ?>
     <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>             
  <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>
  </div>
<? endwhile;  ?>                      
    <!--BEGIN .navigation -->
<div class="navigation">
<?php posts_nav_link('',__('Previous page','theme'),__('Next page','theme')); ?>
        </div> 
  <?php else : ?>
    <!--BEGIN #post-0-->
        <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>
    <!--END .entry-content-->
    </div>
<!--END #post-0-->
  </div>
  <?php endif;  ?>
  </div>
  <div class="span4">
    <?php get_sidebar(); ?>
  </div>
</div>
<?php get_footer(); ?>
Čtěte  Jak vytvořit vlastní šablonu pro Wordpress - 4 díl
<div class="post-content"> <?php echo the_excerpt();?> </div> </div> <? endwhile; ?> <!--BEGIN .navigation --> <div class="navigation"> <?php posts_nav_link('',__('Previous page','theme'),__('Next page','theme')); ?> </div> <?php else : ?> <!--BEGIN #post-0--> <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> <!--END .entry-content--> </div> <!--END #post-0--> </div> <?php endif; ?> </div> <div class="span4"> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?>

Protože jsou zbylé soubory podobné, budu uvádět pouze tu část, ve které se liší.

Author.php

Výpis článků od jednoho autora.

<?php if (have_posts()) : 
the_post();
?>   
<h1 class="archive-title"><?php printf( __( 'Author Archives: %s', 'theme' ), 
'&nbsp;<a href="' . esc_url( get_author_posts_url( get_the_author_meta( "ID" ) ) ) . 
'" title="' . esc_attr( get_the_author() ) . '" rel="me">' . 
get_the_author() . '</a>' ); ?></h1>
 
<?php rewind_posts();
     while (have_posts()) : the_post();  ?>

Category.php

Výpis článků z kategorie

<?php if (have_posts()) :  
  while (have_posts()) : the_post();  ?>
      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>             
   <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>
    </div>
<?php endwhile;  ?>

Search.php

Výpis vyhledávání

<h1 id="search-full"><img src="<?php echo get_template_directory_uri(); ?>
/images/zoom.png" alt="Zoom" />&nbsp;<?php printf( __( 'Search Results for: "%s"', 'simple' ), 
'<span>' . get_search_query() . '</span>' ); ?></h1>
 
 <?php if (have_posts()) :  
    while (have_posts()) : the_post();  ?>

Tag.php

Výpis článků se stejným tagem.

  <h1 class="archive-title"><?php printf( __( 'Tag Archives: %s', 'theme' ), '<span>' .
 single_tag_title( '', false ) . '</span>' ); ?></h1>
 
  <?php if ( tag_description() ) : // Show an optional tag description ?>
    <div class="archive-meta"><?php echo tag_description(); ?></div>
  <?php endif; ?>
 
  <?php if (have_posts()) : 
     while (have_posts()) : the_post();  ?>
Čtěte  Jak vytvořit vlastní šablonu pro WordPress – 2 díl
<?php if ( tag_description() ) : // Show an optional tag description ?> <div class="archive-meta"><?php echo tag_description(); ?></div> <?php endif; ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Jak je vidět soubory se v podstatě liší pouze tím, co se vypíše před samotným loopem. Na konci výpisu článků je vždy navigace, která umožňuje pohyb mezi stránkami.

Jako poslední soubor dnes vytvoříme searchform.php. Je to v podstatě vyhledávací formulář, který se zobrazuje například v sidebaru. Proč jej však budeme znovu psát, když jej WordPress vykreslí automaticky? Dost často jsem se setkával s tím, že klienti dnes vyžadují u formulářů onfocus a onblur efekty, díky nimž po kliknutí do formuláře zmizí předvyplněný text. No a my si tento efekt vložíme do vyhledávacího formuláře. Já jej používám již automaticky a nemusím na něm téměř nikdy nic měnit.

Searchform.php

<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
    <fieldset>
        <input type="text" name="s" id="s" value="<?php _e('search', 'theme') ?>" 
        onfocus="if(this.value=='<?php _e('search', 'theme') ?>')this.value='';"  
        onblur="if(this.value=='')this.value='<?php _e('search', 'theme') ?>';" />
        <input type="submit" name="submit" value="Search" id="s-submit">
    </fieldset>
</form>

Závěr

Dnes jsme si tedy rozšířili šablonu o další soubory a v šabloně tedy máme následující části:

  • 404.php
  • archive.php
  • author.php
  • category.php
  • footer.php
  • functions.php
  • header.php
  • index.php
  • screenshot.png
  • search.php
  • searchform.php
  • sidebar.php
  • style.css
  • tag.php

a složky

  • bootstrap
  • images
  • js

Všechny doposud vytvořené soubory si můžete stáhnout v zipu blank

Nakonec výborná zpráva. Podařilo se mi přesvědčit Jardu Šimka, aby pro tento seriál připravil grafický návrh, takže jakmile bude připraven, zapracuji ho do návodu.

Co bude příště?

V příštím díle vytvoříme single.php a page.php pro výpis stránek a článků, rozšíříme šablonu o podporu náhledových obrázků a připravíme si statickou hlavní stranu.
P.S.
Omluvte prosím úpravu kódu a pokud někdo víte o dobrém pluginu pro výpis kódu do článku, budu rád za radu.

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

5 Comments

  1. Adam

    Až budu mít chvilku, vyzkouším to. Třeba to opravdu funguje :-) Teď vážně – díky za perfektní návod!

    Reply
  2. holinaj

    Fakt super, tohle určitě vyzkouším. Šablon je na webu miliarda a přesto mám problém si vybrat. Takhle snad budu spokojen :-)

    Reply
  3. Daniel

    Pěkný návod. Chci se pustit do vytváření šablony, protože mám v hlavě představu o jednom projektu. Díky Vám pomalu začínám chápat strukturu wordpressových šablon. Doufám, že ta grafika bude snadno přepsatelná…Abych si to mohl předělat na to co chci. Zatím mám trochu zmatek v tom množství wordpressových funkcí. Rozhodně pokračujte. :)

    Reply

Leave a Reply

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