Wordpress - úprava šablony

Kategorie: Web » Wordpress » Wordpress - úprava šablony

Datum vydání: 05. 02. 2016, aktualizováno 03. 02. 2018

Šablony neboli Themes

Jak upravit šablonu najdete pěkně v tutoriálech na lynda.com (např. WordPress: Building Child Themes). Lynda.com je nicméně placený server. Základní obsluha Wordpressu je také popsána v jejich tutoriálu WordPress Essential Training.

V nabídce Wordpressu jsou mraky šablon. Stačí si vybrat a nainstalovat tu, která se vám bude zamlouvat. Osobně bych vybírala ty poslední dodávané s Wordpressem a ty si upravila, protože je zde větší předpoklad, že budou fungovat správně. Pro pokročilejší úpravy šablon je základním principem ponechat původní šablonu nezměněnou, aby byla možná její aktualizace a změny dělat v tzv. child theme z ní odvozené. Nejde o kopii šablony, do child šablony se dají jen změny. Wordpress následně pracuje s child theme automaticky a aplikuje změny a dá výsledek dohromady.

Podle anglického návodu by se rodičovské styly neměly načítat již ve style.css pomocí @import…, ale přes nastavení ve functions.php, tak jak je popisováno. Zkoušela jsem to, funguje to.

Vytvoření adresáře s názvem šablony zakončené -child

V adresáři wp-content/themes vytvoříme adresář pojmenovaný shodně jako naše rodičovská šablona, jen ho zakončíme -child (např. twentysixteen-child). Do tohoto adresáře následně umístíme prázdný soubor style.css a functions.php, které následně naplníme kódem.

Soubor style.css

Informace z komentáře uložené v souboru style.css se automaticky načtou mezi šablonami v administraci Wordpressu. Zde je vzor, který si upravíte dle potřeb.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

U WordPressu 4.9.2 v češtině jsem musela při použití šablony Twenty Seventeen přidat kód Template: twentyseventeen, aby byla child theme odvozená od šablony Twenty Seventeen a nevyžadovalo to index.php v administraci.

Do souboru style.css následně vkládáme pouze takové css vlastnosti, které přepisují či doplňují vzhled šablony. Načtení původních rodičovských stylů již neděláme pomocí import, ale kódem v php.

Místo @import se vkládá kód do functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Poté se šablona aktivuje přes administraci Wordpressu a měla by fungovat.

Další a bližší informace (popis se starším @import)

Hiearchie souborů

Pro pochopení hiearchie šablony může pomoci Template Hierarchy se svým schématem.

České fonty

Pozor na české fonty. Např. poslední šablona Twenty Sixteen používá v nadpisech a menu font Montserrat, který neumí správně češtinu. České znaky lze otestovat větou „příliš žluťoučký kůň úpěl ďábelské ódy“. Možná je to tím, že jsem si instalovala anglickou verzi Wordpressu místo české varianty. Anglická byla ale aktualizovaného vydání.

Hezké fonty jsou k dispozici na Google fonts. Zde je např. Quick Use pro font Open Sans. Pro správné použití i tučných variant je nutné si zašrktat skoro veškeré řezy písma a vybrat Latin a Latin Extended. Problém byl i s písmem Merriweather, kterým je sázen veškerý text v článcích včetně menších nadpisů. Tam diakritika fungovala až na nadpisy. Zdá se, že přidání Latin Extended zabralo.

Příklad jednoduchého použití fontu v css souboru

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
font-family: 'Open Sans', sans-serif;