SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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
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
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..
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.