Lépésről lépésre a WordPress Gutenberg készítőjéhez

Lépésről lépésre a WordPress Gutenberg készítőjéhez

Azt hiszem, egyetért azzal, amikor azt mondom: Ez az egész Gutenberg-üzlet zavaró.


Először is, az új blokk szerkesztőt nehéz használni, vagy mi? Úgy értem, nem tudja, hová ment az összes kedvenc eszköz. Most valószínűleg hosszabb időt vett igénybe egy posta létrehozásakor, igaz?

Lehet, hogy egy link hozzáadása (társult vagy más módon) dobott neked egy görbét, és csalódottnak érezte magát. Lehet, hogy problémái vannak egy kép hozzáadásával a szöveg mellé.

Lehet, hogy megpróbált több oszlopot hozzáadni, és a dolgok nem a vártnak megfelelően működtek. Ha nem erről van szó, akkor lehet, hogy nem tudja könnyen hozzáadni a PDF-fájljait, vagy többször látja a rettegett „A frissítés sikertelen” üzenetet.

Nos, ne aggódj már; Nemrégiben voltam a pontos helyzetben, de most Gutenberg számára izgalmat találtam. Van egy tanulási görbe, igen, de a mai üzenet végére másként fogja gondolni Gutenbergre.

Mi a Gutenberg szerkesztő??

wordpress gutenberg szerkesztő

Ön a Gutenbergre, az alapértelmezett WordPress blokk-szerkesztőre néz

Ha WordPress 5.0 vagy újabb verziót használ, akkor találkoznia kell az új és fényes WordPress szerkesztővel, amely híresen Gutenberg néven ismert..

És mint sok más felhasználó, a forradalmi szerkesztőt is használni akarja, de tétovázol, mert Gutenberg bonyolult.

Vagy talán amikor először találkoztál Gutenberggel, sok minden nem működött. Végül is a fejlesztők a témákat és a bővítményeket kompatibilisek voltak és teszik még mindig a blokk szerkesztővel.

Tehát gyorsan visszatért a Klasszikus szerkesztő, ami, BTW, rendben van velünk. Ne feledje, hogy a WordPress 2022 után nem fogja támogatni a Klasszikus Szerkesztőt. Plusz, hiányzik a Gutenberg által kínált összes további termék..

A funkcionalitás szempontjából a Classic Editor és a Gutenberg ugyanazt csinálják; tudod, mindkét eszköz segít tartalom létrehozásában kódolás nélkül.

Ugyanakkor annyira hozzászoktunk a régi WYSIWYG szerkesztőhöz, hogy kissé idegennek találjuk az új Gutenberg felhasználói felületet, ha nem teljesen zavaró. Legalábbis ezt gondolom.

De pontosan mi az a Gutenberg?

A Gutenberg az új alapértelmezett WordPress-szerkesztő. Ellentétben a hagyományos vizuális / szövegszerkesztővel; A Gutenberg tartalmi blokkokat használ, ugyanúgy, mint sok mai oldal-készítő.

Intuitív funkciókkal szállítja, mint a Classic Editor, vagyis multimédiás tartalmakat készíthet menet közben. Most rendkívül gyorsan elronthatja a rendkívüli elrendezéseket, akár WordPress hozzászólásokkal, akár oldalakon dolgozik.

És néhány kiegészítővel a Gutenberg kedvezően versenyezhet a már bevezetett WordPress oldal-építőkkel, például Brizy, Elementor és Divi.

Az egyetlen hátrány, hogy az oldalépítők gyakran több funkciót kínálnak, mert elsősorban oldalépítők! Ugyanakkor Gutenberg még mindig elég fiatal, és csak arra számíthat, hogy a blokk-szerkesztő ugrásszerűen növekszik..

A mai üzenetben izgalmas idő lesz egy WordPress-üzenet létrehozása a Gutenberg szerkesztővel. Célom, hogy minden apró részletet és funkciót lefedje, hogy a Gutenberg segítségével olyan tartalmakat hozzon létre, mint a profik.

Kész vagy? Ha igen, készítsük el azt a WordPress-bejegyzést.

Hogyan lehet WordPress hozzászólást létrehozni a Gutenberg segítségével

Ha WordPress webhelyet futtat, valószínűleg több hozzászólást hoz létre, mint oldalakat. A következő szakaszban létrehozunk egy WordPress-bejegyzést Gutenbergben a semmiből. Remélem, annyira szórakozni fogsz, mint én Gutenberg tesztelésekor.

