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 Wordpressa Historia Prawdziwa

374 views

Published on

Na Contributor Day przed WordCampem w Gdyni przeprowadziłem review motywu na żywo dla uczestników, którzy również przeglądali motywy. Zauważyłem, że dla wszystkich było to interesujące doświadczenie i pokazywało wiele kwestii, które normalnie się pomija mówiąc jak przeglądać motywy.

Dlatego przejrzałem kod kilkudziesięciu motywów (nie mylić z pełnym review) z kilkuset czekających w kolejce do przejrzenia i wybrałem najciekawsze błędy developerów motywów, aby je omówić i zaproponować lepsze rozwiązania.

Dlaczego? Bo jedną z idei oprogramowania Open Source jest wspólna nauka (także ta na cudzych błędach).

Published in: Technology
  • Be the first to comment

Motywy Wordpressa Historia Prawdziwa

  1. 1. Motywy dla WordPressa: Historia prawdziwa Tomasz Dziuda WordUp Lublin 18. października 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. 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 Ale przede wszystkim...
  8. 8. "Ech, coraz więcej amatorów pcha się do zabawy. Mam nadzieję, że przejdzie ta nowelizacja ustawy 
 i tworzenie motywów dla WordPressa będzie można czynić tylko z licencją, bo serio niektórzy nie mają ani doświadczenia ani wyobraźni i na przykład pakują 5MB JS-a do motywu."
  9. 9. Przejrzałem kod 21 motywów Metodologia:
  10. 10. Przyjrzyjmy się błędom developerów...
  11. 11. Przyjrzyjmy się błędom developerów... ... i nauczmy się ich unikać
  12. 12. Panie kto by się tam przejmował licencjami?
  13. 13. Twórcy motywów nie rozumieją do końca idei GPL
  14. 14. 100% GPL istnieje na ThemeForest
  15. 15. Wszystkie dodatki do motywu powinny być na licencji zgodnej z GPL
  16. 16. 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/
  17. 17. 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/
  18. 18. Fonty, skrypty, CSS MIT, GPL, LGPL, ISC, Apache, SIL, WTFPL
  19. 19. Fun fact: Apache a GPL
  20. 20. Fun fact: Apache a GPL Licencja Apache nie jest zgodna z GPL v.2... ... ale jest zgodna z GPL v.3... ... choć tylko w jedną stronę ;-) https://www.apache.org/licenses/GPL-compatibility.html
  21. 21. Fun fact: Apache a GPL Licencja Apache nie jest zgodna z GPL v.2... ... ale jest zgodna z GPL v.3... ... choć tylko w jedną stronę ;-) https://www.apache.org/licenses/GPL-compatibility.html
  22. 22. Fun fact: Apache a GPL Licencja Apache nie jest zgodna z GPL v.2... ... ale jest zgodna z GPL v.3... ... choć tylko w jedną stronę ;-) https://www.apache.org/licenses/GPL-compatibility.html
  23. 23. Fun fact: Apache a GPL Licencja Apache nie jest zgodna z GPL v.2... ... ale jest zgodna z GPL v.3... ... choć tylko w jedną stronę ;-) https://www.apache.org/licenses/GPL-compatibility.html
  24. 24. To WordPress ma stronę załącznika?!
  25. 25. Źródło: https://wphierarchy.com/ Bad news: WordPress ma całkiem sporo podstron
  26. 26. 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 ;)
  27. 27. Natywne widżety?
  28. 28. Monster Widget prawdę Ci powie Źródło: https://pl.wordpress.org/plugins/monster-widget/
  29. 29. Responsywność to standard... ;-)
  30. 30. Zepsute nagłówki
  31. 31. ? Problem przewijania w poziomie
  32. 32. Niedostępne submenu
  33. 33. Kilka spostrzeżeń
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Zbędne zmienne
  39. 39. $config = andorra_get_options('andorra_theme_options'); $config['theme_color']
  40. 40. Nieumiejętne wykorzystanie ekranu personalizacji
  41. 41. 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');
  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. Czasem trzeba powołać się na klauzulę sumienia
  77. 77. Inne ciekawe techniki autorów motywów
  78. 78. Robienie sobie z wolontariuszy działu QA
  79. 79. Po co używać Theme Check za każdym razem?
  80. 80. Wybiórcze nanoszenie poprawek
  81. 81. Podsumowanie
  82. 82. Przed wysłaniem motywu na oficjalne repozytorium:
  83. 83. Przed wysłaniem motywu na oficjalne repozytorium: Daj komuś z zespołu kod do analizy Przetestuj motyw z użytkownikami WordPressa Wypracuj własną procedurę sprawdzania jakości Postaw na sukcesywne ulepszanie motywu Sprawdzaj motywy innych developerów
  84. 84. Przed wysłaniem motywu na oficjalne repozytorium: Daj komuś z zespołu kod do analizy Przetestuj motyw z użytkownikami WordPressa Wypracuj własną procedurę sprawdzania jakości Postaw na sukcesywne ulepszanie motywu Sprawdzaj motywy innych developerów
  85. 85. Przed wysłaniem motywu na oficjalne repozytorium: Daj komuś z zespołu kod do analizy Przetestuj motyw z użytkownikami WordPressa Wypracuj własną procedurę sprawdzania jakości Postaw na sukcesywne ulepszanie motywu Sprawdzaj motywy innych developerów
  86. 86. Przed wysłaniem motywu na oficjalne repozytorium: Daj komuś z zespołu kod do analizy Przetestuj motyw z użytkownikami WordPressa Wypracuj własną procedurę sprawdzania jakości Postaw na sukcesywne ulepszanie motywu Sprawdzaj motywy innych developerów
  87. 87. Przed wysłaniem motywu na oficjalne repozytorium: Daj komuś z zespołu kod do analizy Przetestuj motyw z użytkownikami WordPressa Wypracuj własną procedurę sprawdzania jakości Postaw na sukcesywne ulepszanie motywu Sprawdzaj motywy innych developerów
  88. 88. Pytania?
  89. 89. WWW: http://dziudek.pl E-mail: tomasz@dziuda.com Twitter: @dziudek

×