Žingsnis po žingsnio „WordPress“ „Gutenberg Builder“ vadovas

Žingsnis po žingsnio „WordPress“ „Gutenberg Builder“ vadovas

Manau, kad sutiksite, kai sakau: visas „Gutenberg“ verslas yra painus.


Pirma, ar naujuoju bloko redaktoriumi sunku naudotis, ar kas? Aš turiu galvoje, kad jūs nežinote, kur dingo visi jūsų mėgstamiausi įrankiai. Dabar turbūt prireikė daugiau laiko sukurti įrašą, tiesa?

Gal pridėję nuorodą (filialą ar kitaip) išmetėte jums vieną kreivę, ir jautėtės nusivylę. Galbūt iškilo problemų pridedant vaizdą šalia savo teksto.

Galbūt bandėte pridėti kelis stulpelius, ir viskas klostėsi ne taip, kaip tikėtasi. Jei taip nėra, galbūt negalite lengvai pridėti savo PDF failų arba kelis kartus matote baimę keliantį pranešimą „Atnaujinti nepavyko“.

Na, daugiau nesijaudink; Aš buvau tiksliai jūsų pozicijoje ne taip seniai, bet dabar manau, kad Gutenbergas jaudina. Taip, yra mokymosi kreivė, tačiau šiandienos įrašo pabaigoje jūs pagalvosite apie Gutenbergą kitaip.

Kas yra „Gutenberg“ redaktorius?

„WordPress Gutenberg“ redaktorius

Jūs žiūrite į Gutenbergą, numatytąjį „WordPress“ bloko redaktorių

Jei naudojate „WordPress 5.0“ ir naujesnes versijas, turite būti susidūrę su naujuoju ir blizgiu „WordPress“ redaktoriumi, žinomu kaip „Gutenberg“.

Kaip ir daugelis kitų vartotojų, jūs norite naudoti revoliucinį redaktorių, tačiau abejojate, nes „Gutenberg“ yra sudėtinga.

O galbūt kai pirmą kartą susipažinote su Gutenbergu, įvairūs dalykai neveikė. Galų gale, kūrėjai buvo ir vis dar kuria temas ir papildinius, suderinamus su bloko redaktoriumi.

Taigi, jūs greitai grįžote į Klasikinis redaktorius, kuris, BTW, yra geras su mumis. Tiesiog atminkite, kad „WordPress“ po 2022 m. Nepalaikys klasikinio redaktoriaus. Be to, praleidžiate visas papildomas gėrybes, kurias siūlo „Gutenberg“.

Funkcionalumo atžvilgiu „Classic Editor“ ir „Gutenberg“ daro tą patį; žinote, abu įrankiai padeda kurti turinį nekoduojant.

Tačiau mes esame taip pripratę prie senojo WYSIWYG redaktoriaus, kad mums atrodo, kad adaptacija prie naujosios „Gutenberg“ UI yra šiek tiek svetima, jei ne visiškai painiava. Bent jau taip manau.

Bet kas tiksliai yra Gutenbergas?

„Gutenberg“ yra naujasis numatytasis „WordPress“ redaktorius. Tai skirtingai nei tradicinis vaizdo / teksto rengyklė; „Gutenberg“ naudoja turinio blokus panašiai kaip daugelis šiuolaikinių puslapių kūrėjų.

Komplekte yra daugiau intuityvių funkcijų nei klasikiniame redaktoriuje, tai reiškia, kad galite kurti raiškiosios medijos turinį skraidydami. Dabar galite greitai išnaikinti nepaprastus išdėstymus, nesvarbu, ar dirbate su „WordPress“ įrašais, ar puslapiais.

Ir su keliais priedais „Gutenberg“ gali palankiai konkuruoti su nusistovėjusiais „WordPress“ puslapio kūrėjais, tokiais kaip „Brizy“, „Elementor“ ir „Divi“..

Vienintelis trūkumas yra tai, kad puslapių kūrėjai dažnai siūlo daugiau funkcijų, nes jie pirmiausia yra puslapio kūrėjai! Tuo pat metu Gutenbergas dar gana jaunas, ir jūs galite tikėtis, kad bloko redaktorius greitai augs..