Az útból keresse meg Hozzászólások> Új hozzáadása amint azt az alábbi képernyőképen kiemeljük.

új bejegyzés létrehozása a gutenbergben

Ezzel egyenesen az alább látható Gutenberg szerkesztőhöz vezet.

wordpress gutenberg szerkesztő

Nagyon ügyes, mi? Tegyük fel ezeket a hüvelyeket, és kezdjük el az üzletet.

Cím hozzáadása

új cím hozzáadása a gutenberg-hez

Megjegyzés nem írható szilárd cím nélkül. A jó dolog az, hogy Gutenberg hihetetlenül egyszerűvé teszi a cím felvételét.

Az első blokk, amelyet látsz, a Cím a dokumentum tetején, amint azt a fenti képen részletezzük. Bejegyzés címének létrehozásához írja be a blokkot. Egyszerű, mint A, B, C.

Szerkesztnie kell az állandó linket? Ezt könnyedén megteheti a Cím blokkolja a szerkesztése gombot az alább látható módon.

permalink in gutenberg szerkesztése

Miután hozzáadta a címet, nyomja meg a BELÉP gomb egy új sor elindításához. Igen, a Gutenberg megőrzi a kedvenc natív navigációt a klasszikus WordPress szerkesztőben.

Új bekezdés hozzáadása

új bekezdésblokk gutenbergben

Ütve a BELÉP gomb létrehoz egy új Bekezdés blokk, a fenti ábra szerint. Mielőtt bármilyen szöveget beírna, a blokk néhány lehetőséget kínál. További részletekért lásd az alábbi számozott képet.

új bekezdésblokk opciók gutenberg

Notes. Tudsz:

  1. Konvertálja az új bekezdést bármely más blokkba, például kép, fejléc, borító, galéria, WooCommerce, űrlap stb.
  2. A parancsikon segítségével módosíthatja a bekezdési blokkot képblokkdá
  3. Változtassa meg a bekezdési blokkot egy fejléc blokkba, azaz H2, H3 és H4
  4. A bekezdési blokkot alakítsa át fedőkép-blokkdá

Illusztráció céljából az első bekezdést az utólagos bevezetéshez fogom fenntartani. Miután hozzáadott egy szöveget, megjelenik egy formázási eszköztár, az alább látható módon.

gutenberg bekezdések formázására szolgáló eszköztár

A formázási eszköztárnak köszönhetően:

  • Fedje le a bekezdést egy versre, idézetre, fejlécre, listára, kódra és előre formázott szövegre
  • Bátor, Dőlt betűvel szed, áthúzás, és aláhúzás tartalom
  • Igazítsa a szöveget balra, jobbra, középpontba és igazolja
  • Adjon hozzá egy linket, amely új lapon is megnyílik
  • Helyezzen be egy beépített képet (igen, létezik!)
  • A blokkbeállítások elrejtése
  • Másolja a blokkot
  • Helyezzen be egy blokkot az aktuális blokk előtt vagy után (a mi esetünkben ez az első bekezdés, így még soha nem adtak hozzá semmit, csak utána.) Az első bekezdés előtt borítókép-blokkot adhat hozzá, ha úgy akarja, mert úgy néz ki. jó
  • Szerkessze a blokkot HTML formátumban
  • Adja hozzá az aktuális blokkot az újrafelhasználható blokkokhoz, így más postákban felhasználhatja
  • Távolítsa el teljesen a blokkot

A bekezdések blokkját tovább testreszabhatja a Blokk fül található az oldalsáv menüben, az alább látható módon.

A gutenberg oldalsáv lehetőségei a bekezdésblokkhoz

Néhány megjegyzés a fenti képről:

  1. Válaszd a Blokk itt lapon megtekintheti az összes blokkolási lehetőséget és beállítást
  2. Válassza ki a betűméretet, és itt aktiválja a Drop Cap-ot
  3. Adja hozzá a háttér színét a bekezdéshez. Kékre állítottam illusztráció céljából. Testreszabhatja a szöveg színét. Mindkét esetben korlátlanul egyedi színeket adhat hozzá
  4. Ide hozzáadhat egyéni CSS osztályt, azaz további CSS stílusokat adhat hozzá a blokkhoz
  5. A kék háttér és a Drop Cap már alkalmazták a Gutenberg szerkesztőben

Az oldalsáv Dokumentum lapja

Van egy másik lap az oldalsáv menüben; az Dokumentum fül az alább látható módon.

bekezdésblokk oldalsáv dokumentum fül

