Živa Oberknežev Milošević - Prezentacija sa junskog WordPress meetup-a

1. DELICIJE WORDPRESSA
ŽIVA MILOŠEVIĆ
WEB DRUMMER

2. IZRADA I DODAVANJE CHILD TEME
• Neophodno – zbog uređivanja i prilagođavanja sajta (jedno od osnovnih pravila u WordPress Developer
resusrsima: https://developer.wordpress.org)
• Izrada Child teme “pešaka”
• Izrada Child teme uz pomoć pluginova
• Teme, pogotovo Premium, imaju gotove Child teme

3. IZRADA CHILD TEME “PEŠAKA”
• https://developer.wordpress.org/themes/advanced-topics/child-themes/
• Osnovni fajlovi koje sadrži folder Child teme: style.css i fuctions.php
• Šta je potrebno da sadrži header style.css

4. ŠTA JE POTREBNO DA SADRŽI HEADER STYLE.CSS
/*
Theme Name: Moja tema
Theme URI: http://example.com/child-od-moje-teme/
Description: Child od moje teme
Author: Ziva
Author URI: http://example.com
Template: glavnatema
Version: 1.0.0
License: GNU General Public License v2 or later License
Licence URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: moja-tema-child
*/
@import url("../glavnatema/style.css");
/* =Start From Here
-------------------------------------------------------------- */

5. EDITOR (APPEARANCE/EDITOR)

6. EDITOR – FUNCTIONS.PHP
Preporučeno, zbog ispravnog redosleda učitavanja stilova, jeste dodavanje akcija:
wp_enqueue_scripts i wp_enqueue_style()
Kompletan preporučeni kod, zbog ispravnog redosleda učitavanja stilova.
https://developer.wordpress.org/themes/advanced-topics/child-themes/

7. IZRADA CHILD TEME UZ POMOĆ PLUGINOVA
• Child theme creator by Orbisius
• Ispod teme za koju želite da napravite Child temu, obeležite Switch theme to the new theme after it is
created da bi se tema aktivirala nakon kreiranja.
• Da biste preimenovali temu kako biste lako razlikovali Child od Parent teme, obeležite Customize title,
description etc. i unesite željeno ime i opis Vaše Child teme.
• Kliknite Create Child Theme i dodatak će kreirati Child temu.
• Ova tema će koristiti sve funkcionalnosti Parent teme, ali izmene koje napravite u njoj se neće obrisati
nakon ažuriranja.

8. ORBISIUS CHILD THEME CREATOR

9. DODAVANJE CUSTOM CSS-A
• U okviru child teme – style.css: Appearance/Theme Editor
• Additional CSS - Appearance/Customize Additional CSS
• Pojedine teme (pogotovo Premium) imaju mogućnost dodavanja custom css-a u okviru teme, ili kao
posebna opcija u okviru Appearance/Customize

10. DODAVANJE CUSTOM CSS-A U OKVIRU CHILD TEME

11. ADDITIONAL CSS - APPEARANCE/CUSTOMIZE

12. DODATNE MOGUĆNOSTI DODAVANJA CUSTOM CSS-A

13. DODATNE MOGUĆNOSTI DODAVANJA CUSTOM CSS-A 2

14. DODAVANJE SNIPPETA
• Uz pomoć plugina
• functions.php
• Google: hiljade snippeta  - Code Snippets for WordPress
https://premium.wpmudev.org/blog/shun-the-plugin-100-wordpress-code-snippets-from-across-the-net/
• Snippets Generator - https://generatewp.com

15. PLUGIN CODE SNIPPETS

16. PLUGIN CODE SNIPPETS

17. DODAVANJE SNIPPETA - FUNCTIONS.PHP

18. DODAVANJE SNIPPETA - FUNCTIONS.PHP PREKO CPANELA

19. DODAVANJE CUSTOM WIDGETA
• Dodavanje delova sadržaja uz pomoć dodatnih Widgeta vrši se preko funkcije get_sidebar.
• Sve ovo se radi u child temi.

20. U FAJL FUNCTIONS.PHP KOJI SE NALAZI U CHILD TEMI
DODAJEMO SLEDEĆU FUNKCIJU:
/**
* Custom widget area - (OVO JE KOMENTAR!)
*/
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Full-width bottom Widget',
'id => 'bottom_widget',
'description' => 'Full-width Page Bottom Widget Area',
'before_widget' => '<div id="custom_bottom" class="my_btm">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}

21. U FAJL INDEX.PHP (U OVOM SLUČAJU JE TO PHP
TEMPLATE U KOJI ŽELIMO DA DODAMO SADRŽAJ)
DODAJEMO SLEDEĆI KOD:
<div id="custom_area"> <!-- Custom area -->
<div class="container">
<!-- Custom widget area -->
<?php if ( !function_exists('register_sidebar') || !dynamic_sidebar('Full-width bottom Widget') ) :
?>
<?php endif; ?><!-- end of Custom widget area -->
<!-- </div> -->
</div><!-- end of #custom_area -->

22. DODAVANJE CUSTOM WIDGETA -
APPEARANCE/WIDGETS
• WordPress dashboard
• Appearance/Widgets - možemo da proverimo rezultat, da li sve vidi novo polje za dodavanje widgeta.
• U novo polje koje će imati naziv Full-width bottom Widget možemo dodati bilo koji dostupan widget,
zavisno od načina na koji je potrebno prikazati sadržaj.

23. REZULTAT:

24. PITANJA?
ziva@web-drummer.com
https://www.facebook.com/zileja

25. KRAJ
Hvala na pažnji!