Mobilné Správy, Gadgety, Blogy's Secenziami

Gutenberg WordPress generátor sprievodca krok za krokom

Myslím, že budete súhlasiť, keď poviete: Celý tento obchod v Gutenbergu je mätúci.

Po prvé, je ťažké použiť nový editor blokov alebo čo? Myslím, že nevieš, kam šli všetky tvoje obľúbené nástroje. Vytvorenie príspevku vám teraz pravdepodobne trvalo dlhšie, nie?

Možno pridanie odkazu (pridruženého alebo iného) ho priviedlo k veľkej krivke a bol sklamaný. Možno ste mali ťažkosti s pridaním obrázka vedľa textu.

Možno ste sa pokúsili pridať viac stĺpcov a veci nefungovali podľa očakávania. Ak to tak nie je, možno nebudete môcť ľahko pridať svoje súbory PDF alebo zobraziť obávaný odkaz „Aktualizácia zlyhala“.

Už sa nemusíte báť; Bolo to na jeho presnej pozícii nie príliš dávno, ale teraz považujem Gutenberga za vzrušujúceho. K dispozícii je krivka učenia, áno, ale na konci dnešného príspevku budete myslieť na Gutenberga inak.

Čo je editor Gutenbergovcov?

Editor WordPress Gutenberg

Prezeráte Gutenberg, predvolený editor blokov WordPress.

Ak používate WordPress 5,0 a vyššie, musíte naraziť na geniálneho nového editora WordPress známeho ako Gutenberg.

A ako mnoho iných používateľov, aj vy chcete používať revolučný editor, ale pochybujete, či je Gutenberg komplikovaný.

Alebo možno, keď ste sa stretli s Gutenbergom, niekoľko vecí nefungovalo. Koniec koncov, vývojári vytvorili a naďalej robia témy a doplnky kompatibilné s editorom blokov.

Rýchlo ste sa teda vrátili do klasického editora, ktorý je mimochodom v poriadku. Nezabudnite, že WordPress po roku 2022 nebude podporovať klasický editor. Tiež vám chýbajú všetky výhody, ktoré ponúka Gutenberg.

Pokiaľ ide o funkčnosť, Classic Editor a Gutenberg robia to isté; Viete, oba nástroje vám pomôžu vytvoriť obsah bez kódovania.

Sme však zvyknutí na starý editor WYSIWYG, že sa nám zdá trochu zvláštne prispôsobiť sa novému používateľskému rozhraniu spoločnosti Gutenberg, ak nie úplne mätúce. Aspoň to si myslím.

Ale čo presne je Gutenberg?

Gutenberg je nový predvolený editor WordPress. Odlišuje sa od tradičného vizuálneho / textového editora; Gutenberg používa bloky obsahu rovnako ako mnoho súčasných tvorcov stránok.

Je dodávaný s intuitívnejšími funkciami ako Classic Editor, čo znamená, že môžete vytvárať multimediálny obsah na cestách. Teraz môžete rýchlo vytvárať mimoriadne rozloženia, ak pracujete s príspevkami alebo stránkami WordPress.

A s niekoľkými doplnkami môže Gutenberg priaznivo konkurovať zavedeným tvorcom stránok WordPress ako Brizy, Elementor a Divi.

Jedinou nevýhodou je, že tvorcovia stránok často ponúkajú viac funkcií, pretože sú to predovšetkým tvorcovia stránok! Zároveň je Gutenberg ešte stále dosť mladý a môže len dúfať, že editor blokov porastie skokmi a hranicami.

V dnešnom príspevku sa budeme baviť vytvorením príspevku WordPress pomocou editora Gutenberg. Mojím cieľom je pokryť každý malý detail a funkciu, aby ste mohli pomocou Gutenberg vytvárať obsah ako profesionáli.

Ste pripravení Ak áno, vytvorme tento príspevok WordPress.

Ako vytvoriť príspevok WordPress s Gutenbergom

Ak prevádzkujete webovú stránku WordPress, pravdepodobne vytvoríte viac príspevkov ako stránok. V ďalšej časti sme od začiatku vytvorili príspevok WordPress o Gutenbergovi. Dúfam, že sa budete baviť rovnako ako ja, keď som vyskúšal Gutenberga.

Nechajte to z cesty, prejdite na Publikácie> Pridať nové ako zdôrazňujeme na snímke obrazovky nižšie.

