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.

Landing page prosto z gutenberga (wersja uaktualniona)

539 views

Published on

W jaki sposób postawić Landing Page za pomocą nowego edytora WordPress (gutenberg) w WordPressie i czy aby to na pewno dobry pomysł. Prezentacja wygłoszona na WordUp Białystok październik 2019

Published in: Education
  • Be the first to comment

  • Be the first to like this

Landing page prosto z gutenberga (wersja uaktualniona)

  1. 1. Landing page prosto z Gutenberga Niedoszły Bibliotekarz przedstawia: http://am.vj.pl październik 2019
  2. 2. Cechy landing page •Jedna strona •Własny adres •Błyskawiczne ładowanie •Obsłużenie dużego ruchu •Call to action •Brak rozpraszaczy •Komplet informacji w pigułce •Brak ścieżki odwrotu •Odlotowy wygląd
  3. 3. Co testowo naklepałem Link do dużego obrazka poglądowego  https://am.vj.pl/wp-content/uploads/2019/05/obie_strony.png
  4. 4. Goły Gutenberg to cienias
  5. 5. W większości przypadków na WordPresie _bez_sensu_ •Czas ładowania html < php + baza •Divoza •Wtyczkoza •Ilość śmieci w kodzie •Utrzymanie •Jakaś jakość Jedyne za: • Masowa produkcja • Czas życia
  6. 6. Szablon strony clear <?php /** * Template Name: Clean Page * This template will only display the content you entered in the page editor */ ?> <html <?php language_attributes(); ?> class="no-js"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <div id="content" class="site-content"> <section id="primary" class="content-area"> <main id="main" class="site-main"> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-content"> <?php while ( have_posts() ) : the_post(); the_content(); endwhile; ?> </div> </article> </main><!-- #main --> </section><!-- #primary --> </div> </div> <?php wp_footer(); ?> </body> </html>
  7. 7. Bloki z Gutenberga Obrazek Akapit Nagłówek Odstęp Kolumny Zapisany blok wielokrotnego użycia Media i tekst Wyróżniony cytat
  8. 8. Bloki wielokrotnego użycia Odstęp, przycisk (z innych bloków), odstęp
  9. 9. https://webfaces.pl/blog/tag/gutenberg/
  10. 10. Ghost Kit – Blocks Collection https://wordpress.org/plugins/ghostkit/ spacing, animate, display
  11. 11. Gutenberg Blocks – Ultimate Addons for Gutenberg https://wordpress.org/plugins/ultimate-addons-for- gutenberg/ Google Map
  12. 12. Gutenberg Blocks – Ultimate Addons for Gutenberg Content timeline
  13. 13. Kadence Blocks – Gutenberg Page Builder Toolkit https://wordpress.org/plugins/kadence-blocks/ Advanced Button ilość opcji !!!
  14. 14. Yoast SEO https://wordpress.org/plugins/wordpress-seo/ FAQ <script type="application/ld+json"> {"@context":"https://schema.org","@type":"FAQPage","name":"Strona jako Landing Page clean","mainEntity":[{"@type":"Question","name":"Czy muszu0119 mieu0107 przygotowane jakieu015b materiau0142y?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Wymogu nie ma …
  15. 15. Cosmic Blocks (40+) Content Editor Blocks https://wordpress.org/plugins/cosmic-blocks/ Countdown
  16. 16. Page Builder Gutenberg Blocks – CoBlocks https://wordpress.org/plugins/coblocks/ Autor
  17. 17. Cleopatra’s Banquet, Gerard de Lairesse
  18. 18. Niestety ! Problemy podobne do page builderów •Trudnoprzenoszalne •Nadmiar js i css •Nie da się wyjść z wtyczki •Żałosna divoza •Spowalnianie wyświetlania •Brak jednolitego standardu
  19. 19. Bloki wielokrotnego użycia Jeśli z wtyczkami to słabo przenoszalne
  20. 20. Nadmiarowość 19 plików css i 25 plików .js (3 MB z 4 MB ogółem) <div class="wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_58ab45-dd kt-svg-icon- list-columns-1 alignnone"> <ul class="kt-svg-icon-list"> <li class="kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0"> <div style="display:inline-flex;justify-content:center;align-items:center;color:#005075" class="kt-svg-icon-list-single kt-svg-icon-list-single-fe_disc"> <svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="12" width="12" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg> </div> <span class="kt-svg-icon-list-text">Wprowadzenie do idei Landing Pages – kiedy i do czego je stosujemy </span> </li> <div class="wp-block-media-text__content"> <ul> <li> Wprowadzenie do idei Landing Pages – kiedy i do czego je stosujemy </li>
  21. 21. Divoza Niebieski blok z „content timeline” <div class="uagb-timeline__day-new uagb-timeline__day-right"> <div class="uagb-events-new"> <div class="uagb-timeline__events-inner-new"> <div class="uagb-timeline__date-hide uagb-timeline__date-inner"> <div class="uagb-timeline__inner-date-new"> 1 Luty 2019 </div> </div> <div class="uagb-timeline-content"> <div class="uagb-timeline__heading-text"> <h4 class="uagb-timeline__heading">Bilety "Early bird`s"<br />50 zł</h4> </div> <p class="uagb-timeline-desc-content">Warsztat przygotowany, zaplanowany rozpoczynamy zapisy. <br />Dobra cena dla chcących poczekać.</p> <div class="uagb-timeline__arrow"> </div> </div> </div> </div> </div>
  22. 22. Prędkość Przykładowa strona ma około 900 słów i 56 bloków Moja przykładowa strona ma 16 słów na blok Wzorcowa strona gutenberga ma 36 słów na blok
  23. 23. Menedżer bloków to półśrodek  Czekamy na WP 5.3 z guciem > 6.5 Testował ktoś wyłączenie wszystkich bloków?
  24. 24. Block Directory in WP-Admin Concepts
  25. 25. Co zrobić, jak żyć? •Zminimalizować ilość wtyczek z dodatkowymi blokami •Ładować dodatkowy js i css tylko na stronach ich potrzebujących (zgodnie z dokumentacją jeśli wtyczka na to pozwala np. cf7) •Zarządzać ładowaniem js i css z poziomu „managera ładowania wtyczek „ •Stosować wtyczki do minifikacji js i css •Optymalizować ręcznie :/ •Zgrać stronę do html-a i w nim dorzeźbić co potrzeba Upewnić się że landing page generowana z WordPressa jest dla nas najlepszym rozwiązaniem
  26. 26. Koniec opowieści WordUp Białystok październik2019 /bibliotekarz arek@bibliotekarz.com
  27. 27. Licencja Prezentacja: „Landing page prosto z Gutenberga” autorstwa Niedoszły Bibliotekarz jest udostępniana na licencji Creative Commons Uznanie autorstwa Użycie niekomercyjne Na tych samych warunkach 3.0 Unported License.
  28. 28. Linkownia https://www.codecademy.com/ https://am.vj.pl/wp-content/uploads/2019/05/obie_strony.png https://am.vj.pl/wp-content/uploads/2019/05/clean-page.txt https://webfaces.pl/blog/tag/gutenberg/ https://wordpress.org/plugins/ghostkit/ https://wordpress.org/plugins/ultimate-addons-for-gutenberg/ https://wordpress.org/plugins/kadence-blocks/ https://wordpress.org/plugins/wordpress-seo/ https://wordpress.org/plugins/cosmic-blocks/ https://wordpress.org/plugins/coblocks/ https://www.rijksmuseum.nl/en/collection/SK-A-2115 https://make.wordpress.org/core/2019/05/01/whats-new-in-gutenberg-1st-may/ https://make.wordpress.org/core/2019/09/19/whats-new-in-gutenberg-18-september/ https://wordpress.org/plugins/plugin-organizer/ https://make.wordpress.org/design/2019/07/11/block-directory-in-wp-admin-concepts/ https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/ https://wordpress.org/plugins/static-html-output-plugin https://github.com/WordPress/gutenberg/pull/17431

×