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

Po několika dnech jsme zpět u seriálu, ve kterém vytvoříme vlastní responsivní WordPress šablonu. V minulém díle jsme si vysvětlili jak šablona postupuje při řazení souborů a které soubory potřebujeme. Dnes si připravíme všechny základní soubory, jenž nám umožní vytvořit již funkční základ šablony.

Ve složce themes vytvoříme novou složku, kterou nazveme blank (název je zcela na vás). V této složce vytvoříme další, které nazveme images (složky pro obrázky), js (složka pro javascriptové soubory) a bootstrap (pro twitter bootstrap).

Twitter Bottstrap budeme používat pro responsivní design a je ke stažení zde http://getbootstrap.com/. Potřebné soubory nakopírujeme do složky a v textovém editoru si vytvoříme první soubory. Osobně používám pspad, protože jsem na něj zvyklý.

Vytvoříme si následující prázdné soubory:

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

které uložíme do složky složky šablony. Nyní si začneme vytvářet strukturu.

Header.php

Do tohoto souboru vložíme následující kód:

<!DOCTYPE html>
<?php $options = get_option('basic'); ?>
<!-- BEGIN html -->
<html <?php language_attributes(); ?>>
 
<!-- BEGIN head -->
<head>
 
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; 
        charset=<?php bloginfo('charset'); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Title -->
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
 
  <!-- RSS & Pingbacks -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?> 
        RSS Feed" href="<?php bloginfo( 'rss2_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
 
 
<?php wp_head(); ?>  
 
  <!-- Stylesheets -->
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" 
   type="text/css" media="screen" />
 
  <!-- END head -->
</head>
 
<!-- BEGIN body -->
<body <?php body_class(); ?>>
 
<div class="row-fluid">
  <div class="container">
    <div class="header">
      <h1><a href="<?php echo home_url( '/' ); ?>" 
        title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
         <?php bloginfo( 'name' ); ?></a></h1>
    <div id="site-description"><?php bloginfo( 'description' ); ?></div>  
    </div>
 
    <div class="header-menu">
          <?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary-menu') ); ?>
          <?php } else { ?>
                  <ul class="sf-menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/?page_id=2">Sample Page</a></li>
                    <li><a href="/?p=1">Sample post</a></li>
                  </ul>
          <?php } ?>
    </div>
 
    <div class="row-fluid">
Čtěte  Jak vytvořit vlastní šablonu pro Wordpress - 5 díl
<!-- BEGIN body --> <body <?php body_class(); ?>> <div class="row-fluid"> <div class="container"> <div class="header"> <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <?php bloginfo( 'name' ); ?></a></h1> <div id="site-description"><?php bloginfo( 'description' ); ?></div> </div> <div class="header-menu"> <?php if ( has_nav_menu( 'primary-menu' ) ) { ?> <?php wp_nav_menu( array( 'theme_location' => 'primary-menu') ); ?> <?php } else { ?> <ul class="sf-menu"> <li><a href="/">Home</a></li> <li><a href="/?page_id=2">Sample Page</a></li> <li><a href="/?p=1">Sample post</a></li> </ul> <?php } ?> </div> <div class="row-fluid">

V sekci head jsme vytvořili hlavičku html dokumentu, použili funkci wp_head pro vytvoření hooku a nalinkovali style.css soubor se css styly, které šablona používá.
Následují divy, které budou tvořit tělo šablony. V těchto divech již jsou třídy, které Bootstrap využívá pro responsivitu. Row-fluid je obal, v které se jednotlivé divy posouvají. Container je předefinovaná třída se zarovnáním na obsahu na střed. Touto třídou jsme vlastně vymezili šířku obsahu a jeho umístění doprostřed obrazovky.

Dále pokračujeme vytvořením titulku stránky a description, které se budou zobrazovat v hlavičce stránky.
Poslední je vložení menu pomocí wp_nav_menu, což je funkce, která umožňuje vytvořit místo pro menu, konfigurovatelné z administrace WordPressu. Samotné menu musíme ještě aktivovat ve functions.php, jak si ukážeme níže.
Poslední řádek souboru obsahuje začátek divu, který ukončíme ve footer.php a opět obsahuje třídu Bootstrapu, protože musíme odstranit levý margin u prvního divu v obsahu. Pokud se chcete dozvědět více, přečtěte si fluidGridSystem – jak funguje Bootstrap není součástí tohoto návodu. Důležité je, že to funguje.

Footer.php

