Samm-sammuline juhend WordPressi Gutenbergi ehitaja juurde

Samm-sammuline juhend WordPressi Gutenbergi ehitaja juurde

Arvan, et olete nõus, kui ütlen: kogu Gutenbergi äri on segane.


Esiteks, kas uut ploki redaktorit on raske kasutada või mis? Ma mõtlen, et sa ei tea, kuhu kõik su lemmiktööriistad jõudsid. Nüüd kulus teil postituse loomiseks kauem aega, eks?

Võib-olla viskas lingi (sidusettevõtte või muul viisil) lisamine teile ühe kõvera kurvi ja te tundsite pettumust. Võib-olla oli teil probleeme teksti lisamisega pildi lisamisega.

Võib-olla proovisite lisada mitu veergu ja asjad ei õnnestunud ootuspäraselt. Kui see pole nii, siis võib-olla ei saa te oma PDF-faile hõlpsalt lisada või näete kardetud teadet „Värskendamine ebaõnnestus”.

Noh, ärge enam muretsege; Olin teie täpses positsioonis mitte väga kaua aega tagasi, kuid nüüd leian, et Gutenberg oli põnevus, mida kasutada. Jah, on olemas õppimiskõver, kuid tänase postituse lõpuks mõtlete Gutenbergile teisiti.

Mis on Gutenbergi toimetaja?

Wordpress gutenbergi toimetaja

Te vaatate Gutenbergi, WordPressi vaikimisi blokeerijat

Kui kasutate WordPress 5.0 ja uuemat, peate olema kohanud uut ja läikivat WordPressi redigeerijat, tuntud Gutenbergi nime all.

Ja nagu paljud teised kasutajad, soovite kasutada revolutsioonilist toimetajat, kuid kahtlete, sest Gutenberg on keeruline.

Või kui Gutenbergiga esimest korda kohtusite, siis mitmed asjad ei töötanud. Lõppude lõpuks tegid ja arendavad arendajad teemasid ja pluginaid ühilduvaks plokkide redigeerijaga.

Niisiis, pöördusite kiiresti tagasi Klassikaline toimetaja, mis, BTW, sobib meiega. Pidage ainult meeles, et WordPress ei toeta pärast 2022. aastat klassikalist redigeerijat. Lisaks on teil puudu kõigist Gutenbergi pakutavatest lisapaladest.

Funktsionaalsuse osas teevad Classic Editor ja Gutenberg sama asja; teate, mõlemad tööriistad aitavad teil sisu kodeerimata luua.

Ometi oleme vana WYSIWYG-i redigeerijaga nii harjunud, et peame uue Gutenbergi UI-ga kohanemist natuke võõraks, kui mitte täiesti segaseks. Vähemalt nii ma arvan.

Kuid, mis täpselt on Gutenberg?

Gutenberg on WordPressi uus vaiketoimetaja. Erinevalt traditsioonilisest visuaalsest / tekstiredaktorist; Gutenberg kasutab sisuplokke sarnaselt paljude tänapäevaste leheehitajatega.

See pakub intuitiivsemaid funktsioone kui klassikaline redaktor, mis tähendab, et saate rikasmeediumisisu luua lennult. Nüüd saate erakorralisi paigutusi kiiresti üles segada, sõltumata sellest, kas töötate WordPressi postituste või lehtedega.

Ja koos mõne lisandmooduliga saab Gutenberg soodsalt konkureerida selliste WordPressi väljakujunenud ehitajatega nagu Brizy, Elementor ja Divi.

Ainus puudus on see, et leheehitajad pakuvad sageli rohkem funktsioone, kuna nad on peamiselt leheehitajad! Samal ajal on Gutenberg veel üsna noor ja võite ainult loota, et ploki redigeerija kasvab hüppeliselt.

Tänases postituses on meil põnev aeg WordPressi postituse loomisel koos Gutenbergi toimetajaga. Minu eesmärk on katta iga pisike detail ja funktsioon, nii et saaksite Gutenbergi abil luua sisu nagu profid.

Oled sa valmis? Kui jah, siis loome selle WordPressi postituse.

Kuidas luua Gutenbergiga WordPressi postitust

Kui käitate WordPressi veebisaiti, loote tõenäoliselt rohkem postitusi kui lehti. Järgmises jaotises loome Gutenbergis WordPressi postituse nullist. Loodan, et teil on sama tore kui Gutenbergi proovimisel.

