Jak tworzyć motywy przyjazne użytkownikom i programistom?

1. Jak tworzyć motywy przyjazne użytkownikom   i programistom? Tomasz Dziuda WordUp Toruń #3 09.10.2015

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

3. Ćwiczenie

4. Ćwiczenie • Zapoznaj się z wytycznymi oﬁcjalnego repozytorium ( https://make.wordpress.org/themes/ handbook/review/required/ ) • Zrób przegląd motywu kandydującego do repozytorium

5. Ćwiczenie • Zapoznaj się z wytycznymi oﬁcjalnego repozytorium ( https://make.wordpress.org/themes/ handbook/review/required/ ) • 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 • Kolejne motywy prawie zawsze bazują na fragmentach kodu poprzednich motywów • Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego... • ... lub skorzystać z frameworka takiego jak _s

13. Troska o użytkowników

14. Stopniowy rozwój motywu

15. • 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. Źródło: https://wordpress.org/themes/gk-portfolio/

20. “Mam wielu klientów, którzy nie są w stanie dostarczyć mi sensownej ilości treści na swoją stronę” Powody zakupu motywu potraﬁą zaskoczyć

21. Kilka obserwacji dot. rynku motywów

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 przewodnie mogą okazać się dużym niewypałem

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

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

25. USE OF VISUAL COMPOSER GAVE ME A CANCER

26. Wykorzystanie ekranu personalizacji motywu

27. Zalety

28. Zalety • Pozwala od razu zobaczyć efekty naniesionych zmian • Jego budowa wymusza tworzenie prostych paneli zarządzania motywami • Wspomaga testowanie opcji na etapie budowy motywu • Ten sam UI dla opcji wszystkich motywów

32. Wady

33. Wady • Wymusza na nas zmianę pewnych koncepcji, zwłaszcza tych związanych z rozbudowanym UI • Jest i będzie dość często zmieniany jego UI co czasem dokłada pracy np. przy animacjach • Niektóre funkcje jak np. active_callback są mało intuicyjne dla początkujących użytkowników

36. Opcje must-have

37. Opcje must-have • Zmiana logo strony • Zmiana tła strony • Zmiana bazowych kolorów motywu • Zmiana krojów pisma • Zmiana stopki ;)

42. Plik editor-style.css

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

44. Łatwa migracja konﬁguracji widocznej na demo

45. Dedykowany instalator WordPressa

46. Dedykowany instalator WordPressa • Na ThemeForest / oﬁcjalne repozytorium można umieścić tylko paczkę z motywem • Użytkownik często ma już istniejącą stronę na której chce zmienić motyw • Dużo hostingów posiada własne auto-instalatory WordPressa

49. WXR

50. WXR • Łatwa migracja postów i podstron • Brak możliwości migracji widżetów • Należy zadbać o domyślną konﬁgurację motywu (WXR jej nie przenosi) • Najlepiej strukturę strony oprzeć na podstronach i umieścić w nich widżety w postaci shortcode'ów

54. Dedykowane rozwiązania

55. Dedykowane rozwiązania • Możliwość migracji dowolnych danych • Należy uwzględnić fakt, że użytkownik może mieć własne treści na stronie • Możliwość przeniesienia konﬁguracji widżetów i motywu • Częściowe przenosiny danych (np. konﬁguracji widżetów bez treści demo) jest problematyczne

59. Elastyczne rozwiązania

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

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

62. Zaawansowane wykorzystanie hierarchii szablonów w WordPressie • Mocno ryzykowne jest tworzenie plików typu category-slug.php • Tak samo ciężko będzie stworzyć dedykowane podstrony dla konkretnych typów wpisów (gdy mają zmienne nazwy)

63. Zaawansowane wykorzystanie hierarchii szablonów w WordPressie • Mocno ryzykowne jest tworzenie plików typu category-slug.php • Tak samo ciężko będzie stworzyć dedykowane podstrony dla konkretnych typów wpisów (gdy mają zmienne nazwy)

64. Dokumentacja

65. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że traﬁsz na wielu klientów, którzy WordPressa widzą drugi raz na oczy • Twórz kod, który nie wymaga zbyt wiele dodatkowych komentarzy • Korzystaj w miarę możliwości z rozwiązań dostępnych w czystym WordPressie • Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika

68. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że traﬁsz na wielu klientów, którzy WordPressa widzą drugi raz na oczy • Twórz kod, który nie wymaga zbyt wiele dodatkowych komentarzy • Stopniowy rozwój motywu wspomaga tworzenie dokumentacji • Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika

69. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że traﬁsz na wielu klientów, którzy WordPressa widzą drugi raz na oczy • Twórz kod, który nie wymaga zbyt wiele dodatkowych komentarzy • Stopniowy rozwój motywu wspomaga tworzenie dokumentacji • Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika

70. Troska o programistów

71. Wsparcie dla motywów potomnych

72. !important EVERYTHING!!

73. • W functions.php używamy function_exists • Tworzymy dający się nadpisać kod CSS • Gdy użytkownik chce zmodyﬁkować nasz motyw, warto mu przypomnieć by zrobił to poprzez motyw potomny albo np. Custom CSS z JetPacka

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

78. Porządek w plikach

79. Porządek w plikach • Warto podzielić plik CSS na sekcje lub na kilka plików (minifakcja i tak je połączy) • Tworzymy katalogi na pliki CSS, JS, graﬁki, fonty • Biblioteki JS i CSS warto od razu udostępnić w wersji zminiﬁkowanej z *.min.* w nazwie • W wypadku pluginów warto dodawać na końcu nazwę frameworka jakiego używają np. *.jquery.js

83. get_template_part

84. get_template_part • Reużycie istniejących fragmentów kodu • Podzielenie dużych fragmentów kodu na mniejsze części • get_template_part($slug, $name) wczyta plik {$slug}-{$name}.php

87. get_template_part • Reużycie istniejących fragmentów kodu • Podzielenie dużych fragmentów kodu na mniejsze części • get_template_part($slug, $name) wczyta plik {$slug}-{$name}.php • Pozwala łatwo nadpisać pliki w motywie potomnym

88. Czytelny kod CSS

89. LESS/SASS

90. LESS/SASS • Zmienne pozwalają zmieniać szybko podstawowe parametry strony • Zagnieżdżone selektory wymuszają wręcz uporządkowanie struktury kodu • Dobrze współpracują z BEM • Wtyczka WP LESS sprawia, że Gulp jest niepotrzebny ;)

