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

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

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

3. Ćwiczenie

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

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

18. ?

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

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

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

27. Kilka obserwacji dot. rynku
motywów

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

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

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

31. USE OF VISUAL COMPOSER
GAVE ME A CANCER

32. Wykorzystanie ekranu
personalizacji motywu

33. Zalety

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

35. Zalety
Każdy
motyw
posiada
podobny UI

36. Zalety
Wymusza
prosty UI

37. Wady

38. Wady
Wymusza
prosty UI

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

40. Wady
active_callback :(

41. Plik editor-style.css

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

43. Łatwa migracja konfiguracji
widocznej na demo

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

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

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

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

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

49. Elastyczne
rozwiązania

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

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

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

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

54. Dokumentacja

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

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

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

60. Testowanie

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

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

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

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

65. Troska o programistów

66. Wsparcie dla motywów
potomnych

67. !important EVERYTHING!!

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

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

71. Porządek w plikach

72. get_template_part

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

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

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

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

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

78. Czytelny kod CSS

79. BEM
.block__element--modifier

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

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

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

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

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

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

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

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

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

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

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

92. Korzystanie z dostępnych API

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

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

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

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

97. Myślenie o przyszłości

98. Wtyczki vs. Motywy

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

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

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

102. Brak URLi w opcjach
motywu

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

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

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

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

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

108. Pytania?