Et temast kaugemale liikuge Postitused> Lisa uus nagu rõhutame alloleval ekraanipildil.

uue postituse loomine gutenbergis

See viib teid otse allpool näidatud Gutenbergi toimetaja juurde.

Wordpress gutenbergi toimetaja

Päris kena, ah? Nüüd kerkigem need varrukad üles ja asugem asja kallale.

Pealkirja lisamine

uue pealkirja lisamine gutenbergi

Ilma kindla pealkirjata ei saa postitust kirjutada. Hea asi on see, et Gutenberg muudab pealkirja lisamise uskumatult lihtsaks.

Esimene blokk, mida näete, on Pealkiri nagu ülaloleval pildil, kirjeldame dokumendi ülaosas. Postituse pealkirja loomiseks tippige lahtri sisse. Lihtne kui A, B, C.

Kas peate püsilinki redigeerima? Saate seda hõlpsalt teha Pealkiri blokeerige klõpsates nuppu Redigeeri nuppu nagu allpool näidatud.

redigeeri postitust alaline link gutenbergis

Pärast pealkirja lisamist klõpsake nuppu SISENEMA klahv uue rea käivitamiseks. Oh jah, Gutenberg säilitab klassikalises WordPress-redaktoris loodusliku navigeerimise.

Uue lõigu lisamine

uus lõikeplokk gutenbergis

Lööb SISENEMA võti loob uue Lõige plokk, nagu ülal näidatud. Enne teksti sisestamist pakub plokk teile paar võimalust. Lisateavet leiate allpool toodud nummerdatud pildilt.

uue lõigu ploki valikud gutenberg

Märkused. Sa saad:

  1. Uue lõigu ploki teisendamine mis tahes muuks plokiks, nt pilt, pealkiri, kaas, galerii, WooCommerce, vorm jne.
  2. Kasutage otsetee, et muuta lõiguplokk pildiplokkiks
  3. Muutke lõiguplokk pealkirjaplokkiks, st H2, H3 ja H4
  4. Muutke lõiguplokk kaanepiltide plokiks

Näitlikustamiseks reserveerin esimese lõigu sissejuhatuseks. Kui olete teksti lisanud, ilmub vormindamise tööriistariba, nagu allpool näidatud.

gutenbergi lõigu vormindamise tööriistariba

Tänu vormindamise tööriistaribale saate:

  • Varjake lõik salmi, tsitaadi, pealkirja, loendi, koodi ja vormindatud tekstiga
  • Julge, Kursiiv, läbi kriipsutatud, ja allajoonitud sisu
  • Joondage tekst vasakule, paremale, keskele ja õigustage
  • Lisage link, mille saab avada ka uuel vahelehel
  • Sisestage pilt (jah, see on olemas!)
  • Peida blokeerimise sätted
  • Kopeeri plokk
  • Sisestage plokk enne või pärast praegust plokki (meie puhul on see esimene lõik, seega ei lisatud midagi enne, vaid alles pärast.) Saate lisada kaanekujutise ploki enne esimest lõiku, kui soovite, kuna see näeb nii välja hea
  • Redigeerige plokki HTML-vormingus
  • Lisage praegune plokk korduvkasutatavatesse plokkidesse, et saaksite seda kasutada ka teistes postitustes
  • Eemaldage plokk täielikult

Lõiguplokki saate täiendavalt kohandada jaotises saadaolevate valikutega Blokeeri saki, mis asub külgriba menüüs, nagu allpool näidatud.

gutenbergi külgriba võimalused lõikeploki jaoks

Mõned märkused ülaltoodud pildi kohta:

  1. Vali Blokeeri vahekaart siin, et vaadata kõiki blokeerimisvalikuid ja sätteid
  2. Valige fondi suurus ja aktiveerige siin Drop Cap
  3. Lisage oma lõigule taustavärv. Valisin selle illustreerimiseks siniseks. Saate kohandada ka teksti värvi. Mõlemal juhul saate lisada piiramatuid kohandatud värve
  4. Saate siia lisada kohandatud CSS-i klassi, mis tähendab, et saate oma blokile lisada täiendavaid CSS-stiile
  5. Sinine taust ja tilk kork rakendati juba Gutenbergi redigeerijas

Külgriba vahekaart Dokument

