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.
Jak tworzyć motywy
przyjazne użytkownikom 

i programistom?
Tomasz Dziuda
WordUp Toruń #3
09.10.2015
Jak bardzo złożony jest
proces tworzenia motywu?
Ćwiczenie
Ćwiczenie
• Zapoznaj się z wytycznymi oficjalnego
repozytorium ( https://make.wordpress.org/themes/
handbook/review/require...
Ćwiczenie
• Zapoznaj się z wytycznymi oficjalnego
repozytorium ( https://make.wordpress.org/themes/
handbook/review/require...
Warto zapamiętać
Warto zapamiętać
• Stworzenie pierwszego motywu dla szerokiego
grona użytkowników nie jest wcale takie proste
• Kolejne mo...
Warto zapamiętać
• Stworzenie pierwszego motywu dla szerokiego
grona użytkowników nie jest wcale takie proste
• Kolejne mo...
Warto zapamiętać
• Stworzenie pierwszego motywu dla szerokiego
grona użytkowników nie jest wcale takie proste
• Kolejne mo...
Warto zapamiętać
• Stworzenie pierwszego motywu dla szerokiego
grona użytkowników nie jest wcale takie proste
• Kolejne mo...
Troska o użytkowników
Stopniowy rozwój
motywu
• Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożon...
• Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożon...
• Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożon...
• Lista testów każdego elementu strony stale się
wydłuża (różne przeglądarki, responsywność,
dostępność)
• Bardziej złożon...
Źródło: https://wordpress.org/themes/gk-portfolio/
“Mam wielu klientów, którzy
nie są w stanie dostarczyć
mi sensownej ilości treści
na swoją stronę”
Powody zakupu motywu
po...
Kilka obserwacji dot. rynku
motywów
Kilka obserwacji dot. rynku
motywów
• Najładniejsze motywy wcale nie sprzedają się
najlepiej
• Wsparcie dla popularnych ro...
Kilka obserwacji dot. rynku
motywów
• Najładniejsze motywy wcale nie sprzedają się
najlepiej
• Wsparcie dla popularnych ro...
Kilka obserwacji dot. rynku
motywów
• Najładniejsze motywy wcale nie sprzedają się
najlepiej
• Wsparcie dla popularnych ro...
USE OF VISUAL COMPOSER
GAVE ME A CANCER
Wykorzystanie ekranu
personalizacji motywu
Zalety
Zalety
• Pozwala od razu zobaczyć efekty naniesionych
zmian
• Jego budowa wymusza tworzenie prostych paneli
zarządzania mo...
Zalety
• Pozwala od razu zobaczyć efekty naniesionych
zmian
• Jego budowa wymusza tworzenie prostych paneli
zarządzania mo...
Zalety
• Pozwala od razu zobaczyć efekty naniesionych
zmian
• Jego budowa wymusza tworzenie prostych paneli
zarządzania mo...
Zalety
• Pozwala od razu zobaczyć efekty naniesionych
zmian
• Jego budowa wymusza tworzenie prostych paneli
zarządzania mo...
Wady
Wady
• Wymusza na nas zmianę pewnych koncepcji,
zwłaszcza tych związanych z rozbudowanym UI
• Jest i będzie dość często zm...
Wady
• Wymusza na nas zmianę pewnych koncepcji,
zwłaszcza tych związanych z rozbudowanym UI
• Jest i będzie dość często zm...
Wady
• Wymusza na nas zmianę pewnych koncepcji,
zwłaszcza tych związanych z rozbudowanym UI
• Jest i będzie dość często zm...
Opcje must-have
Opcje must-have
• Zmiana logo strony
• Zmiana tła strony
• Zmiana bazowych kolorów motywu
• Zmiana krojów pisma
• Zmiana s...
Opcje must-have
• Zmiana logo strony
• Zmiana tła strony
• Zmiana bazowych kolorów motywu
• Zmiana krojów pisma
• Zmiana s...
Opcje must-have
• Zmiana logo strony
• Zmiana tła strony
• Zmiana bazowych kolorów motywu
• Zmiana krojów pisma
• Zmiana s...
Opcje must-have
• Zmiana logo strony
• Zmiana tła strony
• Zmiana bazowych kolorów motywu
• Zmiana krojów pisma
• Zmiana s...
Opcje must-have
• Zmiana logo strony
• Zmiana tła strony
• Zmiana bazowych kolorów motywu
• Zmiana krojów pisma
• Zmiana s...
Plik editor-style.css
function my_theme_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'my_the...
Łatwa migracja konfiguracji
widocznej na demo
Dedykowany instalator
WordPressa
Dedykowany instalator
WordPressa
• Na ThemeForest / oficjalne repozytorium można
umieścić tylko paczkę z motywem
• Użytkown...
Dedykowany instalator
WordPressa
• Na ThemeForest / oficjalne repozytorium można
umieścić tylko paczkę z motywem
• Użytkown...
Dedykowany instalator
WordPressa
• Na ThemeForest / oficjalne repozytorium można
umieścić tylko paczkę z motywem
• Użytkown...
WXR
WXR
• Łatwa migracja postów i podstron
• Brak możliwości migracji widżetów
• Należy zadbać o domyślną konfigurację motywu
(...
WXR
• Łatwa migracja postów i podstron
• Brak możliwości migracji widżetów
• Należy zadbać o domyślną konfigurację motywu
(...
WXR
• Łatwa migracja postów i podstron
• Brak możliwości migracji widżetów
• Należy zadbać o domyślną konfigurację motywu
(...
WXR
• Łatwa migracja postów i podstron
• Brak możliwości migracji widżetów
• Należy zadbać o domyślną konfigurację motywu
(...
Dedykowane rozwiązania
Dedykowane rozwiązania
• Możliwość migracji dowolnych danych
• Należy uwzględnić fakt, że użytkownik może mieć
własne treś...
Dedykowane rozwiązania
• Możliwość migracji dowolnych danych
• Należy uwzględnić fakt, że użytkownik może mieć
własne treś...
Dedykowane rozwiązania
• Możliwość migracji dowolnych danych
• Należy uwzględnić fakt, że użytkownik może mieć
własne treś...
Dedykowane rozwiązania
• Możliwość migracji dowolnych danych
• Należy uwzględnić fakt, że użytkownik może mieć
własne treś...
Elastyczne
rozwiązania
Slideshow pokazujący wpisy
z danego tagu
Źródło: https://codex.wordpress.org/Twenty_Fourteen
Należy zadbać o to by można b...
Zaawansowane wykorzystanie
hierarchii szablonów w WordPressie
Zobacz: http://wphierarchy.com
Zaawansowane wykorzystanie
hierarchii szablonów w WordPressie
• Mocno ryzykowne jest tworzenie plików typu
category-slug.p...
Zaawansowane wykorzystanie
hierarchii szablonów w WordPressie
• Mocno ryzykowne jest tworzenie plików typu
category-slug.p...
Dokumentacja
• Przygotuj siebie (i swój support) na to, że mało kto ją
przeczyta ;)
• Nastaw się, że trafisz na wielu klientów, którzy
W...
• Przygotuj siebie (i swój support) na to, że mało kto ją
przeczyta ;)
• Nastaw się, że trafisz na wielu klientów, którzy
W...
• Przygotuj siebie (i swój support) na to, że mało kto ją
przeczyta ;)
• Nastaw się, że trafisz na wielu klientów, którzy
W...
• Przygotuj siebie (i swój support) na to, że mało kto ją
przeczyta ;)
• Nastaw się, że trafisz na wielu klientów, którzy
W...
• Przygotuj siebie (i swój support) na to, że mało kto ją
przeczyta ;)
• Nastaw się, że trafisz na wielu klientów, którzy
W...
Troska o programistów
Wsparcie dla motywów
potomnych
!important EVERYTHING!!
• W functions.php używamy function_exists
• Tworzymy dający się nadpisać kod CSS
• Gdy użytkownik chce zmodyfikować nasz mo...
• W functions.php używamy function_exists
• Tworzymy dający się nadpisać kod CSS
• Gdy użytkownik chce zmodyfikować nasz mo...
• W functions.php używamy function_exists
• Tworzymy dający się nadpisać kod CSS
• Gdy użytkownik chce zmodyfikować nasz mo...
<span style=“padding: 20px!important;”>
Porządek w plikach
Porządek w plikach
• Warto podzielić plik CSS na sekcje lub na kilka
plików (minifakcja i tak je połączy)
• Tworzymy katal...
Porządek w plikach
• Warto podzielić plik CSS na sekcje lub na kilka
plików (minifakcja i tak je połączy)
• Tworzymy katal...
Porządek w plikach
• Warto podzielić plik CSS na sekcje lub na kilka
plików (minifakcja i tak je połączy)
• Tworzymy katal...
Porządek w plikach
• Warto podzielić plik CSS na sekcje lub na kilka
plików (minifakcja i tak je połączy)
• Tworzymy katal...
get_template_part
get_template_part
• Reużycie istniejących fragmentów kodu
• Podzielenie dużych fragmentów kodu na mniejsze
części
• get_te...
get_template_part
• Reużycie istniejących fragmentów kodu
• Podzielenie dużych fragmentów kodu na mniejsze
części
• get_te...
get_template_part
• Reużycie istniejących fragmentów kodu
• Podzielenie dużych fragmentów kodu na mniejsze
części
• get_te...
get_template_part
• Reużycie istniejących fragmentów kodu
• Podzielenie dużych fragmentów kodu na mniejsze
części
• get_te...
Czytelny kod CSS
LESS/SASS
LESS/SASS
• Zmienne pozwalają zmieniać szybko podstawowe
parametry strony
• Zagnieżdżone selektory wymuszają wręcz
uporząd...
LESS/SASS
• Zmienne pozwalają zmieniać szybko podstawowe
parametry strony
• Zagnieżdżone selektory wymuszają wręcz
uporząd...
LESS/SASS
• Zmienne pozwalają zmieniać szybko podstawowe
parametry strony
• Zagnieżdżone selektory wymuszają wręcz
uporząd...
LESS/SASS
• Zmienne pozwalają zmieniać szybko podstawowe
parametry strony
• Zagnieżdżone selektory wymuszają wręcz
uporząd...
Korzystanie z dostępnych API
Korzystanie z dostępnych API
• Oszczędność naszego czasu
• Oszczędność czasu innych programistów (nie
muszą się uczyć nasz...
Korzystanie z dostępnych API
• Oszczędność naszego czasu
• Oszczędność czasu innych programistów (nie
muszą się uczyć nasz...
Korzystanie z dostępnych API
• Oszczędność naszego czasu
• Oszczędność czasu innych programistów (nie
muszą się uczyć nasz...
A GDYBY TAK NAPISAĆ WŁASNĄ
WERSJĘ THEME MODS API?
A GDYBY TAK NAPISAĆ WŁASNĄ
WERSJĘ THEME MODS API?
Źródło: https://codex.wordpress.org/Theme_Modification_API
Myślenie o przyszłości
Wtyczki vs. Motywy
Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin
Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin
Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin
Brak URLi w opcjach
motywu
• WordPress serializuje opcje motywu i treść
widżetów
• Serializacja uniemożliwia łatwą zmianę wartości
• Rozwiązanie: htt...
• WordPress serializuje opcje motywu i treść
widżetów
• Serializacja uniemożliwia łatwą zmianę wartości
• Rozwiązanie: htt...
• WordPress serializuje opcje motywu i treść
widżetów
• Serializacja uniemożliwia łatwą zmianę wartości
• Jedno z rozwiąza...
Na przyszłość: świadome
wykorzystanie REST API
REST API otwiera przed nami nowe
obszary wykorzystania motywów
• Zamiast znacząco modyfikować standardowe
odpowiedzi REST API lepiej stworzyć dedykowane
end-pointy dla swojego motywu w o...
• Zamiast znacząco modyfikować standardowe
odpowiedzi REST API lepiej stworzyć dedykowane
end-pointy dla swojego motywu w o...
Lead Developer @
@dziudek
http://dziudek.pl
http://dziudek.github.io/wp-links
http://dziudek.github.io/dev-links
Tomasz Dz...
Pytania?
Jak tworzyć motywy przyjazne użytkownikom i programistom?
Jak tworzyć motywy przyjazne użytkownikom i programistom?
Jak tworzyć motywy przyjazne użytkownikom i programistom?
Upcoming SlideShare
Loading in …5
×

Jak tworzyć motywy przyjazne użytkownikom i programistom?

566 views

Published on

Zestaw porad, który ma pomóc twórcom motywów tworzyć lepsze i wygodniejsze motywy. Nie tylko w użytkowaniu ale też w utrzymaniu

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jak tworzyć motywy przyjazne użytkownikom i programistom?

  1. 1. Jak tworzyć motywy przyjazne użytkownikom 
 i programistom? Tomasz Dziuda WordUp Toruń #3 09.10.2015
  2. 2. Jak bardzo złożony jest proces tworzenia motywu?
  3. 3. Ćwiczenie
  4. 4. Ćwiczenie • Zapoznaj się z wytycznymi oficjalnego repozytorium ( https://make.wordpress.org/themes/ handbook/review/required/ ) • Zrób przegląd motywu kandydującego do repozytorium
  5. 5. Ćwiczenie • Zapoznaj się z wytycznymi oficjalnego repozytorium ( https://make.wordpress.org/themes/ handbook/review/required/ ) • Zrób przegląd motywu kandydującego do repozytorium
  6. 6. Warto zapamiętać
  7. 7. 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
  8. 8. 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
  9. 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
  10. 10. 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
  11. 11. Troska o użytkowników
  12. 12. Stopniowy rozwój motywu
  13. 13. • 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
  14. 14. • 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
  15. 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
  16. 16. • 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
  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 • 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
  27. 27. 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
  28. 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
  29. 29. 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
  30. 30. Wady
  31. 31. 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
  32. 32. 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
  33. 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
  34. 34. Opcje must-have
  35. 35. Opcje must-have • Zmiana logo strony • Zmiana tła strony • Zmiana bazowych kolorów motywu • Zmiana krojów pisma • Zmiana stopki ;)
  36. 36. Opcje must-have • Zmiana logo strony • Zmiana tła strony • Zmiana bazowych kolorów motywu • Zmiana krojów pisma • Zmiana stopki ;)
  37. 37. Opcje must-have • Zmiana logo strony • Zmiana tła strony • Zmiana bazowych kolorów motywu • Zmiana krojów pisma • Zmiana stopki ;)
  38. 38. Opcje must-have • Zmiana logo strony • Zmiana tła strony • Zmiana bazowych kolorów motywu • Zmiana krojów pisma • Zmiana stopki ;)
  39. 39. Opcje must-have • Zmiana logo strony • Zmiana tła strony • Zmiana bazowych kolorów motywu • Zmiana krojów pisma • Zmiana stopki ;)
  40. 40. Plik editor-style.css
  41. 41. 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
  42. 42. Łatwa migracja konfiguracji widocznej na demo
  43. 43. Dedykowany instalator WordPressa
  44. 44. Dedykowany instalator WordPressa • Na ThemeForest / oficjalne 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
  45. 45. Dedykowany instalator WordPressa • Na ThemeForest / oficjalne 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
  46. 46. Dedykowany instalator WordPressa • Na ThemeForest / oficjalne 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
  47. 47. WXR
  48. 48. WXR • Łatwa migracja postów i podstron • Brak możliwości migracji widżetów • Należy zadbać o domyślną konfigurację motywu (WXR jej nie przenosi) • Najlepiej strukturę strony oprzeć na podstronach i umieścić w nich widżety w postaci shortcode'ów
  49. 49. WXR • Łatwa migracja postów i podstron • Brak możliwości migracji widżetów • Należy zadbać o domyślną konfigurację motywu (WXR jej nie przenosi) • Najlepiej strukturę strony oprzeć na podstronach i umieścić w nich widżety w postaci shortcode'ów
  50. 50. WXR • Łatwa migracja postów i podstron • Brak możliwości migracji widżetów • Należy zadbać o domyślną konfigurację motywu (WXR jej nie przenosi) • Najlepiej strukturę strony oprzeć na podstronach i umieścić w nich widżety w postaci shortcode'ów
  51. 51. WXR • Łatwa migracja postów i podstron • Brak możliwości migracji widżetów • Należy zadbać o domyślną konfigurację motywu (WXR jej nie przenosi) • Najlepiej strukturę strony oprzeć na podstronach i umieścić w nich widżety w postaci shortcode'ów
  52. 52. Dedykowane rozwiązania
  53. 53. 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 konfiguracji widżetów i motywu • Częściowe przenosiny danych (np. konfiguracji widżetów bez treści demo) jest problematyczne
  54. 54. 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 konfiguracji widżetów i motywu • Częściowe przenosiny danych (np. konfiguracji widżetów bez treści demo) jest problematyczne
  55. 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 konfiguracji widżetów i motywu • Częściowe przenosiny danych (np. konfiguracji widżetów bez treści demo) jest problematyczne
  56. 56. 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 konfiguracji widżetów i motywu • Częściowe przenosiny danych (np. konfiguracji widżetów bez treści demo) jest problematyczne
  57. 57. Elastyczne rozwiązania
  58. 58. 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
  59. 59. Zaawansowane wykorzystanie hierarchii szablonów w WordPressie Zobacz: http://wphierarchy.com
  60. 60. 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)
  61. 61. 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)
  62. 62. Dokumentacja
  63. 63. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że trafisz 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
  64. 64. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że trafisz 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
  65. 65. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że trafisz 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
  66. 66. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że trafisz 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
  67. 67. • Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;) • Nastaw się, że trafisz 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
  68. 68. Troska o programistów
  69. 69. Wsparcie dla motywów potomnych
  70. 70. !important EVERYTHING!!
  71. 71. • W functions.php używamy function_exists • Tworzymy dający się nadpisać kod CSS • Gdy użytkownik chce zmodyfikować nasz motyw, warto mu przypomnieć by zrobił to poprzez motyw potomny albo np. Custom CSS z JetPacka
  72. 72. • W functions.php używamy function_exists • Tworzymy dający się nadpisać kod CSS • Gdy użytkownik chce zmodyfikować nasz motyw, warto mu przypomnieć by zrobił to poprzez motyw potomny albo np. Custom CSS z JetPacka
  73. 73. • W functions.php używamy function_exists • Tworzymy dający się nadpisać kod CSS • Gdy użytkownik chce zmodyfikować nasz motyw, warto mu przypomnieć by zrobił to poprzez motyw potomny albo np. Custom CSS z JetPacka
  74. 74. <span style=“padding: 20px!important;”>
  75. 75. Porządek w plikach
  76. 76. 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, grafiki, fonty • Biblioteki JS i CSS warto od razu udostępnić w wersji zminifikowanej z *.min.* w nazwie • W wypadku pluginów warto dodawać na końcu nazwę frameworka jakiego używają np. *.jquery.js
  77. 77. 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, grafiki, fonty • Biblioteki JS i CSS warto od razu udostępnić w wersji zminifikowanej z *.min.* w nazwie • W wypadku pluginów warto dodawać na końcu nazwę frameworka jakiego używają np. *.jquery.js
  78. 78. 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, grafiki, fonty • Biblioteki JS i CSS warto od razu udostępnić w wersji zminifikowanej z *.min.* w nazwie • W wypadku pluginów warto dodawać na końcu nazwę frameworka jakiego używają np. *.jquery.js
  79. 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, grafiki, fonty • Biblioteki JS i CSS warto od razu udostępnić w wersji zminifikowanej z *.min.* w nazwie • W wypadku pluginów warto dodawać na końcu nazwę frameworka jakiego używają np. *.jquery.js
  80. 80. get_template_part
  81. 81. 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
  82. 82. 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
  83. 83. 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
  84. 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 • Pozwala łatwo nadpisać pliki w motywie potomnym
  85. 85. Czytelny kod CSS
  86. 86. LESS/SASS
  87. 87. 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 ;)
  88. 88. 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 ;)
  89. 89. 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 ;)
  90. 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 Grunt/Gulp jest niepotrzebny ;)
  91. 91. Korzystanie z dostępnych API
  92. 92. 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
  93. 93. 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
  94. 94. 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
  95. 95. A GDYBY TAK NAPISAĆ WŁASNĄ WERSJĘ THEME MODS API?
  96. 96. A GDYBY TAK NAPISAĆ WŁASNĄ WERSJĘ THEME MODS API?
  97. 97. Źródło: https://codex.wordpress.org/Theme_Modification_API
  98. 98. Myślenie o przyszłości
  99. 99. Wtyczki vs. Motywy
  100. 100. Wtyczki vs. Motywy • Custom Post Type jako plugin • Shortcodes jako plugin • Złożone widżety jako plugin
  101. 101. Wtyczki vs. Motywy • Custom Post Type jako plugin • Shortcodes jako plugin • Złożone widżety jako plugin
  102. 102. Wtyczki vs. Motywy • Custom Post Type jako plugin • Shortcodes jako plugin • Złożone widżety jako plugin
  103. 103. Brak URLi w opcjach motywu
  104. 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. 105. • 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
  106. 106. • 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
  107. 107. Na przyszłość: świadome wykorzystanie REST API
  108. 108. REST API otwiera przed nami nowe obszary wykorzystania motywów
  109. 109. • Zamiast znacząco modyfikować 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 prefiksować np. slug_category
  110. 110. • Zamiast znacząco modyfikować 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 prefiksować np. slug_category
  111. 111. Lead Developer @ @dziudek http://dziudek.pl http://dziudek.github.io/wp-links http://dziudek.github.io/dev-links Tomasz Dziuda
  112. 112. Pytania?

×