WordCamp Praha 2020 - WP kuchařka

1. EDITACE ŠABLONYEDITACE ŠABLONY
& CHILD THEME& CHILD THEME
Karolína Vyskočilová < >
WordCamp Praha 2020
karolina@kybernaut.cz

2. K ČEMU JE CHILD THEMEK ČEMU JE CHILD THEME
pokud potřebujete měnit kód používané šablony
upravit vzhled kategorie/stránky/příspěvku
přidat nebo odebrat kód z hlavičky, patičky (inzerce,
copyright etc.)
větší úprava CSS stylů (nestačí Vzhled > Vlastní CSS)
přidávání snippetů z webu
při aktualizaci šablony nepřijdete o provedené úpravy
WordPress Codex

3. JAK TO FUNGUJE?JAK TO FUNGUJE?
vytvoříte child šablonu
překopírujete ten soubor, který chcete měnit
zbylé soubory se načítají z rodičovské šablony
editace: Vzhled → Editor, ale lepší je editovat na PC a
nahrát přes FTP

4. VYTVOŘENÍ CHILD ŠABLONYVYTVOŘENÍ CHILD ŠABLONY
u prémiových šablon je někdy součástí balíku s šablonou
jinak nutné vytvořit - nebo
my využijeme - freemium, ale stačí
verze zdarma
pluginem ručně
Child Theme Configurator

5. TVORBA ZA POMOCI PLUGINUTVORBA ZA POMOCI PLUGINU
1. instalace a aktivace Child Theme Configurator

6. 2. Přejdeme do Nástroje → Child themes a vybereme
šablonu k analyzování

7. 3. Vytvoříme šablonu

11. 4. Zaktivujeme ji ve Vzhled → Šablony
5. Pokud nebudeme chtít využít plugin k editaci, tak ho můžeme
odinstalovat

13. JAK VYPADÁ CHILD ŠABLONA?JAK VYPADÁ CHILD ŠABLONA?
povinně obsahuje
style.css - definice šablony + vzhled
functions.php - odkazuje na styly hlavní šablony +
funkce
co zde není definováno, je načítáno z mateřské

14. style.css
/*
Theme Name: Twenty Twenty Child
Theme URI: https://wordpress.org/themes/twentytwenty/
Template: twentytwenty
Author: Karolína Vyskočilová
Author URI: https://kybernaut.cz/
Description: Odvozená šablona vytvořená pro prezentaci na WordCamp
Praha
Version: 0.0.1
Updated: 2020-02-26 22:29:15
*/
.body {
background-color: #fefefe;
}

15. functions.php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above
or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit(
get_template_directory_uri() ) . 'style.css', array( ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// END ENQUEUE PARENT ACTION

16. STRUKTURA MATEŘSKÉ ŠABLONYSTRUKTURA MATEŘSKÉ ŠABLONY
twentytwenty

17. footer.php
<footer id="site-footer" role="contentinfo" class="header-footer-
group">
<div class="section-inner">
<div class="footer-credits">
<p class="footer-copyright">&copy;
<?php
echo date_i18n(
/* translators: Copyright date format, see
https://secure.php.net/date */
_x( 'Y', 'copyright date format',
'twentytwenty' )
);
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?
>"><?php bloginfo( 'name' ); ?></a>
</p><!-- .footer-copyright -->
<p class="powered-by-wordpress">
<a href="<?php echo esc_url( __(
'https://wordpress.org/', 'twentytwenty' ) ); ?>">
<?php _e( 'Powered by WordPress',
'twentytwenty' ); ?>
</a>
</p><!-- .powered-by-wordpress -->

18. </div><!-- .footer-credits -->

19. PRŮBĚH NAČÍTÁNÍ ŠABLONYPRŮBĚH NAČÍTÁNÍ ŠABLONY
1. načte se functions.php a s tím všechny actions, které jsou
zde zaregistrované
2. zavolá se header.php - s hlavičkou stránky, logo, menu etc.
3. výpis obsahu stránky - index.php nebo jiný soubor podle
hierarchie šablony
4. načte se footer.php - ve kterém je patička

20. CO JE TO HIERARCHIE ŠABLONYCO JE TO HIERARCHIE ŠABLONY
určuje, kdy a za jakých podmínek se zobrazí obsah stránky
hledá soubor, který nejvíce odpovídá a pak leze ve stromu až
nahoru k obecnému index.php

21. VISUALIZE THE WORDPRESS TEMPLATE HIERARCHY
with ♥ from WPSHOUT
Archive Page
Singular
Page
Site Front
Page
Blog Posts
Index page
Error 404
Page
Search
Result Page
archive.php index.phpAuthor Archive author-$nicename.php
$mimetype-
$subtype.php
author-$id.php author.php
tag.php
$subtype.php $mimetype.php attachment.php
single-$posttype.php
single-post.php
category-$slug.php category-$id.php
taxonomy-
$taxonomy-$term.php
taxonomy-
$taxonomy.php
category.php
archive-$posttype.php
tag-$slug.php tag-$id.php
taxonomy.php
date.php
Category Archive
Custom Post Type
Archive
Custom Taxonomy
Archive
Year Archive
Month Archive
Page Shown On Front
Posts Shown On Front
Day Archive
Date Archive
Tag Archive
Attachment Post
Custom Post
Single Post Page
front-page.php
Custom Template
Default Template
If selected:
$custom.php
If selected:
$custom.php
$custom.php
page-$slug.php page-$id.php
Static Page
Blog Post
Page Template
single.php
page.php
home.php
404.php
search.php
single-
$posttype-$slug.php
singular.php
For oEmbeds: embed-{post-type}-{post_format}.php embed-{post-type}.php embed.php
wp-includes/theme-compat/embed.php
Menu

22. HIERARCHIE ŠABLONY - STRÁNKAHIERARCHIE ŠABLONY - STRÁNKA
$template-contact.php
page-$slug.php
page-$id.php
page.php
index.php

23. POJMENOVANÁ ŠABLONA STRÁNKYPOJMENOVANÁ ŠABLONA STRÁNKY
<?php /* Template Name: Example Template */ ?>

24. HIERARCHIE ŠABLONY - ARCHIVHIERARCHIE ŠABLONY - ARCHIV
archive-$posttype.php
archive.php
index.php

25. HIERARCHIE ŠABLONY - PŘÍSPĚVEKHIERARCHIE ŠABLONY - PŘÍSPĚVEK
single-$posttype-$slug.php
single-$posttype.php
single.php
index.php

26. ZDROJEZDROJE
- s pluginem
- ručně
WordPress Codex: Child themes
Child theme: odvozená šablona a proč a jak na ni
Child theme ve WordPress
WordPress Codex: Template hiearchy
The WordPress template hierarchy
Beginner’s Guide to WordPress Template Hierarchy (Cheat
Sheet)
Jak vytvořit vlastní šablonu pro WordPress