Külgriba menüüs on veel üks sakk; Dokument vahekaart nagu allpool näidatud.

lõigu ploki külgriba dokumentide vahekaart

Siin on ülaltoodud pildi märkused:

  1. Klõpsake siin, et aktiveerida Dokument sakk
  2. Siin saate postituse ajastada, nähtavuse valida kas Privaatne või Avalik, määra postitus Ülevaatuse ootel olekut, valige postituse vorming ja looge kleepuv postitus
  3. Selles jaotises saate oma alalist linki redigeerida
  4. Siin saate valida või luua uusi kategooriaid
  5. Lisage postitusele sildid
  6. Määrake esiletõstetud pilt
  7. Koostage käsitsi väljavõte
  8. Luba kommentaarid, tagasipöördumised ja tagasitulekud

Nagu näete, on teil lõiguploki (ja kogu postituse) kujundamiseks palju võimalusi, ükskõik, mida soovite. Muide, erinevatel plokkidel on erinevad seaded, kui me ühe minutiga õpime.

Pärast esimest lõiku vajutage nuppu SISENEMA uue rea (või lõiguploki) loomiseks uuesti klahvi. Nüüd lisame esimese lõigu alla pildi.

Piltide lisamine Gutenbergis

uue pildi lisamine gutenbergis

Nad ütlevad, et pilt räägib tuhat sõna ja piltideta blogipostitus on noh, üksluine. Gutenbergi abil oma WordPressi postitusse pildi lisamiseks on teil paar võimalust.

Kui lööd SISENEMA kui mõni hetk tagasi vallandasite, käivitasite uue lõigu ploki. Kuna Gutenberg on intuitiivne, saate pildi lisada, klõpsates pluss- (+), pildi või kaaneikoonil, nagu me allpool oleval pildil esile tõstame.

uue pildi lisamine gutenbergi redigeerijas

Paar märkust:

  1. Kujutise saate lisada pluss (+) ikoonide kaudu
  2. Siin saate pildi hõlpsalt lisada
  3. See suvand võimaldab teil lisada a kate pilt (Need on tavaliselt suuremad kui teised fotod. Lisaks saate lisada kaanekujutistele teksti, BTW)

Minge edasi ja klõpsake suvalist plussikooni (+). Järgmisena klõpsake nuppu Pilt vahekaart, nagu allpool näidatud.

piltide lisamine gutenbergis

Klõpsates nuppu Pilt vahekaart laadib Pilt alloleval ekraanipildil näidatud plokk.

gutenbergi pildiplokk

 Pilt blokeerimine võimaldab teil pildi üles laadida või URL-ist või meediumiteeki lisada. Protsessis saate meediumiekraani sätete kaudu lisada altteksti (SEO jaoks oluline), pealdise ja kirjelduse Blokeeri nagu näidatud järgmistel piltidel.

Tavalised meediumiseaded …

WordPressi meediumiseaded

…ja Pilt blokeeri seaded.

gutenbergi pildibloki seaded

Kas õpid täna siin midagi? Ma loodan. Liigume edasi.

Pärast teie pildi lisamist lisab Gutenberg selle alla uue lõiguploki. Võite lisada mida iganes soovite, kuid illustreerimiseks lisasin teksti ja seejärel nupu selle alla.

Kuidas allalaaditavaid faile lisada, nt PDF, pildid, videod jne

Gutenbergi abil on WordPressi postitusele või lehele allalaaditavate failide lisamine uskumatult lihtne.

Uues Lõige blokeerige, klõpsake pluss- (+) ikoonil ja navigeerige Tavalised plokid ja vajuta Toimik nagu allpool esile tõstame.

gutenbergis allalaaditavate failide lisamine

See käivitab järgmise ploki:

gutenbergi failiplokk

Alates Toimik blokeerimise korral saate uue faili üles laadida või oma meediumiteegi lisada. Pärast teie faili lisamist lisab Gutenberg ka armas Lae alla nuppu automaatselt, nagu näha alloleval pildil.

faili lisamine gutenbergis

Saate mängida võimalustega. Näiteks saate redigeerida / kustutada „Gutenbergi PDF-i kontroll-lehtPealkiri ja Lae alla nuppu. Saate plokile lisada CSS-klassi ja stiilida seda vastavalt soovile.

Tsitaadi lisamine Gutenbergi