93. LESS/SASS • Zmienne pozwalają zmieniać szybko podstawowe parametry strony • Zagnieżdżone selektory wymuszają wręcz uporządkowanie struktury kodu • Dobrze współpracują z BEM • Wtyczka WP LESS sprawia, że Grunt/Gulp jest niepotrzebny ;)

94. Korzystanie z dostępnych API

95. Korzystanie z dostępnych API • Oszczędność naszego czasu • Oszczędność czasu innych programistów (nie muszą się uczyć naszego rozwiązania) • Bezpieczniejszy i lepiej przetestowany kod

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

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

100. Źródło: https://codex.wordpress.org/Theme_Modiﬁcation_API

101. Myślenie o przyszłości

102. Wtyczki vs. Motywy

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

106. Brak URLi w opcjach motywu

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

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

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

110. Na przyszłość: świadome wykorzystanie REST API

111. REST API otwiera przed nami nowe obszary wykorzystania motywów

112. • Zamiast znacząco modyﬁkować standardowe odpowiedzi REST API lepiej stworzyć dedykowane end-pointy dla swojego motywu w odpowiedniej przestrzeni nazw np. slug_theme/v1 • Dodając pola do odpowiedzi REST API należy pamiętać by je odpowiednio preﬁksować np. slug_category

113. • Zamiast znacząco modyﬁkować standardowe odpowiedzi REST API lepiej stworzyć dedykowane end-pointy dla swojego motywu w odpowiedniej przestrzeni nazw np. slug_theme/v1 • Dodając pola do odpowiedzi REST API należy pamiętać by je odpowiednio preﬁksować np. slug_category

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

115. Pytania?

Jak tworzyć motywy przyjazne użytkownikom i programistom?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Jak tworzyć motywy przyjazne użytkownikom i programistom?

Ähnlich wie Jak tworzyć motywy przyjazne użytkownikom i programistom? (20)

Mehr von Tomasz Dziuda

Mehr von Tomasz Dziuda (20)

Jak tworzyć motywy przyjazne użytkownikom i programistom?