Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordUp Trójmiasto - Sage 9 w praktyce

213 views

Published on

Prezentacja stworzona na potrzeby WordUp trójmiasto.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×