Itt a fenti kép megjegyzései:

  1. Kattintson ide a váltáshoz Dokumentum lap
  2. Itt ütemezhet egy hozzászólást, beállíthatja a láthatóságot egyikére Magán vagy Nyilvános, állítson be posztot Függőben lévő áttekintés állapotát, válassza ki a hozzászólás formátumát, és hozzon létre egy ragadós hozzászólást
  3. Ez a szakasz lehetővé teszi az állandó link szerkesztését
  4. Itt kiválaszthat vagy létrehozhat új kategóriákat
  5. Címkék hozzáadása a bejegyzéshez
  6. Állítsa be a kiemelt képet
  7. Hozzon létre egy kézi kivonatot
  8. Kommentárok, pingback és trackbacks engedélyezése

Mint láthatja, rengeteg lehetősége van arra, hogy tervezzen egy bekezdést (és a teljes hozzászólást), ahogy kívánja. Mellesleg, a különböző blokkok eltérő beállításokkal rendelkeznek, amint egy perc alatt megtanuljuk.

Az első bekezdés után nyomja meg a BELÉP ismét nyomja meg a gombot egy új sor (vagy bekezdésblokk) létrehozásához. Tegyünk fel egy képet az első bekezdés alá.

Képek hozzáadása a Gutenberg-hez

új kép hozzáadása a gutenbergben

Azt mondják, hogy egy kép több ezer szót beszél, és egy kép nélküli blogbejegyzés is rettenetes. Ha képet szeretne hozzáadni a WordPress-üzenetbe a Gutenberg használatával, akkor néhány lehetőség közül választhat.

Amikor eltaláltad a BELÉP néhány perccel ezelőtt, egy új bekezdést váltott ki. Mivel a Gutenberg intuitív, hozzáadhat egy képet a plusz (+), a kép vagy a borító ikonra kattintással, amint azt az alábbi kép kiemeli.

új kép hozzáadása a gutenberg szerkesztőben

Pár jegyzet:

  1. Felvehet egy képet a plusz (+) ikonokkal
  2. Itt könnyen hozzáadhat képet
  3. Ez a beállítás lehetővé teszi a borító kép (Ezek általában nagyobbak, mint a többi fénykép. Ráadásul szöveget adhat a borítóképekhez, BTW)

Haladjon tovább, és kattintson bármelyik plusz (+) ikonra. Ezután kattintson a Kép fül, az alább látható módon.

képek hozzáadása a gutenbergben

Kattintson a Kép fül betölti a Kép az alábbi képernyőképen látható blokk.

gutenberg képblokk

Az Kép A blokk lehetővé teszi egy kép feltöltését vagy hozzáfűzését URL-ről vagy a médiakönyvtárból. A folyamat során hozzáadhat alt szöveget (a SEO szempontjából fontos), feliratot és leírást a média képernyő beállításain keresztül, vagy a Blokk oldalsáv, ahogy az a következő képeken látható.

A szokásos médiabeállítások…

WordPress médiabeállítások

…és a Kép blokkolja a beállításokat.

gutenberg képblokk beállításai

Ma itt tanul valamit? Remélem. Menjünk tovább.

A kép hozzáadása után Gutenberg hozzáad egy új bekezdést közvetlenül alatta. Bármit hozzáadhat, amit akar, de szemléltetés céljából hozzáadtam egy szöveget, majd egy gombot az alá.

Hogyan lehet hozzáadni letölthető fájlokat, pl. PDF, képek, videók stb

A Gutenberg hihetetlenül könnyűvé teszi a letölthető fájlok hozzáadását a WordPress-bejegyzéshez vagy -oldalához.

Egy új Bekezdés blokkolásához kattintson a plusz (+) ikonra, keresse meg Közös blokkok és nyomja meg a fájl lapon, amint az alábbiakban kiemelem.

letölthető fájlok hozzáadása a gutenbergbe

Ezzel elindítja a következő blokkot:

gutenberg fájlblokk

Tól fájl blokkolás esetén feltölthet egy új fájlt, vagy hozzáadhat egyet a médiakönyvtárból. A fájl hozzáadása után Gutenberg hozzáad egy aranyos anyagot Letöltés gomb automatikusan, az alábbi képen látható módon.

fájl hozzáadása a gutenbergbe

Játszhatsz a lehetőségekkel. Például szerkesztheti / törölheti a „Ingyenes Gutenberg PDF ellenőrzőlistaCímet, valamint a Letöltés gomb. Felvehet egy CSS osztályt a blokkba, és stílusát is megadhatja, ahogy szeretné.