Šiandienos įraše įdomiai praleisime laiką kurdami „WordPress“ įrašą su „Gutenberg“ redaktoriumi. Aš siekiu aprėpti kiekvieną mažą detalę ir funkciją, kad galėtumėte naudoti „Gutenberg“ kurdami tokį turinį kaip privalumai.

Ar tu pasiruošęs? Jei taip, sukurkime tą „WordPress“ įrašą.

Kaip sukurti „WordPress“ įrašą naudojant Gutenberg

Jei vykdote „WordPress“ svetainę, tikriausiai sukuriate daugiau pranešimų nei puslapių. Kitame skyriuje sukuriame „WordPress“ įrašą Gutenberge nuo nulio. Tikiuosi, kad jums bus tiek linksma, kiek aš išbandžiau Gutenberg.

Kad iš kelio, eikite į Žinutės> Pridėti naują kaip pabrėžiame toliau pateiktoje ekrano kopijoje.

kurdamas naują įrašą Gutenberge

Tokiu būdu jūs pateksite tiesiai į žemiau pateiktą „Gutenberg“ redaktorių.

„WordPress Gutenberg“ redaktorius

Gana tvarkinga, ar ne? Dabar suvyniokime tas rankoves ir pradėkime verslą.

Pavadinimo pridėjimas

pridedant naują pavadinimą gutenberge

Neįmanoma parašyti įrašo be aiškaus pavadinimo. Geras dalykas yra tai, kad „Gutenberg“ suteikia neįtikėtinai lengvą pavadinimo pridėjimą.

Pirmasis blokas, kurį matote, yra Pavadinimas kaip ir aukščiau esančiame paveikslėlyje, dokumento viršuje. Norėdami sukurti savo įrašo pavadinimą, įveskite bloko viduje. Paprasta kaip A, B, C.

Reikia taisyti nuolatinę nuorodą? Tai galite lengvai padaryti Pavadinimas blokuoti spustelėdami Redaguoti mygtuką, kaip parodyta žemiau.

Redaguoti įrašą nuolatinė nuoroda gutenberge

Pridėję savo pavadinimą, paspauskite Įveskite klavišas, skirtas pradėti naują eilutę. O taip, Gutenbergas išsaugo jūsų pamėgtą gimtąją navigaciją klasikiniame „WordPress“ redaktoriuje.

Įrašyta nauja pastraipa

naujas pastraipų blokas Gutenberge

Pataikė Įveskite raktas sukuria naują Pastraipa blokas, kaip parodyta aukščiau. Prieš įvedant tekstą, bloke pateikiamos kelios parinktys. Norėdami gauti daugiau informacijos, skaitykite žemiau esantį sunumeruotą vaizdą.

naujos pastraipos bloko parinktys

Pastabos. Tu gali:

  1. Konvertuokite naują pastraipų bloką į bet kurį kitą bloką, pvz., Paveikslėlį, antraštę, viršelį, galeriją, „WooCommerce“, formą ir kt.
  2. Norėdami pakeisti pastraipų bloką į vaizdo bloką, naudokite nuorodą
  3. Pakeiskite pastraipų bloką į antraštės bloką, ty H2, H3 ir H4
  4. Paverskite pastraipų bloką į viršelio vaizdo bloką

Iliustracijai aš pasiliksiu pirmą pastraipą po įžangos. Pridėjus šiek tiek teksto, pasirodo formatavimo įrankių juosta, kaip parodyta žemiau.

„gutenberg“ pastraipų formavimo įrankių juosta

Formatavimo įrankių juostos dėka galite:

  • Užverskite pastraipą eilute, citata, antrašte, sąrašu, kodu ir iš anksto suformatuotu tekstu
  • Drąsiai, Kursyvuokite, perbraukimas, ir pabraukti turinys
  • Sulygiuokite tekstą kairėn, dešinėn, centre ir pagrįskite
  • Pridėkite nuorodą, kurią taip pat galima atidaryti naujame skirtuke
  • Įterpkite įterptą vaizdą (taip, jis egzistuoja!)
  • Slėpti bloko parametrus
  • Kopijuoti bloką
  • Įdėkite bloką prieš ar po dabartinio bloko (mūsų atveju tai yra pirmoji pastraipa, taigi anksčiau nieko nepridėjote, tik po.) Jei norite, galite pridėti viršelio vaizdo bloką prieš pirmą pastraipą, nes taip atrodo Gerai
  • Redaguoti bloką kaip HTML
  • Pridėkite dabartinį bloką prie daugkartinio naudojimo blokų, kad galėtumėte jį naudoti kituose įrašuose
  • Visiškai nuimkite bloką

