Podrobný sprievodca tvorcom Gutenberg Builder pre WordPress

Podrobný sprievodca tvorcom Gutenberg Builder pre WordPress

Myslím, že budete súhlasiť, keď poviem: Toto celé podnikanie spoločnosti Gutenberg je mätúce.


Po prvé, je nový editor blokov ťažko použiteľný alebo čo? Neviem, kam smerovali všetky vaše obľúbené nástroje. Teraz ste pravdepodobne vytvorili dlhší čas, správne?

Možno, že pridaním odkazu (pridruženého alebo iného) vás hodí jedna sakra krivky a cítili ste sa sklamaní. Možno ste mali problémy 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 nemôžete ľahko pridať svoje súbory PDF alebo sa obáva správa „Aktualizácia zlyhala“ vážne.

Už sa nemusíte báť; Nedávno som bol vo vašej presnej pozícii, ale teraz považujem Gutenberga za vzrušujúce. 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

Pozeráte sa na Gutenberga, predvoleného editora blokov WordPress

Ak používate program WordPress 5.0 a novší, musíte naraziť na nový a žiarivý editor WordPress, známy pod menom Gutenberg..

A rovnako ako mnoho iných používateľov, chcete používať revolučný editor, ale váhate, pretože Gutenberg je komplikovaný.

Alebo možno, keď ste sa prvýkrát stretli s Gutenbergom, nefungovali rôzne veci. Koniec koncov, vývojári boli a stále robia témy a doplnky kompatibilné s editorom blokov.

Takže ste sa rýchlo vrátili k internetu Klasický editor, čo je s nami v poriadku. Nezabudnite, že WordPress po roku 2022 nebude podporovať klasický editor. Navyše vám chýbajú všetky ďalšie dobroty, 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 zistíme, že sa prispôsobenie nového Gutenbergovho rozhrania trochu cudzie, ak nie úplne mätúce. Aspoň to si myslím.

Ale čo presne je Gutenberg?

Gutenberg je nový predvolený editor WordPress. Je to na rozdiel od tradičného vizuálneho / textového editora; Gutenberg používa bloky obsahu rovnako ako mnoho moderný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 za behu. Teraz môžete rýchlo vytrhnúť mimoriadne rozloženia, či už 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 sú 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 stále dosť mladý a môžete očakávať, že editor blokov bude rásť len skokmi a hranicami..

V dnešnom príspevku budeme mať vzrušujúci čas na vytvorenie príspevku WordPress s editorom Gutenberg. Zameriavam sa na pokrytie všetkých drobných detailov a funkcií, aby ste mohli pomocou Gutenberg vytvárať obsah ako profesionáli.

Si pripravený? Ak áno, vytvorme tento príspevok WordPress.

Ako vytvoriť príspevok WordPress s

Ak prevádzkujete webovú stránku WordPress, pravdepodobne vytvoríte viac príspevkov ako stránok. V nasledujúcej časti vytvoríme príspevok v službe WordPress v Gutenbergu od začiatku. Dúfam, že sa budete pri testovaní Gutenberga baviť rovnako ako ja.

To z cesty, prejdite na Príspevky> Pridať nové ako zdôrazňujeme na snímke obrazovky nižšie.

vytvorenie nového príspevku v gutenbergu

Ak tak urobíte, dostanete sa priamo do editora Gutenbergov, ktorý je uvedený nižšie.

editor wordpress gutenberg

Docela pekné, čo? Teraz si ukážme tieto rukávy a pustíme sa do práce.

Pridanie názvu

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ť, že v nadpis blokovať kliknutím na 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 zachováva natívnu navigáciu, ktorú ste milovali v klasickom editore WordPress.

Pridanie nového odseku

nový blok odseku v gutenbergu

Biť ENTER kľúč vytvorí nový Odstavec blok, ako je uvedené vyššie. Pred zadaním ľubovoľného 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

Notes. Môžeš:

  1. Konvertujte nový blok odseku na akýkoľvek iný blok, napr. Obrázok, nadpis, obálka, galéria, WooCommerce, formulár atď..
  2. Pomocou skratky môžete zmeniť blok odseku na blok obrázka
  3. Zmeňte blok odsekov 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 úvodné predstavenie. Po pridaní textu sa zobrazí panel s formátovaním, ako je to znázornené nižšie.