Idézet hozzáadása Gutenberghez

Ezután tegyünk fel egy idézetet, mert bájos, fülbemászó és segít hazajutni. Egy új sorban kattintson a plusz (+) jelre, keresse meg Közös blokkok és nyomja meg a Idézet fül az alább látható módon.

idézetek hozzáadásával a gutenbergben

Ezzel hozzáadódik a Idézet blokkolja bejegyzését, amint azt az alábbi képernyőgrajz kiemeli.

gutenberg idézettség blokk beállítások

Vegye figyelembe az idézőblokk beállításait a fenti jobb oldali sávban?

Idézet hozzáadásához írja be a blokkot. Itt az én eredményem.

gutenberg idézet

Hihetetlenül jól néz ki, igaz?

Média beágyazása Gutenbergben

A Gutenberg számos blokkkal rendelkezik, hogy videókat és egyéb médiumokat ágyazzon be legalább 30 webhelyről, például a YouTube, a Vimeo, a Facebook, a SoundCloud, a WordPress, a Slideshare és így tovább.

A tartalom beágyazásához kattintson a plusz (+) ikonra, keresse meg Beágyazások, és válassza ki a webhelyet. Például a YouTube-t akartam, amint az alább látható.

gutenberg youtube embed

Ezután másolja be és illessze be a YouTube video URL-jét, majd kattintson a gombra Beágyaz gombot az alábbi képen látható módon.

gutenberg youtube beágyazási blokk

Amint megütötte a Beágyaz gombra kattintva a Gutenberg automatikusan átalakítja a linket egy videóba, amint az alábbiakban kiemelem.

beágyazott youtube videó gutenbergben

Sima vitorlás végig. Most tegyünk hozzá egy önálló gombot, amely tökéletes a cselekvésre ösztönzés (CTA) létrehozásához..

Gomb beillesztése a Gutenberg-ben

Ezen a ponton nem kellene nehéznek lennie blokkok hozzáadásával. Csak kattintson a plusz (+) elemre, és válassza ki a blokkot. Ettől nem lehet könnyebb.

Szóval, hogyan adunk hozzá egy gombot?

Egy új sorban (vagy blokkban) kattintson a plusz (+) ikonra, keresse meg Elrendezési elemek majd kattintson a Gomb fül az alább látható módon.

gombok hozzáadása a gutenberg szerkesztőben

Így a Gomb blokkoljuk, amint alább részletezzük.

gombok hozzáadása a gutenberg szerkesztőben

Amint az a fenti képen látható, szerkesztheti a gomb szövegét és hozzáadhat egy linket. Ezenkívül testreszabhatja a gombot a képernyő jobb oldalán lévő oldalsáv menüjén keresztül.

Néhány kattintás után itt van, amit kaptam.

példa a gutenberg gombra

Egyébként, ha nehezen olvasható színkombinációkat használ a gombjain, Gutenberg haladéktalanul értesíti Önt. De kedves?

Oszlopok hozzáadása a Gutenberg-hez

Tegyünk fel néhány oszlopot egy szép gombbal a helyén. Két oszlopot fogok hozzáadni, tehát figyelmesen követem.

Itt van, mit kell tennie. Kattintson a plusz (+) ikonra, keresse meg Elrendezési elemek majd kattintson a Oszlopok fülre az alábbi képen látható módon.

oszlopok fül gutenberg szerkesztő

Gutenberg alapértelmezés szerint két oszlopot ad hozzá. Tekintse meg az alábbi képet, és ne feledje, már tartalmat adtam hozzá az oszlopokhoz.

gutenberg oszlopok a wordpress szerkesztőben

Ami engem kap:

gutenberg oszlopok előlapja

Nem rossz néhány másodpercig a munka. De talán nem akar oszlopokat létrehozni. Talán képet szeretne megjeleníteni egy szöveg mellett.

Van egy blokk ehhez? Igen van!

Kép hozzáadása a szöveg mellé Gutenbergben

Szeretne képet hozzáadni egy szöveg mellé? Ha igen, imádni fogja a következő részt.

Mint általában, kattintson a plusz (+) ikonra, keresse meg Elrendezési elemek és kattintson a gombra Média és szöveg az alábbiak szerint.

média és a szöveg gutenberg blokk

Látnod kellene a Média és szöveg blokk, az alább látható módon.

média és szövegblokk gutenbergben