Galite dar labiau tinkinti pastraipų bloką naudodamiesi parinktimis Blokuoti skirtuką, rastą šoninės juostos meniu, kaip parodyta žemiau.

„gutenberg“ šoninės juostos parinktys pastraipų blokui

Keletas pastabų apie aukščiau pateiktą vaizdą:

  1. Pasirink Blokuoti skirtukas čia, jei norite peržiūrėti visas bloko parinktis ir parametrus
  2. Pasirinkite šrifto dydį ir suaktyvinkite „Drop Cap“ čia
  3. Įtraukite fono spalvą į savo pastraipą. Aš ją pavaizdavau mėlyna spalva iliustracijos tikslais. Taip pat galite tinkinti teksto spalvą. Abiem atvejais galite pridėti neribotas pasirinktines spalvas
  4. Čia galite pridėti pasirinktinę CSS klasę, tai reiškia, kad galite pridėti papildomų CSS stilių prie savo bloko
  5. Mėlynas fonas ir „Drop Cap“ jau buvo pritaikyti „Gutenberg“ redaktoriuje

Dokumentų skirtukas šoninėje juostoje

Šoninės juostos meniu yra dar vienas skirtukas; Dokumentas skirtuką, kaip parodyta žemiau.

pastraipos bloko šoninės juostos dokumento skirtukas

Čia pateiktos aukščiau esančio paveikslėlio pastabos:

  1. Spustelėkite čia, kad įjungtumėte Dokumentas skirtukas
  2. Čia galite suplanuoti įrašą, nustatyti matomumą Privatus arba Vieša, nustatyti postą į Laukiama peržiūra būseną, pasirinkite įrašo formatą ir sukurkite lipnų įrašą
  3. Skyriuje galite redaguoti savo nuolatinę nuorodą
  4. Čia galite pasirinkti arba sukurti naujas kategorijas
  5. Pridėkite žymų prie savo įrašo
  6. Nustatykite rodomą vaizdą
  7. Sukurkite rankinio ištrauką
  8. Leisti komentuoti, atkurti ir atkurti įrašus

Kaip matote, turite daugybę galimybių suprojektuoti pastraipų bloką (ir visą įrašą), kad ir kaip norėtumėte. Beje, skirtingi blokai turi skirtingus nustatymus, kai mes sužinosime per minutę.

Po pirmosios pastraipos paspauskite Įveskite klavišą dar kartą, jei norite sukurti naują eilutę (arba pastraipų bloką). Dabar pridėkime paveikslėlį po pirmąja pastraipa.

Vaizdų pridėjimas Gutenberge

pridedant naują vaizdą Gutenberge

Jie sako, kad nuotrauka taria tūkstantį žodžių, o tinklaraščio įrašas be vaizdų, be abejo, yra niūrus. Norėdami pridėti vaizdą į savo „WordPress“ įrašą naudodami „Gutenberg“, turite keletą variantų.

Kai paspausite Įveskite klavišą prieš kelias akimirkas suaktyvinote naują pastraipų bloką. Kadangi „Gutenberg“ yra intuityvus, galite pridėti vaizdą spustelėdami pliuso (+), paveikslėlio ar viršelio piktogramas, kaip mes pabrėžiame paveikslėlyje žemiau.

pridedant naują vaizdą „gutenberg“ redaktoriuje

Pora pastabų:

  1. Vaizdą galite pridėti naudodami pliuso (+) piktogramas
  2. Čia galite lengvai pridėti vaizdą
  3. Ši parinktis leidžia jums pridėti a dangtis vaizdas (Jie paprastai yra didesni nei kitos nuotraukos. Be to, galite pridėti teksto ant viršelių atvaizdų, BTW)

