Vytvorenie vlastnej témy pre CMS WordPress nie je nič zložité, pokiaľ máte aspoň minimálne znalosti jazyka HTML a CSS. Preto som sa snažil článok písať tak, aby si takto vedel vytvoriť tému aj človek bez znalostí php. V tomto článku sa preto zameriam iba na vytvorenie jednoduchej témy pre funkciami ničím výnimočný web alebo blog, z ktorého možno vytvoriť napr. e-shop už len pomocou modulov.

V jednotlivých bodoch ukážem, ako vytvoriť kostru webu so základnými funkcionalitami WordPressu, ktorá sa pomocou CSS môže zmeniť na stránku s unikátnym dizajnom alebo rozložením prvkov (layout). Takáto stránka má potom výhody oproti dostupným témam práve v:

  • jedinečnosti dizajnu,
  • rýchlosti načítania (pretože v téme použijete len to, čo využijete, takže sa nemusí načítavať nič navyše),
  • jednoduchosti úprav (keďže vy ako jej autori najlepšie viete, kde čo je),
  • ako aj možnosti vytvoriť takmer hocijakú stránku.

Keďže má využitie frameworku množstvo výhod (ako preddefinované štýly, layouty, responzivitu, JavaScriptové moduly, optimalizáciu pre všetky prehliadače…), opíšem využitie Bootstrapu ako frameworku, na ktorom bude téma postavená.

Túto základnú kostru s Bootstrapom na konci článku ponúkam aj na stiahnutie, aby ste si nemuseli jednotlivé súbory s ich základným obsahom vytvárať.

Pri niektorých častiach budem opisovať php funkcie. Tie musia byt obalené začiatkom a koncom php značky, ktorého syntax je pre otvorenie

<?php

a pre zavretie

?>

Inštalácia WordPressu

Pred vytvorením témy je potrebné mať nainštalovaný WordPress, čo potrebuje každá, nielen vlastná téma.

Na inštaláciu WordPressu je potrebný hosting (respektíve server), nakoľko napr. na účte wordpress.com nie je možné inštalovať vlastnú tému.

Na bezproblémový chod stačí zdieľaný hosting s kapacitou 200 Mb (pripadne viac, ak chystáte použiť viac obrázkov alebo videá) a jedna databáza.
Technickejšie parametre nájdete na wordpress.org, no každý bežný hosting ich spĺňa.

Mnoho hostingov disponuje funkciou samoinštalácie WordPressu,
ale v prípade že nie, stačí vytvoriť databázu, opísať si jej prístupové údaje a vytvoriť si ftp prístup. Následne cez ftp klienta (Total Commander, FileZilla…) alebo net2ftp.com sa pripojiť na ftp a nahrať obsah adresára WordPress, ktorý sa dá stiahnuť v slovenčine na wp.sk (vpravo dole). Po otvorení domény v prehliadači sa otvorí inštalácia WordPressu, kam stačí napísať prístupové údaje k databáze, nejako svoju stránku pomenovať a vytvoriť si účet.

Vytvorenie potrebných súborov a aktivovane témy

Aby sa téma mohla aktivovať, je potrebné aby téma obsahovala aspoň 2 súbory: style.css a index.php. Súbor style.css musí obsahovať na začiatku css komentár s názvom témy:

/*
Theme Name: Názov témy
*/

Tieto a pripadne ďalšie súbory témy, ktoré o chvíľu opíšem, musia byt v nejakom adresári/priečinku (na názve nezáleží) a ten sa vloží do WordPressu nahraním (upload):
a.) na ftp do adresáru wp-content > themes
b.) komprimovaného adresára vo formáte .zip pomocou tlačidla „Pridať novú“ v administrácii WordPressu, v časti Vzhľad > Témy.

Takto vytvorená téma je však úplne prázdna a jej úprava bez pridania ďalších súborov nemožná.

Ak sa nevytvoria ďalšie súbory pre všetok obsah sa bude načítavať súbor index.php. Preto, pre lepšiu orientáciu, je výhodnejšie použiť viac súborov, ako len podmieňoval cez php či sa má nasledovná časť súboru zobrazovať pre článok, stránku, kategóriu, vyhľadávanie, 404 a pod.
Tým že sa vytvoria súbory s presne určeným pomenovaním, bude WordPress sám vedieť pri akej príležitosti má použiť kód a z akého súboru. Preto sa dá vytvoriť téma aj bez znalostí php.