Ezután töltse fel a képet / videót / médiát, vagy adjon hozzá egyet a médiakönyvtárból. Ezután adja hozzá a szöveget az adathordozó mellé, amint az az alábbi képen látható.

Körül játszottam a Média és szöveg blokkoltam, és a következővel jöttem fel. Ne feledd; Itt is sikerült megnyomni egy gombot in

média és szövegblokk teljes akcióban

Ó, ez a háttér! Hadd mutassam meg a front-endot. Itt:

médiaszöveg gutenbergben

Úgy néz ki, nagyon profi, igaz? Biztosan el tudja képzelni, hogy mennyit érhet el a Gutenberg szerkesztővel.

Harmadik fél Gutenberg blokkjai

A WordPress fejlesztői szívesen teszik a témákat és a pluginokat kompatibilisvé a Gutenberg szerkesztővel. Néhány példa a WooCommerce, a Jetpack és a Yoast SEO.

Például hozzáadhat WooCommerce blokkokat a WordPress-üzenethez. Először telepítenie kell és aktiválnia kell a WooCommerce alkalmazást.

Ezután egy új sorban kattintson a plusz (+) ikonra, keresse meg WooCommerce és válassza ki a kívánt blokkot az alább látható módon.

woocommerce gutenberg blokkok

Tudod mit jelent ez? Ez azt jelenti, hogy percek alatt létrehozhat multimédiás médiákat, nagyszerű hozzászólásokat és oldalakat.

Egyéb figyelemre méltó blokkok

Már több mint 2000 szóval állunk, és ha ezt tartjuk fenn, akkor egy egész e-könyvet írunk. Imádom, hogy mostantól csuklás nélkül használhatja a Gutenberget.

Az egyébként itt található a rendelkezésre álló egyéb blokkok listája.

  • Widgets – Felveheti a kütyü tartalmát blogbejegyzésekbe
  • shortcodes – továbbra is használhatja a natív WordPress rövidkódokat
  • Klasszikus – Egy nagyszerű blokk, amely megőrzi a régi tartalmat
  • Több – A blokk korábban a Olvass tovább címke
  • Oldaltörés, elválasztók, távtartók
  • Egyéni HTML, Pullquote, táblázat
  • Képtár és HTML5 audio / video
  • És még sok más, a használt témáktól és beépülő moduloktól függően

Félre: A WordPress oldal létrehozása hasonló a hozzászólás létrehozásához, néhány perc különbségek mentésére, tehát ma nem fogunk belefeledkezni erről..

Gyors Gutenberg Hacks és gyorsbillentyűk

A Gutenberghez néhány hack és billentyűparancs tartozik, amelyek még könnyebbé teszik. Például, ha beír egy „/” egy bekezdésblokkba, akkor megjelenik a blokkok listája.

Még egy adott blokkot is kiválaszthat, ha beírja a blokk címét a visszajelzés után (/), például a „/ image” beírásával megjelenik a képblokk a többi, a képhez kapcsolódó blokk között. További részletekért lásd az alábbi képet.

gutenberg gyorshívás

Gyorsbillentyűket: Az összes elérhető hivatkozás megtekintéséhez nyomja meg a gombot SHIFT + ALT + H Windows és OPT + CTRL + H Mac-ben.

A dokumentum tetején a (i) ikonra kattintva láthatja a dokumentum szerkezetét, az alább látható módon.

gutenberg dokumentum szerkezete

Szép. Rendkívül sima.

Ó, és egyébként a „Frissítés sikertelen” hiba általában egy remegő internetkapcsolat miatt történt ��


Között közted és Gutenberg fantasztikus tartalomszerkesztő. Feltéve, hogy hajlandó megtanulni a köteleket; sokat nyerhet a jövő WordPress szerkesztőjéből.

Gutenberg még mindig viszonylag fiatal, és számíthat arra, hogy növekedni fog a használhatóság és a funkcionalitás szempontjából. Komoly erő lesz, amellyel számolni kell az elkövetkező napokban. Az oldalépítők jobban figyelnek, különben el fognak fogyni business

Reméljük, hogy lépésről lépésre szóló útmutatónk a Gutenberg szerkesztőhöz segített abban, hogy a dolgokat perspektívaba tegye. Úgy gondoljuk, hogy mostantól a blokk szerkesztőt használhatja olyan tartalom létrehozására, mint egy profi.

Kérjük, ossza meg aggodalmait, gondolatait és kérdéseit az alábbi megjegyzés szakaszban.

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