panel nástrojov na formátovanie odsekov gutenberg

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

  • Zakryte odsek do verša, citátu, nadpisu, zoznamu, kódu a predformátovaného textu
  • smelý, kurzívou, preškrtnuté, a zdôrazniť obsah
  • Zarovnajte text doľava, doprava, na stred a zarovnajte
  • Pridajte odkaz, ktorý sa dá otvoriť aj na novej karte
  • Vložte vložený obrázok (á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ávali nič skôr, iba potom.) Ak chcete, môžete pridať blok úvodného obrázka pred prvý odsek, pretože to tak vyzerá. dobrý
  • 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 vyberte

Blok odsekov môžete ďalej prispôsobiť pomocou možností dostupných v blok 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 vyššie uvedenému obrázku:

  1. Vyber blok Ak chcete zobraziť všetky možnosti a nastavenia bloku, 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 Dokument 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 pútko
  2. Tu môžete naplánovať príspevok, nastaviť viditeľnosť na jeden Súkromné alebo verejnosť, nastaviť príspevok na Čaká sa na kontrolu vyberte formát príspevku a vytvorte lepkavý príspevok
  3. Táto časť vám umožňuje upraviť permalink
  4. Tu môžete vybrať alebo vytvoriť nové kategórie
  5. Pridajte do svojho príspevku značky
  6. Nastaviť 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) podľa toho, čo si prajete. Mimochodom, rôzne bloky prichádzajú s rôznymi nastaveniami, ako sa dozvieme 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.

Pridávanie obrázkov do Gutenbergu

pridanie nového obrázka v gutenbergu

Hovorí sa, že obrázok hovorí tisícky slov a blogový príspevok bez obrázkov je, fádne. Ak chcete do príspevku WordPress pridať obrázok pomocou Gutenberg, máte niekoľko možností.

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

pridanie nového obrázka v editore 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ť veko image (Väčšinou sú väčšie ako iné fotografie. Navyše môžete pridať obrázky na obrázky obálok, BTW)

Pokračujte a kliknite na niektorú z ikon plus (+). Ďalej kliknite na ikonu obraz kartu, ako je uvedené nižšie.

pridávanie obrázkov v gutenbergu

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

gutenbergovský blok obrázkov

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

Bežné nastavenia médií…

nastavenie médií wordpress

… A obraz blokovať nastavenia.

nastavenie bloku obrazu gutenberg

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

Po pridaní obrázka pridá Gutenberg nový blok odsekov hneď pod neho. Môžete pridať, čo chcete, ale na ilustračné účely som pridal nejaký text a potom tlačidlo pod ním.

Ako pridať súbory na stiahnutie, napr. 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 súbor ako zvýrazňujeme nižšie.

pridanie stiahnuteľných súborov v

Spustí sa nasledujúci blok:

blok súboru gutenberg

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

pridanie súboru v

Môžete si pohrať s možnosťami. Napríklad môžete upraviť alebo odstrániť „Zadarmo Gutenberg PDF kontrolný zoznam“, Ako aj Stiahnuť ▼ Tlačidlo. Do bloku môžete pridať triedu CSS a upraviť ju podľa vášho želania.

Pridanie ponuky v Gutenbergu

Ďalej pridajme cenovú ponuku, pretože sú očarujúce, chytľavé a pomôžu ti ísť 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 obrazovke nižšie.

nastavenie bloku ponuky gutenberg

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

Ak chcete pridať ponuku, zadajte text do bloku. Tu je môj výsledok.

gutenbergovský citát

Vyzerá neuveriteľne dobre?

Pridávanie vložených médií v Gutenbergu

Gutenberg prichádza s niekoľkými blokmi na vloženie videí a iných médií z 30+ lokalít, ako sú YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare atď..

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

vložiť gutenberg youtube

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

gutenberg youtube vložiť blok

Akonáhle narazíte na vložiť , Gutenberg automaticky zakryje odkaz na video, ako to zvýrazňujeme nižšie.

vložené video youtube v gutenberg

Hladká plachtenie po celú dobu. 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ť ťažkosti s pridávaním blokov. Stačí kliknúť na znamienko plus (+) a zvoliť blok. Nemôže to byť nič jednoduchšie ako to.

Ako teda pridáme tlačidlo?

