WordUp Trójmiasto - Sage 9 w praktyce

Ben Word
February 7, 2018
“Just like Bootstrap 4’s recent ﬁnal release 🎉,
Sage 9 is ﬁnally 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
• Serwer musi spełniać wymagania

NIE DLA KAŻDEGO
• Używa blade jako template engine

NIE DLA KAŻDEGO
• Używa psr-2 jako standard kodowania

NIE DLA KAŻDEGO
• Nie nadaje się do wgrania do repozytorium
wordpress.org

NIE DLA KAŻDEGO
• 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
Theme Name [Sage Starter Theme]:
> WordUp Trójmiasto

INSTALACJA
Theme URI [https://roots.io/sage/]:
> https://www.wptrojmiasto.pl/

INSTALACJA
Theme Description [Sage is a WordPress starter theme.]:
> Prelekcja WordUp Trójmiasto 2018

INSTALACJA
Theme Version [9.0.0]:
> 0.1.0

INSTALACJA
> 0.1.0
Theme Author [Roots]:
> Dawid Urbański

INSTALACJA
> 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
Path to theme directory (e.g., /wp-content/themes/wordup-
trojmiasto) [/app/themes/sage]:
> /wp-content/themes/wordup-trojmiasto

INSTALACJA CZ. 2
Which framework would you like to load? [Bootstrap]:
[0] None
[1] Bootstrap
[2] Bulma
[3] Foundation
[4] Tachyons
> 0

INSTALACJA CZ. 2
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
(yes/no) [no]:
> yes
Done.
Please run `yarn && yarn build` to compile your fresh
scaffolding.

INSTALACJA CZ. 3
(yes/no) [no]:
> yes
Done.
Please run `yarn && yarn build` to compile your fresh
scaffolding.
cd wordup-trojmiasto
yarn && yarn build

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_sub_field() !!}
{!! the_sub_field() !!}
<?php echo
?>
<?php echo get_sub_field(); ?>
<?php the_sub_field(); ?>

BLADE
@php(the_post())
{{--
Template Name: Custom
--}}
<?php echo
?>
/**
* Template Name: Custom
*/

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

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

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

BLADE CZ. 2
@php(the_title())
{{ esc_attr(get_sub_field(‘class’)) }}
{{ esc_url(get_sub_field(‘link’)) }}

BLADE CZ. 2
@php(the_title())
{{ esc_html__(‘Hi WordUp!’, ‘sage’) }}
{{ esc_html_e(‘Hi WordUp!’, ‘sage’) }}

BLADE CZ. 2
@php(the_title())
{{ 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
[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
———————————————————
External: http://192.168.0.110:3000
———————————————————
UI External: http://192.168.0.110:3001
———————————————————
•yarn run build

DEVELOPMENT
•yarn run start
———————————————————
External: http://192.168.0.110:3000
———————————————————
UI External: http://192.168.0.110:3001
———————————————————
•yarn run build
•yarn run build:production

DEVELOPMENT

DEVELOPMENT
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
✨ Done in 2.74s.
<img src=“@asset(‘images/logo-icon.png’)”>

DEVELOPMENT
✨ Done in 2.74s.
background-image(../images/logo-icon.png);

DEVELOPMENT
✨ Done in 2.74s.
asset_path(‘images/logo-icon.png’)

DEVELOPMENT
✨ Done in 2.74s.
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
ﬂexible content. (nie dotyczy stron archiwów, bloga itp)
• Templatki w loopie ﬂexible 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 ﬂexible 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 predeﬁniowane

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

ZARZĄDZANIE
SZABLONAMI
Użycie ﬂexible 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.

DAWID URBAŃSKI
dawid.urbanski@insanelab.com

WordUp Trójmiasto - Sage 9 w praktyce

More Related Content

What's hot

WordUp Trójmiasto - Sage 9 w praktyce