Eikite į priekį ir spustelėkite bet kurią pliuso (+) piktogramą. Tada spustelėkite Vaizdas skirtuką, kaip parodyta žemiau.

pridedant vaizdus gutenberge

Spustelėdami Vaizdas skirtuką įkelia Vaizdas blokas, parodytas paveikslėlyje žemiau.

gutenberg įvaizdžio blokas

 Vaizdas blokas leidžia įkelti vaizdą arba pridėti jį iš URL arba laikmenos bibliotekos. Proceso metu galite pridėti alt tekstą (svarbu SEO), antraštes ir aprašą naudodami laikmenos ekrano nustatymus arba Blokuoti kaip parodyta šiuose paveikslėliuose.

Įprasti laikmenos nustatymai …

„WordPress“ nustatymai

…ir Vaizdas blokuoti nustatymus.

„gutenberg“ vaizdo bloko nustatymai

Ar šiandien kažko moki? Tikiuosi. Judėkime toliau.

Pridėjęs jūsų atvaizdą, „Gutenberg“ prideda naują pastraipų bloką tiesiai po juo. Galite pridėti ką tik norite, tačiau iliustravimo tikslais aš pridėjau šiek tiek teksto, o po to – mygtuką.

Kaip pridėti atsisiunčiamus failus, pvz. PDF, vaizdai, vaizdo įrašai ir kt

„Gutenberg“ leidžia neįtikėtinai lengvai atsisiųsti failus į savo „WordPress“ įrašą ar puslapį.

Naujoje Pastraipa blokuoti, spustelėkite pliuso (+) piktogramą, eikite į Dažni blokai ir paspauskite Byla skirtuką, kaip mes pabrėžiame žemiau.

pridedant atsisiunčiamus failus „gutenberg“

Tai padarius paleidžiamas šis blokas:

„gutenberg“ failų blokas

Nuo Byla Jei norite blokuoti, galite įkelti naują failą arba pridėti jį iš savo medijos bibliotekos. Pridėjęs failą, Gutenbergas prideda mielą parsisiųsti mygtukas automatiškai, kaip matyti toliau pateiktame paveikslėlyje.

pridedant failą gutenberge

Galite žaisti su galimybėmis. Pvz., Galite redaguoti / ištrinti „Nemokamas „Gutenberg“ PDF kontrolinis sąrašasPavadinimą, taip pat parsisiųsti mygtuką. Prie bloko galite pridėti CSS klasę ir stiliuoti ją taip, kaip norite.

Įrašyta citata Gutenberge

Tada pridėkime citatą, nes jie žavūs, patrauklūs ir padeda važiuoti namo. Naujoje eilutėje spustelėkite pliuso (+) ženklą, eikite į Dažni blokai ir paspauskite Citata skirtuką, kaip parodyta žemiau.

pridedant citatas gutenberge

Tai padarius, pridedama Citata blokuoti savo įraše, kaip mes pabrėžiame toliau esančiame ekrano paveikslėlyje.

„gutenberg“ citatos bloko nustatymai

Atkreipkite dėmesį į kainų bloko parametrus aukščiau esančioje dešinėje šoninėje juostoje?

Norėdami pridėti citatą, įveskite bloko viduje. Štai mano rezultatas.

Gutenbergo citata

Atrodo neįtikėtinai, tiesa?

Medijos įdėjimo įterpimas į Gutenbergą

„Gutenberg“ yra keli blokai, skirti įterpti vaizdo įrašus ir kitą laikmeną iš daugiau nei 30 svetainių, tokių kaip „YouTube“, „Vimeo“, „Facebook“, „SoundCloud“, „WordPress“, „Slideshare“ ir kt..

Norėdami įterpti turinį, spustelėkite pliuso (+) piktogramą, eikite į Įterpia, ir pasirinkite svetainę. Pavyzdžiui, aš norėjau „YouTube“, kaip parodyta žemiau.

gutenberg youtube embed

Tada nukopijuokite ir įklijuokite „YouTube“ vaizdo įrašo URL ir spustelėkite Įterpti mygtuką, kaip parodyta žemiau esančiame paveikslėlyje.

