Embed Size (px)
Citation preview
Jak tworzyć motywy przyjazne użytkownikom
i programistom?
Tomasz Dziuda
WordUp Silesia 22.10.2015
Jak bardzo złożony jest proces tworzenia motywu?
Ćwiczenie
Ćwiczenie
1. Zapoznaj się z wytycznymi oficjalnego repozytorium
2. Zrób przegląd motywu kandydującego do repozytorium
Ćwiczenie
1. Zapoznaj się z wytycznymi oficjalnego repozytorium
2. 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
• Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego...
• ... lub skorzystać z rozwiązań takich jak _s
Warto zapamiętać
• Stworzenie pierwszego motywu dla szerokiego grona użytkowników nie jest wcale takie proste
• Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego...
• ... lub skorzystać z rozwiązań takich jak _s
Warto zapamiętać
• Stworzenie pierwszego motywu dla szerokiego grona użytkowników nie jest wcale takie proste
• Swoją przygodę z motywami warto zacząć od stworzenia motywu potomnego...
• ... lub skorzystać z rozwiązań takich jak _s
Warto zapamiętać
Warto zapamiętać
Warto zobaczyć jak robią to inni: https://wordpress.org/themes/search/child%20theme/
Warto zapamiętać
Warto zobaczyć jak robią to inni: https://wordpress.org/themes/search/child%20theme/
Doing it wrong theme:https://github.com/WPTRT/doingitwrong
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
• 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
• 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
• 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
Ilustracja stworzona przez Majo statt Senf Źródło: https://pl.wikipedia.org/wiki/Plik:Kaizen-2.svg
Kaizen
How to use Kaizen thinking to design better
“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
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
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
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 motywów mogą okazać się dużym niewypałem
USE OF VISUAL COMPOSER
GAVE ME A CANCER
Wykorzystanie ekranu personalizacji motywu
Zalety
Zalety
Podgląd zmian
+
Łatwiejsze testowane opcji
Zalety
Każdy motyw
posiada podobny UI
Zalety
Wymuszaprosty UI
Wady
Wady
Wymuszaprosty UI
Wady
WordPress >= 4.6 ??https://make.wordpress.org/core/2015/09/23/
outlining-a-possible-roadmap-for-the-customizer/
Wady
active_callback :(
Plik editor-style.css
Plik editor-style.cssfunction 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
Posty, podstrony
Widżety
Ustawienia motywu
ThemeForestWordPress.org
Istniejąca instalacja WP
Dedykowany instalator WP
Posty, podstrony TAK
Widżety TAK
Ustawienia motywu TAK
ThemeForestWordPress.org NIE
Istniejąca instalacja WP NIE
Dedykowany instalator WP WXR
Posty, podstrony TAK TAK
Widżety TAK NIE
Ustawienia motywu TAK
NIEdomyślna konfiguracja
motywu rozwiązuje problem
ThemeForestWordPress.org NIE TAK
Istniejąca instalacja WP NIE TAK
Dedykowany instalator WP WXR Własne
rozwiązanie
Posty, podstrony TAK TAK TAK
Widżety TAK NIE TAK
Ustawienia motywu TAK
NIEdomyślna konfiguracja
motywu rozwiązuje problemTAK
ThemeForestWordPress.org NIE TAK TAK
Istniejąca instalacja WP NIE TAK TAK
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
Zaawansowane wykorzystanie hierarchii szablonów w WordPressie
category-slug.php
author-5.php
single-photo.php
tag-featured.php
Zaawansowane wykorzystanie hierarchii szablonów w WordPressie
category-slug.php
author-5.php
single-photo.php
tag-featured.php
Dokumentacja
• Przygotuj się na to, że mało kto ją przeczyta ;)
• Klienci często WordPressa widzą drugi raz na oczy
• Stopniowy rozwój motywu wspomaga tworzenie dokumentacji
• Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
• Przygotuj się na to, że mało kto ją przeczyta ;)
• Klienci często WordPressa widzą drugi raz na oczy
• Stopniowy rozwój motywu wspomaga tworzenie dokumentacji
• Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
• Przygotuj się na to, że mało kto ją przeczyta ;)
• Klienci często WordPressa widzą drugi raz na oczy
• Stopniowy rozwój motywu wspomaga tworzenie dokumentacji
• Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
• Przygotuj się na to, że mało kto ją przeczyta ;)
• Klienci często WordPressa widzą drugi raz na oczy
• Stopniowy rozwój motywu wspomaga tworzenie dokumentacji
• Im mniej dodatkowych wtyczek tym lepiej dla Ciebie i Twojego użytkownika
Testowanie
• https://wordpress.org/plugins/theme-check/
• https://wordpress.org/plugins/theme-mentor/
• https://wordpress.org/plugins/monster-widget/
• https://codex.wordpress.org/Theme_Unit_Test
Niezbędnik
Troska o programistów
Wsparcie dla motywów potomnych
!important EVERYTHING!!
Pamiętaj o function_exists w pliku functions.php
Plik functions.php jako jedyny jest ładowany zarówno z motywu potomnego (jako pierwszy)
i z motywu rodzica (jako drugi).
if( function_exists( 'slug_myfunc' ) ) : function slug_myfunc() { return 'Kto nie czyta slajdów ten używa Joomla!'; } endif;
<span style=“padding: 20px!important;”>
Porządek w plikach
get_template_part
get_template_part
W przeciwieństwie do require() dobrze współpracuje z motywami potomnymi
get_template_part
get_template_part('loop', 'index');
get_template_part
1. motyw-potomny/loop-index.php 2. motyw-rodzic/loop-index.php 3. motyw-potomny/loop.php 4. motyw-rodzic/loop.php
get_template_part('loop', 'index');
get_template_partNagłówek wpisu
Treść wpisu
Informacje o wpisie
Ikony społecznościowe
Blok o autorze
get_template_partNagłówek wpisu
Treść wpisu
Informacje o wpisie
Ikony społecznościowe
Blok o autorze
content-info.php content-header.php content-social.php content-author.php
Czytelny kod CSS
BEM .block__element--modifier
.header {}
.header__logo {}
.header__logo--beta {}
.header__menu {}
.header__menu--mobile {}
.header {}
.header__logo {}
.header__logo--beta {}
.header__menu {}
.header__menu--mobile {}
.header {}
.header__logo {}
.header__logo--beta {}
.header__menu {}
.header__menu--mobile {}
1) normalize.css body html ...
2) html.css a h1 h2 h3 ul ol ...
3) elements.css .btn .link .field ...
4) components.css .header .content .footer ...
1) normalize.css body html ...
2) html.css a h1 h2 h3 ul ol ...
3) elements.css .btn .link .field ...
4) components.css .header .content .footer ...
1) normalize.css body html ...
2) html.css a h1 h2 h3 ul ol ...
3) elements.css .btn .link .field ...
4) components.css .header .content .footer ...
1) normalize.css body html ...
2) html.css a h1 h2 h3 ul ol ...
3) elements.css .btn .link .field ...
4) components.css .header .content .footer ...
BEM(+) Porządek w kodzie CSS(+) Wydajne selektory(+) Współpraca z LESS/SASS(+) Wymusza przemyślane tworzenie kodu CSS
(-) WordPress nie jest w pełni kompatybilny z BEM(-) Czasem wygodnie jest złamać reguły BEM(-) Może prowadzić do dużej liczby klas w elemencie
BEM(+) Porządek w kodzie CSS(+) Wydajne selektory(+) Współpraca z LESS/SASS(+) Wymusza przemyślane tworzenie kodu CSS
(-) WordPress nie jest w pełni kompatybilny z BEM(-) Czasem wygodnie jest złamać reguły BEM(-) Może prowadzić do dużej liczby klas w elemencie
LESS/SASS// Colors @primary_color: #a3a4a5; @secondary_color: #b4b7b9; @text_color: #777; // Visual @border_radius: 5px; // Spacing @basic_padding: 20px; @basic_margin: 10px;
LESS/SASS.header {
&__logo { width: 150px; }
&__menu { width: 50%
} }
.content { //...
}
LESS/SASS
Źródło: https://pl.wordpress.org/plugins/wp-less/
Korzystanie z dostępnych API
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
Lista API dostępnych w WordPressie
https://codex.wordpress.org/WordPress_APIs
Myślenie o przyszłości
Wtyczki vs. Motywy
Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin
Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin
Wtyczki vs. Motywy
• Custom Post Type jako plugin
• Shortcodes jako plugin
• Złożone widżety jako plugin
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
• 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
• WordPress serializuje opcje motywu i treść widżetów
• Serializacja uniemożliwia łatwą zmianę wartości
• Jedno z rozwiązań: http://dziudek.pl/motywy/przechowywanie-nazwy-domeny-w-ustawieniach-motywu
Moje prezentacje
http://www.slideshare.net/dziudek
TinyMCE Theme Customizer
Performance REST API ES2015
Lead Developer @
@dziudek
http://dziudek.pl
http://dziudek.github.io/wp-links
http://dziudek.github.io/dev-links
Tomasz Dziuda
Pytania?
