Jak tworzyć motywy przyjazne użytkownikom i programistom?

Jak tworzyć motywy przyjazne użytkownikom

i programistom?

Tomasz Dziuda

WordUp Toruń #3 09.10.2015

Jak bardzo złożony jest proces tworzenia motywu?

Ćwiczenie

• Zapoznaj się z wytycznymi oficjalnego repozytorium ( https://make.wordpress.org/themes/handbook/review/required/ )

• Zrób przegląd motywu kandydującego do repozytorium

Ćwiczenie

• Zapoznaj się z wytycznymi oficjalnego repozytorium ( https://make.wordpress.org/themes/handbook/review/required/ )

• Zrób przegląd motywu kandydującego do repozytorium

Warto zapamiętać

Warto zapamiętać• Stworzenie pierwszego motywu dla szerokiego

grona użytkowników nie jest wcale takie proste

• Kolejne motywy prawie zawsze bazują na fragmentach kodu poprzednich motywów

• Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego...

• ... lub skorzystać z frameworka takiego jak _s

Troska o użytkowników

Stopniowy rozwój motywu

• Lista testów każdego elementu strony stale się wydłuża (różne przeglądarki, responsywność, dostępność)

• Bardziej złożone motywy mają więcej kombinacji i zależności pomiędzy poszczególnymi komponentami

• Nie wiadomo czy motyw się przyjmie na rynku

• Twój motyw nie musi być od razu doskonały

Źródło: https://wordpress.org/themes/gk-portfolio/

“Mam wielu klientów, którzy nie są w stanie dostarczyć mi sensownej ilości treści na swoją stronę”

Powody zakupu motywu potrafią zaskoczyć

Kilka obserwacji dot. rynku motywów

• Najładniejsze motywy wcale nie sprzedają się najlepiej

• Wsparcie dla popularnych rozszerzeń typu WooCommerce jest bardzo pożądane

• Niszowe tematy przewodnie mogą okazać się dużym niewypałem

• Niszowe tematy motywów mogą okazać się dużym niewypałem

USE OF VISUAL COMPOSER

GAVE ME A CANCER

Wykorzystanie ekranu personalizacji motywu

Zalety

Zalety• Pozwala od razu zobaczyć efekty naniesionych

• Jego budowa wymusza tworzenie prostych paneli zarządzania motywami

• Wspomaga testowanie opcji na etapie budowy motywu

• Ten sam UI dla opcji wszystkich motywów

• Wymusza na nas zmianę pewnych koncepcji, zwłaszcza tych związanych z rozbudowanym UI

• Jest i będzie dość często zmieniany jego UI co czasem dokłada pracy np. przy animacjach

• Niektóre funkcje jak np. active_callback są mało intuicyjne dla początkujących użytkowników

Opcje must-have

Opcje must-have• Zmiana logo strony

• Zmiana tła strony

• Zmiana bazowych kolorów motywu

• Zmiana krojów pisma

• Zmiana stopki ;)

Plik editor-style.css

function my_theme_add_editor_styles() { add_editor_style( 'custom-editor-style.css' ); }

add_action( 'admin_init', 'my_theme_add_editor_styles' );

Warto przejrzeć: https://codex.wordpress.org/Editor_Style

Łatwa migracja konfiguracji widocznej na demo

Dedykowany instalator WordPressa

• Na ThemeForest / oficjalne repozytorium można umieścić tylko paczkę z motywem

• Użytkownik często ma już istniejącą stronę na której chce zmienić motyw

• Dużo hostingów posiada własne auto-instalatory WordPressa

WXR• Łatwa migracja postów i podstron

• Brak możliwości migracji widżetów

• Należy zadbać o domyślną konfigurację motywu (WXR jej nie przenosi)

• Najlepiej strukturę strony oprzeć na podstronach i umieścić w nich widżety w postaci shortcode'ów

Dedykowane rozwiązania

Dedykowane rozwiązania• Możliwość migracji dowolnych danych

• Należy uwzględnić fakt, że użytkownik może mieć własne treści na stronie

• Możliwość przeniesienia konfiguracji widżetów i motywu

• Częściowe przenosiny danych (np. konfiguracji widżetów bez treści demo) jest problematyczne

Elastyczne rozwiązania

Slideshow pokazujący wpisy z danego tagu

Źródło: https://codex.wordpress.org/Twenty_Fourteen Należy zadbać o to by można było zmienić nazwę tagu

wybieranego do slideshow

Zaawansowane wykorzystanie hierarchii szablonów w WordPressie

Zobacz: http://wphierarchy.com

• Mocno ryzykowne jest tworzenie plików typu category-slug.php

• Tak samo ciężko będzie stworzyć dedykowane podstrony dla konkretnych typów wpisów (gdy mają zmienne nazwy)

• Mocno ryzykowne jest tworzenie plików typu category-slug.php

• Tak samo ciężko będzie stworzyć dedykowane podstrony dla konkretnych typów wpisów (gdy mają zmienne nazwy)

Dokumentacja

• Przygotuj siebie (i swój support) na to, że mało kto ją przeczyta ;)