„gutenberg youtube“ įdėjimo blokas

Kai tik paspausite Įterpti mygtuką, Gutenbergas automatiškai konvertuoja nuorodą į vaizdo įrašą, kaip mes pabrėžiame žemiau.

įdėtas „YouTube“ vaizdo įrašas „Gutenberg“

Sklandus buriavimas per visą ilgį. Dabar pridėkime autonominį mygtuką, kuris puikiai tinka raginimui veikti (CTA) sukurti.

Kaip pridėti mygtuką Gutenberge

Šiuo metu jums neturėtų būti sunku pridėti blokų. Tiesiog spustelėkite pliusą (+) ir pasirinkite bloką. Tai negali būti dar paprasčiau.

Taigi, kaip mes pridedame mygtuką?

Naujoje eilutėje (arba bloke) spustelėkite pliuso (+) piktogramą, eikite į Išdėstymo elementai ir spustelėkite Mygtukas skirtuką, kaip parodyta žemiau.

pridedant mygtukus „gutenberg“ redaktoriuje

Tai darydami jūs priversite Mygtukas blokuoti, kaip mes išsamiau žemiau.

pridedant mygtukus „gutenberg“ redaktoriuje

Kaip matote iš aukščiau esančio paveikslėlio, galite redaguoti mygtuko tekstą ir pridėti nuorodą. Be to, mygtuką galite pritaikyti per šoninės juostos meniu dešinėje ekrano pusėje.

Po poros paspaudimų štai ką gavau.

gutenberg mygtuko pavyzdys

Beje, jei mygtukais naudosite sunkiai skaitomus spalvų derinius, Gutenbergas nedelsdamas jums praneš. Kaip miela?

Kaip pridėti stulpelius Gutenberge

Pridėkime keletą stulpelių, turėdami gražų mygtuką. Aš pridėsiu du stulpelius, todėl atidžiai sekite.

Štai ką reikia padaryti. Spustelėkite pliuso (+) piktogramą, eikite į Išdėstymo elementai ir spustelėkite Stulpeliai skirtuką, kaip parodyta žemiau esančiame paveikslėlyje.

kolonų skirtuko „gutenberg“ redaktorius

Gutenbergas prideda dvi stulpelius pagal numatytuosius nustatymus. Peržiūrėkite žemiau esantį vaizdą ir atsiminkite, kad aš jau pridėjau turinį į stulpelius.

„gutenberg“ stulpelius „WordPress“ redaktoriuje

Kas mane priverčia:

gutenbergo kolonų frontendas

Neblogai kelias sekundes darbo. Bet galbūt nenorite kurti stulpelių. Gal norite parodyti vaizdą šalia kažkokio teksto.

Ar tam yra blokas? Taip, ten yra!

Kaip pridėti vaizdą šalia teksto Gutenberge

Ar norite pridėti vaizdą šalia kažkokio teksto? Jei taip, jums patiks šis skyrius.

Kaip įprasta, spustelėkite pliuso (+) piktogramą, eikite į Išdėstymo elementai ir spustelėkite Žiniasklaida ir tekstas kaip parodyta žemiau.

žiniasklaidos ir teksto gutenbergo blokas

Turėtumėte pamatyti Žiniasklaida ir tekstas blokas, kaip parodyta žemiau.

žiniasklaida ir teksto blokas Gutenberge

Tada įkelkite savo vaizdą / vaizdo įrašą / laikmeną arba pridėkite ją iš medijos bibliotekos. Po to pridėkite savo tekstą šalia laikmenos, kaip parodyta paveikslėlyje žemiau.

Aš žaidžiau su Žiniasklaida ir tekstas blokas, ir aš sugalvojau taip. Nepamiršk; Man taip pat pavyko išspausti mygtuką ten ��

žiniasklaida ir teksto blokas, visiškai veikiantys

O, tai yra pagrindas! Leiskite parodyti jums, kas tai yra. Čia:

žiniasklaidos teksto blokas Gutenberge

Atrodo labai profesionaliai, tiesa? Jūs tikrai galite įsivaizduoti, kiek daug galite pasiekti su „Gutenberg“ redaktoriumi.