Järgmisena lisame hinnapakkumise, kuna need on võluvad, meeldejäävad ja aitavad teil kodu poole sõita. Uuel real klõpsake plussmärgil (+), liikuge juurde Tavalised plokid ja vajuta Tsitaat vahekaart nagu allpool näidatud.

tsitaatide lisamine gutenbergis

See lisab Tsitaat blokeerige oma postituses, nagu rõhutame allpool oleval ekraanil.

gutenbergi pakkumise blokeerimise seaded

Pange tähele pakkumise blokeerimise sätteid ülal paremal külgribal?

Pakkumise lisamiseks tippige lahtrisse. Siin on minu tulemus.

gutenbergi tsitaat

Tundub uskumatu, eks?

Meediumite manustamise lisamine Gutenbergi

Gutenbergil on mitu blokki, et manustada videoid ja muud meediumit üle 30 saidi nagu YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare ja nii edasi.

Sisu manustamiseks klõpsake pluss- (+) ikooni, liikuge lehele Manustab, ja vali sait. Näiteks soovisin YouTube’i, nagu allpool näidatud.

gutenberg youtube embed

Järgmisena kopeerige ja kleepige YouTube’i video URL ja klõpsake nuppu Manusta nuppu, nagu on näidatud alloleval pildil.

gutenbergi youtube'i manustamisplokk

Niipea kui lööd Manusta nuppu, varjab Gutenberg lingi automaatselt videoks, nagu me allpool esile tõstame.

manustatud youtube'i video gutenbergis

Sujuv purjetamine kogu pikkuses. Nüüd lisame eraldiseisva nupu, mis sobib ideaalselt tegevusele kutsumise (CTA) loomiseks.

Kuidas nuppu Gutenbergis lisada

Praegu ei tohiks teil plokkide lisamisega raskusi olla. Klõpsake lihtsalt plussmärgil (+) ja valige oma blokk. See ei saa kuidagi lihtsamaks minna.

Niisiis, kuidas me nuppu lisame?

Uues reas (või plokis) klõpsake pluss- (+) ikooni, liikuge lehele Paigutuse elemendid ja klõpsake nuppu Nupp vahekaart nagu allpool näidatud.

nuppude lisamine gutenbergi redigeerijas

Nii tehes viib teid Nupp blokeerige nagu allpool üksikasjalikult kirjeldame.

nuppude lisamine gutenbergi redigeerijas

Nagu ülaltoodud pildilt näete, saate nupu teksti redigeerida ja lingi lisada. Lisaks saate nuppu kohandada ekraani paremal asuva külgriba menüü kaudu.

Pärast paari klõpsu on see, mida ma sain.

gutenbergi nupu näide

Muide, kui kasutate oma nuppude jaoks raskesti loetavaid värvikombinatsioone, Gutenberg annab teile sellest kohe teada. Kui kena?

Kuidas lisada veerge Gutenbergi

Lisage mõned veerud koos ilusa nupuga. Lisan kaks veergu, nii et järgige hoolikalt.

Siin on, mida teha. Klõpsake pluss (+) ikoonil ja navigeerige Paigutuse elemendid ja klõpsake nuppu Veerud vahekaart, nagu on näha alloleval pildil.

veergude sakk gutenbergi toimetaja

Gutenberg lisab vaikimisi kaks veergu. Vaadake allolevat pilti ja pidage meeles, et ma olen juba veergudesse sisu lisanud.

gutenbergi veerud WordPress-redaktoris

Mis mind kätte saab:

gutenbergi veerud ees

Pole paha paar sekundit tööd. Kuid võib-olla ei soovi te veerge luua. Võib-olla soovite kuvada pildi mõne teksti kõrval.

Kas selleks on mingi blokk? Jah seal on!

Kuidas lisada pilti teksti kõrvale Gutenbergis

Kas soovite lisada pildi mõne pildi kõrvale? Kui jah, siis meeldib teile järgmine jaotis.

Nagu tavaliselt, klõpsake plussikoonil (+) ja liikuge lehele Paigutuse elemendid ja klõpsake nuppu Meediumid ja tekst nagu allpool näidatud.

meedia ja teksti gutenbergi blokk

Te peaksite nägema Meediumid ja tekst plokk, nagu allpool näidatud.

meediumid ja tekstiplokid gutenbergis

Järgmisena laadige üles oma pilt / video / meedium või lisage see meediumiteegis. Pärast seda lisage oma tekst kandja kõrvale, nagu on näidatud alloleval pildil.