Jednotlive základné súbory, ktoré téma môže obsahovať (niektoré v dalších bodoch opíšem):

  • header.php – záhlavie stránky (hlavička),
  • footer.php – pätička stránky,
  • style.css – štýl stránky a informácie o téme,
  • screenshot.png – obrázok témy v administrácii,
  • functions.php – vytváranie a editácia php funkcií, ktoré chcem v téme použiť,
  • index.php – detail článku, prípadne obsah všetkých ostatných súborov, ak neboli vytvorené,
  • page.php – detail stránky,
  • home.php – zoznam všetkých článkov (stránka článkov),
  • archive.php – zoznam článkov vo vybranom dni, mesiaci, roku,
    tiež zoznam článkov vybranej kategórie, autora, značky ak neboli pre tieto časti vytvorené súbory,
  • category.php – zoznam článkov vybranej kategórie,
  • author.php – zoznam článkov vybraného autora,
  • tag.php – zoznam článkov vybranej značky,
  • front-page.php – úvodná, titulná stránka, ak bola v administrácii vybraná nejaká statická stránka ako titulná,
  • search.php – zoznam článkov, obsahujúcich vyhľadávanú frázu a stránka ak nebolo nič nájdené,
  • 404.php – zobrazí sa, ak stránka/článok neexistuje,
  • sidebar.php – obsah (napr. bočného) panelu.

Súborov môže byť, samozrejme, viac (napr. samostatné stránky pre sekcie, ako sú vyhľadávacie formuláre, komentáre, pre rôzne typy článkov, šablóny stránok a pod.), ale tieto, prípadne časť z nich, sú vo väčšine prípadov dostačujúce na vytvorenie plnohodnotnej stránky.

Loop a základné funkcie v ňom použité

Ešte pred popisom jednotlivých súborov, je dôležité spomenúť ako majú súbory svoj obsah načítavať.
WordPress síce vie že napr. v súbore category.php má načítať obsah v podobe zoznamu článkov v danej kategórií. Nevie však na akom mieste má toto načítanie spraviť a ako majú dáta vyzerať.

Tento obsah, či už pôjde o detail jedného článku, alebo zoznam článkov, sa vždy načítava pomocou takzvaného loopu. Ide o php, ktoré sa odporúča zapísať:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <!-- Obsah -->
<?php endwhile; endif; ?>

 

Na mieste pre <!– Obsah –> sa vložia základné php funkcie, ktoré budú dynamicky načítavať potrebné časti do vytvorených html značiek. Opíšem základné:

the_title(); // zobrazí nadpis
the_content(); // zobrazí obsah
the_excerpt(); // zobrazí zhrnutie alebo prvých 55 slov z obsahu (bez formátovania a obrázkov)
the_permalink(); // zobrazí url adresu, kde sa nachádza obsah (detail článku/stránky)
the_category(); // zobrazí zoznam (ul) kategórií, v ktorom sa článok nachádza
$category = get_the_category(); // pole kategórií, v ktorom sa článok nachádza
// na zobrazenie jednotlivých informácií, je nutné použiť echo:
echo get_category_link($category[0]->cat_ID); // zobrazí url prvej kategórie, v ktorej sa článok nachádza
echo $category[0]->cat_name; // zobrazí názov prvej kategórie, v ktorej sa článok nachádza
if ($category) { // následuje loop, na zobrazenie všetkých kategórií, v ktorom sa článok nachádza:
  foreach($category as $cat) {
    echo get_category_link($cat->cat_ID); // zobrazí url kategórie, v ktorej sa článok nachádza
    echo $cat->name; // zobrazí názov kategórie, v ktorej sa článok nachádza 
  }
}
the_tags(); // zobrazí zoznam (ul) značiek, ktoré sa článok obsahuje aj so slovom "Značky:"
$tags = get_the_tags(); // pole značiek, ktoré článok obsahuje
// na zobrazenie jednotlivých informácií, je nutné použiť echo:
echo get_tag_link($tags[0]->term_id); // zobrazí url prvej značky, ktorú článok obsahuje
echo $tags[0]->name; // zobrazí názov prvej značky, ktorú článok obsahuje
if ($tags) { // následuje loop, na zobrazenie všetkých značiek, ktoré sa článok obsahuje:
  foreach($tags as $tag) {
    echo get_category_link($tag->term_id); // zobrazí url značky, ktorú článok obsahuje
    echo $tag->name; // zobrazí názov značky, ktorú článok obsahuje
  }
}
the_author(); // zobrazí meno autora článku
the_time(); // zobrazí dátum publikovania článku (formát dátumu je možné napísať do zátvorky podľa https://codex.wordpress.org/Formatting_Date_and_Time napr. the_time('j. F Y');)
the_post_thumbnail(); // zobrazí náhľadový obrázok,
// odporúča sa obaľovať v podmienke, či obrázok existuje:
if ( has_post_thumbnail() ) {
  the_post_thumbnail();
}

 

Na tomto mieste spomeniem aj základné funkcie WordPressu na zobrazenie hodnôt určených pre celú stránku, nie iba pre konkrétny loop:

get_sidebar(); // zobrazí sidebar
bloginfo(); // informácie o stránke:
bloginfo('url'); // zobrazí url stránky - domény, miesta, kde je WordPress nainštalovaný
bloginfo('name'); // zobrazí názov stránky
bloginfo('description'); // zobrazí popis stránky
bloginfo('stylesheet_url'); // zobrazí url súboru style.css
bloginfo('template_url'); // zobrazí url adresára témy
bloginfo('language'); // zobrazí použitý jazyk v tvare sk_SK
echo substr(get_bloginfo('language'),0,2); // zobrazí prvé dve písmená jazyka (nutnosť použitia echo a funkcie get_bloginfo())

 

