Odvozený vzhled

Odovzený vzhled (sub téma) staví na základním tématu vzhledu, čímž vývojářům a designerům šetří mnoho práce.

Výhody:

• bezproblémová aktualizace (rodičovské) šablony bez ztráty vlastních úprav
• v případě nevhodného zásahu do vlastní šablony web vždy obsahuje alespoň jednu funkční šablonu na kterou je možné web přepnout

Dokumentace: Child Themes, Template Hierarchy (Visual Overview image)

1. Pro odvozené téma vzhledu vytvořte nový vlastní adresář např. /wp-content/themes/my_subtheme/.
2. Odvozený vzhled musí obsahovat pouze povinný soubor style.css (povinné řádky jsou pouze Theme Name a Template):

   • /*
     Theme Name: My subtheme
     Theme URI: http://theme-web.com (případně web, pro který je šablona vytvářena)
     Description: Custom theme based on Twenty Ten
     Author: Name Surname
     Author URI: http: //author-web.com
     Template: twentyten
     Version:  1.0.0
     Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
     Text Domain: twentyten-child
     */
     
     /* Import parent style – deprecated */
     @import url("../twentyten/style.css");
     
     /* Theme customization starts here
     -------------------------------------------------------------- */

   • Soubor style.css úplně nahrazuje soubor z rodičovské šablony, proto je nutné rodičovský styl "připojit". Doporučený způsob připojení všech stylů z rodičovského tématu je pomocí funkce viz níže.
3. Volitelný soubor rtl.css doplňuje vzhled o podporu jazyků psaných zprava doleva:
   • Dokumentace: Right-to-Left Language Support
   • Testování vzhledu: RTL Tester
   • Editor textu: WP-RTL
4. Na rozdíl od style.css volitelný soubor functions.php, který rozšiřuje funkcionalitu webu o vlastní funkce, nepřepisuje původní soubor functions.php z rodičovské šablony (jsou tedy načítány oba), což umožňuje předefinovat funkce v rodičovské šabloně.
   • Připojení všech stylů z rodičovského tématu:

     • <?php
       function theme_enqueue_styles() {
           $parent_style = 'parent-style';
           wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
           wp_enqueue_style('child-style',
               get_stylesheet_directory_uri() . '/style.css',
               array($parent_style)
          );
       }
       add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
       ?>

   • Ošetření redeklarace funkce + vložení favicony do hlavičky:

     • <?php
       if (!function_exists("my_function")) {
          function my_function($parameter = true) {
             echo "My Custom Function";
          }
       } //endif functions_exists
       
       // Include favicon link to head section
       if (!function_exists("favicon_link")) {
         function favicon_link() {
           echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
         }
         add_action('wp_head', 'favicon_link');
       } //endif functions_exists
       
       // Get actual stylesheet directory path
       require_once(get_stylesheet_directory() . '/my_included_file.php');
       ?>

5. Při vytváření odvozeného vzhledu postupujte stejně jako při vytváření vlastního vzhledu (do adresáře s odvozeným vzhledem umisťujte soubory a adresáře), přičemž práci si ulehčíte tím, že budete vkládat pouze odlišné soubory od "základního" vzhledu.
6. Všechny soubory obsažené v odvozené šabloně (s výjimkou functions.php) přepisují soubory stejného názvu v rodičovském tématu. 
   • Např. pro úpravu "výpisu článku" tedy stačí jen z rodičovského tématu do odvozeného zkopírovat soubor single.php a upravit jej.

Vlastní vzhled

Dokumentace:

• Theme Development
• Template Tags 
• Template Hierarchy (vizuální přehled)
• Conditional Tags 
• Widgetizing Themes

Návody:

• Jak vytvořit vlastní šablonu pro WordPress – 1 díl (2013)
• How to Build a Responsive WordPress Theme with Bootstrap (2012)
• Wordpress – tvorba vlastní šablony (2011)
• How to Build a Custom WordPress Theme from Scratch (2010)

Adresářová struktura

my_theme/

• style.css (povinné – nahrazuje) – více viz Odvozený vzhled
• rtl.css (volitelné – ?) – více viz Odvozený vzhled
• functions.php (volitelné – doplňuje) - více viz Odvozený vzhled
• ...
• index.php (povinné u vlastní šablony|volitelné u odvozené šablony – ?) – výchozí šablona, která se používá také při nastavení úvodní stránky jako "Statická"
  • ​použije se vždy, pokud neexistuje "konkrétnější" šablona (taxonomy.php, search.php, 404.php, tag.php, home.php, date.php, archive.php, category.php, single.php, page.php, author.php, attachement.php)