Vytvoříme soubor footer.php, který je opak header.php a celou šablonu uzavírá. Do souboru vložíme následující kód:

</div>
 
<div class="footer">
 
  <div class="copyrights">
 Copyright &copy; <?php echo date("Y") ?> |  Všechna práva vyhrazena | 
    <a href="<?php echo home_url(); ?>/"  title="<?php bloginfo('description'); ?>">
    <?php bloginfo('name'); ?></a>
  </div>
 
</div>
<!-- Theme Hook -->
<?php wp_footer(); ?>
 
<!--END body-->
</body>
<!--END html-->
</html>

První div uzavírá ten, kterým jsme otevřeli na konci header.php, bez uzavření by se nám to celé rozsypalo. Pomocí date(), home_url() a bloginfo() vytvoříme patičku, která se nám bude aktualizovat podle toho, kam šablonu nasadíme a nemusíme nic upravovat. Následně zavoláme wp_footer() a ukončíme html dokument. Footer.php máme nyní připravený.

Index.php

V tuto chvíli si připravíme tělo šablony, soubor index.php, který bude připraven pro výpis příspěvků.

<?php get_header(); ?>
 
<div class="span8">
 
<?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; 
     else: 
  ?>
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'theme' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were 
                        found for the requested archive. Perhaps searching 
                        will help find a related post.', 'theme' ); ?></p>
</div><!-- .entry-content -->
</div><!-- #post-0 -->
 
<?php endif; ?>
 
</div>
<div class="span4">
 
<?php get_sidebar(); ?>
 
</div>
 
<?php get_footer(); ?>
Čtěte  Jak vytvořit vlastní šablonu pro WordPress - 6 díl
<div class="span8"> <?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; else: ?> <div id="post-0" class="post error404 not-found"> <h1 class="entry-title"><?php _e( 'Not Found', 'theme' ); ?></h1> <div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'theme' ); ?></p> </div><!-- .entry-content --> </div><!-- #post-0 --> <?php endif; ?> </div> <div class="span4"> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>

Na začátku souboru načteme header pomocí get_header(), vytvoříme divy span8 a span4, čímž rozdělíme obsah na dvě třetiny a třetinu, do třetinové části načteme sidebar pomoci get_sidebar(). Nakonec vložíme footer.php pomocí get_footer().

Samotný obsah vypíšeme pomocí if have_post, což je část označovaná jako loop. WordPress zobrazuje články, nebo stránky, podle toho co se má v danou chvíli zobrazovat, pokud se nic nenalezne, vypíše se not found. Uvnitř loopu použijeme tři funkce, a to the_title() pro název postu, the_permalink() pro odkaz na post a the_excerpt(), který vypíše zkrácenou část postu. Pokud bychom do šablony později nepřidali soubory single.php a page.php, museli bychom použít the_content(), což vypíše celý obsah článku.

Sidebar.php

Nyní vytvoříme sidebar

<?php if ( ! dynamic_sidebar( 'Main Sidebar' ) ) :   ?>
 
<div class="widget widget_search"><!--BEGIN #searchform-->
    <form method="get" id="searchform" action="/">
   <fieldset>
    <input type="text" name="s" id="s" value="search" 
        onfocus="if(this.value=='search')this.value='';" 
        onblur="if(this.value=='')this.value='search';" />
        <input type="submit" name="submit" value="" id="s-submit">
   </fieldset>
<!--END #searchform-->
    </form>
  </div> 
 
<?php else:                                        
 
dynamic_sidebar( 'Main Sidebar' ); 
 
endif; ?>

V tomto souboru nejprve zjistíme, zda je aktivní definovaný sidebar a pokud ne, zobrazíme defaultní kód. Mnoho šablon má takto připraven třeba poslední komentáře, poslední příspěvky a vyhledávací formulář.

Functions.php

Tento soubor se někdy nazývá magickým souborem. Pomocí něj můžete ovlivňovat vše co na obrazovce objeví a my si do něj vložíme tři funkce. První zaregistrujeme místo pro Primary menu, druhou načteme pomocí wp_head hooku externí scripty a styly, třetí vytvoříme Widget areu pro sidebaru.

