1. SAGE 9W praktyce

2. Ben Word
February 7, 2018
“Just like Bootstrap 4’s recent final release 🎉,
Sage 9 is finally out of beta after years of
development!”

3. WYMAGANIA
• WordPress >= 4.7
• PHP >= 7.1.3 (z włączonym php-mbstring)
• Composer
• Node.js >= 6.9.x
• Yarn

4. NIE DLA KAŻDEGO

5. NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania

6. NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania
• Używa blade jako template engine

7. NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania
• Używa blade jako template engine
• Używa psr-2 jako standard kodowania

8. NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania
• Używa blade jako template engine
• Używa psr-2 jako standard kodowania
• Nie nadaje się do wgrania do repozytorium
wordpress.org

9. NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania
• Używa blade jako template engine
• Używa psr-2 jako standard kodowania
• Nie nadaje się do wgrania do repozytorium
wordpress.org
• Sage nie nadaje się na twój pierwszy motyw

10. INSTALACJA
composer create-project roots/sage wordup-trojmiasto

11. INSTALACJA
composer create-project roots/sage wordup-trojmiasto
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto

12. INSTALACJA
composer create-project roots/sage wordup-trojmiasto
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto
Theme URI [https://roots.io/sage/]:
> https://www.wptrojmiasto.pl/

13. INSTALACJA
composer create-project roots/sage wordup-trojmiasto
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto
Theme URI [https://roots.io/sage/]:
> https://www.wptrojmiasto.pl/
Theme Description [Sage is a WordPress starter theme.]:
> Prelekcja WordUp Trójmiasto 2018

14. INSTALACJA
composer create-project roots/sage wordup-trojmiasto
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto
Theme URI [https://roots.io/sage/]:
> https://www.wptrojmiasto.pl/
Theme Description [Sage is a WordPress starter theme.]:
> Prelekcja WordUp Trójmiasto 2018
Theme Version [9.0.0]:
> 0.1.0

15. INSTALACJA
composer create-project roots/sage wordup-trojmiasto
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto
Theme URI [https://roots.io/sage/]:
> https://www.wptrojmiasto.pl/
Theme Description [Sage is a WordPress starter theme.]:
> Prelekcja WordUp Trójmiasto 2018
Theme Version [9.0.0]:
> 0.1.0
Theme Author [Roots]:
> Dawid Urbański

16. INSTALACJA
composer create-project roots/sage wordup-trojmiasto
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto
Theme URI [https://roots.io/sage/]:
> https://www.wptrojmiasto.pl/
Theme Description [Sage is a WordPress starter theme.]:
> Prelekcja WordUp Trójmiasto 2018
Theme Version [9.0.0]:
> 0.1.0
Theme Author [Roots]:
> Dawid Urbański
Theme Author URI [https://roots.io/]:
> https://insanelab.com

17. INSTALACJA CZ. 2
Local development URL of WP site [http://example.test]:
> http://wordup.localhost

18. INSTALACJA CZ. 2
Local development URL of WP site [http://example.test]:
> http://wordup.localhost
Path to theme directory (e.g., /wp-content/themes/wordup-
trojmiasto) [/app/themes/sage]:
> /wp-content/themes/wordup-trojmiasto

19. INSTALACJA CZ. 2
Local development URL of WP site [http://example.test]:
> http://wordup.localhost
Path to theme directory (e.g., /wp-content/themes/wordup-
trojmiasto) [/app/themes/sage]:
> /wp-content/themes/wordup-trojmiasto
Which framework would you like to load? [Bootstrap]:
[0] None
[1] Bootstrap
[2] Bulma
[3] Foundation
[4] Tachyons
> 0

20. INSTALACJA CZ. 2
Local development URL of WP site [http://example.test]:
> http://wordup.localhost
Path to theme directory (e.g., /wp-content/themes/wordup-
trojmiasto) [/app/themes/sage]:
> /wp-content/themes/wordup-trojmiasto
Which framework would you like to load? [Bootstrap]:
[0] None
[1] Bootstrap
[2] Bulma
[3] Foundation
[4] Tachyons
> 0
Do you want to install Font Awesome? (yes/no) [no]:
> no

21. INSTALACJA CZ. 3
Are you sure you want to overwrite the following files?
- styles/common/_variables.scss
- styles/components/_comments.scss
- styles/components/_forms.scss
- styles/components/_wp-classes.scss
- styles/layouts/_header.scss
(yes/no) [no]:
> yes

22. INSTALACJA CZ. 3
Are you sure you want to overwrite the following files?
- styles/common/_variables.scss
- styles/components/_comments.scss
- styles/components/_forms.scss
- styles/components/_wp-classes.scss
- styles/layouts/_header.scss
(yes/no) [no]:
> yes
Done.
Please run `yarn && yarn build` to compile your fresh
scaffolding.

23. INSTALACJA CZ. 3
Are you sure you want to overwrite the following files?
- styles/common/_variables.scss
- styles/components/_comments.scss
- styles/components/_forms.scss
- styles/components/_wp-classes.scss
- styles/layouts/_header.scss
(yes/no) [no]:
> yes
Done.
Please run `yarn && yarn build` to compile your fresh
scaffolding.
cd wordup-trojmiasto
yarn && yarn build

24. BLADE

25. BLADE
@php(the_post()) <?php the_post(); ?>

26. BLADE
@php(the_post())
{{ get_the_title() }}
<?php the_post(); ?>
<?php echo
htmlentities( get_the_title() );
?>
<?php the_title(); ?>

27. BLADE
@php(the_post())
{{ get_the_title() }}
{!! get_sub_field() !!}
{!! the_sub_field() !!}
<?php the_post(); ?>
<?php echo
htmlentities( get_the_title() );
?>
<?php the_title(); ?>
<?php echo get_sub_field(); ?>
<?php the_sub_field(); ?>

28. BLADE
@php(the_post())
{{ get_the_title() }}
{!! get_sub_field() !!}
{!! the_sub_field() !!}
{{--
Template Name: Custom
--}}
<?php the_post(); ?>
<?php echo
htmlentities( get_the_title() );
?>
<?php the_title(); ?>
<?php echo get_sub_field(); ?>
<?php the_sub_field(); ?>
/**
* Template Name: Custom
*/

29. BLADE
@php(the_post())
{{ get_the_title() }}
{!! get_sub_field() !!}
{!! the_sub_field() !!}
{{--
Template Name: Custom
--}}
<?php the_post(); ?>
<?php echo
htmlentities( get_the_title() );
?>
<?php the_title(); ?>
<?php echo get_sub_field(); ?>
<?php the_sub_field(); ?>
/**
* Template Name: Custom
*/
@include(‘partials.content’);
@includeIf(‘partials.content.’.get_post_type());

30. BLADE CZ. 2
{{ get_the_title() }} != the_title();

31. BLADE CZ. 2
{{ get_the_title() }} != the_title();
{{ apply_filters(‘the_title’, get_the_title()) }}
@php(the_title())

32. BLADE CZ. 2
{{ get_the_title() }} != the_title();
{{ apply_filters(‘the_title’, get_the_title()) }}
@php(the_title())
{{ esc_attr(get_sub_field(‘class’)) }}
{{ esc_url(get_sub_field(‘link’)) }}

33. BLADE CZ. 2
{{ get_the_title() }} != the_title();
{{ apply_filters(‘the_title’, get_the_title()) }}
@php(the_title())
{{ esc_attr(get_sub_field(‘class’)) }}
{{ esc_url(get_sub_field(‘link’)) }}
{{ esc_html__(‘Hi WordUp!’, ‘sage’) }}
{{ esc_html_e(‘Hi WordUp!’, ‘sage’) }}

34. BLADE CZ. 2
{{ get_the_title() }} != the_title();
{{ apply_filters(‘the_title’, get_the_title()) }}
@php(the_title())
{{ esc_attr(get_sub_field(‘class’)) }}
{{ esc_url(get_sub_field(‘link’)) }}
{{ esc_html__(‘Hi WordUp!’, ‘sage’) }}
{{ esc_html_e(‘Hi WordUp!’, ‘sage’) }}
@if (have_posts())
@endif
@while (have_posts())
@endwhile
@foreach ($iterable as $value)
@endforeach

35. STRUKTURA
• Brak pliku style.css w głównym katalogu
motywu
• Brak pliku functions.php w głównym
katalogu motywu
• Brak plików poszczególnych szablonów
w głównym katalogu motywu
(index.php, page.php, 404.php etc)
• Wszystkie zasoby zostały przeniesione
do folderu resources

36. ├── app/ # → Kod PHP motywu (bez widoków)
│ ├── controllers/ # → Kontrolery
│ ├── admin.php # → Kod związany z częścią administracyjną
│ ├── filters.php # → Najróżniejsze filtry
│ ├── helpers.php # → Funkcje pomocnicze
│ └── setup.php # → Ustawienia motywu
├── config/ # → Konfiguracja
├── composer.json # → Autoloader dla foldeu `app/`
├── dist/ # → Pliki wynikowe po zbudowaniu motywu
├── node_modules/ # → Paczki Node.js
├── package.json # → Node.js konfiguracja
├── resources/ # → Assety i szablony
│ ├── assets/ # → Assety
│ │ ├── config.json # → Ustawienia do kompilowania plików
│ │ ├── build/ # → Konfiguracja Webpacka I ESLint
│ │ ├── fonts/ # → Fonty
│ │ ├── images/ # → Obrazy
│ │ ├── scripts/ # → JavaScript
│ │ └── styles/ # → Style
│ ├── functions.php # → Rózne niezbędne funkcje
│ ├── index.php # → Nie dotykać
│ ├── screenshot.png # → Obraz motywu
│ ├── style.css # → Informacje o motywie
│ └── views/ # → Szablony strony
│ ├── layouts/ # → Szablony bazowe
│ └── partials/ # → Partials
└── vendor/ # → Paczki composera

37. HIERARCHIA
TEMPLATEK
Cała hierarchia szablonów jest odzwierciedlona w
templatkach blade. Np. wszystkie poniższe szablony
działają jak w normalnym motywie:
index.blade.php
front-page.blade.php
page.blade.php
page-pricing.blade.php
archive.blade.php
archive-testimonial.blade.php
category.php
itd..

38. DEVELOPMENT
•yarn run start

39. DEVELOPMENT
•yarn run start
[BS] [HTML Injector] Running…
[Browsersync] Proxying: http://wordup.localhost
[Browsersync] Access URLs:
———————————————————
Local: http://localhost:3000
External: http://192.168.0.110:3000
———————————————————
UI: http://localhost:3001
UI External: http://192.168.0.110:3001
———————————————————
[Browsersync] Watching files…
•

40. DEVELOPMENT
•yarn run start
[BS] [HTML Injector] Running…
[Browsersync] Proxying: http://wordup.localhost
[Browsersync] Access URLs:
———————————————————
Local: http://localhost:3000
External: http://192.168.0.110:3000
———————————————————
UI: http://localhost:3001
UI External: http://192.168.0.110:3001
———————————————————
[Browsersync] Watching files…
•yarn run build

41. DEVELOPMENT
•yarn run start
[BS] [HTML Injector] Running…
[Browsersync] Proxying: http://wordup.localhost
[Browsersync] Access URLs:
———————————————————
Local: http://localhost:3000
External: http://192.168.0.110:3000
———————————————————
UI: http://localhost:3001
UI External: http://192.168.0.110:3001
———————————————————
[Browsersync] Watching files…
•yarn run build
•yarn run build:production

42. DEVELOPMENT
•yarn run build:production

43. DEVELOPMENT
•yarn run build:production
DONE Compiled successfully in 579ms 7:32:04
Asset Size Chunks Chunk Names
scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main
scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer
styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main
images/logo-icon_ffccbda7.png 691 bytes [emitted]
assets.json 220 bytes [emitted]
✨ Done in 2.74s.

44. DEVELOPMENT
•yarn run build:production
DONE Compiled successfully in 579ms 7:32:04
Asset Size Chunks Chunk Names
scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main
scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer
styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main
images/logo-icon_ffccbda7.png 691 bytes [emitted]
assets.json 220 bytes [emitted]
✨ Done in 2.74s.
<img src=“@asset(‘images/logo-icon.png’)”>

45. DEVELOPMENT
•yarn run build:production
DONE Compiled successfully in 579ms 7:32:04
Asset Size Chunks Chunk Names
scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main
scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer
styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main
images/logo-icon_ffccbda7.png 691 bytes [emitted]
assets.json 220 bytes [emitted]
✨ Done in 2.74s.
<img src=“@asset(‘images/logo-icon.png’)”>
background-image(../images/logo-icon.png);

46. DEVELOPMENT
•yarn run build:production
DONE Compiled successfully in 579ms 7:32:04
Asset Size Chunks Chunk Names
scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main
scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer
styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main
images/logo-icon_ffccbda7.png 691 bytes [emitted]
assets.json 220 bytes [emitted]
✨ Done in 2.74s.
<img src=“@asset(‘images/logo-icon.png’)”>
background-image(../images/logo-icon.png);
asset_path(‘images/logo-icon.png’)

47. DEVELOPMENT
•yarn run build:production
DONE Compiled successfully in 579ms 7:32:04
Asset Size Chunks Chunk Names
scripts/main_aee9b2d6.js 1.69 kB 0 [emitted] main
scripts/customizer_aee9b2d6.js 764 bytes 1 [emitted] customizer
styles/main_aee9b2d6.css 3.14 kB 0 [emitted] main
images/logo-icon_ffccbda7.png 691 bytes [emitted]
assets.json 220 bytes [emitted]
✨ Done in 2.74s.
<img src=“@asset(‘images/logo-icon.png’)”>
background-image(../images/logo-icon.png);
asset_path(‘images/logo-icon.png’)
wp_localize_script('sage/main.js', 'info', [
'assets' => [
‘logo_icon' => asset_path(‘images/logo-icon.png’),
],
]);
(JS) info.assets.logo_icon

48. ACF PRO
• Wszystkie strony od headera (lub hero pod headerem
jeśli istnieje) do footera są zbudowane z elementów
flexible content. (nie dotyczy stron archiwów, bloga itp)
• Templatki w loopie flexible content są ładowane na
podstawie nazwy layoutu z FC. ( get_row_layout() )
• Można zmieniać kolejność elementów.
• Można dodawać najróżniejsze opcje do elementów.
• Header I footer są edytowane z customizera

49. NAZEWNICTWO
Każdy blok flexible content jest opatrzony klasą z jego
nazwą ( get_row_layout() )
Każdy layout posiada swój własny plik .scss w
/assets/styles/acf/_{{ get_row_layout() }}.scss
Dzięki temu otrzymujemy (np. dla layoutu text-with-image):
/views/patials/acf/text-with-image.blade.php
/assets/styles/acf/_text-with-image.scss
.text-with-image {
// tutaj stylujemy ten blok
}

50. BLOKI PREDEFINIOWANE
• Możliwość dodania bloków które potem będą użyte jako
referencja w wielu miejscach na całej stronie. Edycja
bloku powoduje zmiany w każdym odwołaniu do bloku.
• Szczególnie przydane przy różnych elementach typu
Call to Action, lub elementach gdzie jest dużo
wprowadzania, aby uniknąć powtarzającej się pracy
przy wprowadzaniu treści.
• Można zagnieżdżać bloki predefiniowane

51. ZARZĄDZANIE
SZABLONAMI

52. ZARZĄDZANIE
SZABLONAMI
Użycie flexible content jako podstawowego
budulca całej treści strony, eliminuje problem
z nadmierną ilością templatek.

53. ZARZĄDZANIE
SZABLONAMI
Użycie flexible content jako podstawowego
budulca całej treści strony, eliminuje problem
z nadmierną ilością templatek.
Dzięki temu szablony mogą spełniać swoją
oryginalną funkcję, czyli pozostać
reużywalnymi w wielu stronach.

54. PYTANIA?

55. DAWID URBAŃSKI
dawid.urbanski@insanelab.com