header.php a footer.php

Aby sa vo všetkých súboroch nemusel používať stále ten istý kód, ako je značka <head> a jej obsah, ako aj záhlavie a pätička stránky, je možné vytvoriť súbory header.php a footer.php. Tie sa naplnia potrebným obsahom.

Aby to takto fungovalo, musí sa v jednotlivých súboroch (index.php, page.php, archive.php…) napísať na začiatok funkcia

get_header();

a na koniec funkcia

get_footer();

 

Napríklad súbor index.php by teda zatiaľ mohol vyzerať takto:

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <!-- Obsah -->
<?php endwhile; endif; ?>
<?php get_footer(); ?>

 

Samotný header.php a footer.php už nemusí obsahovať žiadne php, ale keďže chcem ukázať využitie WordPressu, ukážem základne funkcie, ktoré sú vhodné pre použitie v týchto súboroch.

header.php

Súbor bude obsahovať DOCTYPE, otvoria sa v ňom značky <html>, <head> s meta informáciami a <body>.
V značke <head> sa načíta štýl style.css pomocou funkcie bloginfo():

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

v hrefe značky <link>.

Tiež sa tu načíta napojenie na Bootstrap, prípadne ďalšie knižnice, ktoré plánujem využiť, pomocou rovnakej funkcie:

<link href="<?php bloginfo('template_url'); ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Dôležité je použitie funkcie

wp_head();

Informuje o mieste, kde sa budú načítavať predvolené riadky kódu WordPressu, ako aj niektoých modulov. Keďže moduly zvyknú na tomto mieste načítavať svoje knižnice, je výhodné zadefinovať prepojenie s Bootstrapom pred touto značkou, a to vrátane JavaScriptu. Preto sa ešte pred touto značkou načíta aj jQuery na použitie Bootstrapových funkcií.

Ďalej v tomto súbore načítam z WordPressu menu, takže sa bude dať editovať v administrácii, pomocou funkcie wp_nav_menu():

wp_nav_menu( array(
    'theme_location' => 'primary', // nastavuje umiestnenie menu podľa nastavenia v súbore functions.php
    'items_wrap'     => '<ul class="nav navbar-nav">%3$s</ul>' // definuje triedy, ktoré majú byť v menu použité
  ) );

 

Značku <title> upravím tak, aby načítavala nastavenia nadpisu z WordPressu alebo SEO modulu pomocou funkcie wp_title():

<title><?php wp_title( '|', true, 'right' ); ?></title>

 

Značku <bodu> upravím tak, aby zobrazovala všetky CSS triedy (class), ktoré identifikujú aktuálnu stránku pomocou funkcie body_class():

<body <?php body_class(); ?>>

 

Ak chcem mať v záhlaví vyhľadávanie, použijem funkciu:

get_search_form();

 

Celý súbor potom môže vyzerať takto:

<!DOCTYPE html>
<html lang="<?php echo substr(get_bloginfo('language'),0,2); // jazyk stránky (prvé 2 písmená) ?>">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ); // dynamické zobrazenie nadpisu ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- meta pre funkčnosť responzivity -->
<link rel="icon" href="<?php bloginfo('url'); // url stránky; ikonu je potom potrebné nahrať do koreňového adresára stránky ?>/favicon.ico">
<link href="<?php bloginfo('template_url'); // url adresára témy ?>/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- načítanie Bootstrap CSS knižnice, pokiaľ načítavam cez @import v style.css, môžem tento riadok vynechať -->
<link href="<?php bloginfo('stylesheet_url'); // url súboru style.css ?>" rel="stylesheet">
<!--[if lt IE 9]><link href="<?php bloginfo('template_url');  ?>/ie.min.css" rel="stylesheet"><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!-- optimalizácia pre explorer -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- načítanie knižnce jQuery -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/bootstrap/js/bootstrap.min.js"></script><!-- načítanie Bootstrap JS knižnice -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/main.js"></script><!-- prípadné načítanie môjho JS, pokiaľ chcem nejaké použiť -->
<?php wp_head(); // miesto na načítanie riadov WordPressu a modulov ?>
<!-- následuje script pre zobrazenie lišty na zber cookies, čo je v EU povinné, v prípade použitia iného riešenia, možno vymazať: -->
<script src="//s3-eu-west-1.amazonaws.com/fucking-eu-cookies/cz.js" async></script>
<script>
var fucking_eu_config = {"l18n":{
"text": "Tento web používa na poskytovanie služieb, personalizáciu reklám a analýze návštevnosti súbory cookie. Používaním tohto webu s tým súhlasíte.",
"accept": "Súhlasím",
"more": "Viac informácií",
"link": "https://www.google.com/intl/sk/policies/technologies/cookies/"
}};
</script>
<!-- koniec scriptu pre zobrazenie lišty na zbet cookies -->
<!-- na toto miesto možno vložiť ďalšie kódy, ako napr. Google Analytics, Optimizelly a pod. --->
</head>
<body <?php body_class(); // zobrazenie class identifikujúcich aktuálnu stránku ?>>
<!-- na toto miesto možno vložiť ďalšie kódy, ako napr. Google Tag Manager, Facebook Pixel a pod. --->
<header>
  <div class="navbar" role="navigation">
    <div class="container">
      <div class="navbar-header col-sm-2">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Menu</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); // zobrazí názov stránky ?>"></a>
      </div>
      <div class="navbar-collapse collapse">
        <div class="row">
          <div class="col-sm-6">
            <?php
              wp_nav_menu(array(
                'theme_location' => 'primary', // nastavuje umiestnenie menu podľa nastavenia v súbore functions.php
                'items_wrap'     => '<ul class="nav navbar-nav">%3$s</ul>' // definuje triedy, ktoré majú byť v menu použité
              )); // zobrazí menu
            ?>
          </div>
          <div class="col-sm-4">
            <?php
              get_search_form(); // zobrazí vyhľadávanie
            ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<article>