vytvorenie nového príspevku v službe gutenberg

Ak tak urobíte, dostanete sa priamo do editora Gutenberga uvedeného nižšie.

Editor WordPress Gutenberg

Docela pekné, čo? Teraz si zrolujte tieto rukávy a začnite pracovať.

Pridajte názov

pridanie nového názvu v gutenberg

Príspevok nemôžete napísať bez pevného názvu. Dobrá vec je, že Gutenberg uľahčuje pridanie názvu.

Prvý blok, ktorý vidíte, je nadpis v hornej časti dokumentu, ako je uvedené na obrázku vyššie. Ak chcete vytvoriť názov príspevku, zadajte ho do bloku. Jednoduché ako A, B, C.

Potrebujete upraviť permalink? Môžete ľahko urobiť v nadpis zamknúť kliknutím na ikonu editovať ako je znázornené nižšie.

upraviť príspevok permalink v gutenbergu

Po pridaní názvu stlačte ENTER kláves na spustenie nového riadku. Ach áno, Gutenberg si v klasickom editore WordPress zachová natívnu navigáciu, ktorú ste milovali.

Pridajte nový odsek

nový blok odseku v gutenbergu

Zasiahnite ENTER kľúč vytvorí nový odstavec blok, ako je uvedené vyššie. Pred napísaním textu vám blok poskytne niekoľko možností. Ďalšie podrobnosti nájdete na očíslovanom obrázku nižšie.

nové možnosti bloku odsekov gutenberg

Poznámky Môžete:

  1. Konvertujte nový blok odseku na akýkoľvek iný blok, napríklad obrázok, hlavička, obálka, galéria, WooCommerce, formulár atď.
  2. Pomocou odkazu môžete zmeniť blok odseku na blok obrázka
  3. Zmeňte odsekový blok na nadpisový blok, t. J. H2, H3 a H4
  4. Transformujte odsekový blok do bloku úvodného obrázku

Pre ilustráciu si vyhradím prvý odsek pre neskoršie zavedenie. Po pridaní textu sa zobrazí panel nástrojov na formátovanie, ako je znázornené nižšie.

panel nástrojov na formátovanie odsekov gutenberg

Vďaka nástrojovej lište formátovania môžete:

  • Konvertujte odsek na verš, citát, nadpis, zoznam, kód a predformátovaný text
  • tučne, Kurzíva, prečiarknutie a podčiarknutie obsahu
  • Zarovnajte text doľava, doprava, na stred a zarovnajte
  • Pridajte odkaz, ktorý sa dá otvoriť aj na novej karte
  • Vložte obrázok online (áno, existuje!)
  • Skryť nastavenia bloku
  • Duplikujte blok
  • Vložte blok pred alebo za aktuálny blok (v našom prípade je to prvý odsek, takže nepridávame nič skôr, iba potom). Ak chcete, môžete pridať blok úvodného obrázka pred prvý odsek, pretože to znie dobre
  • Upravte blok ako HTML
  • Pridajte aktuálny blok do opakovane použiteľných blokov, aby ste ho mohli použiť v iných príspevkoch
  • Blok úplne vymažte

Blok odsekov môžete ďalej prispôsobiť pomocou možností dostupných v lock nájdete v ponuke na bočnom paneli, ako je to znázornené nižšie.

Možnosti bočného panela gutenberg pre blok odseku

Niekoľko poznámok k obrázku vyššie:

  1. Vyberte si lock Ak chcete zobraziť všetky možnosti a nastavenia zámku, kliknite sem
  2. Vyberte veľkosť písma a aktivujte tu Drop Cap
  3. Pridajte farbu pozadia do svojho odseku. Na ilustračné účely som nastavil modrú farbu. Môžete tiež prispôsobiť farbu textu. V obidvoch prípadoch môžete pridať neobmedzené vlastné farby
  4. Tu môžete pridať vlastnú triedu CSS, čo znamená, že do svojho bloku môžete pridať ďalšie štýly CSS
  5. Modré pozadie a Drop Cap už boli použité v editore Gutenberg

Karta dokumentu na bočnom paneli

V ponuke bočného panela je ďalšia karta; dokument kartu, ako je znázornené nižšie.

Karta dokumentu na bočnom paneli odseku odseku

