Jak tworzyć motywy przyjazne użytkownikom

i programistom?

Tomasz Dziuda

WordUp Gdynia 14.11.2015

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

Ćwiczenie

Ćwiczenie

1. Zapoznaj się z wytycznymi oficjalnego repozytoriumhttps://make.wordpress.org/themes/handbook/review/

2. Zrób przegląd motywu kandydującego do repozytoriumhttps://make.wordpress.org/themes/handbook/get-involved/become-a-reviewer/

Ćwiczenie

1. Zapoznaj się z wytycznymi oficjalnego repozytoriumhttps://make.wordpress.org/themes/handbook/review/

2. Zrób przegląd motywu kandydującego do repozytoriumhttps://make.wordpress.org/themes/handbook/get-involved/become-a-reviewer/

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

?

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

Ź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

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

Źródło: http://tgmpluginactivation.com/

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

Źródło: http://wptest.io/

Źródło: http://www.wpfill.me/

Źródło: http://www.browsersync.io/

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?