Ako používať nový editor blokov WordPress (Gutenberg Tutorial)

V programe WordPress 5.0 bol klasický editor obsahu nahradený úplne novým editorom blokov známym ako Gutenberg. Od tej doby nás niekoľko našich čitateľov požiadalo, aby sme vytvorili komplexný návod, ako používať editor blokov Gutenberg v programe WordPress..


Editor blokov WordPress je úplne nový a odlišný spôsob vytvárania obsahu vo WordPress. V tomto tutoriále vám ukážeme, ako používať nový editor blokov WordPress a ako ho ovládať na vytváranie vizuálne ohromujúcich blogových príspevkov a stránok..

Pomocou nového editora blokov WordPress aka Gutenberg

Aký je rozdiel medzi editorom blokov (Gutenberg) a klasickým editorom?

Predtým, ako sa pustíme do nového editora, najprv porovnajme a pochopíme rozdiely medzi editorom blokov Gutenberg Block a Classic Editor.

Ako vyzerá klasický editor v programe WordPress:

Starý editor WordPress

Ak inovujete na WordPress 5.0, vyzerá takto nový editor blokov:

Nový editor blokov WordPress, známy tiež ako Gutenberg

Ako vidíte, jedná sa o dva úplne odlišné editory na vytváranie obsahu vo WordPress.

Starý klasický editor bol textový editor s tlačidlami formátovania veľmi podobnými programu Microsoft Word.

Nový editor používa úplne iný prístup, nazývaný „Bloky“ (odtiaľ názov Block Editor)..

Bloky sú prvky obsahu, ktoré pridáte na obrazovku úprav na vytvorenie rozloženia obsahu. Každá položka, ktorú pridáte do svojho príspevku alebo stránky, je blok.

Môžete pridať bloky pre každý odsek, obrázky, videá, galérie, zvuk, zoznamy a ďalšie. Existujú bloky pre všetky bežné prvky obsahu a ďalšie doplnky môžu pridať doplnky WordPress.

Ako je nový editor blokov WordPress lepší ako klasický editor?

Nový editor blokov WordPress ponúka jednoduchý spôsob pridávania rôznych typov obsahu do vašich príspevkov a stránok.

Napríklad, predtým, ak ste chceli pridať tabuľku do svojho obsahu, potom ste potrebovali samostatný doplnok tabuľky.

Pomocou nového editora môžete jednoducho pridať blok tabuľky, vybrať stĺpce a riadky a začať pridávať obsah.

Blok tabuľky

Elementy obsahu môžete posúvať nahor a nadol, upravovať ich ako jednotlivé bloky a ľahko vytvárať multimediálny obsah.

Najdôležitejšie je, že nový editor blokov WordPress sa ľahko používa a učí sa.

To dáva nesmiernu výhodu všetkým začiatočníkom WordPress, ktorí práve začínajú svoj prvý blog alebo vytvárajú obchodnú webovú stránku pre domácich majstrov.

Ako už bolo povedané, poďme sa pozrieť, ako používať nový editor blokov WordPress ako profesionálny nástroj na vytváranie skvelého obsahu.

V tomto tutoriále Gutenberg nájdete nasledujúce informácie:

  1. Pomocou Gutenberg – Nový editor blokov WordPress
  2. Vytvorenie nového blogového príspevku alebo stránky
  3. Ako pridať blok v Gutenbergu
  4. Práca s blokmi v novom editore
  5. Ukladanie a opakované použitie blokov v Gutenbergu
  6. Publikovanie a nastavenie príspevkov v Gutenbergu
  7. Nastavenia doplnkov v novom editore
  8. Pridanie niektorých bežných blokov v Gutenbergu
  9. Preskúmanie niektorých nových blokov obsahu v Gutenbergu
  10. Bonusové tipy na používanie Gutenberga ako profesionála
  11. Pridávanie ďalších blokov do editora blokov Gutenberg
  12. Časté otázky o Gutenbergu

Pripravený? Poďme sa ponoriť.

Použitie Gutenberg – Nový editor blokov WordPress

Editor blokov je navrhnutý tak, aby bol intuitívny a flexibilný. Aj keď to vyzerá inak ako starý editor WordPress, stále robí všetky veci, ktoré ste dokázali urobiť v klasickom editore.

Začnime s pokrytím základných vecí, ktoré ste urobili v klasickom editore, a ako sa to deje v editore blokov.

Vytvorenie nového blogového príspevku alebo stránky pomocou editora blokov

Začnete vytvárať nový blogový príspevok alebo stránku, ako by ste normálne robili. Stačí kliknúť na Príspevky »Pridať nový v ponuke správcu WordPress. Ak vytvárate stránku, prejdite na Stránky »Pridať nový Ponuka.