Tu sú poznámky k vyššie uvedenému obrázku:

  1. Kliknutím sem prepnete na dokument jazyk
  2. Tu môžete naplánovať príspevok, nastaviť viditeľnosť pre súkromný alebo verejnosť, zriaďuje publikáciu v Čaká sa na kontrolu vyberte formát príspevku a vytvorte pevný príspevok
  3. V tejto časti môžete upraviť svoj trvalý odkaz
  4. Tu môžete vybrať alebo vytvoriť nové kategórie
  5. Pridajte do svojho príspevku značky
  6. Nastavte odporúčaný obrázok
  7. Vytvorte manuálny výpis
  8. Povoliť komentáre, pingbacky a trackbacky

Ako vidíte, máte veľa možností navrhnúť blok odseku (a celý príspevok) tak, ako chcete. Mimochodom, rôzne bloky prichádzajú s rôznymi nastaveniami, ako sa naučíme za minútu.

Po prvom odseku stlačte kláves ENTER znovu vytvorte nový riadok (alebo blok odseku). Teraz pridajme obrázok pod prvý odsek.

Pridajte obrázky v Gutenberg

Pridajte nový obrázok v Gutenbergu

Hovorí sa, že obrázok hovorí viac ako tisíc slov, a blogový príspevok bez obrázkov je dobre fádny. Ak chcete pridať obrázok do svojho príspevku WordPress pomocou služby Gutenberg, máte niekoľko možností.

Keď narazíte na ENTER pred pár okamihmi aktivoval nový blok odsekov. Pretože Gutenberg je intuitívny, môžete pridať obrázok kliknutím na ikony plus (+), obrázok alebo obálka, ako to zvýrazňujeme na obrázku nižšie.

Pridajte nový obrázok do editora Gutenberg

Pár poznámok:

  1. Obrázok môžete pridať pomocou ikon plus (+)
  2. Tu môžete ľahko pridať obrázok
  3. Táto voľba umožňuje pridať zakryť sa obrázok (zvyčajne sú väčšie ako iné fotografie. Mimochodom môžete pridať aj obrázky na obrázky obálok)

Pokračujte a kliknite na ktorúkoľvek z ikon plus (+). Potom kliknite na tlačidlo OK obrázok kartu, ako je uvedené nižšie.

pridať obrázky v gutenberg

Kliknutím na ikonu obrázok karta načíta obrázok blok zobrazený na obrázku nižšie.

gutenbergovský blok obrázkov

obrázok Blok vám umožňuje nahrať obrázok alebo pridať obrázok z adresy URL alebo z mediálnej knižnice. V tomto procese môžete pridať alt text (dôležitý pre SEO), titulky a popis pomocou nastavení obrazovky médií alebo lock bočný panel, ako je znázornené na nasledujúcich obrázkoch.

Bežné nastavenia médií …

nastavenie médií wordpress

… A obrázok Nastavenia zámku.

nastavenie zámku obrazu gutenberg

Dozviete sa tu niečo dnes? Dúfam. Poďme

Po pridaní jeho obrázka pridá Gutenberg nový blok odsekov hneď pod ním. Môžete pridať, čo chcete, ale pre ilustráciu som pridal text a potom tlačidlo pod ním.

Ako pridať súbory na stiahnutie, s. PDF, obrázky, videá atď.

Gutenberg uľahčuje pridávanie súborov na stiahnutie do príspevku alebo stránky WordPress.

V novom odstavec blokovať, kliknite na ikonu plus (+), prejdite na Spoločné bloky a udrel archív ako zvýrazňujeme nižšie.

Pridajte súbory na stiahnutie v službe Gutenberg

Spustí sa nasledujúci blok:

blok súboru gutenberg

Z archív blokovať, môžete nahrať nový súbor alebo ho pridať z knižnice médií. Po pridaní jeho súboru, Gutenberg pridá roztomilý download tlačidlo, ako je vidieť na obrázku nižšie.

pridať súbor v gutenberg

Môžete hrať s týmito možnosťami. Môžete napríklad upraviť alebo odstrániť „Gutenberg Free PDF Check List"Názov ako aj download Tlačidlo. Do bloku môžete pridať triedu CSS a upraviť ju podľa svojich predstáv.

Pridajte ponuku na Gutenberg

