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 ThemesTemplate 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:
  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. enlightened
    • 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.