• header.php – šablona hlavičky
• sidebar.php – šablona postranního sloupce
• footer.php – šablona patičky
• page.php – šablona stránky
• single.php – šablona příspěvku
• comments.php – šablona komentářů připojených k souboru single.php
• archive.php – šablona kategorie, příspěvků dle autora atd.
• search.php – šablona výsledku vyhledávání
• 404.php – šablona chyby 404 "stránka nenalezena"

Dynamický obsah

Příklad zobrazení nadpisu:

<?php the_title(); ?>

<?php the_title('<h3>', '</h3>'); ?>

Příklad zobrazení "shortcode" (konkrétně plugin Meta Slider):

<?php
  // Static homepage and Blog page
  if (is_front_page() && is_home()) {
    echo do_shortcode("[metaslider id=223]"); 
  }
?>

Widgety

Vlastní "regiony" pro Widgety:

• functions.php

• <?php
    /**
     * Register our sidebars and widgetized areas.
     */
    function mytheme_widgets_init() {
      register_sidebar(array(
        'name' => 'Header Sidebar',
        'id' => 'header_sidebar',
        'before_widget' => '<div class="header-sidebar">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
  ));
      register_sidebar(array(
        'name' => 'Sidebar Top',
        'id' => 'sidebar_top',
        'before_widget' => '<div class="sidebar-top">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
  ));
      register_sidebar(array(
        'name' => 'Sidebar Bottom',
        'id' => 'sidebar_bottom',
        'before_widget' => '<div class="sidebar-bottom">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
  ));
    }
    add_action('widgets_init', 'mytheme_widgets_init');
  ?>

• header.php

• <?php
    // Header sidebar
    if (is_active_sidebar('header_sidebar')) {
      dynamic_sidebar('header_sidebar');
    }               
  ?>

• <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('header_sidebar')): ?>
  <?php endif; ?>

• sidebar.php

• <?php
    // Header sidebar
    if (is_active_sidebar('header_sidebar')) {
      dynamic_sidebar('sidebar_top');
      dynamic_sidebar('sidebar_bottom');
    }              
  ?>

Příspěvky

Nastavení vlastní délky upoutávky příspěvku:

/**
* Limit post text by number of characters but do NOT truncate the last word.
*
* http://codex.wordpress.org/Template_Tags/the_excerpt
* http://codex.wordpress.org/Customizing_the_Read_More
*/
function mytheme_excerpt($limit, $source = null){
     if($source == "content" ? ($excerpt = get_the_content()) : ($excerpt = get_the_excerpt()));
     $excerpt = preg_replace(" (\[.*?\])",'',$excerpt);
     $excerpt = strip_shortcodes($excerpt);
     $excerpt = strip_tags($excerpt);
     $excerpt = substr($excerpt, 0, $limit);
     $excerpt = substr($excerpt, 0, strripos($excerpt, " "));
     $excerpt = trim(preg_replace('/\s+/', ' ', $excerpt));
     $excerpt = $excerpt.'... <a href="'.get_permalink($post->ID).'">'.__('more').'&nbsp;&raquo;</a>';
     return $excerpt;
}

• Příklad volání funkce (počet znaků nastaven na 200):

• <?php echo mytheme_excerpt(200); ?>

• <?php echo mytheme_excerpt(200, 'content'); ?>

Zobrazení 10 poslendích příspěvků z kategorie s ID "3" (zobrazení náhledového obrázku vyžaduje plugin "Get The Image"):

<?php
  $recent = new WP_Query();
  $recent->query('showposts=10&cat=3');
  print '<table class="noborder">';
  if($recent->have_posts()): while($recent->have_posts()): $recent->the_post();
  print '<tr class="text-box"><td style="padding-right: 20px; vertical-align: top;">';
  get_the_image(array('default_size' => 'thumbnail', 'width' => '65', 'height' => '65'));
  print '</td><td>';
?>
<h3><a href="<?php the_permalink()?>"><?php the_title(); ?></a></h3>
<?php echo '<p>'. get_excerpt(600) .'</p>'; ?>
<?php
  print '</td></tr>';
  endwhile;
  print '</table>';
  else:
     
  endif;
?>

---

wordpress:

• wp-includes/
  • theme-compat/
    • comments-popup.php
    • comments.php
    • footer.php
    • header.php
    • sidebar.php
  • general-template.php