WordUp Trójmiasto - Sage 9 w praktyce

SAGE 9W praktyce
Ben Word
February 7, 2018
“Just like Bootstrap 4’s recent final release 🎉,
Sage 9 is finally out of beta after years of
development!”
WYMAGANIA
• WordPress >= 4.7
• PHP >= 7.1.3 (z włączonym php-mbstring)
• Composer
• Node.js >= 6.9.x
• Yarn
NIE DLA KAŻDEGO
NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania
NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania
• Używa blade jako template engine
NIE DLA KAŻDEGO
• Serwer musi spełniać wymagania
• Używa blade jako template engine
• Używa psr-2 jako standard kodowania
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
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
INSTALACJA
composer create-project roots/sage wordup-trojmiasto
INSTALACJA
composer create-project roots/sage wordup-trojmiasto
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto
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/
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
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
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
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
INSTALACJA CZ. 2
Local development URL of WP site [http://example.test]:
> http://wordup.localhost
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
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
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
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
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.
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
BLADE
BLADE
@php(the_post()) <?php the_post(); ?>
BLADE
@php(the_post())
{{ get_the_title() }}
<?php the_post(); ?>
<?php echo
htmlentities( get_the_title() );
?>
<?php the_title(); ?>
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(); ?>
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
*/
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());
BLADE CZ. 2
{{ get_the_title() }} != the_title();
BLADE CZ. 2
{{ get_the_title() }} != the_title();
{{ apply_filters(‘the_title’, get_the_title()) }}
@php(the_title())
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’)) }}
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’) }}
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
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
├── 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
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..
DEVELOPMENT
•yarn run start
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…
•
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
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
DEVELOPMENT
•yarn run build:production
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.
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’)”>
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);
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’)
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
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
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

}
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
ZARZĄDZANIE
SZABLONAMI
ZARZĄDZANIE
SZABLONAMI
Użycie flexible content jako podstawowego
budulca całej treści strony, eliminuje problem
z nadmierną ilością templatek.
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.
PYTANIA?
DAWID URBAŃSKI
dawid.urbanski@insanelab.com
1 of 55

Recommended

Wprowadzenie do WP-API by
Wprowadzenie do WP-APIWprowadzenie do WP-API
Wprowadzenie do WP-APITomasz Dziuda
5.6K views143 slides
WP-API - teoria i praktyka - WordUp Łódź #4 by
WP-API - teoria i praktyka - WordUp Łódź #4WP-API - teoria i praktyka - WordUp Łódź #4
WP-API - teoria i praktyka - WordUp Łódź #4Tomasz Dziuda
916 views164 slides
Motywy dla WordPressa - historia prawdziwa - WordUp Warszawa by
Motywy dla WordPressa - historia prawdziwa - WordUp WarszawaMotywy dla WordPressa - historia prawdziwa - WordUp Warszawa
Motywy dla WordPressa - historia prawdziwa - WordUp WarszawaTomasz Dziuda
402 views106 slides
Word up łódź kwiecień 2015 by
Word up łódź   kwiecień 2015Word up łódź   kwiecień 2015
Word up łódź kwiecień 2015Tomasz Dziuda
2.4K views97 slides
Motywy Wordpressa Historia Prawdziwa by
Motywy Wordpressa Historia PrawdziwaMotywy Wordpressa Historia Prawdziwa
Motywy Wordpressa Historia PrawdziwaTomasz Dziuda
493 views101 slides
Word up warszawa 2015 by
Word up warszawa 2015Word up warszawa 2015
Word up warszawa 2015Tomasz Dziuda
3.8K views76 slides

More Related Content

What's hot

Statycznie czy dynamicznie? by
Statycznie czy dynamicznie?Statycznie czy dynamicznie?
Statycznie czy dynamicznie?Tomasz Dziuda
1.6K views67 slides
Potęga pliku .htaccess by
Potęga pliku .htaccessPotęga pliku .htaccess
Potęga pliku .htaccessWojciech Klocek
1.1K views32 slides
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice by
Motywy dla WordPressa - historia prawdziwa - WordUp KatowiceMotywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp KatowiceTomasz Dziuda
652 views99 slides
Electron + WordPress = ❤ by
Electron + WordPress = ❤Electron + WordPress = ❤
Electron + WordPress = ❤Tomasz Dziuda
5.7K views117 slides
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia by
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp SilesiaJak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp SilesiaTomasz Dziuda
752 views105 slides
REST API - teoria i praktyka - WordUp Trójmiasto by
REST API - teoria i praktyka - WordUp TrójmiastoREST API - teoria i praktyka - WordUp Trójmiasto
REST API - teoria i praktyka - WordUp TrójmiastoTomasz Dziuda
1.2K views106 slides

What's hot(20)

