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.
Motywy dla WordPressa:
Historia prawdziwa
Tomasz Dziuda
WordUp Katowice 25. listopada 2016
#takbylo
Źródło: https://themes.trac.wordpress.org/query?priority=new+theme&priority=&status=new&keywords=!
~buddypress&co...
Przyczyna tej sytuacji
Przyczyna tej sytuacji
Przegląd motywu jest dość czasochłonny
Brakuje wolontariuszy
Twórcy motywów odkryli, że oficjalne re...
Przyczyna tej sytuacji
Przegląd motywu jest dość czasochłonny
Brakuje wolontariuszy
Twórcy motywów odkryli, że oficjalne re...
Przyczyna tej sytuacji
Przegląd motywu jest dość czasochłonny
Brakuje wolontariuszy
Twórcy motywów odkryli, że oficjalne re...
Przejrzałem kod 21 motywów
oczekujących na review
Metoda:
Przyjrzyjmy się błędom
developerów...
Przyjrzyjmy się błędom
developerów...
... i nauczmy się ich unikać
Panie kto by się tam przejmował
licencjami?
Twórcy motywów nie
rozumieją do końca idei GPL
100% GPL istnieje na
ThemeForest
Wszystkie dodatki do motywu powinny
być na licencji zgodnej z GPL
Zdjęcia
Domena publiczna lub licencja CC0
https://unsplash.com/
https://pixabay.com/en/
https://www.pexels.com/
http://www...
Wideo
Domena publiczna lub licencja CC0
http://www.wedistill.io/
https://videos.pexels.com/
https://vimeo.com/creativecomm...
Fonty, skrypty, CSS
MIT, GPL, LGPL, ISC, Apache, SIL, WTFPL
To WordPress ma stronę
załącznika?!
Źródło: https://wphierarchy.com/
Bad news: WordPress ma całkiem sporo podstron
Warto sprawdzić
Stronę wyszukiwarki (w tym dla frazy bez wyników)
Stronę błędu 404
Stronę archiwum (dzienne, miesięczne, r...
Natywne widżety?
Monster Widget prawdę Ci powie
Źródło: https://pl.wordpress.org/plugins/monster-widget/
Responsywność to
standard... ;-)
Zepsute nagłówki
?
Problem przewijania w poziomie
Niedostępne submenu
Emmet Re:view
http://re-view.emmet.io
Kilka spostrzeżeń
Kilka spostrzeżeń
• Menu to najczęściej popsuty element stron
responsywnych
• Największe problemy pojawiają się przy
przej...
Kilka spostrzeżeń
• Menu to najczęściej popsuty element stron
responsywnych
• Największe problemy pojawiają się przy
przej...
Kilka spostrzeżeń
• Menu to najczęściej popsuty element stron
responsywnych
• Największe problemy pojawiają się przy
przej...
Kilka spostrzeżeń
• Menu to najczęściej popsuty element stron
responsywnych
• Największe problemy pojawiają się przy
przej...
Zbędne zmienne
$theme_color = $andorra_theme_options['theme_color'];
$config['theme_color']
extract()
Nieumiejętne wykorzystanie
ekranu personalizacji
Nikt nie broni nam używać/usuwać
istniejących sekcji Ekranu Personalizacji
Ani modyfikować im nazw:
$wp_customize->get_sect...
W sumie 54 pola na kolory ;-)
Zbyt wiele opcji oznacza:
Zbyt wiele opcji oznacza:
Utrudnione modyfikowanie wyglądu motywu
Dużą ilość kodu CSS w sekcji <head>
Zwiększoną liczbę zap...
Zbyt wiele opcji oznacza:
Utrudnione modyfikowanie wyglądu motywu
Dużą ilość kodu CSS w sekcji <head>
Zwiększoną liczbę zap...
Zbyt wiele opcji oznacza:
Utrudnione modyfikowanie wyglądu motywu
Dużą ilość kodu CSS w sekcji <head>
Zwiększoną liczbę zap...
Motyw powinien używać 2-3
bazowych kolorów
Pozostałe kolory powinny być wyliczone na podstawie
bazowych kolorów
https://gi...
"Błąd" w JavaScript, którzy
robią prawie wszyscy
Ja też go robiłem ;-) #wstydliwewyznania
$(document).ready(function() {
//...
});
Źródło: https://api.jquery.com/ready/
$(document).ready(function() {
//...
});
$(function() {
//...
});
Źródło: https://api.jquery.com/ready/
Tworzenie linków do
serwisów społecznościowych
Metoda "na dużo opcji"
Metoda "Zrób to sam"
Metoda "na widżet"
Metoda "jedyna słuszna" ;-)
Wykorzystać potencjał menadżera menu w
WordPressie...
... i selektorów CSS3: a[href*="facebook...
Stylowanie ekranu
personalizacji
Problemy
Problemy
Użytkownik musi nauczyć się nowego UI
Z reguły nie jest wcale ładniej ani wygodniej
Aktualizacje WordPressa mogą ...
Problemy
Użytkownik musi nauczyć się nowego UI
Z reguły nie jest wcale ładniej ani wygodniej
Aktualizacje WordPressa mogą ...
Problemy
Użytkownik musi nauczyć się nowego UI
Z reguły nie jest wcale ładniej ani wygodniej
Aktualizacje WordPressa mogą ...
Zapomniane function_exists
w functions.php
if(!function_exists('xyz_function_name')) {
function xyz_function_name() {
// ...
}
}
if(!function_exists('xyz_function_name')) {
function xyz_function_name() {
// ...
}
}
Nawet wbudowane motywy mają z tym pr...
Dlaczego?
Plik functions.php z motywu potomnego
wczytywany jest PRZED plikiem
functions.php z motywu-rodzica
Jak szybko sprawdzić czy nie
zapomnieliśmy gdzieś o function_exists?
Jak szybko sprawdzić czy nie
zapomnieliśmy gdzieś o function_exists?
Tworzymy motyw potomny
Dodajemy w nim kopię pliku fun...
Jak szybko sprawdzić czy nie
zapomnieliśmy gdzieś o function_exists?
Tworzymy motyw potomny
Dodajemy w nim kopię pliku fun...
Jak szybko sprawdzić czy nie
zapomnieliśmy gdzieś o function_exists?
Tworzymy motyw potomny
Dodajemy w nim kopię pliku fun...
Brak podstawowych
optymalizacji
Nadmiarowe zapytania do serwera
Kiedy rozdzielanie plików JS
ma sens?
Kiedy rozdzielanie plików JS
ma sens?
Pliki, które będą nadpisane przez użytkownika
Pliki z funkcjami używanymi na konkret...
Kiedy rozdzielanie plików JS
ma sens?
Pliki, które będą nadpisane przez użytkownika
Pliki z funkcjami używanymi na konkret...
Kiedy rozdzielanie plików JS
ma sens?
Pliki, które będą nadpisane przez użytkownika
Pliki z funkcjami używanymi na konkret...
Wczytywanie
niepotrzebnych danych
wp_enqueue_style ('body-font', '//
fonts.googleapis.com/css?family='.
urlencode($options...
Zapominanie o zaletach CDN
Bootstrap
Font Awesome
html5 shiv
Modernizr
Nie ufasz CDN?
Nie ufasz CDN?
Zastosuj SRI (SubResource Integrity):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/boot...
Nie ufasz CDN?
Zastosuj SRI (SubResource Integrity):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/boot...
Nie ufasz CDN?
Zastosuj SRI (SubResource Integrity):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/boot...
Drobiazgi warte uwagi
Używaj
date_i18n zamiast date
Więcej: https://codex.wordpress.org/Function_Reference/date_i18n
WordPress posiada funkcję
santize_hex_color
WordPress posiada funkcję
santize_hex_color
i funkcję santize_hex_color_no_hash też ;-)
wp_enqueue_script('select2', ...
wp_enqueue_script('mytheme-select2', ...
Warto dbać o porządek w
bibliotekach
Czasem trzeba powołać
się na klauzulę sumienia
Podsumowanie
Tworząc motywy pamiętaj aby:
Tworząc motywy pamiętaj aby:
Wykorzystywać w pełni możliwości WordPressa
Tworzyć checklisty (testy/proces tworzenia)
Nie u...
Tworząc motywy pamiętaj aby:
Wykorzystywać w pełni możliwości WordPressa
Tworzyć checklisty (testy/proces tworzenia)
Nie u...
Tworząc motywy pamiętaj aby:
Wykorzystywać w pełni możliwości WordPressa
Tworzyć checklisty (testy/proces tworzenia)
Nie u...
Tworząc motywy pamiętaj aby:
Wykorzystywać w pełni możliwości WordPressa
Tworzyć checklisty (testy/proces tworzenia)
Nie u...
Tworząc motywy pamiętaj aby:
Wykorzystywać w pełni możliwości WordPressa
Tworzyć checklisty (testy/proces tworzenia)
Nie u...
Pytania?
WWW: http://dziudek.pl
E-mail: tomasz@dziuda.com
Twitter: @dziudek
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Upcoming SlideShare
Loading in …5
×

Motywy dla WordPressa - historia prawdziwa - WordUp Katowice

516 views

Published on

Moja prezentacja o motywach z Katowic

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Motywy dla WordPressa - historia prawdziwa - WordUp Katowice

  1. 1. Motywy dla WordPressa: Historia prawdziwa Tomasz Dziuda WordUp Katowice 25. listopada 2016
  2. 2. #takbylo Źródło: https://themes.trac.wordpress.org/query?priority=new+theme&priority=&status=new&keywords=! ~buddypress&col=id&col=summary&col=status&col=time&col=changetime&col=reporter&report=2&order=time
  3. 3. Przyczyna tej sytuacji
  4. 4. Przyczyna tej sytuacji Przegląd motywu jest dość czasochłonny Brakuje wolontariuszy Twórcy motywów odkryli, że oficjalne repozytorium to alternatywna droga dotarcia do potencjalnych klientów
  5. 5. Przyczyna tej sytuacji Przegląd motywu jest dość czasochłonny Brakuje wolontariuszy Twórcy motywów odkryli, że oficjalne repozytorium to alternatywna droga dotarcia do potencjalnych klientów
  6. 6. Przyczyna tej sytuacji Przegląd motywu jest dość czasochłonny Brakuje wolontariuszy Twórcy motywów odkryli, że oficjalne repozytorium to alternatywna droga dotarcia do potencjalnych klientów
  7. 7. Przejrzałem kod 21 motywów oczekujących na review Metoda:
  8. 8. Przyjrzyjmy się błędom developerów...
  9. 9. Przyjrzyjmy się błędom developerów... ... i nauczmy się ich unikać
  10. 10. Panie kto by się tam przejmował licencjami?
  11. 11. Twórcy motywów nie rozumieją do końca idei GPL
  12. 12. 100% GPL istnieje na ThemeForest
  13. 13. Wszystkie dodatki do motywu powinny być na licencji zgodnej z GPL
  14. 14. Zdjęcia Domena publiczna lub licencja CC0 https://unsplash.com/ https://pixabay.com/en/ https://www.pexels.com/ http://www.publicdomainpictures.net/ http://littlevisuals.co/ http://nos.twnsnd.co/
  15. 15. Wideo Domena publiczna lub licencja CC0 http://www.wedistill.io/ https://videos.pexels.com/ https://vimeo.com/creativecommons https://pixabay.com/en/videos/ http://www.coverr.co/
  16. 16. Fonty, skrypty, CSS MIT, GPL, LGPL, ISC, Apache, SIL, WTFPL
  17. 17. To WordPress ma stronę załącznika?!
  18. 18. Źródło: https://wphierarchy.com/ Bad news: WordPress ma całkiem sporo podstron
  19. 19. Warto sprawdzić Stronę wyszukiwarki (w tym dla frazy bez wyników) Stronę błędu 404 Stronę archiwum (dzienne, miesięczne, roczne) Stronę załącznika Stronę autora Stronę aktywacji autora w Multisite ;)
  20. 20. Natywne widżety?
  21. 21. Monster Widget prawdę Ci powie Źródło: https://pl.wordpress.org/plugins/monster-widget/
  22. 22. Responsywność to standard... ;-)
  23. 23. Zepsute nagłówki
  24. 24. ? Problem przewijania w poziomie
  25. 25. Niedostępne submenu
  26. 26. Emmet Re:view http://re-view.emmet.io
  27. 27. Kilka spostrzeżeń
  28. 28. Kilka spostrzeżeń • Menu to najczęściej popsuty element stron responsywnych • Największe problemy pojawiają się przy przejściu poniżej rozdzielczości tabletowych • Płynny layout nie zawsze ma sens • Należy pamiętać o dużych elementach w treści wpisów
  29. 29. Kilka spostrzeżeń • Menu to najczęściej popsuty element stron responsywnych • Największe problemy pojawiają się przy przejściu poniżej rozdzielczości tabletowych • Płynny layout nie zawsze ma sens • Należy pamiętać o dużych elementach w treści wpisów
  30. 30. Kilka spostrzeżeń • Menu to najczęściej popsuty element stron responsywnych • Największe problemy pojawiają się przy przejściu poniżej rozdzielczości tabletowych • Płynny layout nie zawsze ma sens • Należy pamiętać o dużych elementach w treści wpisów
  31. 31. Kilka spostrzeżeń • Menu to najczęściej popsuty element stron responsywnych • Największe problemy pojawiają się przy przejściu poniżej rozdzielczości tabletowych • Płynny layout nie zawsze ma sens • Należy pamiętać o dużych elementach w treści wpisów
  32. 32. Zbędne zmienne
  33. 33. $theme_color = $andorra_theme_options['theme_color']; $config['theme_color']
  34. 34. extract()
  35. 35. Nieumiejętne wykorzystanie ekranu personalizacji
  36. 36. Nikt nie broni nam używać/usuwać istniejących sekcji Ekranu Personalizacji Ani modyfikować im nazw: $wp_customize->get_section('colors')->title = __('Custom Colors', 'xyz');
  37. 37. W sumie 54 pola na kolory ;-)
  38. 38. Zbyt wiele opcji oznacza:
  39. 39. Zbyt wiele opcji oznacza: Utrudnione modyfikowanie wyglądu motywu Dużą ilość kodu CSS w sekcji <head> Zwiększoną liczbę zapytań o pomoc techniczną
  40. 40. Zbyt wiele opcji oznacza: Utrudnione modyfikowanie wyglądu motywu Dużą ilość kodu CSS w sekcji <head> Zwiększoną liczbę zapytań o pomoc techniczną
  41. 41. Zbyt wiele opcji oznacza: Utrudnione modyfikowanie wyglądu motywu Dużą ilość kodu CSS w sekcji <head> Zwiększoną liczbę zapytań o pomoc techniczną
  42. 42. Motyw powinien używać 2-3 bazowych kolorów Pozostałe kolory powinny być wyliczone na podstawie bazowych kolorów https://gist.github.com/stephenharris/5532899
  43. 43. "Błąd" w JavaScript, którzy robią prawie wszyscy Ja też go robiłem ;-) #wstydliwewyznania
  44. 44. $(document).ready(function() { //... }); Źródło: https://api.jquery.com/ready/
  45. 45. $(document).ready(function() { //... }); $(function() { //... }); Źródło: https://api.jquery.com/ready/
  46. 46. Tworzenie linków do serwisów społecznościowych
  47. 47. Metoda "na dużo opcji"
  48. 48. Metoda "Zrób to sam"
  49. 49. Metoda "na widżet"
  50. 50. Metoda "jedyna słuszna" ;-) Wykorzystać potencjał menadżera menu w WordPressie... ... i selektorów CSS3: a[href*="facebook.com"]
  51. 51. Stylowanie ekranu personalizacji
  52. 52. Problemy
  53. 53. Problemy Użytkownik musi nauczyć się nowego UI Z reguły nie jest wcale ładniej ani wygodniej Aktualizacje WordPressa mogą powodować problemy z istniejącym stylowaniem
  54. 54. Problemy Użytkownik musi nauczyć się nowego UI Z reguły nie jest wcale ładniej ani wygodniej Aktualizacje WordPressa mogą powodować problemy z istniejącym stylowaniem
  55. 55. Problemy Użytkownik musi nauczyć się nowego UI Z reguły nie jest wcale ładniej ani wygodniej Aktualizacje WordPressa mogą powodować problemy z istniejącym stylowaniem
  56. 56. Zapomniane function_exists w functions.php
  57. 57. if(!function_exists('xyz_function_name')) { function xyz_function_name() { // ... } }
  58. 58. if(!function_exists('xyz_function_name')) { function xyz_function_name() { // ... } } Nawet wbudowane motywy mają z tym problem
  59. 59. Dlaczego? Plik functions.php z motywu potomnego wczytywany jest PRZED plikiem functions.php z motywu-rodzica
  60. 60. Jak szybko sprawdzić czy nie zapomnieliśmy gdzieś o function_exists?
  61. 61. Jak szybko sprawdzić czy nie zapomnieliśmy gdzieś o function_exists? Tworzymy motyw potomny Dodajemy w nim kopię pliku functions.php z naszego motywu
  62. 62. Jak szybko sprawdzić czy nie zapomnieliśmy gdzieś o function_exists? Tworzymy motyw potomny Dodajemy w nim kopię pliku functions.php z naszego motywu
  63. 63. Jak szybko sprawdzić czy nie zapomnieliśmy gdzieś o function_exists? Tworzymy motyw potomny Dodajemy w nim kopię pliku functions.php z naszego motywu Usuwamy błędy do skutku ;-)
  64. 64. Brak podstawowych optymalizacji
  65. 65. Nadmiarowe zapytania do serwera
  66. 66. Kiedy rozdzielanie plików JS ma sens?
  67. 67. Kiedy rozdzielanie plików JS ma sens? Pliki, które będą nadpisane przez użytkownika Pliki z funkcjami używanymi na konkretnych podstronach Duże pliki, których ładowanie jest opcjonalne
  68. 68. Kiedy rozdzielanie plików JS ma sens? Pliki, które będą nadpisane przez użytkownika Pliki z funkcjami używanymi na konkretnych podstronach Duże pliki, których ładowanie jest opcjonalne
  69. 69. Kiedy rozdzielanie plików JS ma sens? Pliki, które będą nadpisane przez użytkownika Pliki z funkcjami używanymi na konkretnych podstronach Duże pliki, których ładowanie jest opcjonalne
  70. 70. Wczytywanie niepotrzebnych danych wp_enqueue_style ('body-font', '// fonts.googleapis.com/css?family='. urlencode($options['google_font_body']) .': 400,400italic,700,700italic&subset=latin,greek- ext,cyrillic,latin-ext,greek,cyrillic- ext,vietnamese');
  71. 71. Zapominanie o zaletach CDN Bootstrap Font Awesome html5 shiv Modernizr
  72. 72. Nie ufasz CDN?
  73. 73. Nie ufasz CDN? Zastosuj SRI (SubResource Integrity): <script src="https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7/js/bootstrap.min.js" integrity="sha384- Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wG NIcPD7Txa" crossorigin="anonymous"></script> Do wygenerowania na: https://www.srihash.org/
  74. 74. Nie ufasz CDN? Zastosuj SRI (SubResource Integrity): <script src="https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7/js/bootstrap.min.js" integrity="sha384- Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wG NIcPD7Txa" crossorigin="anonymous"></script> Do wygenerowania na: https://www.srihash.org/
  75. 75. Nie ufasz CDN? Zastosuj SRI (SubResource Integrity): <script src="https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7/js/bootstrap.min.js" integrity="sha384- Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wG NIcPD7Txa" crossorigin="anonymous"></script> Do wygenerowania na: https://www.srihash.org/
  76. 76. Drobiazgi warte uwagi
  77. 77. Używaj date_i18n zamiast date Więcej: https://codex.wordpress.org/Function_Reference/date_i18n
  78. 78. WordPress posiada funkcję santize_hex_color
  79. 79. WordPress posiada funkcję santize_hex_color i funkcję santize_hex_color_no_hash też ;-)
  80. 80. wp_enqueue_script('select2', ... wp_enqueue_script('mytheme-select2', ... Warto dbać o porządek w bibliotekach
  81. 81. Czasem trzeba powołać się na klauzulę sumienia
  82. 82. Podsumowanie
  83. 83. Tworząc motywy pamiętaj aby:
  84. 84. Tworząc motywy pamiętaj aby: Wykorzystywać w pełni możliwości WordPressa Tworzyć checklisty (testy/proces tworzenia) Nie uszczęśliwiać użytkowników na siłę Uczyć się od innych developerów Regularnie odświeżać swoją wiedzę
  85. 85. Tworząc motywy pamiętaj aby: Wykorzystywać w pełni możliwości WordPressa Tworzyć checklisty (testy/proces tworzenia) Nie uszczęśliwiać użytkowników na siłę Uczyć się od innych developerów Regularnie odświeżać swoją wiedzę
  86. 86. Tworząc motywy pamiętaj aby: Wykorzystywać w pełni możliwości WordPressa Tworzyć checklisty (testy/proces tworzenia) Nie uszczęśliwiać użytkowników na siłę Uczyć się od innych developerów Regularnie odświeżać swoją wiedzę
  87. 87. Tworząc motywy pamiętaj aby: Wykorzystywać w pełni możliwości WordPressa Tworzyć checklisty (testy/proces tworzenia) Nie uszczęśliwiać użytkowników na siłę Uczyć się od innych developerów Regularnie odświeżać swoją wiedzę
  88. 88. Tworząc motywy pamiętaj aby: Wykorzystywać w pełni możliwości WordPressa Tworzyć checklisty (testy/proces tworzenia) Nie uszczęśliwiać użytkowników na siłę Uczyć się od innych developerów Regularnie odświeżać swoją wiedzę
  89. 89. Pytania?
  90. 90. WWW: http://dziudek.pl E-mail: tomasz@dziuda.com Twitter: @dziudek

×