Korak po korak, vodič za gradnju Gutenberga za WordPress

Korak po korak, vodič za gradnju Gutenberga za WordPress

Mislim da ćete se složiti kad kažem: Čitav ovaj posao u Gutenbergu je zbunjujući.


Prvo, je li teško koristiti novi uređivač blokova ili što? Ne znam kamo su otišli svi vaši omiljeni alati. Vjerojatno vam je trebalo duže vremena za stvaranje posta, u redu?

Možda vam je dodavanje veze (podružnice ili na neki drugi način) bacilo jednu krivinu i osjećali ste se razočarano. Možda ste imali problema s dodavanjem slike pored svog teksta.

Možda ste pokušali dodati više stupaca i stvari nisu ispale kako ste očekivali. Ako to nije slučaj, možda ne možete lako dodati svoje PDF datoteke ili ćete nekoliko puta vidjeti drsku poruku “Ažuriranje nije uspjelo”..

Pa, ne brini više; Nedavno sam bio na vašem točnom položaju, ali sad smatram da je Gutenberg uzbuđenje koje treba upotrijebiti. Postoji krivulja učenja, da, ali do kraja današnjeg posta, razmišljat ćete o Gutenbergu drugačije.

Što je urednik Gutenberga?

Wordpress gutenberg urednik

Gledate Gutenberg, zadani uređivač blokova WordPress

Ako koristite WordPress 5.0 i novije verzije, sigurno ste naišli na novi i sjajni uređivač programa WordPress, poznatiji kao Gutenberg.

Kao i mnogi drugi korisnici, želite upotrijebiti revolucionarni uređivač, ali oklijevate jer Gutenberg komplicirano je.

Ili možda kad ste se prvi put upoznali s Gutenbergom, razne stvari nisu funkcionirale. Uostalom, programeri su i dalje čine teme i dodatke kompatibilnim s uređivačem blokova.

Dakle, brzo ste se vratili na Klasični urednik, što je, BTW, u redu s nama. Samo imajte na umu da WordPress neće podržati klasični uređivač nakon 2022. Osim toga, nedostaju vam sve dodatne dobrote koje Gutenberg nudi.

U pogledu funkcionalnosti, Classic Editor i Gutenberg rade isto; znate, oba alata pomažu vam da stvorite sadržaj bez kodiranja.

Međutim, toliko smo navikli na stari WYSIWYG uređivač da se prilagođavanju novom Gutenbergovom korisničkom sučelju pomalo razlikujemo, ali ne i zbunjujući. Barem tako mislim.

Ali, što je točno Gutenberg?

Gutenberg je novi zadani WordPress uređivač. To nije za razliku od tradicionalnog uređivača vizualnih tekstova; Gutenberg koristi blokove sadržaja poput mnogih modernih graditelja stranica.

Isporučuje se s intuitivnijim značajkama od klasičnog uređivača što znači da možete kreirati sadržaje bogatih medija u letu. Sada možete brzo izraditi izvanredne izglede bilo da radite s postovima ili stranicama WordPress-a.

Uz nekoliko dodataka, Gutenberg može povoljno konkurirati etabliranim proizvođačima WordPress stranica poput Brizy, Elementor i Divi.

Jedini nedostatak je da proizvođači stranica često nude više mogućnosti jer su to prvenstveno tvorci stranica! Istodobno, Gutenberg je još uvijek prilično mlad i od njega možete očekivati ​​samo rast uređivača blokova u skokovima i razmacima.

U današnjem postu ćemo imati uzbudljivo vrijeme kreiranja WordPress posta sa Gutenbergovim urednikom. Cilj mi je prikazati svaki detalj i značajku tako da Gutenberg možete koristiti za stvaranje sadržaja poput profesionalaca.

Jesi li spreman? Ako je tako, stvorimo taj WordPress post.

Kako stvoriti WordPress post pomoću Gutenberga

Ako imate web stranicu WordPress, vjerojatno stvarate više postova nego stranica. U sljedećem odjeljku stvaramo WordPress post u Gutenbergu od nule. Nadam se da ćete se jednako zabaviti kao i ja prilikom testiranja Gutenberga.

