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 - WordUp Warszawa

287 views

Published on

Wersja z WordUp Warszawa #gdzietazima (18 listopada 2016)

Published in: Technology
  • Be the first to comment

Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa

  1. 1. Motywy dla WordPressa: Historia prawdziwa Tomasz Dziuda WordUp Warszawa 18. 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. 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 oczekujących na review Metoda:
  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. W sumie 54 pola na kolory ;-)
  43. 43. 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
  44. 44. "Błąd" w JavaScript, którzy robią prawie wszyscy Ja też go robiłem ;-) #wstydliwewyznania
  45. 45. $(document).ready(function() { //... }); Źródło: https://api.jquery.com/ready/
  46. 46. $(document).ready(function() { //... }); $(function() { //... }); Źródło: https://api.jquery.com/ready/
  47. 47. Tworzenie linków do serwisów społecznościowych
  48. 48. Metoda "na dużo opcji"
  49. 49. Metoda "Zrób to sam"
  50. 50. Metoda "na widżet"
  51. 51. Metoda "jedyna słuszna" ;-) Wykorzystać potencjał menadżera menu w WordPressie... ... i selektorów CSS3: a[href*="facebook.com"]
  52. 52. Stylowanie ekranu personalizacji
  53. 53. Problemy
  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. 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
  57. 57. Zapomniane function_exists w functions.php
  58. 58. if(!function_exists('xyz_function_name')) { function xyz_function_name() { // ... } }
  59. 59. if(!function_exists('xyz_function_name')) { function xyz_function_name() { // ... } } Nawet wbudowane motywy mają z tym problem
  60. 60. Dlaczego? Plik functions.php z motywu potomnego wczytywany jest PRZED plikiem functions.php z motywu-rodzica
  61. 61. Jak szybko sprawdzić czy nie zapomnieliśmy gdzieś o function_exists?
  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
  64. 64. 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 ;-)
  65. 65. Brak podstawowych optymalizacji
  66. 66. Nadmiarowe zapytania do serwera
  67. 67. Kiedy rozdzielanie plików JS ma sens?
  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. 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
  71. 71. 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');
  72. 72. Zapominanie o zaletach CDN Bootstrap Font Awesome html5 shiv Modernizr
  73. 73. Nie ufasz CDN?
  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. 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/
  77. 77. Drobiazgi warte uwagi
  78. 78. Używaj date_i18n zamiast date Więcej: https://codex.wordpress.org/Function_Reference/date_i18n
  79. 79. WordPress posiada funkcję santize_hex_color
  80. 80. WordPress posiada funkcję santize_hex_color i funkcję santize_hex_color_no_hash też ;-)
  81. 81. wp_enqueue_style('font-awesome', ... wp_enqueue_style('mytheme-fontawesome', ... Warto dbać o porządek w bibliotekach
  82. 82. Czasem trzeba powołać się na klauzulę sumienia
  83. 83. Inne ciekawe techniki autorów motywów
  84. 84. Robienie sobie z wolontariuszy działu QA
  85. 85. Po co używać Theme Check za każdym razem?
  86. 86. Wybiórcze nanoszenie poprawek
  87. 87. Podsumowanie
  88. 88. Przed wysłaniem motywu na oficjalne repozytorium:
  89. 89. 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
  90. 90. 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
  91. 91. 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
  92. 92. 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
  93. 93. 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
  94. 94. Pytania?
  95. 95. WWW: http://dziudek.pl E-mail: tomasz@dziuda.com Twitter: @dziudek

×