Pridáva sa nový príspevok

Spustí sa nový editor blokov.

Ako pridať blok v Gutenbergu

Prvý blok každého príspevku alebo stránky je nadpis.

Potom sa môžete pomocou myši pohybovať pod nadpisom alebo stlačením klávesu Tab na klávesnici posunúť nadol a začať písať.

Pridanie názvu príspevku v Gutenbergu

V predvolenom nastavení je nasledujúci blok odsekom. To umožňuje používateľom začať písať ihneď.

Ak však chcete pridať niečo iné, môžete kliknúť na tlačidlo pridať nový blok v ľavom hornom rohu editora, pod existujúcim blokom alebo na ľavú stranu bloku..

Tlačidlo Pridať nový blok

Kliknutím na tlačidlo sa zobrazí ponuka pridať blok s horným vyhľadávacím panelom a bežne používanými blokmi nižšie.

Kliknutím na karty môžete prehľadávať kategórie blokov alebo zadaním kľúčového slova rýchlo vyhľadať blok.

Nájdenie a pridanie blokov v Gutenbergu

Ak nechcete používať myš na kliknutie na tlačidlo, môžete použiť klávesovú skratku zadaním / pre vyhľadanie a pridanie bloku.

Práca s blokmi v novom editore

Každý blok sa dodáva s vlastným panelom nástrojov, ktorý sa zobrazuje v hornej časti bloku. Tlačidlá na paneli nástrojov sa menia v závislosti od bloku, ktorý upravujete.

Napríklad na tejto snímke obrazovky pracujeme v bloku odsekov, ktorý zobrazuje tlačidlá základného formátovania, ako sú: zarovnanie textu, tučné písmo, kurzíva, vloženie odkazu a tlačidlá prečiarknutia.

Každý blok sa dodáva s vlastným panelom nástrojov

Okrem panela nástrojov môže mať každý blok aj svoje vlastné nastavenia bloku, ktoré sa zobrazia v pravom stĺpci obrazovky úprav.

Blokovať nastavenia

Bloky môžete posúvať nahor a nadol jednoduchým presunutím myšou alebo kliknutím na tlačidlá nahor a nadol vedľa každého bloku.

Posúvanie bloku nahor a nadol

Ukladanie a opakované použitie blokov v Gutenbergu

Jednou z najlepších vecí o blokoch je to, že sa dajú jednotlivo uložiť a znovu použiť. Je to užitočné najmä pre blogerov, ktorí často potrebujú do svojich článkov pridať konkrétne útržky obsahu.

Jednoducho kliknite na tlačidlo ponuky umiestnené v pravom rohu panela s nástrojmi každého bloku. Z ponuky vyberte možnosť „Pridať do opakovane použiteľných blokov“.

Uloženie bloku na neskoršie použitie

Zobrazí sa výzva na zadanie názvu tohto opakovane použiteľného bloku. Zadajte názov bloku a potom kliknite na tlačidlo Uložiť.

Pomenovanie opakovane použiteľného bloku

Editor blokov teraz blok uloží ako opakovane použiteľný blok.

Po uložení bloku sa pozrime, ako pridať opakovane použiteľný blok do ďalších príspevkov a stránok WordPress na vašom webe..

Jednoducho upravte príspevok alebo stránku, na ktorú chcete pridať opakovane použiteľný blok. Na obrazovke úpravy príspevku kliknite na tlačidlo Pridať blok.

Uložený blok nájdete na karte „Opakované použitie“. Nájdete ho aj zadaním jeho názvu do vyhľadávacieho panela.

Vložte opakovane použiteľný blok

Ak chcete zobraziť rýchly náhľad bloku, môžete nad ním prejsť myšou. Stačí kliknúť na blok a vložiť ho do svojho príspevku alebo stránky.

Všetky opakovane použiteľné bloky sú uložené v databáze WordPress a môžete ich spravovať kliknutím na odkaz „spravovať všetky opakovane použiteľné bloky“..

Spravujte opakovane použiteľné bloky

Tým sa dostanete na stránku správcu blokov. Odtiaľto môžete upravovať alebo mazať ktorýkoľvek z vašich opakovane použiteľných blokov. Môžete tiež exportovať opakovane použiteľné bloky a používať ich na akomkoľvek inom webovom serveri WordPress.

Importujte export opakovane použiteľné bloky do WordPress

Možnosti publikovania a správy v editore blokov Gutenberg