Usmjerite to Postovi> Dodaj novo kao što smo istakli na slici ispod.

stvarajući novi post u gutenbergu

To vas vodi ravno do Gutenbergovog uređivača prikazanog u nastavku.

Wordpress gutenberg urednik

Prilično uredno, ha? Sada prepustimo rukave i započnite s poslom.

Dodavanje naslova

dodavši novi naslov u gutenbergu

Ne možete napisati post bez solidnog naslova. Dobra stvar je što Gutenberg nevjerojatno jednostavno dodaje naslov.

Prvi blok koji vidite je Titula na vrhu dokumenta kao što smo detaljno objavili na slici iznad. Da biste stvorili naslov za svoj post, utipkajte unutar bloka. Jednostavno kao A, B, C.

Trebate urediti permalink? To lako možete učiniti u Titula blok klikom na ikonu Uredi gumb kao što je prikazano u nastavku.

uredi objavu trajna veza u gutenbergu

Nakon dodavanja naslova pritisnite tipku UNESI tipka za pokretanje novog retka. O da, Gutenberg čuva izvornu navigaciju koju ste voljeli u klasičnom uređivaču WordPressa.

Dodavanje novog stavka

novi blok paragrafa u gutenbergu

Udaranje u UNESI ključ stvara novi stav blok, kao što je prikazano gore. Prije nego što upišete bilo koji tekst, blok vam nudi nekoliko opcija. Pogledajte numeriranu sliku u nastavku za više detalja.

nove opcije blok stava gutenberg

Bilješke. Možeš:

  1. Pretvorite novi blok paragrafa u bilo koji drugi blok, npr. Sliku, naslov, naslovnicu, galeriju, WooCommerce, obrazac itd..
  2. Upotrijebite prečac za promjenu bloka odlomka u blok slike
  3. Promijenite blok odlomka u blok zaglavlja, tj. H2, H3 i H4
  4. Pretvorite blok odlomka u blok naslovne slike

Radi ilustracije, rezervirati ću prvi odlomak za uvod. Jednom kada dodate tekst, pojavljuje se alatna traka za oblikovanje kao što je prikazano u nastavku.

gutenbergova alatna traka za oblikovanje odlomka

Zahvaljujući alatnoj traci za oblikovanje možete:

  • Odlomak prevedite u stih, citat, naslov, popis, kod i unaprijed formatirani tekst
  • odvažan, štampati kurzivom, precrtano, i naglasiti sadržaj
  • Poravnajte tekst lijevo, desno, u sredini i opravdajte
  • Dodajte vezu koja se također može otvoriti na novoj kartici
  • Umetnite ugrađenu sliku (da, postoji!)
  • Sakrij postavke bloka
  • Umnožavanje bloka
  • Umetnite blok prije ili poslije trenutnog bloka (u našem slučaju to je prvi odlomak, pa prije toga niste dodavali ništa, tek nakon.) Blok naslovne slike možete dodati prije prvog odlomka ako želite, jer izgleda tako dobro
  • Uredite blok kao HTML
  • Dodajte trenutni blok blokovima za višekratnu upotrebu da biste ih mogli koristiti u drugim postovima
  • U potpunosti uklonite blok

Blok stavka možete dodatno prilagoditi opcijama dostupnim u odjeljku Blok na kartici bočne trake kako je prikazano u nastavku.

opcije bočne trake gutenberga za blok odlomka

Nekoliko napomena o gornjoj slici:

  1. Odaberi Blok ovdje pogledajte sve opcije i postavke bloka
  2. Ovdje odaberite veličinu fonta i aktivirajte Drop Cap
  3. Stavku dodajte u pozadinu. Postavio sam je u plavu radi ilustracije. Možete prilagoditi i boju teksta. U oba slučaja možete dodati neograničene prilagođene boje
  4. Ovdje možete dodati prilagođenu CSS klasu, što znači da možete dodati dodatne CSS stilove u svoj blok
  5. Plava pozadina i kapica za kap već su primijenjeni u Gutenbergovom uređivaču

Kartica Dokument na bočnoj traci

Na izborniku bočne trake nalazi se još jedna kartica; Dokument kao što je prikazano u nastavku.

