Embed Size (px)
Citation preview
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&col=id&col=summary&col=status&col=time&col=changetime&col=reporter&report=2&order=time
Przyczyna tej sytuacji
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
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
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
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ęciaDomena 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/
WideoDomena 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/
Fonty, skrypty, CSSMIT, 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, roczne)
Stronę załącznika
Stronę autora
Stronę aktywacji autora w Multisite ;)
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
Kilka spostrzeżeń
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
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
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
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
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_section('colors')->title = __('Custom Colors', 'xyz');
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ę zapytań o pomoc techniczną
Zbyt wiele opcji oznacza:
Utrudnione modyfikowanie wyglądu motywu
Dużą ilość kodu CSS w sekcji <head>
Zwiększoną liczbę zapytań o pomoc techniczną
Zbyt wiele opcji oznacza:
Utrudnione modyfikowanie wyglądu motywu
Dużą ilość kodu CSS w sekcji <head>
Zwiększoną liczbę zapytań o pomoc techniczną
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
"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.com"]
Stylowanie ekranu personalizacji
Problemy
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
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
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
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 problem
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 functions.php z naszego motywu
Jak szybko sprawdzić czy nie zapomnieliśmy gdzieś o function_exists?
Tworzymy motyw potomny
Dodajemy w nim kopię pliku functions.php z naszego motywu
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 ;-)
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 konkretnych podstronach
Duże pliki, których ładowanie jest opcjonalne
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
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
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');
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/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Do wygenerowania na: https://www.srihash.org/
Nie ufasz CDN?
Zastosuj SRI (SubResource Integrity):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Do wygenerowania na: https://www.srihash.org/
Nie ufasz CDN?
Zastosuj SRI (SubResource Integrity):
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Do wygenerowania na: https://www.srihash.org/
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 uszczęśliwiać użytkowników na siłę
Uczyć się od innych developerów
Regularnie odświeżać swoją wiedzę
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ę
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ę
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ę
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ę
Pytania?
