Jak začít studovat WordPress? Struktura šablony, modifikace a odvozená šablona (child-theme)

Data analytika

Po úspěšném objednání domény, zřízení hostingu a instalaci WordPressu je čas na bližší poznání tohoto systému.

Šablony

Ve WordPressu jsou šablony důležitým pojmem. Šablona definuje vzhled webu. Existují šablony zdarma, ale také šablony placené. Výběr šablony provedeme v administrační oblasti WordPressu kliknutím na Vzhled -> Šablony.

WordPress childtheme přizpůsobit vzhled šablony
WordPress – přizpůsobit vzhled šablony

Modifikace šablony

Šablony můžou být modifikovány přidáním kódu do functions.php. Změny můžou být také provedeny v child theme (odvozené šabloně), která je odvozená od parent theme (mateřské šablony). Toto uvítáte zejména při aktualizaci šablony, kdy se všechny Vámi provedené změny v šabloně smažou, protože je stará šablona nahrazena novou verzí. Pokud však máte změny nadefinované v child theme (odvozené šabloně), tyto změny budou k dispozici i po aktualizaci parent theme (mateřské šablony).

Struktura šablony

Šablony se skládají ze souborů style.css, souborů šablony WordPress a volitelného souboru functions.php, který umožňuje provést změny v šabloně. Součástí šablony bývají také obrázky a javascript soubory. Soubor index.php řídí zobrazení obsahu.

Child theme (odvozená šablona)

Odvozená šablona dědí funkce a vzhled po mateřské šabloně. Když návštěvník načte Váš web, WordPress nejprve načte odvozenou šablonu a poté doplní chybějící styly a funkce pomocí mateřské šablony.

Poté co se připojíte přes FTP, tak ve složce wp-content/themes vytvořte složku se stejným názvem jako mateřská šablona, ke kterému přidáte -child. Pokud používáte např. šablonu twentytwenty, tak název odvozené šablony bude twentytwenty-child.

V této složce vytvořte soubor s názvem style.css, do kterého vložíte níže uvedený kód. Níže uvedená ukázka kódu pro odvozenou šablonu mateřské šablony twentytwenty.

Návod:

Za Theme Name napište jméno mateřské šablony následované slovem Child, v tomto případě Twenty Twenty Child. Theme URL je vaše doména, v případě tohoto webu by bylo uvedeno https://kvalitnivzdelani.cz. Description je popis, zde uveďte název mateřské šablony následovaný Child Theme. Author je jméno autora, uveďte Vaše jméno. Author URL je web autora šablony, zde opět uveďte vaši doménu, opět např. https://kvalitnivzdelani.cz. Za Template uveďte název mateřské šablony. Version je verze, uveďte 1.0.0. Za Text Domain uveďte název mateřské šablony bez mezer následovaný -child.

/*
Theme Name: Twenty Twenty Child
Theme URL: https://kvalitnivzdelani.cz
Description: Twenty Twenty Child Theme
Author: Petr Gorčík
Author URL: https://kvalitnivzdelani.cz
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/

Dále ve složce odvozené šablony vytvořte soubor functions.php a na začátek uveďte kód, který zajistí načtení style.css z mateřské šablony. Můžete použít např. níže uvedený kód.

<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_style’ );

function enqueue_parent_style() {

wp_enqueue_style( ‘parent-style’,

get_template_directory_uri().’/style.css’ );

}

?>

Ve složce odvozené šablony by tedy měly být tyto dva soubory:

WordPress
WordPress – soubory ve složce šablony

Aktivace odvozené šablony (child theme)

V administraci WP je třeba přejít na Vzhled -> Šablony, a zde aktivovat odvozenou šablonu.

Napsat komentář

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