kartica dokumenta stranice bočne trake stavka

Evo bilješki za gornju sliku:

  1. Kliknite ovdje da biste prebacili na Dokument kartica
  2. Ovdje možete zakazati post, postaviti vidljivost bilo kojem Privatna ili Javnost, postaviti post u U tijeku je pregled statusa, odaberite format objave i stvorite ljepljiv post
  3. Odjeljak vam omogućuje uređivanje trajne veze
  4. Ovdje možete odabrati ili stvoriti nove kategorije
  5. Dodajte oznake u svoj post
  6. Postavite istaknutu sliku
  7. Napravite priručnik
  8. Dopustite komentare, pingbakove i povratne poruke

Kao što vidite, imate puno mogućnosti dizajniranja bloka odlomka (i čitavog posta), na koji god način želite. Usput, različiti blokovi dolaze s različitim postavkama što ćemo naučiti za minutu.

Nakon prvog odlomka pritisnite tipku UNESI ponovo pritisnite tipku da biste stvorili novi redak (ili blok odlomka). Sada, dodajmo sliku ispod prvog odlomka.

Dodavanje slika u Gutenbergu

dodajući novu sliku u gutenbergu

Kažu da slika govori tisuću riječi, a blog na blogu bez slika je, eto, crtač. Da biste dodali sliku u svoj WordPress post pomoću Gutenberga, imate nekoliko opcija.

Kad pogodite UNESI tipku prije nekoliko trenutaka, pokrenuli ste novi blok paragrafa. Budući da je Gutenberg intuitivan, možete dodati sliku klikom na ikone plus (+), slike ili naslovnice kao što ističemo na slici ispod.

dodavanje nove slike u gutenberg editor

Nekoliko napomena:

  1. Sliku možete dodati pomoću ikona plus (+)
  2. Ovdje jednostavno možete dodati sliku
  3. Ova opcija omogućuje vam dodavanje a pokriti slika (Obično su veće od ostalih fotografija. Osim toga, dodajte tekst na naslovnim slikama, BTW)

Naprijed i kliknite bilo koju od plus (+) ikona. Zatim kliknite gumb Slika kao što je prikazano u nastavku.

dodavanje slika u gutenbergu

Klikom na Slika kartica učitava Slika blok prikazan na slici ispod.

blok slike gutenberga

 Slika blok vam omogućuje prijenos slike ili dodavanje fotografije iz URL-a ili medijske biblioteke. U tom procesu možete dodati alt tekst (važan za SEO), titlove i opis putem postavki medijskog zaslona ili Blok bočnoj traci kao što je prikazano na sljedećim slikama.

Uobičajene postavke medija …

postavke medija za WordPress

… i ono Slika blok postavke.

postavke bloka slike gutenberga

Jeste li danas ovdje nešto naučili? Nadam se. Krenimo dalje.

Nakon dodavanja slike, Gutenberg dodaje novi blok odlomka odmah ispod nje. Možete dodati sve što želite, ali za ilustraciju, dodao sam malo teksta, a zatim gumb ispod toga.

Kako dodati datoteke za preuzimanje, npr. PDF, slike, videozapisi itd

Gutenberg nevjerojatno jednostavno dodaje datoteke za preuzimanje u svoj WordPress post ili stranicu.

U novom stav blok, kliknite ikonu plus (+), pomaknite se do Uobičajeni blokovi i pogodio Datoteka kao što to u nastavku ističemo.

dodavanje datoteka za preuzimanje u gutenbergu

Na taj način pokreće se sljedeći blok:

blok datoteka gutenberga

Od Datoteka blok možete prenijeti novu datoteku ili je dodati iz svoje medijske biblioteke. Nakon dodavanja datoteke, Gutenberg dodaje slatku preuzimanje datoteka gumb automatski kao što je prikazano na slici ispod.

dodavanje datoteke u gutenbergu

Možete se igrati oko opcija. Na primjer, možete urediti / izbrisati “Besplatni popis za Gutenberg PDF“, Kao i naslov preuzimanje datoteka dugme. Možete dodati CSS klasu u blok i oblikovati ga na način na koji želite.

