Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa

Motywy dla WordPressa: Historia prawdziwa

Tomasz Dziuda

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

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


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...

"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."

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/

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/

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

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




















To WordPress ma stronę załącznika?!

Źródło: https://wphierarchy.com/

Bad news: WordPress ma całkiem sporo podstron

https://wphierarchy.com/

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/

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


responsywnych





responsywnych





responsywnych




Zbędne zmienne

$config = andorra_get_options('andorra_theme_options');

$config['theme_color']

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 ;-)

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

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/

https://api.jquery.com/ready/

$(document).ready(function() { //... });

$(function() { //... });

Źródło: https://api.jquery.com/ready/

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




Problemy




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?


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?


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/

https://www.srihash.org/

Nie ufasz CDN?





Nie ufasz CDN?





Drobiazgi warte uwagi

Używaj date_i18n zamiast date

Więcej: https://codex.wordpress.org/Function_Reference/date_i18n

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_style('font-awesome', ...

wp_enqueue_style('mytheme-fontawesome', ...

Warto dbać o porządek w bibliotekach

Czasem trzeba powołać się na klauzulę sumienia

Inne ciekawe techniki autorów motywów

Robienie sobie z wolontariuszy działu QA

Po co używać Theme Check za każdym razem?

Wybiórcze nanoszenie poprawek

Podsumowanie

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

























Pytania?

WWW: http://dziudek.pl

E-mail: [email protected]

Twitter: @dziudek

http://dziudek.pl

mailto:[email protected]

Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa

Technology