Ďalej pridajme cenovú ponuku, pretože sú roztomilí, chytľaví a pomáhajú ti dostať sa domov. Na novom riadku kliknite na znamienko plus (+), prejdite na Spoločné bloky a udrel citovať kartu, ako je znázornené nižšie.

pridávanie úvodzoviek v gutenbergu

Ak tak urobíte, pridá citovať zablokujte svoj príspevok, ako to zvýrazňujeme na obrázku nižšie.

konfigurácia bloku ponuky gutenberg

Všimnite si nastavenie bloku ponuky v pravom bočnom paneli vyššie?

Ak chcete pridať svoj rozpočet, napíšte ho do bloku. Tu je môj výsledok.

Gutenbergov citát

Vyzerá to úžasne, však?

Pridávanie mediálnych vložiek do Gutenbergu

Gutenberg prichádza s rôznymi blokmi vkladania videí a iných médií z viac ako 30 webov YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare atď.

Ak chcete vložiť obsah, kliknite na ikonu plus (+) a prejdite na vložené, a vyberte lokalitu. Napríklad som chcel YouTube, ako je uvedené nižšie.

vložiť gutenberg youtube

Potom skopírujte a prilepte webovú adresu videa YouTube a kliknite na tlačidlo OK vložiť ako je znázornené na obrázku nižšie.

gutenberg youtube vložiť blok

Akonáhle sa dostanem do vložiť , Gutenberg automaticky prevedie odkaz na video, ako je uvedené nižšie.

youtube video vložené do gutenbergu

Hladká navigácia až do konca. Teraz pridajme samostatné tlačidlo, ktoré je ideálne na vytvorenie výzvy na akciu (CTA).

Ako pridať tlačidlo v Gutenberg

V tomto okamihu by ste nemali mať problémy s pridaním blokov. Stačí kliknúť na znamienko plus (+) a zvoliť blok. To nemôže byť jednoduchšie ako to.

Ako teda pridáme tlačidlo?

V novom riadku (alebo bloku) kliknite na ikonu plus (+) a prejdite na Dizajnové prvky a kliknite na tlačidlo OK gombík kartu, ako je znázornené nižšie.

pridajte tlačidlá v editore gutenberg

Ak tak urobíte, vedie vás k gombík blok, ako je podrobne uvedené nižšie.

pridajte tlačidlá v editore gutenberg

Ako vidíte na obrázku vyššie, môžete text tlačidla upraviť a pridať odkaz. Tlačidlo môžete okrem toho prispôsobiť pomocou ponuky bočného panela na pravej strane obrazovky.

Po niekoľkých kliknutiach som dostal toto.

Príklad gutenbergovho tlačidla

BTW, ak na tlačidlách používate ťažko čitateľné farebné kombinácie, Gutenberg vás bude okamžite informovať, Aké pekné?

Ako pridať stĺpce v Gutenbergu

Po prekrásnom tlačidle pridáme niekoľko stĺpcov. Pridám dva stĺpce, takže buďte opatrní.

To by ste mali urobiť. Kliknite na ikonu plus (+), prejdite na Dizajnové prvky a kliknite na tlačidlo OK stĺpce kartu, ako vidno na obrázku nižšie.

stĺpce tabuľa gutenberg editor

Gutenberg v predvolenom nastavení pridá dva stĺpce. Pozrite si obrázok nižšie a nezabudnite, že už som do stĺpcov pridal obsah.

stĺpce gutenberg v editore wordpress

Čo ma chytí:

Rozhranie stĺpca Gutenberg

Nie je to zlé na pár sekúnd práce. Možno však nebudete chcieť vytvárať stĺpce. Možno budete chcieť zobraziť obrázok spolu s textom.

Je na to blok? Áno, existuje!

Ako pridať obrázok vedľa textu v Gutenbergu

Hľadáte pridať obrázok k nejakému textu? Ak áno, budete milovať ďalšiu sekciu.

Ako obvykle kliknite na ikonu plus (+) a prejdite na Dizajnové prvky a kliknite na tlačidlo OK Médiá a text Ako je uvedené nižšie.

mediálny a textový blok gutenberg

Mali by ste vidieť Médiá a text blok, ako je znázornené nižšie.

mediálny blok a text v gutenbergu