Dodavanje citata u Gutenbergu

Zatim dodajmo ponudu jer su šarmantni, privlačni i pomažu vam da vozite mjesto kući. U novom retku kliknite znak plus (+), pomaknite se do Uobičajeni blokovi i pogodio Citat kao što je prikazano u nastavku.

dodavanje citata u gutenbergu

Na taj se način dodaje ono Citat blokirajte u svom postu kao što smo istaknuli u donjoj slici zaslona.

postavke bloka citiranja gutenberga

Primjetite postavke bloka citata na desnoj bočnoj traci iznad?

Da biste dodali ponudu, utipkajte unutar bloka. Evo mog rezultata.

gutenberg citat

Izgleda nevjerojatno, točno?

Dodavanje umetanja medija u Gutenberg

Gutenberg dolazi s nekoliko blokova za umetanje videozapisa i drugih medija s 30+ web lokacija kao što su YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare i tako dalje.

Da biste ugradili sadržaj, kliknite ikonu plus (+), pomaknite se do Ugrađivanja, i odaberite mjesto. Na primjer, želio sam YouTube, kao što je prikazano u nastavku.

gutenberg youtube embed

Zatim kopirajte i zalijepite YouTube video URL i kliknite na Ugraditi gumb kao što je prikazano na slici ispod.

gutenberg youtube ugraditi blok

Čim pogodite Ugraditi gumba, Gutenberg automatski prekriva vezu u videozapis, kao što smo istakli u nastavku.

ugrađeni YouTube video u Gutenbergu

Glatko jedrenje cijelim putem. Sada dodajmo samostalni gumb koji je savršen za stvaranje poziva na akciju (CTA).

Kako dodati gumb u Gutenbergu

Ne bi vam bilo teško dodavati blokove u ovom trenutku. Samo kliknite plus (+) i odaberite svoj blok. Ne može biti lakše od toga.

Pa, kako dodamo gumb?

U novom retku (ili bloku) kliknite ikonu plus (+), pomaknite se do Elementi izgleda i kliknite gumb Dugme kao što je prikazano u nastavku.

dodavanje gumba u uređivaču gutenberga

Samim tim vas vodi do Dugme blok kao što smo detaljnije u nastavku.

dodavanje gumba u gutenbergovom uređivaču

Kao što možete vidjeti na gornjoj slici, možete urediti tekst gumba i dodati vezu. Uz to možete prilagoditi gumb preko izbornika bočne trake s desne strane zaslona.

Nakon nekoliko klikova, evo što imam.

primjer gumba Gutenberg

Usput, ako koristite teško čitljive kombinacije boja na svojim gumbima, Gutenberg će vas odmah obavijestiti. Kako lijepo?

Kako dodati stupce u Gutenbergu

Uz lijepi gumb na mjestu, dodajmo neke stupce. Ja ću dodati dva stupca, pa pažljivo slijedite.

Evo što treba učiniti. Kliknite ikonu plus (+), pomaknite se do Elementi izgleda i kliknite gumb Kolumne kao što je prikazano na slici ispod.

stupac gutenberg editor

Gutenberg zadano dodaje dva stupca. Pogledajte sliku ispod i sjetite se, već sam dodavao sadržaj u stupce.

Gutenbergovi stupci u uređivaču wordpressa

Što me dobiva:

gutenberg frontend stupaca

Nije loše za nekoliko sekundi rada. Ali možda ne želite stvarati stupce. Možda želite prikazati sliku pored nekog teksta.

Postoji li blok za to? Da tamo je!

Kako dodati sliku pokraj teksta u Gutenbergu

Želite li dodati sliku pored nekog teksta? Ako je to slučaj, svidjet će vam se sljedeći odjeljak.

Kao i obično, kliknite ikonu plus (+), pomaknite se do Elementi izgleda i kliknite Mediji i tekst kako je prikazano dolje.

blok medija i teksta gutenberg

Trebali biste vidjeti Mediji i tekst blok, kao što je prikazano u nastavku.

mediji i blok teksta u gutenbergu