Statycznie czy dynamicznie? by Tomasz Dziuda
Statycznie czy dynamicznie?Statycznie czy dynamicznie?
Statycznie czy dynamicznie?
Tomasz Dziuda1.6K views
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice by Tomasz Dziuda
Motywy dla WordPressa - historia prawdziwa - WordUp KatowiceMotywy dla WordPressa - historia prawdziwa - WordUp Katowice
Motywy dla WordPressa - historia prawdziwa - WordUp Katowice
Tomasz Dziuda652 views
Electron + WordPress = ❤ by Tomasz Dziuda
Electron + WordPress = ❤Electron + WordPress = ❤
Electron + WordPress = ❤
Tomasz Dziuda5.7K views
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia by Tomasz Dziuda
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp SilesiaJak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Jak tworzyć motywy przyjazne użytkownikom i programistom - WordUp Silesia
Tomasz Dziuda752 views
REST API - teoria i praktyka - WordUp Trójmiasto by Tomasz Dziuda
REST API - teoria i praktyka - WordUp TrójmiastoREST API - teoria i praktyka - WordUp Trójmiasto
REST API - teoria i praktyka - WordUp Trójmiasto
Tomasz Dziuda1.2K views
REST API - teoria i praktyka - WordUp Warszawa by Tomasz Dziuda
REST API - teoria i praktyka - WordUp WarszawaREST API - teoria i praktyka - WordUp Warszawa
REST API - teoria i praktyka - WordUp Warszawa
Tomasz Dziuda836 views
Contributor Day - WordCamp Lublin 2017 - przegląd motywów by Tomasz Dziuda
Contributor Day - WordCamp Lublin 2017 - przegląd motywówContributor Day - WordCamp Lublin 2017 - przegląd motywów
Contributor Day - WordCamp Lublin 2017 - przegląd motywów
Tomasz Dziuda3.5K views
[BDD] Introduction to Behat (PL) by Piotr Pelczar
[BDD] Introduction to Behat (PL)[BDD] Introduction to Behat (PL)
[BDD] Introduction to Behat (PL)
Piotr Pelczar1.8K views
WP-API - teoria i praktyka - WordUp Trójmiasto #2 by Tomasz Dziuda
WP-API - teoria i praktyka - WordUp Trójmiasto #2WP-API - teoria i praktyka - WordUp Trójmiasto #2
WP-API - teoria i praktyka - WordUp Trójmiasto #2
Tomasz Dziuda819 views
Dokąd zmierza WordPress? by Tomasz Dziuda
Dokąd zmierza WordPress?Dokąd zmierza WordPress?
Dokąd zmierza WordPress?
Tomasz Dziuda4.2K views
Jak nadążyć za światem front endu by Tomasz Dziuda
Jak nadążyć za światem front enduJak nadążyć za światem front endu
Jak nadążyć za światem front endu
Tomasz Dziuda503 views
Metaprogramowanie w JS by Dawid Rusnak
Metaprogramowanie w JSMetaprogramowanie w JS
Metaprogramowanie w JS
Dawid Rusnak290 views
Jak nadążyć za światem front-endu - WordPress Training Day by Tomasz Dziuda
Jak nadążyć za światem front-endu - WordPress Training DayJak nadążyć za światem front-endu - WordPress Training Day
Jak nadążyć za światem front-endu - WordPress Training Day
Tomasz Dziuda3.6K views
Hugo - make webdev fun again by Marcin Gajda
Hugo - make webdev fun againHugo - make webdev fun again
Hugo - make webdev fun again
Marcin Gajda356 views
Jak Twoja strona może wygenerować niespodziewane koszta by Tomasz Dziuda
Jak Twoja strona może wygenerować niespodziewane kosztaJak Twoja strona może wygenerować niespodziewane koszta
Jak Twoja strona może wygenerować niespodziewane koszta
Tomasz Dziuda249 views
Statycznie czy dynamicznie - infoMEET Wrocław by Tomasz Dziuda
Statycznie czy dynamicznie - infoMEET WrocławStatycznie czy dynamicznie - infoMEET Wrocław
Statycznie czy dynamicznie - infoMEET Wrocław
Tomasz Dziuda1.1K views
Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka by Maciej Ziarko
Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarkaThymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka
Thymeleaf - szablony, które bez przetworzenia zrozumie twoja przeglądarka
Maciej Ziarko13.3K views

Similar to WordUp Trójmiasto - Sage 9 w praktyce

Automatyzacja utrzymania jakości w środowisku PHP by
Automatyzacja utrzymania jakości w środowisku PHPAutomatyzacja utrzymania jakości w środowisku PHP
Automatyzacja utrzymania jakości w środowisku PHPLaravel Poland MeetUp
120 views52 slides
Daj się wyręczyć - Joomla Day Polska 2014 by
Daj się wyręczyć - Joomla Day Polska 2014Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014Tomasz Dziuda
1K views96 slides
Mongodb with Rails by
Mongodb with RailsMongodb with Rails
Mongodb with RailsSebastian Nowak
691 views27 slides
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom by
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistomWordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistomTomasz Dziuda
975 views108 slides
Deployment kodu z Capistrano by
Deployment kodu z CapistranoDeployment kodu z Capistrano
Deployment kodu z CapistranoMichał Szajbe
719 views31 slides
Za darmo nie umarło - WordCamp Wrocław by
Za darmo nie umarło - WordCamp WrocławZa darmo nie umarło - WordCamp Wrocław
Za darmo nie umarło - WordCamp WrocławTomasz Dziuda
1.2K views60 slides