Potom nahrajte svoj obrázok / video / médium alebo ho pridajte z knižnice médií. Potom pridajte text vedľa média, ako je to znázornené na obrázku nižšie.

Hral som s ním Médiá a text blok a stalo sa mi toto. Dajte pozor, aby som tam aj stlačil tlačidlo 🙂

blok médií a text v plnej akcii

Oh, to je koniec! Ukážem vám klientske rozhranie. tu:

multimediálny textový blok v gutenbergu

Vyzerá to veľmi profesionálne, však? Určite si dokážete predstaviť, koľko môžete dosiahnuť pomocou editora Gutenberg.

Bloky Gutenberg tretej strany

Vývojári WordPress sa zaujímajú o to, aby boli témy a doplnky kompatibilné s editorom Gutenberg. Medzi príklady patrí WooCommerce, Jetpack a Yoast SEO.

Napríklad môžete do svojho príspevku vo WordPress pridať bloky WooCommerce. Najprv musíte nainštalovať a aktivovať WooCommerce.

Potom na novom riadku kliknite na ikonu plus (+), prejdite na WooCommerce a vyberte požadovaný blok, ako je to znázornené nižšie.

gutenbergské bloky woocommerce

Vieš čo to znamená? To znamená, že v priebehu niekoľkých minút môžete vytvárať multimediálne súbory a skvelé príspevky a stránky.

Ostatné pozoruhodné bloky

Už máme viac ako 2.000 slov, a ak budeme takto pokračovať, napíšeme kompletnú elektronickú knihu Moja modlitba je, že teraz môžete bez problémov používať Gutenberga.

Mimochodom, tu je zoznam ďalších dostupných blokov.

  • widgety – Obsah z vašich miniaplikácií môžete pridať do blogových príspevkov
  • shortcodes – Stále môžete používať natívne kódy WordPress
  • klasický – Veľký blok obsahujúci váš predchádzajúci obsah
  • viac – Blok bol predtým známy ako Prečítajte si viac štítok
  • Rozdeľovač stránky, rozdeľovače, rozpery
  • Vlastné HTML, Pullquote, tabuľka
  • galéria a Audio / video vo formáte HTML5
  • A oveľa viac v závislosti od používaných tém a príslušenstva

stranou: Vytvorenie stránky WordPress je podobné vytvoreniu uloženého príspevku pre pár minútové rozdiely, takže sa k tomu dnes nebudeme podrobne venovať.

Gutenbergove rýchle hacky a klávesové skratky

Gutenberg prichádza s niekoľkými trikmi a klávesovými skratkami, ktoré ich ešte uľahčujú. Napríklad, ak do bloku odseku zadáte „/“, zobrazí sa zoznam blokov.

Konkrétny blok môžete vybrať aj zadaním názvu bloku za lomítko (/), napríklad zadaním „/ image“ sa zobrazí blok obrázka medzi ostatnými blokmi súvisiacimi s obrázkom. Ďalšie podrobnosti nájdete na obrázku nižšie.

Gutenbergova skratka pre reakciu

Klávesové skratky: Ak chcete zobraziť všetky dostupné skratky, stlačte tlačidlo SHIFT + ALT + H v Windows a OPT + CTRL + H v systéme Mac

V hornej časti dokumentu môžete vidieť štruktúru dokumentu kliknutím na ikonu (i), ako je to znázornené nižšie.

štruktúra dokumentu gutenberg

Pekné. Mimoriadne hladký.

Jo, a mimochodom, chyba „Update Failure“ sa zvyčajne vyskytuje v dôsledku nestabilného internetového pripojenia 🙂

Gutenberg je medzi vami a mnou fantastický editor obsahu. Pokiaľ ste ochotní sa naučiť laná; môžete veľa žať z editora WordPress budúcnosti.

Gutenberg je stále relatívne mladý a dá sa očakávať, že porastie z hľadiska použiteľnosti a funkčnosti. Bude to vážna sila, s ktorou sa bude počítať v nasledujúcich dňoch. Tvorcovia stránok musia byť opatrní, inak dôjdu k podnikaniu 🙂

Dúfame, že vám náš podrobný sprievodca editorom Gutenberg pomohol dať veci do perspektívy. Veríme, že teraz môžete pomocou editora blokov vytvárať obsah ako profesionál.

Podeľte sa o svoje obavy, myšlienky a otázky v sekcii komentárov nižšie.