Zatim prenesite svoju sliku / video / medij ili je dodajte iz biblioteke medija. Nakon toga dodajte tekst pored medija, kao što je prikazano na slici ispod.

Igrao sam se sa Mediji i tekst blok, i došao sam sa sljedećim. Pazite; Uspio sam i tamo stisnuti gumb ��

medijski i tekstualni blok u punoj akciji

Oh, to je zadnji trenutak! Dopustite da vam pokažem prednji dio. Ovdje:

blok medija u gutenbergu

Izgleda vrlo profesionalno, zar ne? Svakako možete zamisliti koliko možete postići s urednikom Gutenberg.

Gutenbergovi blokovi treće strane

WordPress programeri su zainteresirani da teme i dodatke učine kompatibilnim s Gutenbergovim uređivačem. Nekoliko primjera uključuju WooCommerce, Jetpack i Yoast SEO.

Na primjer, u svoj WordPress post možete dodati blokove WooCommerce. Prvo morate instalirati i aktivirati WooCommerce.

Zatim u novom retku kliknite ikonu plus (+), pomičite se do WooCommerce i odaberite onaj blok koji želite kao što je prikazano u nastavku.

woocommerce gutenberg blokovi

Znate li što to znači? To znači da možete stvoriti obogaćene medije i sjajne postove i stranice u nekoliko minuta.

Ostali zapaženi blokovi

Već imamo više od 2.000 riječi i nastavimo li ovo dalje, napisat ćemo čitavu e-knjigu. Moja je molitva da sada možete koristiti Gutenberg bez štucanja.

Ako vam ovo ne pomogne, evo popisa ostalih dostupnih blokova.

  • Widgeti – Možete dodati sadržaj svojih widgeta u blogove
  • kratke kodove – Još uvijek možete koristiti nativne WordPress prečace
  • Klasik – Sjajan blok koji sadrži vaš stari sadržaj
  • Više – Blok je prethodno bio poznat kao Čitaj više označiti
  • Prijelom stranice, razdvajači, razmaknici
  • Prilagođeni HTML, Pullquote, tablica
  • Galerija i HTML5 audio / video
  • I toliko više ovisno o temama i dodacima koje koristite

Osim: Stvaranje WordPress stranice slično je stvaranju sprema posta za nekoliko minuta razlike, tako da danas nećemo temeljito raditi na tome.

Brzi Gutenbergovi hakovi i tipkovničke prečice

Gutenberg dolazi s nekoliko hakova i tipkovnih prečaca koji ga čine još lakšim. Na primjer, ako u blok odlomka upišete “/”, pojavljuje se popis blokova.

Možete čak odabrati određeni blok upisivanjem naslova bloka nakon crte (/), npr., Tipkanjem “/ image” pojavljuje se blok slike među ostalim blokovima koji se odnose na sliku. Pogledajte sliku u nastavku za više detalja.

prečac za pozadinu usred gutenberga

Prečaci na tipkovnici: Za pregled svih dostupnih prečaca pritisnite SHIFT + ALT + H u sustavu Windows i OPT + CTRL + H u Macu.

Na vrhu dokumenta možete vidjeti strukturu dokumenta klikom na ikonu (i), kao što je prikazano u nastavku.

gutenberg struktura dokumenta

Lijepo. Izuzetno glatka.

Oh, i usput, pogreška “Update Failed” obično se događa zbog drhtave internetske veze ��


Između vas i mene Gutenberg je fantastičan urednik sadržaja. Pod uvjetom da ste spremni naučiti konopce; možete mnogo iskoristiti iz budućeg uređivača WordPress-a.

Gutenberg je još uvijek relativno mlad i možete očekivati ​​da će porasti u pogledu upotrebljivosti i funkcionalnosti. Morat će se ozbiljno suočiti s tim u narednim danima. Graditelji stranica bolje paze jer će im ponestati posla ��

Nadamo se da će vam korak po korak vodič Gutenbergovog urednika pomoći da stvari stavite u perspektivu. Vjerujemo da sada možete koristiti uređivač blokova za izradu sadržaja poput stručnjaka.

Podijelite zabrinutosti, razmišljanja i pitanja u odjeljku za komentare u nastavku.

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