Každý príspevok WordPress obsahuje veľa metadát. Patria sem informácie ako dátum zverejnenia, kategórie a značky, odporúčané obrázky a ďalšie.

Všetky tieto možnosti sú prehľadne umiestnené v pravom stĺpci na obrazovke editora.

Nastavenia dokumentu v novom editori WordPress v Gutenbergu

Možnosti doplnkov v Gutenbergu

Doplnky WordPress dokážu využiť API editora blokov na integráciu svojich vlastných nastavení do obrazovky úprav.

Niektoré populárne doplnky sú už dostupné ako bloky. Napríklad WPForms, najlepší doplnok na tvorbu formulárov WordPress, umožňuje pridávať formuláre do obsahu pomocou bloku miniaplikácií..

Blok WPForms v novom editore Gutenberg

Takto vám SEO umožňuje upravovať nastavenia SEO v novom editore:

Vaše nastavenia SEO v novom editore Gutenberg

WooCommerce je dodávaný aj s blokmi widgetov, ktoré môžete ľahko pridať do ktoréhokoľvek z vašich príspevkov a stránok WordPress.

Blok produktov WooCommerce

Pridanie niektorých bežných blokov do nového editora

V podstate nový editor dokáže urobiť všetko, čo urobil klasický editor. Budete však robiť veci rýchlejšie a elegantnejšie ako predtým.

1. Pridanie obrázka do nového editora WordPress

V novom editore WordPress je pripravený blok obrázkov. Jednoducho pridajte blok a potom nahrajte obrazový súbor alebo vyberte z knižnice médií.

Blok obrázkov v novom editore WordPress

Obrázky môžete tiež presúvať myšou z počítača a editor pre ne automaticky vytvorí blok obrázkov.

Po pridaní obrázka sa vám zobrazia nastavenia bloku, do ktorých môžete pridať metadáta pre obrázok, napríklad alt text, veľkosť a pridať odkaz na obrázok..

Nastavenia blokov obrázkov

2. Pridanie odkazu do nového editora blokov

Editor blokov je dodávaný s niekoľkými blokmi, do ktorých môžete pridávať text. Najbežnejšie sa používa blok odsekov, ktorý je dodávaný s tlačidlom vloženia odkazu na paneli nástrojov.

Všetky ostatné bežne používané textové bloky obsahujú aj tlačidlo odkazov na paneli nástrojov.

Tlačidlo prepojenia v bloku zoznamu

Prepojenie môžete vložiť aj pomocou klávesovej skratky, ktorá je Command + K pre Mac a CTRL + K na počítačoch Windows.

3. Pridanie galérie obrázkov v Gutenbergu

Blok galérie funguje ako blok obrázkov. Pridáte ho a potom nahráte alebo vyberiete obrazové súbory.

Pridanie galérie obrázkov do nového editora WordPress

4. Pridávanie krátkych kódov do príspevkov WordPress pomocou Gutenberg

Všetky vaše krátke kódy budú fungovať rovnako ako v klasickom editore. Môžete ich jednoducho pridať do bloku odsekov alebo môžete použiť blok krátkych kódov.

Pridanie bloku s krátkym kódom

Preskúmanie niektorých nových blokov obsahu v Gutenbergu

Gutenbergov editor sľubuje vyriešiť niektoré dlhotrvajúce problémy s použiteľnosťou v WordPress zavedením nových blokov.

Nasledujú niektoré z obľúbených položiek, ktoré považujeme za užitočné pre používateľov.

1. Pridanie obrázka vedľa textu v programe WordPress

Použitím starého editora sa mnohým našim používateľom nepodarilo umiestniť obrázok vedľa textu. Môžete to urobiť teraz pomocou Media & text blok.

Blok médií a textu

Tento jednoduchý blok sa dodáva s dvoma blokmi umiestnenými vedľa seba, čo vám umožňuje ľahko pridať obrázok a vedľa neho pridať nejaký text.

2. Pridanie tlačidla do príspevkov a stránok WordPress

Pridanie tlačidla na vaše blogové príspevky alebo stránky bolo ďalšou nepríjemnosťou v klasickom editore. Buď ste museli použiť doplnok, ktorý pre tlačidlo vytvoril skratku, alebo ste museli prepnúť do režimu HTML a napísať kód.

Gutenberg je dodávaný s blokom tlačidiel, ktorý vám umožňuje rýchlo pridať tlačidlo na ľubovoľný príspevok alebo stránku.

Pridanie tlačidla v Gutenbergu

Môžete pridať odkaz na svoje tlačidlo, zmeniť farby a vybrať si z troch štýlov tlačidiel.

3. Pridanie krásnych titulných obrázkov do blogových príspevkov a vstupných stránok

