Successfully reported this slideshow.

WordUp Trójmiasto - Sage 9 w praktyce

0

Share

Loading in …3
×
1 of 55
1 of 55

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

WordUp Trójmiasto - Sage 9 w praktyce

  1. 1. SAGE 9W praktyce
  2. 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. 3. WYMAGANIA • WordPress >= 4.7 • PHP >= 7.1.3 (z włączonym php-mbstring) • Composer • Node.js >= 6.9.x • Yarn
  4. 4. NIE DLA KAŻDEGO
  5. 5. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania
  6. 6. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania • Używa blade jako template engine
  7. 7. NIE DLA KAŻDEGO • Serwer musi spełniać wymagania • Używa blade jako template engine • Używa psr-2 jako standard kodowania
  8. 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. 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. 10. INSTALACJA composer create-project roots/sage wordup-trojmiasto
  11. 11. INSTALACJA composer create-project roots/sage wordup-trojmiasto Theme Name [Sage Starter Theme]: > WordUp Trójmiasto
  12. 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. 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. 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. 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. 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. 17. INSTALACJA CZ. 2 Local development URL of WP site [http://example.test]: > http://wordup.localhost
  18. 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. 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. 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. 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. 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. 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. 24. BLADE
  25. 25. BLADE @php(the_post()) <?php the_post(); ?>
  26. 26. BLADE @php(the_post()) {{ get_the_title() }} <?php the_post(); ?> <?php echo htmlentities( get_the_title() ); ?> <?php the_title(); ?>
  27. 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. 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. 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. 30. BLADE CZ. 2 {{ get_the_title() }} != the_title();
  31. 31. BLADE CZ. 2 {{ get_the_title() }} != the_title(); {{ apply_filters(‘the_title’, get_the_title()) }} @php(the_title())
  32. 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. 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. 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. 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. 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. 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. 38. DEVELOPMENT •yarn run start
  39. 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. 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. 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. 42. DEVELOPMENT •yarn run build:production
  43. 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. 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. 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. 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. 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. 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. 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. 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. 51. ZARZĄDZANIE SZABLONAMI
  52. 52. ZARZĄDZANIE SZABLONAMI Użycie flexible content jako podstawowego budulca całej treści strony, eliminuje problem z nadmierną ilością templatek.
  53. 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. 54. PYTANIA?
  55. 55. DAWID URBAŃSKI dawid.urbanski@insanelab.com

×