Mängisin ringi Meediumid ja tekst blokeerida ja ma tulin välja järgmisega. Pane tähele; Mul õnnestus ka seal nuppu vajutada ��

meedium ja tekstiplokk täies mahus

Oh, see on taust! Las ma näitan sulle esiotsa. Siin:

meediumitekstiplokk gutenbergis

Tundub väga professionaalne, eks? Võite kindlasti ette kujutada, kui palju saate Gutenbergi toimetajaga saavutada.

Kolmanda osapoole Gutenbergi plokid

WordPressi arendajad soovivad muuta teemad ja pistikprogrammid Gutenbergi toimetajaga ühilduvaks. Mõned näited hõlmavad WooCommerce, Jetpack ja Yoast SEO.

Näiteks võite oma WordPressi postitusse lisada WooCommerce’i plokid. Esiteks peate installima ja aktiveerima WooCommerce.

Järgmisena klõpsake uuel real pluss (+) ikooni, liikuge lehele WooCommerce ja valige kumb blokk soovite, nagu allpool näidatud.

Woocommerce gutenbergi plokid

Kas sa tead, mida see tähendab? See tähendab, et saate mõne minutiga luua rikasmeediume ja suurepäraseid postitusi ja lehti.

Muud märkimisväärsed plokid

Oleme juba üle 2000 sõna ja kui seda hoiame, kirjutame lõpuks terve e-raamatu. Minu palve on see, et saate nüüd Gutenbergi ilma luksusteta kasutada.

Mis siin moes, siin on nimekiri muudest saadaolevatest plokkidest.

  • Vidinad – Saate lisada oma vidinate sisu ajaveebi postitustesse
  • Lühikoodid – Saate endiselt kasutada WordPressi natiivseid lühikoode
  • Klassikaline – suurepärane blokk, mis hoiab teie vana sisu
  • Veel – plokk oli varem tuntud kui Loe rohkem silt
  • Lehekatkestus, eraldajad, vahetükid
  • Kohandatud HTML, Pullquote, tabel
  • Galerii ja HTML5 heli / video
  • Ja veel palju sõltuvalt kasutatavatest teemadest ja pistikprogrammidest

Kõrvalt: WordPressi lehe loomine sarnaneb mõne minuti pikkuste erinevuste korral salvestatud postituse loomisega, nii et täna me sellesse ei süvene..

Gutenbergi kiire häkkerid ja kiirklahvid

Gutenbergil on paar häkki ja klaviatuuri otseteed, mis teevad selle veelgi lihtsamaks. Näiteks kui tippite lõiguplokki “/”, kuvatakse see plokkide loend.

Konkreetse ploki saate valida ka siis, kui tippite lahtri pealkirja pärast kaldkriipsu (/), nt kui sisestate “/ image”, kuvatakse pildiplokk muude pildiga seotud plokkide hulka. Lisateavet leiate allolevalt pildilt.

gutenbergi tagasilöögi otsetee

Klaviatuuri otseteed: Kõigi saadaolevate otseteede kuvamiseks vajutage SHIFT + ALT + H Windowsis ja OPT + CTRL + H Macis.

Dokumendi ülaosas näete dokumendi struktuuri, klõpsates ikoonil (i), nagu allpool näidatud.

gutenbergi dokumendistruktuur

Tore. Erakordselt sile.

Ja muide, tõrge “Uuendamine ebaõnnestus” juhtub tavaliselt väriseva Interneti-ühenduse tõttu ��


Teie ja minu vahel on Gutenberg fantaasiaküllane sisutoimetaja. Tingimusel, et olete nõus köied õppima; võite tulevikus WordPressi redigeerijast palju kasu lõigata.

Gutenberg on endiselt suhteliselt noor ning võite oodata, et see kasvab kasutatavuse ja funktsionaalsuse osas. Lähipäevil on sellega tõsine jõud. Lehtede ehitajad valvavad paremini, vastasel juhul lõpevad nad ettevõtlusega ��

Loodame, et meie samm-sammuline juhend Gutenbergi toimetajale aitas teil asju perspektiivi seada. Usume, et saate nüüd profipõhise sisu loomiseks kasutada blokeerijat.

Jagage oma muresid, mõtteid ja küsimusi allpool olevas kommentaaride jaotises.

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