Kolejna iteracja mojej prezentacji dotyczącej tworzenia motywów, które spełniają nie tylko potrzeby użytkowników ale też programistów, którzy z nimi pracują.

1. Jak tworzyć motywy
przyjazne użytkownikom
i programistom?
Tomasz Dziuda
WordUp Silesia
22.10.2015

2. Jak bardzo złożony jest
proces tworzenia motywu?

3. Ćwiczenie

4. Ćwiczenie
1. Zapoznaj się z wytycznymi oficjalnego
repozytorium
2. Zrób przegląd motywu kandydującego do
repozytorium

5. Ćwiczenie
1. Zapoznaj się z wytycznymi oficjalnego
repozytorium
2. Zrób przegląd motywu kandydującego do
repozytorium

8. Warto zapamiętać

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. 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

11. 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

12. Warto zapamiętać

13. Warto zapamiętać
Warto zobaczyć jak robią to inni:
https://wordpress.org/themes/search/child%20theme/

14. 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

15. Troska o użytkowników

16. Stopniowy rozwój
motywu

17. • Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożone motywy mają więcej kombinacji i
zależności pomiędzy poszczególnymi
komponentami
• Nie wiadomo czy motyw się przyjmie na rynku
• Twój motyw nie musi być od razu doskonały

18. • Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożone motywy mają więcej kombinacji i
zależności pomiędzy poszczególnymi
komponentami
• Nie wiadomo czy motyw się przyjmie na rynku
• Twój motyw nie musi być od razu doskonały

19. • Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożone motywy mają więcej kombinacji i
zależności pomiędzy poszczególnymi
komponentami
• Nie wiadomo czy motyw się przyjmie na rynku
• Twój motyw nie musi być od razu doskonały

20. • Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożone motywy mają więcej kombinacji i
zależności pomiędzy poszczególnymi
komponentami
• Nie wiadomo czy motyw się przyjmie na rynku
• Twój motyw nie musi być od razu doskonały

21. 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

22. Źródło: https://wordpress.org/themes/gk-portfolio/

23. “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ć

24. Kilka obserwacji dot. rynku
motywów

25. 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

26. 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

27. 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

28. USE OF VISUAL COMPOSER
GAVE ME A CANCER

29. Wykorzystanie ekranu
personalizacji motywu

30. Zalety

31. Zalety
Podgląd zmian
+
Łatwiejsze testowane opcji

32. Zalety
Każdy
motyw
posiada
podobny UI

33. Zalety
Wymusza
prosty UI

34. Wady

35. Wady
Wymusza
prosty UI

36. Wady
WordPress >= 4.6 ??
https://make.wordpress.org/core/2015/09/23/
outlining-a-possible-roadmap-for-the-customizer/

37. Wady
active_callback :(

38. Plik editor-style.css

39. 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

40. Łatwa migracja konfiguracji
widocznej na demo

41. Posty, podstrony
Widżety
Ustawienia
motywu
ThemeForest
WordPress.org
Istniejąca
instalacja WP

42. Dedykowany
instalator WP
Posty, podstrony TAK
Widżety TAK
Ustawienia
motywu
TAK
ThemeForest
WordPress.org
NIE
Istniejąca
instalacja WP
NIE

43. 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

44. 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

45. Źródło: http://tgmpluginactivation.com/

46. Elastyczne
rozwiązania

47. 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

48. Zaawansowane wykorzystanie
hierarchii szablonów w WordPressie
Zobacz: http://wphierarchy.com

49. Zaawansowane wykorzystanie
hierarchii szablonów w WordPressie
category-slug.php
author-5.php
single-photo.php
tag-featured.php

50. Zaawansowane wykorzystanie
hierarchii szablonów w WordPressie
category-slug.php
author-5.php
single-photo.php
tag-featured.php

51. Dokumentacja

53. • 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

54. • 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

55. • 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

56. • 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

57. Testowanie

58. • 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

59. Źródło: http://wptest.io/

60. Źródło: http://www.wpfill.me/

61. Źródło: http://www.browsersync.io/

62. Troska o programistów

63. Wsparcie dla motywów
potomnych

64. !important EVERYTHING!!

65. 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;

66. <span style=“padding: 20px!important;”>

68. Porządek w plikach

69. get_template_part

70. get_template_part
W przeciwieństwie do require() dobrze
współpracuje z motywami potomnymi

71. get_template_part
get_template_part('loop', 'index');

72. 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');

73. get_template_part
Nagłówek wpisu
Treść wpisu
Informacje
o wpisie
Ikony społecznościowe
Blok o autorze

74. 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

75. Czytelny kod CSS

76. BEM
.block__element--modifier

77. .header {}
.header__logo {}
.header__logo--beta {}
.header__menu {}
.header__menu--mobile {}

78. .header {}
.header__logo {}
.header__logo--beta {}
.header__menu {}
.header__menu--mobile {}

79. .header {}
.header__logo {}
.header__logo--beta {}
.header__menu {}
.header__menu--mobile {}

80. 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 ...

81. 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 ...

82. 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 ...

83. 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 ...

84. 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

85. 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

86. LESS/SASS
// Colors
@primary_color: #a3a4a5;
@secondary_color: #b4b7b9;
@text_color: #777;
// Visual
@border_radius: 5px;
// Spacing
@basic_padding: 20px;
@basic_margin: 10px;

87. LESS/SASS
.header {
&__logo {
width: 150px;
}
&__menu {
width: 50%
}
}
.content {
//...
}

88. LESS/SASS
Źródło: https://pl.wordpress.org/plugins/wp-less/

89. Korzystanie z dostępnych API

90. A GDYBY TAK NAPISAĆ WŁASNĄ
WERSJĘ THEME MODS API?

91. A GDYBY TAK NAPISAĆ WŁASNĄ
WERSJĘ THEME MODS API?

92. Źródło: https://codex.wordpress.org/Theme_Modification_API

93. Lista API dostępnych
w WordPressie
https://codex.wordpress.org/WordPress_APIs

94. Myślenie o przyszłości

95. Wtyczki vs. Motywy

96. Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin

97. Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin

98. Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin

99. Brak URLi w opcjach
motywu

100. • 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

101. • 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

102. • 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

103. Moje prezentacje
http://www.slideshare.net/dziudek
TinyMCE
Theme Customizer
Performance
REST API
ES2015

104. Lead Developer @
@dziudek
http://dziudek.pl
http://dziudek.github.io/wp-links
http://dziudek.github.io/dev-links
Tomasz Dziuda

105. Pytania?