• Nastaw się, że trafisz na wielu klientów, którzy WordPressa widzą drugi raz na oczy

• Twórz kod, który nie wymaga zbyt wiele dodatkowych komentarzy

• Korzystaj w miarę możliwości z rozwiązań dostępnych w czystym WordPressie

• Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika

• Stopniowy rozwój motywu wspomaga tworzenie dokumentacji

Troska o programistów

Wsparcie dla motywów potomnych

!important EVERYTHING!!

• W functions.php używamy function_exists

• Tworzymy dający się nadpisać kod CSS

• Gdy użytkownik chce zmodyfikować nasz motyw, warto mu przypomnieć by zrobił to poprzez motyw potomny albo np. Custom CSS z JetPacka

Porządek w plikach

Porządek w plikach• Warto podzielić plik CSS na sekcje lub na kilka

plików (minifakcja i tak je połączy)

• Tworzymy katalogi na pliki CSS, JS, grafiki, fonty

• Biblioteki JS i CSS warto od razu udostępnić w wersji zminifikowanej z *.min.* w nazwie

• W wypadku pluginów warto dodawać na końcu nazwę frameworka jakiego używają np. *.jquery.js

get_template_part

• Reużycie istniejących fragmentów kodu

• Podzielenie dużych fragmentów kodu na mniejsze części

• get_template_part($slug, $name) wczyta plik {$slug}-{$name}.php

get_template_part

• Pozwala łatwo nadpisać pliki w motywie potomnym

Czytelny kod CSS

LESS/SASS

LESS/SASS• Zmienne pozwalają zmieniać szybko podstawowe

parametry strony

• Zagnieżdżone selektory wymuszają wręcz uporządkowanie struktury kodu

• Dobrze współpracują z BEM

• Wtyczka WP LESS sprawia, że Gulp jest niepotrzebny ;)

parametry strony

• Wtyczka WP LESS sprawia, że Grunt/Gulp jest niepotrzebny ;)

Korzystanie z dostępnych API

• Oszczędność naszego czasu

• Oszczędność czasu innych programistów (nie muszą się uczyć naszego rozwiązania)

• Bezpieczniejszy i lepiej przetestowany kod

A GDYBY TAK NAPISAĆ WŁASNĄ

WERSJĘ THEME MODS API?

A GDYBY TAK NAPISAĆ WŁASNĄ

WERSJĘ THEME MODS API?

Źródło: https://codex.wordpress.org/Theme_Modification_API

Myślenie o przyszłości

Wtyczki vs. Motywy

• Custom Post Type jako plugin

• Shortcodes jako plugin

• Złożone widżety jako plugin

Wtyczki vs. Motywy

Brak URLi w opcjach motywu

• WordPress serializuje opcje motywu i treść widżetów

• Serializacja uniemożliwia łatwą zmianę wartości

• Rozwiązanie: http://dziudek.pl/motywy/przechowywanie-nazwy-domeny-w-ustawieniach-motywu

• Jedno z rozwiązań: http://dziudek.pl/motywy/przechowywanie-nazwy-domeny-w-ustawieniach-motywu

Na przyszłość: świadome wykorzystanie REST API

REST API otwiera przed nami nowe obszary wykorzystania motywów

• Zamiast znacząco modyfikować standardowe odpowiedzi REST API lepiej stworzyć dedykowane end-pointy dla swojego motywu w odpowiedniej przestrzeni nazw np. slug_theme/v1

• Dodając pola do odpowiedzi REST API należy pamiętać by je odpowiednio prefiksować np. slug_category

• Zamiast znacząco modyfikować standardowe odpowiedzi REST API lepiej stworzyć dedykowane end-pointy dla swojego motywu w odpowiedniej przestrzeni nazw np. slug_theme/v1

• Dodając pola do odpowiedzi REST API należy pamiętać by je odpowiednio prefiksować np. slug_category

Lead Developer @

@dziudek

http://dziudek.pl

http://dziudek.github.io/wp-links

http://dziudek.github.io/dev-links

Tomasz Dziuda

Pytania?

Jak tworzyć motywy przyjazne użytkownikom i programistom?

Technology

Transcript of Jak tworzyć motywy przyjazne użytkownikom i programistom?