function register_menu() {
register_nav_menu('primary-menu', __('Primary Menu','theme'));
}
add_action('init', 'register_menu');
 
 
function my_eneque() {
 
    // Register style
    wp_register_style( 'bootstrap', get_template_directory_uri() 
    . '/bootstrap/css/bootstrap.min.css' );
    wp_register_style( 'bootstrap-responsive', get_template_directory_uri() 
    . '/bootstrap/css/bootstrap-responsive.css' );
 
    // Enqueue style
wp_enqueue_style( 'bootstrap' );
wp_enqueue_style( 'bootstrap-responsive' );
 
    // Register script
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.8.0.min.js', null, null);
    wp_register_script( 'bootstrap', get_template_directory_uri() 
    . '/bootstrap/js/bootstrap.min.js', null, null );
 
    // Enqueue script
    wp_enqueue_script( 'jquery' ); 
    wp_enqueue_script( 'bootstrap' );
}
 
add_action('wp_enqueue_scripts', 'my_eneque');
 
 
 
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Main Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
}
Čtěte  Jak vytvořit vlastní šablonu pro Wordpress - 4 díl
function my_eneque() { // Register style wp_register_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' ); wp_register_style( 'bootstrap-responsive', get_template_directory_uri() . '/bootstrap/css/bootstrap-responsive.css' ); // Enqueue style wp_enqueue_style( 'bootstrap' ); wp_enqueue_style( 'bootstrap-responsive' ); // Register script wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.8.0.min.js', null, null); wp_register_script( 'bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', null, null ); // Enqueue script wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'bootstrap' ); } add_action('wp_enqueue_scripts', 'my_eneque'); if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Main Sidebar', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', )); }

Funkce rozebírat nebudu, je to myslím jasné, jen připomenu, že pomocí enqueue načítáme soubory Bootstrapu a jquery, bez toho by nám responsivní šablona nefungovala. Kdo neví jak funguje enqueue doporučuji přečíst tento článek.

Style.css

Poslední soubor, který potřebujeme, je style.css, do kterého budeme zapisovat styly šablony. Na počátek souboru vložíme následující kód:

/*-----------------------------------------------------------------------------------
 
  Theme Name: Blank
  Theme URI: 
  Description: 2 column theme 
  Author: Author
  Author URI: 
  License: GNU General Public License version 3.0
  License URI: http://www.gnu.org/licenses/gpl-3.0.html
  Version: 1
 
 Designed & Handcrafted by 
 All files, unless otherwise stated, are released under the GNU General Public License
 version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)
 
-----------------------------------------------------------------------------------*/

Tento kód identifikuje šablonu a bez něj se vám ji nepodaří nainstalovat. Nejdůležitější je Theme name, podle kterého si pak v administraci šablonu najdete. Zatím soubor necháme kromě tohoto kódu prázdný, vzhledem k tomu, že jsme vložili css soubor Bootstrapu, základní styly šablona převezme.

Úplně nakonec musíme vytvořit png obrázek, může být i jen jedna barva, nazveme jej screenshot a vložíme do složky. Velikost obrázku by měla být 600px x 450px, což je doporučená velikost pro kvalitní zobrazení i na hd přístrojích.

Tím jsme dokončili základní kostru šablony a pokud ji nyní aktivujeme, měla by již fungovat. V příštím díle začneme doplňovat složku o soubory single.php, page.php, archiv.php a další. Přestože jsme to dnes vzali letem světem, bylo to nutné pro vytvoření základu, z kterého budeme dále vycházet.

Pokud jste minuli předchozí díl, doporučuji také přečíst První díl seriálu

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

30 Comments

  1. Začátečník 007

    Zdravím je to hezky napsaný konečne něco čemu rozumím alespoň z poloviny :) Když už jsem na blogu wp experta, rád bych se něco zeptal. Chci si dát někomu upravit šablonu TwentyTwelve (http://wordpress.org/themes/twentytwelve) teda oficiální wordpress šablonu po dizajnové stránce – jenom upravit vzhled, barvy, CSS. Co se pak stane když časom pro TwentyTwelve přijde nějaká aktualizace šablóny a já ji tedy aktualizuji – ty „moje“ změny jednoduše zmizí? A budu si zase muset zaplatit tutéž úpravu? Děkuji moc :) za odpověď.

    Reply
  2. Musilda

    To se řeší pomocí child theme, v podstatě se vytvoří složka šablony, která čerpá všechny zdroje z rodičovské šablony, takže pokud se bude měnit jen styl, tak stačí mít ve složce jen soubor style.css se změnami. Potom se po aktualizaci rodičovské šablony úpravy nesmažou a zároveň budou dostupná vylepšení z aktualizace. Více zde http://codex.wordpress.org/Child_Themes

    Reply
  3. Musilda

    Děkuji za upozornění, odkaz jsem upravil. Bez těch souborů se samozřejmě dá obejít, ale pak nebude šablona responsivní.

    Reply
  4. JV

    Zdravím,
    stránka Jak vytvořit vlastní šablonu pro WordPress – 2 díl je nějaká rozsypaná.

    Reply
  5. Bzzuk

    Ahoj,

    nevím, jestli jsem to špatně okopíroval (zkoušel jsem to 2x), ale celý kód, který je ve functions.php se mi vypisuje na hlavní stránku. Tudíž mi šablona nefunguje.

    Reply
  6. Musilda

    Ahoj
    díval jsem se, je to divné. zkus si prověřit kódování souboru, ale v každém případě musí to být php soubory. Tohle se mi ještě nestalo.

    Reply
  7. Musilda

    Ano, takto by to mělo vypadat, je to jen základ, bez stylů. Ještě se podívej na kódování souboru footer.php, jsou tam divně české znaky.

    Reply
  8. Ondřej Komár

    Dobrý den,

    chtěl bych se zeptat jakým nejefektivnějším způsobem tvořit stránky pomocí wordpressu z nějakého wireframe?
    Je lepší si najít podobnou šablonu a tu posléze upravovat nebo ji vytvářet od začátku, jak popisujete ve svém tutoriálu. Nebo používat nějaký software?

    Děkuji

    Ondra Komár

    Reply
    1. Musilda

      Určitě je jednodušší vzít základní šablonu, která je ve WordPressu a na té se učit.

      Reply
  9. Petr

    Pěkný článek, moc mi pomohl, při vytváření šablony pro wordpess a doufám že už nikdy nebudu muset šahat na wordpress.
    Trochu mě zaskočilo, když při vytváření šablony se nepoužívá šablonovací systém a pere se tam čisté php, to je jak počítat PI na třetí na dřevěném počítadle.

    Reply
  10. PetrK

    Zdravím, v první řadě velké díky za pěkný tutoriál, snad se díky němu konečně dostanu na kobylku WordPressu :-)

    Nicméně mám dva dotazy:
    1) 2x se mi vypisuje sidebar a marně hledám kde co není uzavřené. Nějaký tip ze zkušenosti?
    2) Bootstrap jsem doposud nepoužíval ač už se na něj nějaký ten pátek chystám.. No… možná by to chtělo malý update, či info. Bootstrap 3 už nepoužívá bootstrap-responsive.css. Stáhl jsem si tedy starší verzi, ale menu v této fázi nejeví žádné známky responsivity, je to tak OK? Jen obyčejný seznam. (a vlastně ani třída „sf-menu“ ve stylech nikde není…)

    Díkky
    P.

    Reply
    1. rastik1585

      Ahoj
      Bootstrap3 má v sebe všetko čo potrebuješ čo sa týka responsibility a je zbytočné sťahovať staršiu verziu. V documentácii sa dá dobre a pekne naučiť ako sa vytvára responsibilita. Na tomto linku http://getbootstrap.com/getting-started/ nájdeš aj linky na najnovšiu verziu bootstrapu . U neho je veľmi dôležité pridať bootstrap.js bez ktorého responsibilita nefunguje. Ak by si potreboval poradiť kludne napíš mail.

      Reply
    2. Kubrt

      Sidebar se vypisuje dvakrát, protože v souboru sidebar.php na prvním řádku je použita podmínka s funkcí dynamic_sidebar(), která sice vrací hodnotu typu bool, ale zároveň vypíše kód sidebaru. Doporučuji tuto funkci nahradi funkcí is_dynamic_sidebar(), která ověří, zda je k dispozici sidebar, ale nevypíše jeho obsah.

      Reply
  11. Vojta

    Ahoj v článku píšeš ¨Poslední je vložení menu pomocí wp_nav_menu…¨ v ukázkách kódu, to vložení menu ale chybí…

    Reply
  12. Radek

    Zdravím, ve footer se mi špatně zobrazují znaky, nevíte čím by to mohlo být?
    ukázka: V�echna pr�va vyhrazena

    Zkopírované to mám správně.

    Reply
    1. Radek

      Už jsem to vyřešil, všiml jsem si že jsou v dalším díle soubory ke stažení.
      Děkuji za super návody :)

      Reply
  13. Tom

    U kódu functions.php chybí značky pro php a navíc se kód nezobrazuje celý, protože PRE max-height: 600px;

    Reply

Leave a Reply

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