Ďalšou skvelou funkciou, ktorú by ste mohli vyskúšať, je blok „Obal“, ktorý vám umožňuje pridať obrázky obálky k vašim príspevkom a stránkam..

Obrázok obálky je širší obrázok, ktorý sa často používa ako obálka pre novú časť stránky alebo začiatok príbehu. Vyzerajú krásne a umožňujú vám vytvárať pútavé rozloženia obsahu.

Stačí pridať krycí blok a potom nahrať obrázok, ktorý chcete použiť. Môžete zvoliť farbu prekrytia pre obal alebo z neho urobiť pevný obrázok na pozadí, aby ste pri posúvaní stránky nadol používali efekt paralaxy.

Blok obálky v editore Gutenberg

4. Vytváranie tabuliek vo vnútri článkov

Klasický editor nemal tlačidlo na pridávanie tabuliek do vašich príspevkov v systéme WordPress. Museli ste použiť doplnok alebo vytvoriť tabuľku s vlastným CSS a HTML.

Nový editor Gutenberg je dodávaný s predvoleným blokom tabuliek, čo uľahčuje pridávanie tabuliek do vašich príspevkov a stránok. Jednoducho pridajte blok a potom vyberte počet stĺpcov a riadkov, ktoré chcete vložiť.

Blok tabuľky

Teraz môžete pokračovať a začať pridávať údaje do riadkov tabuľky. V prípade potreby môžete vždy pridať ďalšie riadky a stĺpce. K dispozícii sú tiež dve základné možnosti štýlu.

5. Vytváranie obsahu viacerých stĺpcov

Vytváranie obsahu viacerých stĺpcov bolo ďalším problémom, ktorý klasický editor vôbec nezvládol. Editor blokov vám umožňuje pridať blok Stĺpce, ktorý v podstate pridá dva stĺpce odsekov.

Obsah pozostávajúci z viacerých stĺpcov

Tento stĺpec stĺpcov je pomerne flexibilný. Môžete pridať až 6 stĺpcov v riadku a dokonca použiť iné bloky vo vnútri každého stĺpca.

Bonusové tipy na používanie Gutenberga ako profesionála

Pri pohľade na nového editora blokov sa možno pýtate, či budete tráviť viac času pridávaním a úpravou blokov než vytváraním skutočného obsahu?

Nový editor je neuveriteľne rýchly a dokonca aj veľmi základné použitie na pár minút vám umožní okamžite pridať bloky bez premýšľania..

Čoskoro si uvedomíte, ako rýchlejšie sa váš pracovný postup stane s týmto novým prístupom.

Pre pokročilých používateľov uvádzame niekoľko tipov, ktoré vám pomôžu pracovať ešte rýchlejšie s novým editorom WordPress.

1. Posuňte nástrojovú lištu bloku nahor.

Ako ste si možno na snímkach obrazovky všimli, v hornej časti každého bloku sa nachádza panel s nástrojmi. Tento panel s nástrojmi môžete presunúť na začiatok editora.

Jednoducho kliknite na tlačidlo s tromi bodkami v pravom hornom rohu obrazovky a potom vyberte možnosť Horný panel s nástrojmi.

Presuňte panel s nástrojmi blok do hornej časti editora

2. Použite klávesové skratky

Gutenberg prichádza s niekoľkými užitočnými skratkami, vďaka ktorým bude váš pracovný tok ešte lepší. Prvý, ktorý by ste mali začať používať ihneď, je /.

Jednoducho zadajte / a potom začnite písať a zobrazí sa vám zodpovedajúce bloky, ktoré môžete okamžite pridať.

Ak chcete získať ďalšie skratky, kliknite na ponuku s tromi bodkami v pravom hornom rohu obrazovky a potom vyberte možnosť Klávesové skratky..

Spustite klávesové skratky

Zobrazí sa kontextové okno so zoznamom všetkých klávesových skratiek, ktoré môžete použiť. Zoznam bude mať rôzne skratky pre používateľov Windows a Mac.

3. Potiahnutím a presunutím média automaticky vytvorte bloky médií

Gutenberg vám umožňuje jednoducho presúvať súbory kdekoľvek na obrazovke a automaticky pre vás vytvorí blok.

Môžete vyhodiť jeden obrázok alebo video súbor a vytvorí blok pre vás. Ak chcete vytvoriť blok galérie, môžete tiež zrušiť niekoľko obrázkových súborov.

Presuňte blok galérie v novom editore WordPress

4. Pridávanie videí YouTube, Twitter, Facebook, Vimeo a ďalších vložení