Trečiosios šalies „Gutenberg“ blokai

„WordPress“ kūrėjai nori, kad temos ir papildiniai būtų suderinami su „Gutenberg“ redaktoriumi. Keletas pavyzdžių yra „WooCommerce“, „Jetpack“ ir „Yoast SEO“.

Pavyzdžiui, galite pridėti „WooCommerce“ blokus į savo „WordPress“ įrašą. Pirmiausia turite įdiegti ir suaktyvinti „WooCommerce“.

Tada naujoje eilutėje spustelėkite pliuso (+) piktogramą, eikite į „WooCommerce“ ir pasirinkite, kurį bloką norite, kaip parodyta žemiau.

woocommerce gutenberg blokai

Ar žinai, ką tai reiškia? Tai reiškia, kad per kelias minutes galite sukurti raiškiosios medijos ir puikius įrašus bei puslapius.

Kiti svarbūs blokai

Mes jau turime daugiau nei 2000 žodžių, ir jei to laikysimės, galų gale parašysime visą el. Knygą. Mano malda, kad dabar galite naudoti „Gutenberg“ be jokių žagsėjimų.

Nepaisant to, čia yra sąrašas kitų galimų blokų.

  • Valdikliai – Į tinklaraščių įrašus galite įtraukti turinį iš savo valdiklių
  • Trumpieji kodai – Vis tiek galite naudoti vietinius „WordPress“ trumpus kodus
  • Klasikinis – Puikus blokas, kuriame saugomas jūsų senas turinys
  • Daugiau – Blokas anksčiau buvo žinomas kaip Skaityti daugiau žyma
  • Puslapio pertrauka, separatoriai, tarpinės
  • Tinkintas HTML, Pullquote, lentelė
  • Galerija ir HTML5 garso / vaizdo įrašas
  • Ir dar daugiau, atsižvelgiant į jūsų naudojamas temas ir papildinius

Be: „WordPress“ puslapio kūrimas yra panašus į įrašo, kuriame išsaugoma keleto minučių skirtumai, sukūrimą, todėl šiandien tuo nesigilinsime..

Greiti „Gutenberg“ piratai ir spartieji klavišai

„Gutenberg“ yra keletas įsilaužimų ir spartiųjų klavišų, kurie dar lengvesni. Pvz., Jei pastraipos bloke įvedate „/“, jis pateikia blokų sąrašą.

Jūs netgi galite pasirinkti konkretų bloką, įvedę bloko pavadinimą po pasvirojo brūkšnio (/), pvz., Įvedę „/ image“ atvaizdo bloką pateiksite tarp kitų su vaizdu susijusių blokų. Norėdami gauti daugiau informacijos, žiūrėkite paveikslėlį žemiau.

„gutenberg“ trumpinys

Klaviatūros nuorodos: Norėdami peržiūrėti visus galimus nuorodas, paspauskite SHIFT + ALT + H Windows ir OPT + CTRL + H „Mac“.

Dokumento viršuje galite pamatyti dokumento struktūrą spustelėdami (i) piktogramą, kaip parodyta žemiau.

gutenbergo dokumentų struktūra

Malonu. Ypač sklandžiai.

O, beje, klaida „Atnaujinti nepavyko“ dažniausiai atsitinka dėl silpno interneto ryšio ��


Tarp jūsų ir manęs „Gutenberg“ yra nepaprastas turinio redaktorius. Jei norite išmokti virves; galite daug iš ateities „WordPress“ redaktoriaus gauti.

„Gutenberg“ vis dar yra palyginti jaunas ir jūs galite tikėtis, kad jis augs naudojimo ir funkcionalumo prasme. Artimiausiomis dienomis tai bus rimta jėga. Geriau stebėkite puslapių kūrėjus, nes kitaip jiems neteks darbo ��

Tikimės, kad mūsų žingsnis po žingsnio vadovas „Gutenberg“ redaktoriui padėjo jums susidaryti perspektyvą. Manome, kad dabar galite naudoti blokų redaktorių, kad sukurtumėte turinį kaip profesionalas.

Prašome pasidalinti savo rūpesčiais, mintimis ir klausimais žemiau esančiame komentarų skyriuje.

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