Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Redaktor prowadzący: Małgorzata Kulik
Projekt okładki: Studio Gravite / Olsztyn Obarek, Pokoński, Pazdrijowski, ZapruckiGrafika na okładce została wykorzystana za zgodą Shutterstock.com
Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: [email protected] WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/wp5regMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
ISBN: 978-83-283-5619-1
Copyright © Helion 2020
Printed in Poland.
• Kup książkę• Poleć książkę • Oceń książkę
• Księgarnia internetowa• Lubię to! » Nasza społeczność
Spis treściRozdział 1. Czym jest Gutenberg? ................................................................................... 7
Rozdział 2. WordPress we wspólnej domenie ................................................................ 11Zarządzanie blokami .......................................................................................................11Sekcja: Podstawowe bloki ...............................................................................................16
Nagłówek ................................................................................................................ 16Akapit ...................................................................................................................... 17Obrazek ................................................................................................................... 18Cytat ........................................................................................................................ 20Lista ......................................................................................................................... 20Galeria ..................................................................................................................... 21Plik dźwiękowy ...................................................................................................... 22Okładka ................................................................................................................... 23Plik ........................................................................................................................... 24Filmy ........................................................................................................................ 26
Sekcja: Formatowanie ......................................................................................................27SyntaxHighlighter Code ....................................................................................... 27Kod .......................................................................................................................... 29Klasyczny ................................................................................................................ 29Własny HTML ....................................................................................................... 30Tekst preformatowany .......................................................................................... 32Wyróżniony cytat .................................................................................................. 33Tabela ...................................................................................................................... 34Werset ..................................................................................................................... 36
Sekcja: Układ strony ........................................................................................................37Separator ................................................................................................................. 37Przycisk ................................................................................................................... 37Liczba kolumn ........................................................................................................ 38Media i tekst ........................................................................................................... 40Czytaj dalej ............................................................................................................. 42Odstęp ..................................................................................................................... 42Podział strony ........................................................................................................ 43
Poleć książkęKup książkę
4 WordPress 5. Rewolucja Gutenberga
Sekcja: Widżety ................................................................................................................44Shortcode ................................................................................................................ 44Archiwum ............................................................................................................... 50Kategorie ................................................................................................................. 51Kalendarz ................................................................................................................ 52Komentarze ............................................................................................................ 52Ostatnie wpisy ........................................................................................................ 53RSS ........................................................................................................................... 55Szukaj ...................................................................................................................... 56Tag Cloud ............................................................................................................... 57
Sekcja: Wstawione treści .................................................................................................58YouTube ................................................................................................................. 58Osadź ....................................................................................................................... 59Twitter ..................................................................................................................... 60Facebook ................................................................................................................. 61Spotify ..................................................................................................................... 61Scribd ....................................................................................................................... 62TED ......................................................................................................................... 63
Sekcja: JetPack ..................................................................................................................64Business Hours ....................................................................................................... 64Contact Info ........................................................................................................... 66Form ........................................................................................................................ 67Slideshow ................................................................................................................ 69Subscription Form ................................................................................................. 70Tiled Gallery ........................................................................................................... 71
Rozdział 3. Ultimate Addons for Gutenberg .................................................................. 75Advanced Heading ..........................................................................................................75Post Grid ...........................................................................................................................79Post Carousel ....................................................................................................................86Multi Buttons ...................................................................................................................88Team ..................................................................................................................................91Google Map ......................................................................................................................95Content Timeline .............................................................................................................97Post Timeline ..................................................................................................................101Table of Contents ...........................................................................................................103
Rozdział 4. Kadence Blocks — Gutenberg Page Builder Toolkit .................................... 109Advanced Heading ........................................................................................................110Row Layout .....................................................................................................................115Spacer/Divider ................................................................................................................121Tabs ..................................................................................................................................123
Poleć książkęKup książkę
Spis treści 5
Accordion .......................................................................................................................126Icon ..................................................................................................................................130Icon List ...........................................................................................................................133
Rozdział 5. Advanced Gutenberg ................................................................................ 137Images Slider ..................................................................................................................137Social Link .......................................................................................................................141Advanced Button ...........................................................................................................142Advanced Image .............................................................................................................145Advanced Video .............................................................................................................147Advanced Table ..............................................................................................................149Count Up ........................................................................................................................154
Rozdział 6. Ultra Blocks ............................................................................................. 157Heading ...........................................................................................................................157Paragraph ........................................................................................................................162Countdown .....................................................................................................................165Timeline ..........................................................................................................................169Stats Counter ..................................................................................................................172Flip Box ...........................................................................................................................175iHover ..............................................................................................................................179Team ................................................................................................................................181Interactive Banner .........................................................................................................182
Rozdział 7. Elementor Blocks for Gutenberg ................................................................ 185
Dodatek A Style ....................................................................................................... 195Wprowadzenie ...............................................................................................................195Budowa stylu ..................................................................................................................197Klasy stylów ....................................................................................................................199Tworzenie klasy w blogu ...............................................................................................200Użycie klasy w blogu .....................................................................................................201Przydatne kody ...............................................................................................................204
Skorowidz ............................................................................................... 211
Poleć książkęKup książkę
6 WordPress 5. Rewolucja Gutenberga
Poleć książkęKup książkę
Rozdział 7.
Elementor Blocksfor Gutenberg
Wtyczka Elementor Blocks for Gutenberg jest narzędziem zaprojektowanym przez twórcównajpopularniejszego obecnie page buildera dla platformy WordPress, czyli Elementora. Elementorjest osobnym „ekosystemem”, który składa się z bezpłatnej wtyczki Elementor oraz zbioru bez-płatnych i płatnych wtyczek wspierających działanie Elementora.
Firma produkująca program Elementor musi mieć oczywiście jakiś model biznesowy, który po-zwala jej utrzymywać zespół programistów i uzyskiwać dochody wystarczające do utrzymania się natym wymagającym rynku. Dochody przynosi Elementor Pro, czyli komercyjna wtyczka do bez-płatnego Elementora. Działa ona w oparciu o model subskrypcyjny, w rozmaitych odmianach— np. najbardziej popularny jest model najdroższy, który pozwala posługiwać się ElementoremPro w nieograniczonej liczbie blogów. Popularny jest też model najprostszy — roczna opłata zawersję jednostanowiskową.
Wokół Elementora uwija się wiele firm, które oferują płatne i bezpłatne wtyczki, rozbudowującbardzo szeroki już wachlarz bloków konstrukcyjnych — setki bardzo nieraz pomysłowych i cen-nych kreatorów rozmaitych zadań.
Sytuację tę postanowili spożytkować twórcy Elementora, integrując go z Gutenbergiem za po-mocą pośredniczącej wtyczki Elementor Blocks for Gutenberg. Działa ona w ten sposób, że najpierwinstalujemy bezpłatną wersję Elementora, następnie wtyczkę pośredniczącą, a potem, pracując zapomocą Gutenberga, przywołujemy bloki dostępne w „ekosystemie” Elementora. Oczywiściemożemy także zainstalować wtyczki do Elementora, dzięki czemu będą one mogły być wykorzysta-ne w Gutenbergu.
Jak zatem korzystamy z wtyczki Elementor?
Aby zintegrować bloki (widżety w terminologii Elementora) z wpisami tworzonymi za pomocąGutenberga, musimy utworzyć w Elementorze potrzebne nam szablony, a następnie wkompo-nować je we wpisy.
Najlepszą metodą tworzenia szablonów jest budowanie ich z poziomu menu Elementora w kokpicieWordPressa.
Poleć książkęKup książkę
186 WordPress 5. Rewolucja Gutenberga
RYSUNEK 7.1. Elementor w kokpicie WordPressa
W pozycji Saved Templates widoczna jest lista utworzonych szablonów. Sporządzimy trzy przykła-dowe szablony.
Aby utworzyć szablon, kliknij przycisk Dodaj Nowy. Na ekranie ukaże się interfejs Elementora,w którym sporządzisz konkretny szablon.
W menu Typ szablonu wybierz Sekcja, a w polu Nazwa podaj własną nazwę, np. Kolorowy se-parator.
RYSUNEK 7.2. Typ i nazwa szablonu
Poleć książkęKup książkę
Rozdział 7. Elementor Blocks for Gutenberg 187
Po kliknięciu przycisku Stwórz szablon ukaże się interfejs Elementora. Po lewej stronie widocz-ne są dwie grupy bloków (w terminologii Elementora nazywanych widżetami), Podstawowyi Ogólne, razem 30 bloków.
RYSUNEK 7.3. Interfejs Elementora do tworzenia szablonów
Przeciągnij widżet Separator na pole otoczone przerywaną linią.
Gdy kursor spoczywa na widżecie, na karcie Treść zmień grubość separatora na 5 pikseli, wy-bierz niebieski kolor i zwiększ przerwę do 20 pikseli.
RYSUNEK 7.4. Formatowanie szablonu separatora
Poleć książkęKup książkę
188 WordPress 5. Rewolucja Gutenberga
Kliknij na dole przycisk Publikuj.
Wróć do sekcji Saved Templates w kokpicie WordPressa — na liście zobaczysz swój pierwszyszablon wielokrotnego użytku.
RYSUNEK 7.5. Pierwszy szablon gotowy do użytku
W analogiczny sposób przygotuj inne szablony. Na przykład ozdobny nagłówek:
RYSUNEK 7.6. Szablon zawierający ozdobny nagłówek
I jeszcze jeden szablon, np. mapka z położeniem Wydawnictwa Helion w Gliwicach.
Poleć książkęKup książkę
Rozdział 7. Elementor Blocks for Gutenberg 189
RYSUNEK 7.7. Szablon zawierający mapę Google
Ostatecznie, po sporządzeniu trzech szablonów, widnieją one na liście Saved Templates.
RYSUNEK 7.8. Lista szablonów czekających na wykorzystanie
Poleć książkęKup książkę
190 WordPress 5. Rewolucja Gutenberga
Przychodzi wreszcie czas, by wykorzystać sporządzone szablony sekcji jako bloki Gutenberga.
Wtyczkę Elementor wywołujemy na liście bloków Gutenberga z sekcji Podstawowe bloki.
RYSUNEK 7.9.WywoływanieElementoraw Gutenbergu
Ukazuje się interfejs bloku Elementor Library i rozwijane menu Select a Template.
RYSUNEK 7.10. Wybieranie szablonu do wstawienia do wpisu
Zauważ, że widoczne jest też polecenie Create a new one, które pozwala utworzyć nowy sza-blon. Wygodniejsza wydaje się jednak metoda podana wyżej — tworzenie bezpośrednio w sek-cji szablonów.
Poleć książkęKup książkę
Rozdział 7. Elementor Blocks for Gutenberg 191
Kliknij teraz potrzebny Ci szablon, aby wstawić go do wpisu.
RYSUNEK 7.11. Wybieranie szablonu do wstawienia do wpisu
Aby zmienić postać separatora, np. zwiększyć jego grubość i zmienić kolor, musisz dokonaćponownej edycji szablonu. W tym celu kliknij po prawej stronie przycisk Edit Template withElementor.
W wyświetlonym interfejsie Elementora wprowadź poprawki.
Po dokonaniu poprawek kliknij na dole przycisk Aktualizuj.
Powróć do wpisu i wczytaj go ponownie — ukaże się poprawiona postać szablonu.
RYSUNEK 7.12. Szablon po poprawkach
A tak wygląda szablon z ozdobnym nagłówkiem:
RYSUNEK 7.13. Szablon z nagłówkiem
Aby wstawić właściwy tytuł, kliknij przycisk edycji szablonu i zmień treść tytułu.
Należy oczywiście pamiętać, że zmiana zawartości szablonu oznacza zmianę we wszystkich jegowystąpieniach we wpisie. Aby się przed tym ustrzec, możemy wyedytować szablon w Elemento-rze, a następnie zapisać jako szablon pod inną nazwą. Trudno jednak nie zauważyć, że szablony
Poleć książkęKup książkę
192 WordPress 5. Rewolucja Gutenberga
z tekstem mniej się nadają do wykorzystania jako bloki Gutenberga (wygodniejsze są elementygraficzne), chyba że tworzymy kombinacje elementów graficznych i tekstowych, złożone z kil-ku widżetów.
RYSUNEK 7.14. Szablon zapisany pod inną nazwą
A tak wygląda uzupełniona biblioteka szablonów:
RYSUNEK 7.15. Rozszerzona biblioteka szablonów
I jeszcze widok szablonu mapki (rysunek 7.16).
Możliwość wykorzystania Elementora we współpracy z Gutenbergiem znacznie rozszerza po-tencjał podstawowego edytora WordPressa. Można zatem zalecać w miarę dogłębne poznanieGutenberga, a potem sukcesywne spenetrowanie możliwości bezpłatnej wersji Elementora. Stop-niowo włączając rozmaite widżety Elementora, możemy nauczyć się korzystać z poszerzonychmożliwości, a potem nawet uzupełniać je o zewnętrzne wtyczki do Elementora.
Poleć książkęKup książkę
Rozdział 7. Elementor Blocks for Gutenberg 193
RYSUNEK 7.16. Szablon z mapką Google
Praca z WordPressem to proces nieustannego podnoszenia stanu wiedzy, poszerzania umiejętności.Ogromne znaczenie ma nabranie wprawy, nabycie doświadczenia, a to wymaga czasu i pracy.Regularnie korzystając z możliwości tej platformy, możemy uzbroić się w zestaw niezbędnychnarzędzi najlepiej odpowiadających naszym potrzebom. Program Elementor warto potraktować ja-ko naprawdę cenne uzupełnienie blogowego instrumentarium.
Poleć książkęKup książkę
194 WordPress 5. Rewolucja Gutenberga
Poleć książkęKup książkę
Skorowidz
AAccordion, 126Advanced
Button, 142Gutenberg, 137Heading, 75, 110Image, 145Table, 149Video, 147
Akapit, 17Archiwum, 50
BBusiness Hours, 64blok
Accordion, 126Advanced Button, 142Advanced Heading, 75, 110Advanced Image, 145Advanced Table, 149Advanced Video, 147Akapit, 17Archiwum, 50Contact Info, 66Content Timeline, 97Count Up, 154Countdown, 165Cytat, 20Czytaj dalej, 42Facebook, 61Filmy, 26Flip Box, 175Form, 67Galeria, 21Google Map, 95
Heading, 157Icon, 130Icon List, 133iHover, 179Images Slider, 137Interactive Banner, 182Kalendarz, 52Kategorie, 51Klasyczny, 29Kod, 29Komentarze, 52Liczba kolumn, 38Lista, 20Media i tekst, 40Multi Buttons, 88Obrazek, 18Odstęp, 42Okładka, 23Osadź, 59Ostatnie wpisy, 53Paragraph, 162Plik, 24Plik dźwiękowy, 22Podział strony, 43Post Carousel, 86Post Grid, 79Post Timeline, 101Przycisk, 37Row Layout, 115RSS, 55Separator, 37Shortcode, 44Slideshow, 69Social Link, 141Spacer/Divider, 121Spotify, 61Stats Counter, 172
Poleć książkęKup książkę
212 WordPress 5. Rewolucja Gutenberga
blokSubscription Form, 70Szukaj, 56Tabela, 34Table of Contents, 103Tabs, 123Tag Cloud, 57Team, 91, 181TED, 63Tekst preformatowany, 32Tiled Gallery, 71Timeline, 169Twitter, 60Werset, 36Własny HTML, 30Wyróżniony cytat, 33YouTube, 58
bloki, 11aktywowanie, 15dodawanie, 14konstrukcyjne, 109
budowa stylu, 197
Ccecha, 197Contact Info, 66Content Timeline, 97Count Up, 154Countdown, 165CSS, 195Cytat, 20Czytaj dalej, 42
Ddefiniowanie stylów, 198dodawanie bloku, 13, 14
Eedytor WordPressa, 8Elementor Blocks for Gutenberg, 185
biblioteka szablonów, 192menu Select a Template, 190podstawowe bloki, 190szablon mapki, 193szablon mapy, 189szablon z nagłówkiem, 191tworzenie szablonów, 187
FFacebook, 61Filmy, 26Flip Box, 175Form, 67Formatowanie, 27
GGaleria, 21
miniatur, 72Google Map, 95Gutenberg, 7Gutenberg Page Builder Toolkit, 109
HHeading, 157
IIcon, 130Icon List, 133iHover, 179Images Slider, 137Interactive Banner, 182interfejs page buildera Elementor, 9
JJetPack, 64
KKadence Blocks, 109Kalendarz, 52Kategorie, 51Klasyczny, 29Kod, 29Komentarze, 52klasy stylów, 199
w blogu, 200
LLiczba kolumn, 38Lista, 20
shortcodów, 50
Poleć książkęKup książkę
Skorowidz 213
M
Media i tekst, 40Multi Buttons, 88
Nnagłówek, 195
OObrazek, 18Odstęp, 42Okładka, 23Osadź, 59Ostatnie wpisy, 53
PParagraph, 162parametry shortcodu, 50Plik, 24Plik dźwiękowy, 22podstawowe bloki, 16Podział strony, 43pole Dodatkowe klasy CSS, 199, 201, 202
kody, 204Post Carousel, 86Post Grid, 79Post Timeline, 101Przycisk, 37
Wyrównaj tekst do środka, 196publikacja osadzona w blogu, 63
RRow Layout, 115RSS, 55
Ssekcja
Formatowanie, 27JetPack, 64Podstawowe bloki, 16Układ strony, 37Widżety, 44Wstawione treści, 58
selektor, 197
Separator, 37Shortcode, 44Slideshow, 69Social Link, 141Spacer/Divider, 121Spotify, 61Stats Counter, 172style, 195
klasy, 199lokalne, 197
Subscription Form, 70Szukaj, 56
TTabela, 34Table of Contents, 103Tabs, 123Tag Cloud, 57Team, 91, 181TED, 63Tekst preformatowany, 32Tiled Gallery, 71Timeline, 169Twitter, 60
UUkład strony, 37Ultimate Addons for Gutenberg, 75Ultra Blocks, 157
Wwartość, 197Werset, 36widok nagłówka, 195Widżety, 44Własny HTML, 30Wstawione treści, 58wtyczka
Advanced Gutenberg, 137Elementor Blocks for Gutenberg, 185Kadence Blocks, 109Ultimate Addons for Gutenberg, 75Ultra Blocks, 157
Wyróżniony cytat, 33wyświetlanie
cytatu, 49mapy, 49
Poleć książkęKup książkę
214 WordPress 5. Rewolucja Gutenberga
YYouTube, 58
Zzarządzanie blokami, 11
Poleć książkęKup książkę