footer.php

V tomto súbore okrem ukončenia značiek <body> a <html> sa môže ešte použiť funkcia:

wp_footer();

Má podobný účel ako funkcia wp_head(); v header.php – informuje o mieste pre načítanie riadkov niektorých modulov.

Celý súbor potom môže vyzerať takto:

  </article>
  <footer>
    <div class="text-center">
      Copyright © 2016 <?php echo get_bloginfo('name'); // zobrazí názov stránky ?>
    </div>
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

style.css

Okrem štýlovania samotnej stránky poskytuje aj informácie o téme. Tie sa píšu na začiatku súboru v jednej CSS poznámke v tvare:

/*
Theme Name: Názov témy
Theme URI: url adresa témy
Author: Meno autora
Author URI: url adresa webu autora
Description: Popis témy
Version: Číslo verzie témy
License: Typ licencie, napr. GNU General Public License v2 or later
License URI: Odkaz na licenciu, napr. http://www.gnu.org/licenses/gpl-2.0.html
*/

Jednotlivé informácie možno vynechať, jediná povinná je Theme Name.
Obrázok témy, ktorý sa zobrazuje v administrácii stránky, sa nahrá do koreňového adresára témy ako screenshot.png, pričom jeho odporúčaný rozmer je 1200 x 900 px a minimum 387 x 290 px.

V súboroch témy, ktorú ponúkam na stiahnutie na konci článku, už tento CSS súbor style.css obsahuje zopár štýlov, ktoré upravujú predvolené triedy WordPressu v rovnakom štýlovaní ako Bootstrap. Napr. Funkcia wp_menu() zobrazuje určité triedy pre sub-menu alebo aktívne položky paginácie a pod. Súbor je, samozrejme, možné kompletne vyčistiť a naštýlovať si všetko podľa seba.

functions.php

V tomto súbore sa definujú všetky php funkcie, ktoré chcem v téme používať. Môže ísť napr. o vytvorenie shortcode-ov, úpravu a vytváranie nových vyhľadávacích formulárov, registráciu vlastných post_type, ale aj vlastné funkcie. Opíšem základné:

theme_setup()
Nastavuje predvolené nastavenia témy. Registrujú sa tu napr. jednotlivé menu:

function theme_setup(){
  register_nav_menu( 'primary', 'Primary menu' ); //prvá hodnota v zátvorke je slug pre menu, druhá jeho viditeľné pomenovanie v administrácií
  register_nav_menu( 'secondary', 'Secondary menu' );
  // ...
}
add_action( 'after_setup_theme', 'theme_setup' );

 

add_theme_support()
Nastavuje, čo možno pre články a stránky vybrať, napr. výber formátu, pozadia, menu, widgetov…
Dôležité je použitie tejto funkcie hlavne kvôli prezentačným obrázkom, ktoré nemožno bez tejto funkcie k článkom pridávať:

add_theme_support( 'post-thumbnails' ); // umožní pridávať k článkom prezentačné obrázky
add_theme_support( 'post-formats', array( 'aside', 'gallery' ) ); // umožní pridávať k článkom formát aside alebo gallery
add_theme_support( 'woocommerce' ); // umožní používať modul Woocomerce
// ...

 

remove_action()
Umožní odstrániť WordPressom generované riadky v kóde. Táto funkcia, s presne určenou hodnotou ukázanou nižšie, sa musí použiť, ak chcete mať stránku ako e-shop – použiť modul Woocommerce:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); // prvá povinná hodnota pre použite Woocommerce
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); // druhá povinná hodnota pre použite Woocommerce

remove_action( 'wp_head', 'wp_generator' ); // odstráni informáciu o generátore z kódu
// ...

 

theme_widgets_init()
Registruje plochy Widgetov, kam je možné Widgety prikladať. Bez registrácie aspoň jedného nie je možné Widgety použiť:

function theme_widgets_init(){
  register_sidebar(array( // prvá plocha Widgetov
    'name'          => 'Názov plochy Widgetov', // povinné pole
    'id'            => 'sidebar', // univerzálny identifikátor, povinné pole
    'description'   => 'Popis widgetu',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', // možnosť vloženia elementu, jeho tried a identifikátorov pre jednotlivé Widgety
    'after_widget'  => '</aside>', // koniec jednotlivého Widgetu
    'before_title'  => '<h3 class="widget-title">', // možnosť vloženia elementu, jeho tried a identifikátorov pre jednotlivé nadpisy Widgetov
    'after_title'   => '</h3>', // koniec jednotlivých nadpisov Widgetov
  ));
  register_sidebar(array( // ďalšia plocha Widgetov
    'name'          => 'Názov plochy Widgetov',
    'id'            => 'sidebar2',
    'description'   => 'Popis widgetu',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ));
  // ...
}
add_action( 'widgets_init', 'theme_widgets_init' );

 

theme_wp_title()
Upravuje funkciu wp_title(), aby bola SEO friendly:

function theme_wp_title($title, $sep){
  global $paged, $page;
  if( is_feed() )
    return $title;
  $title .= get_bloginfo( 'name', 'display' );
  $site_description = get_bloginfo( 'description', 'display' );
  if( $site_description && ( is_home() || is_front_page() ) )
    $title = "$title $sep $site_description";
  if( $paged >= 2 || $page >= 2 )
    $title = "$title $sep ".sprintf( 'Strana %s',max( $paged, $page ) ); // stačí upraviť iba hodnotu "Strana", pokiaľ má byť stránke pre iný jazyk
  return $title;
}
add_filter( 'wp_title', 'theme_wp_title', 10, 2 );

 

get_the_post_thumbnail_src()
Funkcia, ktorá na mieste použitia vráti url adresu prezentačného obrázku:

function get_the_post_thumbnail_src($img){
  return ( preg_match('~bsrc="([^"]++)"~', $img, $matches) ) ? $matches[1] : '';
}

 

Woocommerce
Ešte pre možnosť použitia modulu Woocommerce následuje séria funkcií, ktoré sa odporúča presne v tomto tvare vložiť na koniec súboru functions.php (samozrejme, iba v prípade, ak chcete mať stránku ako e-shop):

$show_in_nav_menus = apply_filters('woocommerce_attribute_show_in_nav_menus', false, $name);

add_filter('woocommerce_attribute_show_in_nav_menus', 'wc_reg_for_menus', 1, 2);

function wc_reg_for_menus( $register, $name = '' ) {
  if ( $name == 'pa_types' ) $register = true;
  if ( $name == 'pa_special-sales' ) $register = true;
  return $register;
}

add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 8;' ), 20 );

add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );
function wc_wc20_variation_price_format( $price, $product ) {
  $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
  $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
  $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
  sort( $prices );
  $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

  if ( $price !== $saleprice ) {
    $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
  }
  return $price;
}

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

add_theme_support( 'woocommerce' );

 

Celý súbor potom môže vyzerať takto:

<?php

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10); // prvá povinná hodnota pre použite Woocommerce
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10); // druhá povinná hodnota pre použite Woocommerce

remove_action( 'wp_head', 'wp_generator' ); // odstráni informáciu o generátore z kódu

function theme_setup(){ // registruje menu
  register_nav_menu( 'primary', 'Primary menu' ); //prvá hodnota v zátvorke je slug pre menu, druhá jeho viditeľné pomenovanie v administrácií
}
add_action( 'after_setup_theme', 'theme_setup' );

add_theme_support( 'post-thumbnails' ); // umožnuje pridávať obrázky k článkom

function theme_widgets_init(){ // registruje plochy pre Widgety
  register_sidebar(array( // prvá plocha Widgetov
    'name'          => 'Názov plochy Widgetov', // povinné pole
    'id'            => 'sidebar', // univerzálny identifikátor, povinné pole
    'description'   => 'Popis widgetu',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">', // možnosť vloženia elementu, jeho tried a identifikátorov pre jednotlivé Widgety
    'after_widget'  => '</aside>', // koniec jednotlivého Widgetu
    'before_title'  => '<h3 class="widget-title">', // možnosť vloženia elementu, jeho tried a identifikátorov pre jednotlivé nadpisy Widgetov
    'after_title'   => '</h3>', // koniec jednotlivých nadpisov Widgetov
  ));
  register_sidebar(array( // ďalšia plocha Widgetov
    'name'          => 'Názov plochy Widgetov',
    'id'            => 'sidebar2',
    'description'   => 'Popis widgetu',
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ));
}
add_action( 'widgets_init', 'theme_widgets_init' );

function theme_wp_title($title, $sep){ // upravuje funkciu wp_title(), aby bola SEO friendly
  global $paged, $page;
  if( is_feed() )
    return $title;
  $title .= get_bloginfo( 'name', 'display' );
  $site_description = get_bloginfo( 'description', 'display' );
  if( $site_description && ( is_home() || is_front_page() ) )
    $title = "$title $sep $site_description";
  if( $paged >= 2 || $page >= 2 )
    $title = "$title $sep ".sprintf( 'Strana %s',max( $paged, $page ) ); // stačí upraviť iba hodnotu "Strana", pokiaľ má byť stránke pre iný jazyk
  return $title;
}
add_filter( 'wp_title', 'theme_wp_title', 10, 2 );