Similar to WordUp Trójmiasto - Sage 9 w praktyce(20)

Daj się wyręczyć - Joomla Day Polska 2014 by Tomasz Dziuda
Daj się wyręczyć - Joomla Day Polska 2014Daj się wyręczyć - Joomla Day Polska 2014
Daj się wyręczyć - Joomla Day Polska 2014
Tomasz Dziuda1K views
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom by Tomasz Dziuda
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistomWordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
WordUp Gdynia - Jak tworzyć motywy przyjazne użytkownikom i programistom
Tomasz Dziuda975 views
Deployment kodu z Capistrano by Michał Szajbe
Deployment kodu z CapistranoDeployment kodu z Capistrano
Deployment kodu z Capistrano
Michał Szajbe719 views
Za darmo nie umarło - WordCamp Wrocław by Tomasz Dziuda
Za darmo nie umarło - WordCamp WrocławZa darmo nie umarło - WordCamp Wrocław
Za darmo nie umarło - WordCamp Wrocław
Tomasz Dziuda1.2K views
“Dziesięć serwerów poproszę!“, czyli co może Ci zaoferować definiowanie infra... by The Software House
“Dziesięć serwerów poproszę!“, czyli co może Ci zaoferować definiowanie infra...“Dziesięć serwerów poproszę!“, czyli co może Ci zaoferować definiowanie infra...
“Dziesięć serwerów poproszę!“, czyli co może Ci zaoferować definiowanie infra...
The Software House138 views
AADays 2015 - Jak to zrobic w JavaScript by Jacek Okrojek
AADays 2015 - Jak to zrobic w JavaScriptAADays 2015 - Jak to zrobic w JavaScript
AADays 2015 - Jak to zrobic w JavaScript
Jacek Okrojek1.1K views
Serwer internetowy w systemie Linux by bm9ib2r5
Serwer internetowy w systemie LinuxSerwer internetowy w systemie Linux
Serwer internetowy w systemie Linux
bm9ib2r52K views
Using Red Gate SQL Doc for database documentation by Mariusz Koprowski
Using Red Gate SQL Doc for database documentationUsing Red Gate SQL Doc for database documentation
Using Red Gate SQL Doc for database documentation
Mariusz Koprowski418 views
Uruchomienie i praca z laravel w wirtualnym kontenerze docker'a by Laravel Poland MeetUp
Uruchomienie i praca z laravel w wirtualnym kontenerze docker'aUruchomienie i praca z laravel w wirtualnym kontenerze docker'a
Uruchomienie i praca z laravel w wirtualnym kontenerze docker'a
Laravel Poznań Meetup #3 - Uruchomienie i praca z Laravel w wirtualnym konten... by HighSolutions Sp. z o.o.
Laravel Poznań Meetup #3 - Uruchomienie i praca z Laravel w wirtualnym konten...Laravel Poznań Meetup #3 - Uruchomienie i praca z Laravel w wirtualnym konten...
Laravel Poznań Meetup #3 - Uruchomienie i praca z Laravel w wirtualnym konten...
Zastosowanie buildout przy wdrażaniu projektów opartych o framework Django by Dominik Szopa
Zastosowanie buildout przy wdrażaniu projektów opartych o framework DjangoZastosowanie buildout przy wdrażaniu projektów opartych o framework Django
Zastosowanie buildout przy wdrażaniu projektów opartych o framework Django
Dominik Szopa781 views
Jak tworzyć motywy przyjazne użytkownikom i programistom? by Tomasz Dziuda
Jak tworzyć motywy przyjazne użytkownikom i programistom?Jak tworzyć motywy przyjazne użytkownikom i programistom?
Jak tworzyć motywy przyjazne użytkownikom i programistom?
Tomasz Dziuda644 views
Kainos Tech Space #1 : DevOps : Pawel Chmielinski - Dobre praktyki przy pisan... by Kainos Polska
Kainos Tech Space #1 : DevOps : Pawel Chmielinski - Dobre praktyki przy pisan...Kainos Tech Space #1 : DevOps : Pawel Chmielinski - Dobre praktyki przy pisan...
Kainos Tech Space #1 : DevOps : Pawel Chmielinski - Dobre praktyki przy pisan...
Kainos Polska98 views
Przenieś się do kontenera, czyli korzyści z Docker i Docker Compose by Mariusz Bąk
Przenieś się do kontenera, czyli korzyści z Docker i Docker ComposePrzenieś się do kontenera, czyli korzyści z Docker i Docker Compose
Przenieś się do kontenera, czyli korzyści z Docker i Docker Compose
Mariusz Bąk298 views

WordUp Trójmiasto - Sage 9 w 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
  • 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
  • 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
  • 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..
  • 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
  • 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
  • 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.