Successfully reported this slideshow.

WordUp Trójmiasto - Sage 9 w praktyce

0

Share

•
Apr. 24, 2018
• 0 likes • 574 views
Upcoming SlideShare
Zepplin_Pronko_Magento_Festival Hall 1_Final
Zepplin_Pronko_Magento_Festival Hall 1_Final
Loading in …3
×
1 of 55
1 of 55

WordUp Trójmiasto - Sage 9 w praktyce

Apr. 24, 2018
• 0 likes • 574 views

0

Share

Download to read offline

Internet

Prezentacja stworzona na potrzeby WordUp trójmiasto.

Prezentacja stworzona na potrzeby WordUp trójmiasto.

Internet

Recommended

More Related Content

Similar to WordUp Trójmiasto - Sage 9 w praktyce

Android Development - Process & Tools
Lope Emano
沖縄Web+db勉強会 20121026
Shusaku Fukumine
2018 RubyHACK: put git to work - increase the quality of your rails project...
Rodrigo Urubatan
Coscup x ruby conf tw 2021 google cloud buildpacks 剖析與實踐
KAI CHU CHUNG
Introduction of webpack 4
Vijay Shukla
Ігор Карпиленко — PHPStorm for drupal developer
LEDC 2016
RubyGems 3 & 4
Hiroshi SHIBATA
How we Started with eZ publish 5 a Real Use Case
coolscreen.de
Giving back with GitHub - Putting the Open Source back in iOS
Madhava Jay
The Future of Dependency Management for Ruby
Hiroshi SHIBATA
Play With Docker
Karim Memon
How to start with eZ Publish 5
Donat Fritschy
Building your own embedded system with Yocto
mmeisenzahl
Build your own embedded linux distributions by yocto project
Yen-Chin Lee
Word bench7月号
西村 州平

Featured

What to Upload to SlideShare
SlideShare
Be A Great Product Leader (Amplify, Oct 2019)
Adam Nash
Trillion Dollar Coach Book (Bill Campbell)
Eric Schmidt
APIdays Paris 2019 - Innovation @ scale, APIs as Digital Factories' New Machi...
apidays
A few thoughts on work life-balance
Wim Vanderbauwhede
Is vc still a thing final
Mark Suster
The GaryVee Content Model
Gary Vaynerchuk
Mammalian Brain Chemistry Explains Everything
Loretta Breuning, PhD
Blockchain + AI + Crypto Economics Are We Creating a Code Tsunami?
Dinis Guarda
The AI Rush
Jean-Baptiste Dumont
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Carol Smith
10 facts about jobs in the future
Pew Research Center's Internet & American Life Project
Harry Surden - Artificial Intelligence and Law Overview
Harry Surden
Inside Google's Numbers in 2017
Rand Fishkin
Pinot: Realtime Distributed OLAP datastore
Kishore Gopalakrishna
How to Become a Thought Leader in Your Niche
Leslie Samuel
Visual Design with Data
Seth Familian
Designing Teams for Emerging Challenges
Aaron Irizarry
UX, ethnography and possibilities: for Libraries, Museums and Archives
Ned Potter
Winners and Losers - All the (Russian) President's Men
Ian Bremmer

Related Books

Free with a 14 day trial from Scribd

See all
Hamlet's BlackBerry: A Practical Philosophy for Building a Good Life in the Digital Age William Powers
(4/5)
Free
In the Plex: How Google Thinks, Works, and Shapes Our Lives Steven Levy
(4.5/5)
Free
World Wide Mind: The Coming Integration of Humanity, Machines, and the Internet Michael Chorost
(4/5)
Free
An Army of Davids: How Markets and Technology Empower Ordinary People to Beat Big Media, Big Government, and Other Goliaths Glenn Reynolds
(4/5)
Free
The Impulse Economy: Understanding Mobile Shoppers and What Makes Them Buy Gary Schwartz
(4.5/5)
Free
Tubes: A Journey to the Center of the Internet Andrew Blum
(4/5)
Free
Emergence: The Connected Lives of Ants, Brains, Cities, and Software Steven Johnson
(4.5/5)
Free
The End of Business As Usual: Rewire the Way You Work to Succeed in the Consumer Revolution Brian Solis
(5/5)
Free
Blog Schmog: The Truth About What Blogs Can (and Can't) Do for Your Business Robert W. Bly
(4/5)
Free
Public Parts: How Sharing in the Digital Age Improves the Way We Work and Live Jeff Jarvis
(3.5/5)
Free
The Nature of the Future: Dispatches from the Socialstructed World Marina Gorbis
(4/5)
Free
Socialnomics: How Social Media Transforms the Way We Live and Do Business Erik Qualman
(4/5)
Free
The Thank You Economy Gary Vaynerchuk
(4/5)
Free
Talking Back to Facebook: The Common Sense Guide to Raising Kids in the Digital Age James P. Steyer
(4.5/5)
Free
Advanced Genealogy Research Techniques George G. Morgan
(0/5)
Free
Dragnet Nation: A Quest for Privacy, Security, and Freedom in a World of Relentless Surveillance Julia Angwin
(4/5)
Free

Related Audiobooks

Free with a 14 day trial from Scribd

See all
Blockchain Revolution: How the Technology Behind Bitcoin Is Changing Money, Business, and the World Don Tapscott
(4/5)
Free
The Secret Life: Three True Stories of the Digital Age Andrew O'Hagan
(4/5)
Free
Hacker, Hoaxer, Whistleblower, Spy: The Many Faces of Anonymous Gabriella Coleman
(4/5)
Free
Cyberwar: How Russian Hackers and Trolls Helped Elect a President—What We Don't, Can't, and Do Know Kathleen Hall Jamieson
(3/5)
Free
Exploding Data: Reclaiming Our Cyber Security in the Digital Age Michael Chertoff
(4.5/5)
Free
Internet Riches: The Simple Money-Making Secrets of Online Millionaires Scott Fox
(4/5)
Free
The Dark Net: Inside the Digital Underworld Jamie Bartlett
(4/5)
Free
This Machine Kills Secrets: How Wikileakers, Cypherpunks, and Hacktivists Aim to Free the World's Information Andy Greenberg
(4/5)
Free
Who Owns the Future? Jaron Lanier
(4/5)
Free
Kill All Normies: Online Culture Wars From 4Chan And Tumblr To Trump And The Alt-Right Angela Nagle
(4/5)
Free
Cryptography: The Key to Digital Security, How It Works, and Why It Matters Keith Martin
(4/5)
Free
Platform: Get Noticed in a Noisy World Michael Hyatt
(4.5/5)
Free
Ten Arguments for Deleting Your Social Media Accounts Right Now Jaron Lanier
(4/5)
Free
Stop Checking Your Likes: Shake Off the Need for Approval and Live an Incredible Life Susie Moore
(4/5)
Free
So You Want to Start a Podcast: Finding Your Voice, Telling Your Story, and Building a Community that Will Listen Kristen Meinzer
(4.5/5)
Free
Blog, Inc.: Blogging for Passion, Profit, and to Create Community Joy Deangdeelert Cho
(3/5)
Free

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

×