Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom

881 views

Published on

Kolejna edycja mojej prezentacji traktującej o tworzeniu motywów, które są wygodne w użyciu oraz utrzymaniu.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom

  1. 1. Jak tworzyć motywy przyjazne użytkownikom 
 i programistom? Tomasz Dziuda WordUp Gdynia 14.11.2015
  2. 2. Jak bardzo złożony jest proces tworzenia motywu?
  3. 3. Ćwiczenie
  4. 4. Ćwiczenie 1. Zapoznaj się z wytycznymi oficjalnego repozytorium
 https://make.wordpress.org/themes/handbook/review/ 2. Zrób przegląd motywu kandydującego do repozytorium
 https://make.wordpress.org/themes/handbook/get-involved/become-a-reviewer/
  5. 5. Ćwiczenie 1. Zapoznaj się z wytycznymi oficjalnego repozytorium
 https://make.wordpress.org/themes/handbook/review/ 2. Zrób przegląd motywu kandydującego do repozytorium
 https://make.wordpress.org/themes/handbook/get-involved/become-a-reviewer/
  6. 6. Warto zapamiętać
  7. 7. Warto zapamiętać • Stworzenie pierwszego motywu dla szerokiego grona użytkowników nie jest wcale takie proste • Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego... • ... lub skorzystać z rozwiązań takich jak _s
  8. 8. Warto zapamiętać • Stworzenie pierwszego motywu dla szerokiego grona użytkowników nie jest wcale takie proste • Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego... • ... lub skorzystać z rozwiązań takich jak _s
  9. 9. Warto zapamiętać • Stworzenie pierwszego motywu dla szerokiego grona użytkowników nie jest wcale takie proste • Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego... • ... lub skorzystać z rozwiązań takich jak _s
  10. 10. Warto zapamiętać
  11. 11. Warto zapamiętać Warto zobaczyć jak robią to inni: 
 https://wordpress.org/themes/search/child%20theme/
  12. 12. Warto zapamiętać Warto zobaczyć jak robią to inni: 
 https://wordpress.org/themes/search/child%20theme/ Doing it wrong theme:
 https://github.com/WPTRT/doingitwrong
  13. 13. Troska o użytkowników
  14. 14. Stopniowy rozwój motywu
  15. 15. ?
  16. 16. Ilustracja stworzona przez Majo statt Senf
 Źródło: https://pl.wikipedia.org/wiki/Plik:Kaizen-2.svg Kaizen How to use Kaizen thinking to design better
  17. 17. Źródło: https://wordpress.org/themes/gk-portfolio/
  18. 18. “Mam wielu klientów, którzy nie są w stanie dostarczyć mi sensownej ilości treści na swoją stronę” Powody zakupu motywu potrafią zaskoczyć
  19. 19. Kilka obserwacji dot. rynku motywów
  20. 20. Kilka obserwacji dot. rynku motywów • Najładniejsze motywy wcale nie sprzedają się najlepiej • Wsparcie dla popularnych rozszerzeń typu WooCommerce jest bardzo pożądane • Niszowe tematy przewodnie mogą okazać się dużym niewypałem
  21. 21. Kilka obserwacji dot. rynku motywów • Najładniejsze motywy wcale nie sprzedają się najlepiej • Wsparcie dla popularnych rozszerzeń typu WooCommerce jest bardzo pożądane • Niszowe tematy przewodnie mogą okazać się dużym niewypałem
  22. 22. Kilka obserwacji dot. rynku motywów • Najładniejsze motywy wcale nie sprzedają się najlepiej • Wsparcie dla popularnych rozszerzeń typu WooCommerce jest bardzo pożądane • Niszowe tematy motywów mogą okazać się dużym niewypałem
  23. 23. USE OF VISUAL COMPOSER GAVE ME A CANCER
  24. 24. Wykorzystanie ekranu personalizacji motywu
  25. 25. Zalety
  26. 26. Zalety Podgląd zmian + Łatwiejsze testowane opcji
  27. 27. Zalety Każdy motyw posiada podobny UI
  28. 28. Zalety Wymusza prosty UI
  29. 29. Wady
  30. 30. Wady Wymusza prosty UI
  31. 31. Wady WordPress >= 4.6 ?? https://make.wordpress.org/core/2015/09/23/ outlining-a-possible-roadmap-for-the-customizer/
  32. 32. Wady active_callback :(
  33. 33. Plik editor-style.css
  34. 34. Plik editor-style.css function my_theme_add_editor_styles() { add_editor_style( 'custom-editor-style.css' ); } add_action( 'admin_init', 'my_theme_add_editor_styles' ); Warto przejrzeć: https://codex.wordpress.org/Editor_Style
  35. 35. Łatwa migracja konfiguracji widocznej na demo
  36. 36. Posty, podstrony Widżety Ustawienia motywu ThemeForest WordPress.org Istniejąca instalacja WP
  37. 37. Dedykowany instalator WP Posty, podstrony TAK Widżety TAK Ustawienia motywu TAK ThemeForest WordPress.org NIE Istniejąca instalacja WP NIE
  38. 38. Dedykowany instalator WP WXR Posty, podstrony TAK TAK Widżety TAK NIE Ustawienia motywu TAK NIE
 domyślna konfiguracja motywu rozwiązuje problem ThemeForest WordPress.org NIE TAK Istniejąca instalacja WP NIE TAK
  39. 39. Dedykowany instalator WP WXR Własne rozwiązanie Posty, podstrony TAK TAK TAK Widżety TAK NIE TAK Ustawienia motywu TAK NIE
 domyślna konfiguracja motywu rozwiązuje problem TAK ThemeForest WordPress.org NIE TAK TAK Istniejąca instalacja WP NIE TAK TAK
  40. 40. Źródło: http://tgmpluginactivation.com/
  41. 41. Elastyczne rozwiązania
  42. 42. Slideshow pokazujący wpisy 
 z danego tagu Źródło: https://codex.wordpress.org/Twenty_Fourteen Należy zadbać o to by można było zmienić nazwę tagu wybieranego do slideshow
  43. 43. Zaawansowane wykorzystanie hierarchii szablonów w WordPressie Zobacz: http://wphierarchy.com
  44. 44. Zaawansowane wykorzystanie hierarchii szablonów w WordPressie category-slug.php author-5.php single-photo.php tag-featured.php
  45. 45. Zaawansowane wykorzystanie hierarchii szablonów w WordPressie category-slug.php author-5.php single-photo.php tag-featured.php
  46. 46. Dokumentacja
  47. 47. • Przygotuj się na to, że mało kto ją przeczyta ;) • Klienci często WordPressa widzą drugi raz na oczy • Stopniowy rozwój motywu wspomaga tworzenie dokumentacji • Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
  48. 48. • Przygotuj się na to, że mało kto ją przeczyta ;) • Klienci często WordPressa widzą drugi raz na oczy • Stopniowy rozwój motywu wspomaga tworzenie dokumentacji • Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
  49. 49. • Przygotuj się na to, że mało kto ją przeczyta ;) • Klienci często WordPressa widzą drugi raz na oczy • Stopniowy rozwój motywu wspomaga tworzenie dokumentacji • Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
  50. 50. • Przygotuj się na to, że mało kto ją przeczyta ;) • Klienci często WordPressa widzą drugi raz na oczy • Stopniowy rozwój motywu wspomaga tworzenie dokumentacji • Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
  51. 51. Testowanie
  52. 52. • https://wordpress.org/plugins/theme-check/ • https://wordpress.org/plugins/theme-mentor/ • https://wordpress.org/plugins/monster-widget/ • https://codex.wordpress.org/Theme_Unit_Test Niezbędnik
  53. 53. Źródło: http://wptest.io/
  54. 54. Źródło: http://www.wpfill.me/
  55. 55. Źródło: http://www.browsersync.io/
  56. 56. Troska o programistów
  57. 57. Wsparcie dla motywów potomnych
  58. 58. !important EVERYTHING!!
  59. 59. Pamiętaj o function_exists w pliku functions.php Plik functions.php jako jedyny jest ładowany zarówno z motywu potomnego (jako pierwszy) i z motywu rodzica (jako drugi). if( function_exists( 'slug_myfunc' ) ) : function slug_myfunc() { return 'Kto nie czyta slajdów ten używa Joomla!'; } endif;
  60. 60. <span style=“padding: 20px!important;”>
  61. 61. Porządek w plikach
  62. 62. get_template_part
  63. 63. get_template_part W przeciwieństwie do require() dobrze współpracuje z motywami potomnymi
  64. 64. get_template_part get_template_part('loop', 'index');
  65. 65. get_template_part 1. motyw-potomny/loop-index.php 2. motyw-rodzic/loop-index.php 3. motyw-potomny/loop.php 4. motyw-rodzic/loop.php get_template_part('loop', 'index');
  66. 66. get_template_part Nagłówek wpisu Treść wpisu Informacje o wpisie Ikony społecznościowe Blok o autorze
  67. 67. get_template_part Nagłówek wpisu Treść wpisu Informacje o wpisie Ikony społecznościowe Blok o autorze content-info.php content-header.php content-social.php content-author.php
  68. 68. Czytelny kod CSS
  69. 69. BEM .block__element--modifier
  70. 70. .header {} .header__logo {} .header__logo--beta {} .header__menu {} .header__menu--mobile {}
  71. 71. .header {} .header__logo {} .header__logo--beta {} .header__menu {} .header__menu--mobile {}
  72. 72. .header {} .header__logo {} .header__logo--beta {} .header__menu {} .header__menu--mobile {}
  73. 73. 1) normalize.css body html ... 2) html.css a h1 h2 h3 ul ol ... 3) elements.css .btn .link .field ... 4) components.css .header .content .footer ...
  74. 74. 1) normalize.css body html ... 2) html.css a h1 h2 h3 ul ol ... 3) elements.css .btn .link .field ... 4) components.css .header .content .footer ...
  75. 75. 1) normalize.css body html ... 2) html.css a h1 h2 h3 ul ol ... 3) elements.css .btn .link .field ... 4) components.css .header .content .footer ...
  76. 76. 1) normalize.css body html ... 2) html.css a h1 h2 h3 ul ol ... 3) elements.css .btn .link .field ... 4) components.css .header .content .footer ...
  77. 77. BEM (+) Porządek w kodzie CSS (+) Wydajne selektory (+) Współpraca z LESS/SASS (+) Wymusza przemyślane tworzenie kodu CSS (-) WordPress nie jest w pełni kompatybilny z BEM (-) Czasem wygodnie jest złamać reguły BEM (-) Może prowadzić do dużej liczby klas w elemencie
  78. 78. BEM (+) Porządek w kodzie CSS (+) Wydajne selektory (+) Współpraca z LESS/SASS (+) Wymusza przemyślane tworzenie kodu CSS (-) WordPress nie jest w pełni kompatybilny z BEM (-) Czasem wygodnie jest złamać reguły BEM (-) Może prowadzić do dużej liczby klas w elemencie
  79. 79. LESS/SASS // Colors @primary_color: #a3a4a5; @secondary_color: #b4b7b9; @text_color: #777; // Visual @border_radius: 5px; // Spacing @basic_padding: 20px; @basic_margin: 10px;
  80. 80. LESS/SASS .header { &__logo { width: 150px; } &__menu { width: 50% } } .content { //... }
  81. 81. LESS/SASS Źródło: https://pl.wordpress.org/plugins/wp-less/
  82. 82. Korzystanie z dostępnych API
  83. 83. A GDYBY TAK NAPISAĆ WŁASNĄ WERSJĘ THEME MODS API?
  84. 84. A GDYBY TAK NAPISAĆ WŁASNĄ WERSJĘ THEME MODS API?
  85. 85. Źródło: https://codex.wordpress.org/Theme_Modification_API
  86. 86. Lista API dostępnych 
 w WordPressie https://codex.wordpress.org/WordPress_APIs
  87. 87. Myślenie o przyszłości
  88. 88. Wtyczki vs. Motywy
  89. 89. Wtyczki vs. Motywy • Custom Post Type jako plugin • Shortcodes jako plugin • Złożone widżety jako plugin
  90. 90. Wtyczki vs. Motywy • Custom Post Type jako plugin • Shortcodes jako plugin • Złożone widżety jako plugin
  91. 91. Wtyczki vs. Motywy • Custom Post Type jako plugin • Shortcodes jako plugin • Złożone widżety jako plugin
  92. 92. Brak URLi w opcjach motywu
  93. 93. • WordPress serializuje opcje motywu i treść widżetów • Serializacja uniemożliwia łatwą zmianę wartości • Rozwiązanie: http://dziudek.pl/motywy/ przechowywanie-nazwy-domeny-w-ustawieniach- motywu
  94. 94. • WordPress serializuje opcje motywu i treść widżetów • Serializacja uniemożliwia łatwą zmianę wartości • Rozwiązanie: http://dziudek.pl/motywy/ przechowywanie-nazwy-domeny-w-ustawieniach- motywu
  95. 95. • WordPress serializuje opcje motywu i treść widżetów • Serializacja uniemożliwia łatwą zmianę wartości • Jedno z rozwiązań: http://dziudek.pl/motywy/ przechowywanie-nazwy-domeny-w-ustawieniach- motywu
  96. 96. Moje prezentacje http://www.slideshare.net/dziudek TinyMCE Theme Customizer Performance REST API ES2015
  97. 97. Lead Developer @ @dziudek http://dziudek.pl http://dziudek.github.io/wp-links http://dziudek.github.io/dev-links Tomasz Dziuda
  98. 98. Pytania?

×