O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

WordPress Delicije

31 visualizações

Publicada em

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

Publicada em: Engenharia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

WordPress Delicije

  1. 1. DELICIJE WORDPRESSA ŽIVA MILOŠEVIĆ WEB DRUMMER
  2. 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. 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. 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. 5. EDITOR (APPEARANCE/EDITOR)
  6. 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. 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. 8. ORBISIUS CHILD THEME CREATOR
  9. 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. 10. DODAVANJE CUSTOM CSS-A U OKVIRU CHILD TEME
  11. 11. ADDITIONAL CSS - APPEARANCE/CUSTOMIZE
  12. 12. DODATNE MOGUĆNOSTI DODAVANJA CUSTOM CSS-A
  13. 13. DODATNE MOGUĆNOSTI DODAVANJA CUSTOM CSS-A 2
  14. 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. 15. PLUGIN CODE SNIPPETS
  16. 16. PLUGIN CODE SNIPPETS
  17. 17. DODAVANJE SNIPPETA - FUNCTIONS.PHP
  18. 18. DODAVANJE SNIPPETA - FUNCTIONS.PHP PREKO CPANELA
  19. 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. 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. 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. 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. 23. REZULTAT:
  24. 24. PITANJA? ziva@web-drummer.com https://www.facebook.com/zileja
  25. 25. KRAJ Hvala na pažnji!

×