function get_the_post_thumbnail_src($img){ // vráti url adresu prezentačného obrázku
  return ( preg_match('~bsrc="([^"]++)"~', $img, $matches) ) ? $matches[1] : '';
}

// Woocommerce:

$show_in_nav_menus = apply_filters('woocommerce_attribute_show_in_nav_menus', false, $name);

add_filter('woocommerce_attribute_show_in_nav_menus', 'wc_reg_for_menus', 1, 2);

function wc_reg_for_menus( $register, $name = '' ) {
  if ( $name == 'pa_types' ) $register = true;
  if ( $name == 'pa_special-sales' ) $register = true;
  return $register;
}

add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 8;' ), 20 );

add_filter( 'woocommerce_variable_sale_price_html', 'wc_wc20_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wc_wc20_variation_price_format', 10, 2 );
function wc_wc20_variation_price_format( $price, $product ) {
  $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
  $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
  $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
  sort( $prices );
  $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

  if ( $price !== $saleprice ) {
    $price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
  }
  return $price;
}

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

add_theme_support( 'woocommerce' );

?>

index.php

Súbor by mal obsahovať načítanie headeru, footeru a loop so základnými funkciami.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <!-- obsah článku -->
<?php endwhile; endif; ?>

 

Súbor môže vyzerať napr. takto:

<?php get_header(); ?>
<div class="container">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h1><?php the_title(); // zobrazí nadpis ?></h1>
    <?php if(has_post_thumbnail()): // podmienka, či existuje obrázok ?>
      <a href="<?php the_permalink(); // zobrazí url adresu, kde sa nachádza obsah (detail článku/stránky) ?>">
        <img src="<?php
          echo get_the_post_thumbnail_src(get_the_post_thumbnail($post_id,'large')); // zobrazí url náhľadového obrázoku
        ?>" alt="<?php the_title(); // zobrazí nadpis ?>" width="100%">
      </a>
    <?php endif; ?>
    <div>
      <?php
        $category = get_the_category(); // pole kategórií, v ktorom sa článok nachádza
        echo '<a href="';
        echo get_category_link($category[0]->cat_ID); // zobrazí url prvej kategórie, v ktorej sa článok nachádza
        echo '">';
        echo $category[0]->cat_name; //zobrazí názov prvej kategórie, v ktorej sa článok nachádza
        echo '</a>';
        echo ' | '; // separator;
        the_author_link(); // zobrazí menu autora článku s odkazom na zoznam článkov tohto autora
        echo ' | ';
        the_time('j. F Y'); // zobrazí dátum publikovania článku
      ?>
    </div>
    <?php the_content(); // zobrazí obsah ?>

  <?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>

 

page.php a front-page.php

Podobné súboru index.php, akurát by sa tu nemali písať kategórie, tagy, autor a je tu priestor na vloženie vlastného kódu pre odlíšenie sa medzi stránkami, článkami a úvodnou stránkou.

page.php môže vyzerať napr. takto:

<?php get_header(); ?>
<div class="container">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h1><?php the_title(); // zobrazí nadpis ?></h1>
    <?php if(has_post_thumbnail()): // podmienka, či existuje obrázok ?>
      <a href="<?php the_permalink(); // zobrazí url adresu, kde sa nachádza obsah (detail článku/stránky) ?>">
        <img src="<?php
          echo get_the_post_thumbnail_src(get_the_post_thumbnail($post_id,'large')); // zobrazí url náhľadového obrázoku
        ?>" alt="<?php the_title(); // zobrazí nadpis ?>" width="100%">
      </a>
    <?php endif; ?>
    <?php the_content(); // zobrazí obsah ?>

  <?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>

 

home.php

Opäť podobne ako index.php, akurát namiesto the_content() sa použije the_excerpt().
Pokiaľ bude existovať viac článkov ako je nastavené vo WordPresse maximum na stranu, bude potrebné aby sa zobrazovala paginácia (stránkovanie). To sa rieši pomerne zdĺhavo, napr. vložením nasledovného php kódu medzi endwhile a endif v loope:

global $wp_query;
$big = 999999999;
$pages = paginate_links( array(
  'base' => str_replace( $big,'%#%',esc_url(get_pagenum_link($big))),
  'format' => '?paged=%#%',
  'current' => max( 1, get_query_var('paged')),
  'total' => $wp_query->max_num_pages,
  'before_page_number' => '<span class="sr-only">Strana </span>',
  'prev_text' => 'Novšie',
  'next_text' => 'Staršie',
  'type' => 'array'
));
if( is_array( $pages ) ) {
  $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
  echo '<nav class="text-center"><ul class="pagination">';
  foreach ( $pages as $page ) {
    echo "<li>$page</li>";
  }
  echo '</ul></nav>';
}

 

Celý súbor:

<?php get_header(); ?>
<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <h1>Nadpis blogu</h1>
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div><!-- jeden článok -->
          <header>
            <?php if(has_post_thumbnail()): // podmienka, či existuje obrázok ?>
              <a href="<?php the_permalink(); // zobrazí url adresu, kde sa nachádza obsah (detail článku/stránky) ?>">
                <img src="<?php
                  echo get_the_post_thumbnail_src(get_the_post_thumbnail($post_id,'large')); // zobrazí url náhľadového obrázoku
                ?>" alt="<?php the_title(); // zobrazí nadpis ?>" width="100%">
              </a>
            <?php endif; ?>
            <a href="<?php the_permalink(); ?>">
              <h1><?php the_title(); ?></h1>
            </a>
            <div>
              <?php
                $category = get_the_category(); // pole kategórií, v ktorom sa článok nachádza
                echo '<a href="';
                echo get_category_link($category[0]->cat_ID); // zobrazí url prvej kategórie, v ktorej sa článok nachádza
                echo '">';
                echo $category[0]->cat_name; //zobrazí názov prvej kategórie, v ktorej sa článok nachádza
                echo '</a>';
                echo ' | '; // separator;
                the_author(); // zobrazí menu autora článku s odkazom na zoznam článkov tohto autora
                echo ' | ';
                the_time('j. F Y'); // zobrazí dátum publikovania článku
              ?>
            </div>
          </header>
          <article>
            <?php the_excerpt(); // zobrazí zhrnutie alebo prvých 55 slov z obsahu (bez formátovania a obrázkov) ?>
          </article>
        </div>

      <?php endwhile; ?>
      <?php
        global $wp_query;
        $big = 999999999;
        $pages = paginate_links( array(
          'base' => str_replace( $big,'%#%',esc_url(get_pagenum_link($big))),
          'format' => '?paged=%#%',
          'current' => max( 1, get_query_var('paged')),
          'total' => $wp_query->max_num_pages,
          'before_page_number' => '<span class="sr-only">Strana </span>',
          'prev_text' => 'Novšie',
          'next_text' => 'Staršie',
          'type' => 'array'
        ));
        if( is_array( $pages ) ) {
          $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
          echo '<nav class="text-center"><ul class="pagination">';
          foreach ( $pages as $page ) {
            echo "<li>$page</li>";
          }
          echo '</ul></nav>';
        }
      ?>
      <?php endif; ?>
    </div>
    <div class="col-sm-4">
      <?php get_sidebar('sidebar'); // zobrazenie sidebaru ?>
    </div>
  </div>
</div>
<?php get_footer(); ?>

 

archive.php

Môže sa použiť presne to isté, čo je v súbore home.php, akurát sa zmení nadpis. V prípade že sa kategória, značka a zoznam článkov autora nemá výrazne líšiť od zobrazenia archívu pre dátum článkov, možno použiť iba tento jeden súbor a jednotlivé zmeny riešiť podmienkami:

if(is_category()){
  // obsah pre kategóriu
}else if(is_author()){
  // obsah pre články autora
}else if(is_tag()){
  // obsah pre značku
}else{
  if(is_day()){
    // obsah pre archív článkov z dňa
  }else if(is_month()){
    // obsah pre archív článkov z mesiaca
  }else{
    // obsah pre archív článkov z roka
  }
}

 

Celý súbor, kde sa mení iba nadpis:

<?php get_header(); ?>
<div class="container">
  <h1><?php
    if(is_category()){ // obsah pre kategóriu
      $category = get_the_category(); // pole kategórií
      echo 'Kategória: ';
      echo ' '.$category[0]->cat_name; // zobrazí názov kategórie
    }else if(is_author()){ // obsah pre články autora
      echo 'Články autora: ';
      the_author(); // zobrazí meno autora článku
    }else if(is_tag()){ // obsah pre značku
      $tags = get_the_tags(); // pole značiek
      echo 'Články značky: ';
      echo ' '.$tags[0]->name; // zobrazí názov značky
    }else{ // obsah pre archív z dátumu
      if(is_day()){
        echo 'Články z dňa: '; // obsah pre archív článkov z dňa
        the_time('j. F Y'); // zobrazí dátum dňa, mesiaca a roka
      }else if(is_month()){ // obsah pre archív článkov z mesiaca
        echo 'Články z mesciaca: ';
        the_time('F Y'); // zobrazí dátum mesiaca
      }else{ // obsah pre archív článkov z roku
        echo 'Články z roku: ';
        the_time('Y'); // zobrazí dátum roka
      }
    }
  ?></h1>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <div><!-- jeden článok -->
      <header>
        <?php if(has_post_thumbnail()): // podmienka, či existuje obrázok ?>
          <a href="<?php the_permalink(); // zobrazí url adresu, kde sa nachádza obsah (detail článku/stránky) ?>">
            <img src="<?php
              echo get_the_post_thumbnail_src(get_the_post_thumbnail($post_id,'large')); // zobrazí url náhľadového obrázoku
            ?>" alt="<?php the_title(); // zobrazí nadpis ?>" width="100%">
          </a>
        <?php endif; ?>
        <a href="<?php the_permalink(); ?>">
          <h1><?php the_title(); ?></h1>
        </a>
        <div>
          <?php
            $category = get_the_category(); // pole kategórií, v ktorom sa článok nachádza
            echo '<a href="';
            echo get_category_link($category[0]->cat_ID); // zobrazí url prvej kategórie, v ktorej sa článok nachádza
            echo '">';
            echo $category[0]->cat_name; //zobrazí názov prvej kategórie, v ktorej sa článok nachádza
            echo '</a>';
            echo ' | '; // separator;
            the_author(); // zobrazí menu autora článku s odkazom na zoznam článkov tohto autora
            echo ' | ';
            the_time('j. F Y'); // zobrazí dátum publikovania článku
          ?>
        </div>
      </header>
      <article>
        <?php the_excerpt(); // zobrazí zhrnutie alebo prvých 55 slov z obsahu (bez formátovania a obrázkov) ?>
      </article>
    </div>

  <?php endwhile; ?>
  <?php
    global $wp_query;
    $big = 999999999;
    $pages = paginate_links( array(
      'base' => str_replace( $big,'%#%',esc_url(get_pagenum_link($big))),
      'format' => '?paged=%#%',
      'current' => max( 1, get_query_var('paged')),
      'total' => $wp_query->max_num_pages,
      'before_page_number' => '<span class="sr-only">Strana </span>',
      'prev_text' => 'Novšie',
      'next_text' => 'Staršie',
      'type' => 'array'
    ));
    if( is_array( $pages ) ) {
      $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
      echo '<nav class="text-center"><ul class="pagination">';
      foreach ( $pages as $page ) {
        echo "<li>$page</li>";
      }
      echo '</ul></nav>';
    }
  ?>
  <?php endif; ?>
</div>
<?php get_footer(); ?>

 

search.php

Podobné ako home.php, akurát s iným nadpisom + zobrazením časti pre nenájdené vyhľadávanie v else podmienky loopu. Ďalej je možné v ňom použiť funkciu, ktorá zobrazí vyhľadávaný obsah:

get_search_query()

Celý súbor môže vyzerať napr. takto:

<?php get_header(); ?>
<div class="container">
  <h1>Je nám ľúto, táto stránka neexistuje.</h1>
  <p>
    <a href="<?php
      bloginfo('url'); // zobrazí url stránky
    ?>">Prejsť na domovskú stránku</a> alebo použiť vyhľadávanie:
  </p>
  <?php
    get_search_form(); // zobrazí vyhľadávanie
  ?>
</div>
<?php get_footer(); ?>

404.php

Môže byť celý ako statický súbor (t.j. bez loopu), keďže načítava statický obsah, napr.:

<?php get_header(); ?>
<div class="container">
  <h1>Je nám ľúto, táto stránka neexistuje.</h1>
  <p>
    <a href="<?php
      bloginfo('url'); // zobrazí url stránky
    ?>">Prejsť na domovskú stránku</a> alebo použiť vyhľadávanie:
  </p>
  <?php
    get_search_form(); // zobrazí vyhľadávanie
  ?>
</div>
<?php get_footer(); ?>

 

sidebar.php

Podľa názvu súboru sa zvolí typ obsahu pre jednotlivé sidebary.
Ak existuje vo functions.php viac funkcií register_sidebar(), vytvorí sa pre každú z nich jeden súbor s názvom „sidebar-id.php“, podľa hodnoty „id“ pridelenej v tejto funkcií, napr. „sidebar-sidebar2.php“.
V každom z týchto súborov bude kód pre zobrazenie určeného sidebaru, pričom v úvodzovkách funkcie dynamic_sidebar() a is_active_sidebar() sa doplní id určeného sidebaru.

sidebar.php teda môže vyzerať takto:

<?php if(is_active_sidebar('sidebar')): ?>
  <section>
    <div class="widget-area">
      <?php dynamic_sidebar('sidebar'); ?>
    </div>
  </section>
<?php endif; ?>

 

A sidebar-sidebar2.php môže vyzerať takto:

<?php if(is_active_sidebar('sidebar2')): ?>
  <section>
    <div class="widget-area">
      <?php dynamic_sidebar('sidebar2'); ?>
    </div>
  </section>
<?php endif; ?>

 

A konečne sa dostávame na záver článku, pod ktorým prikladám na stiahnutie spomínanú základnú kostru témy s Bootstrapom obsahujúcu všetko vyššie spomínané. Takže táto kostra môže slúžiť ako základ webu, od ktorého sa úpravami s HTML a CSS v jednotlivých súboroch možno dopracovať k vlastnému unikátnemu dizajnu.

Téma na stiahnutie

Stiahnite si zadarmo túto základnú kostru témy pre WordPress postavenej na Bootstrape, od ktorej sa možno pomocou HTML a CSS dopracovať k vlastnej téme s unikátnym dizajnom:

Stiahnuť zadarmo
My Custom Theme.zip (242 KB)