Gutenberg predstavuje nové bloky vkladania do editora blokov. Existuje blok pre všetky podporované typy vloženia vrátane služieb YouTube, Twitter, Facebook a ďalších.

Vložte bloky

Vloženú adresu URL však môžete kedykoľvek skopírovať a prilepiť a automaticky pre vás vytvorí blok.

Ak ste napríklad pridali webovú adresu videa YouTube, automaticky vytvorí blok na vloženie videa YouTube a video zobrazí.

Vloženie YouTube

Pridanie ďalších blokov do editora blokov Gutenberg Block vo WordPress

Nový editor blokov vo WordPress umožňuje vývojárom vytvárať vlastné bloky. Existuje niekoľko úžasných doplnkov WordPress, ktoré ponúkajú nové balíčky blokov pre nového editora.

Tu je ich niekoľko:

1. Pokročilý Gutenberg

Pokročilý Gutenberg

Pokročilý Gutenberg prichádza s niekoľkými blokmi pre populárne prvky obsahu, ako je posúvač produktu WooCommerce, referencie, mapy, počítadlo, karty, akordeóny a ďalšie.

Poskytuje tiež pokročilú kontrolu nad tým, ktorí používatelia môžu pristupovať k blokom na základe ich užívateľských rolí. Môžete si vytvoriť užívateľské profily a vybrať, ktoré bloky môžu pridať.

2. Stohovateľné – bloky Gutenberg

Stohovateľné - bloky Gutenberg

Stohovateľné – bloky Gutenberg sú kolekciou krásne navrhnutých blokov Gutenberg, ktoré môžete použiť na svojich webových stránkach. Zahŕňa bloky pre kontajner, príspevky, mriežku funkcií, akordeón, rámček s obrázkami, zoznam ikon, výzvu na akciu a ďalšie.

3. Bloky editora

Bloky editorov pre Gutenberg

Editor Blocks je ďalšia prehľadná kolekcia Gutenbergových blokov, ktorú môžete použiť. Dodáva sa s užitočnými blokmi, ako je profil autora, hrdina, cenová tabuľka, značky, funkcie a ďalšie.

Často kladené otázky o Gutenberg – The New Block Editor vo WordPress

Odkedy sa Gutenberg stal novým editorom WordPress, dostávame veľa otázok. Tu sú odpovede na niektoré z najčastejšie kladených otázok o Gutenbergu.

1. Čo sa stane s mojimi staršími príspevkami a stránkami? Môžem ich ešte upravovať?

Vaše staré príspevky a stránky sú Gutenbergom úplne bezpečné a nedotknuté. Stále ich môžete upravovať a Gutenberg ich automaticky otvorí v bloku obsahujúcom klasický editor.

Úpravy starších článkov v novom editore WordPress

Môžete ich upravovať vo vnútri starého editora alebo môžete prevádzať staršie články na bloky a používať nový editor blokov.

2. Môžem stále používať starý editor?

Áno, stále môžete používať starý editor. Jednoducho nainštalujte a aktivujte doplnok Classic Editor.

Po aktivácii deaktivuje editor blokov a budete môcť pokračovať v používaní klasického editora.

Upozorňujeme, že klasický editor bude podporovaný do roku 2022.

3. Čo robiť, ak nový editor nefunguje s doplnkom alebo motívom, ktorý používam?

Projekt Gutenberg bol vo vývoji už dlhý čas. To poskytlo autorom doplnkov a tém dostatok času na otestovanie kompatibility ich kódu.

Stále však existuje šanca, že niektoré doplnky a témy s novým editorom nemusia fungovať dobre. V takom prípade môžete nainštalovať klasický editorový doplnok, požiadať vývojára o podporu Gutenberga alebo jednoducho nájsť alternatívny doplnok alebo tému.

4. Ako sa dozvedieť viac Gutenbergových tipov a trikov?

WPBeginner je najlepšie miesto, kde sa môžete dozvedieť viac o novom editore blokov vo WordPress. Sme najväčšia webová stránka zdrojov WordPress na internete.

Budeme publikovať nové články a aktualizovať naše staré zdroje, aby sme vám pomohli zvládnuť nový editor blokov.

Medzitým, ak máte nejaké otázky, neváhajte nás osloviť zanechaním komentára alebo použitím kontaktného formulára na našej webovej stránke..

Dúfame, že vám tento tutoriál Gutenberg pomohol naučiť sa používať nový editor blokov WordPress. Možno budete chcieť navštíviť aj nášho úplného sprievodcu výkonom WordPress, ktorý vám umožní zvýšiť rýchlosť vašich webových stránok.

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