V novom riadku (alebo bloku) kliknite na ikonu plus (+) a prejdite na Prvky rozloženia a kliknite na ikonu gombík kartu, ako je znázornené nižšie.

pridávanie tlačidiel v editore gutenberg

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

pridávanie tlačidiel v editore gutenberg

Ako vidíte na obrázku vyššie, môžete upravovať text tlačidla a pridať odkaz. Tlačidlo môžete navyše 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

Mimochodom, ak na tlačidlách používate ťažko čitateľné farebné kombinácie, Gutenberg vás o tom okamžite informuje. Aké milé?

Ako pridať stĺpce v Gutenbergu

Po prekrásnom tlačidle pridáme niekoľko stĺpcov. Pridám dva stĺpce, takže postupujte opatrne.

Tu je čo robiť. Kliknite na ikonu plus (+) a prejdite na Prvky rozloženia a kliknite na ikonu 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 do stĺpcov som už pridal obsah.

stĺpce gutenberg v editore wordpress

Čo ma dostane:

čelo stĺpcov gutenberg

Nie je to zlé na pár sekúnd práce. Ale asi nechcete vytvárať stĺpce. Možno by ste chceli zobraziť obrázok vedľa nejakého textu.

Je na to blok? Áno, existuje!

Ako pridať obrázok vedľa textu v

Hľadáte pridať obrázok k nejakému textu? Ak áno, budete milovať nasledujúcu časť.

Ako obvykle kliknite na ikonu plus (+) a prejdite na Prvky rozloženia 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.

médiá a textový blok 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 sa okolo Médiá a text blok, a ja som prišiel s nasledujúcim. Vieš; Aj tu sa mi podarilo stlačiť gombík ��

médiá a textový blok v plnej akcii

Oh, to je back-end! Ukážem vám klientske rozhranie. Tu:

multimediálny textový blok v gutenbergu

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

Bloky Gutenberg od tretej strany

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

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

Potom v novom riadku kliknite na ikonu plus (+) a prejdite na WooCommerce a vyberte ľubovoľný blok podľa obrázka nižšie.

woocommerce gutenberg bloky

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

Ďalšie významné bloky

Už máme viac ako 2 000 slov, a ak to budeme udržiavať, napíšeme celú knihu. Moja modlitba je, že teraz môžete používať Gutenberga bez škytania.

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

  • Miniaplikácie – 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ý – Skvelý blok, ktorý obsahuje váš starý obsah
  • viac – Blok bol predtým známy ako Čítaj viac štítok
  • Pozastavenie stránky, oddeľovače, rozpery
  • Vlastné HTML, Pullquote, tabuľka
  • Galéria a Audio / video vo formáte HTML5
  • A ešte oveľa viac v závislosti od používaných tém a doplnkov

stranou: Vytvorenie stránky WordPress je podobné vytvoreniu príspevku s výnimkou rozdielov pár minút, takže sa dnes nebudeme ponáhľať..

Rýchle hackerské gutenbergové klávesové skratky

Gutenberg prichádza s niekoľkými hackmi a klávesovými skratkami, vďaka ktorým je to ešte jednoduchšie. Napríklad, ak napíšete „/“ vo vnútri bloku odsekov, zobrazí sa zoznam blokov.

Môžete dokonca vybrať konkrétny blok zadaním názvu bloku za lomítko (/), napr. Zadaním „/ image“ sa blok obrázka dostane medzi ďalšie bloky súvisiace s obrázkom. Ďalšie podrobnosti nájdete na obrázku nižšie.

skratka vôle gutenberga

Klávesové skratky: Na zobrazenie všetkých dostupných skratiek stlačte SHIFT + ALT + H vo Windows a OPT + CTRL + H v Mac.

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

štruktúra dokumentu gutenberg

Pekný. Mimoriadne hladký.

Jo, a mimochodom, k chybe „Aktualizácia zlyhala“ zvyčajne dochádza v dôsledku neistého internetového pripojenia ��


Gutenberg je medzi vami a vymyšleným editorom obsahu. Ak ste ochotní sa naučiť laná; môžete veľa žať z editora WordPress budúcnosti.

Gutenberg je stále relatívne mladý a môžete očakávať, že porastie z hľadiska použiteľnosti a funkčnosti. V nadchádzajúcich dňoch to bude vážna sila. Tvorcovia stránok by si mali dávať pozor, lebo im dôjde podnikanie ��

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map