Share
Det nye Gutenberg-redigeringsgrensesnittet er en stor endring som kommer til WordPress 5 i år, og det vil påvirke WordPress-pluginutviklere, temadesignere og nettstedskapere.
I denne videoen vil jeg vise deg hvordan du konfigurerer Gutenberg som et plugin på ditt eksisterende nettsted og hvordan du kommer i gang med å bruke Gutenberg-editoren for å lage innhold.
Følg med og du får oppleve noen av de nye funksjonene i Gutenbergs førstehånds.
Et godt utgangspunkt for å lære om Gutenberg er på Gutenberg siden i WordPress Codex. Det gir deg en oversikt over hva Gutenberg handler om og forteller deg hvordan du kan bidra til å forbedre den og bygge fremtiden. Du kan gjøre det ved å sende tilbakemelding via tilbakemeldingsspørsmålet, som du også kan bruke til å be om støtte.
Du kan også se testkravene for å teste Gutenberg. Årsaken til at det er viktig å følge disse kravene er at alle testes på en måte som er konsekvent, og hjelper teamet som utvikler Gutenberg for å gjøre det så godt som mulig.
Gutenberg er ikke en del av WordPress-kjerne, men det kommer til å ligge i en fremtidig utgave. Vær oppmerksom på at det kan gå bra i mellomtiden, delvis på grunn av tilbakemeldingen, og delvis på grunn av det arbeidet som fortsatt er i gang for å gjøre det så godt som det kan være. Men i mellomtiden, la oss ta en titt på hvordan du kan få Gutenberg på nettstedet ditt akkurat nå, og gi deg en rask oversikt over hvordan det ser ut.
Måten du kan få Gutenberg på nå er via en plugin. Så installer den på vanlig måte - gå til Plugins> Legg til nytt, søk etter "Gutenberg", og når du har funnet det, klikk Installere nå og så Aktiver.
Nå som du har installert pluginet, vil Gutenberg-editoren være aktiv på nettstedet ditt.
Jeg åpner et eksisterende innlegg på nettstedet mitt for å vise deg hvordan postredigeringsskjermen ser ut i Gutenberg.
Du kan se at dette ser ganske annerledes ut enn det det pleide å være. Når jeg svinger over ting, vises ikoner med tre prikker på høyre side, som viser meg at hvert element i innholdet mitt har blitt en blokk.
Hvis jeg klikker inn i en blokk, har jeg noe som ser litt mer kjent ut - det ser ut som det gamle kjøkkenvasken i den klassiske redaktøren. Men du kan se at du ikke har fanene for kodesvisningen og den normale visningen øverst.
Over på høyre side har jeg et litt annerledes sett av hva som pleide å være metaboxer, som pleide å se ganske skilt ut i den gamle redaktøren. Dette ser mye mer ut som Customizer. Så hvis du har jobbet med Customizer i WordPress, vil dette layoutet være kjent for deg. Du kan klikke på hver overskrift for å utvide den tilsvarende delen. Samlet sett gjør det litt tynnere og reduserer behovet for å bla.
Du kan legge til flere blokker ved å klikke på plussymbolet nederst til venstre, og en meny vises som viser de forskjellige alternativene.
Hvis du er en erfaren WordPress-bruker, og spesielt hvis du er en WordPress-utvikler, kan du kaste hendene dine i skrekk på dette. Men jeg kan se hvordan for mindre erfarne brukere og personer som er mer visuelt tenkende, vil dette få ting til å virke mye enklere.
Gutenberg gjør det også lettere for deg å flytte ting rundt. Så jeg skal lage et stykkeblokk ut av noe av det eksisterende innholdet i mitt innlegg. Når jeg har gjort det, kan jeg deretter velge blokkene mine og flytte dem opp og ned ved å klikke på pilene til venstre.
Dette gir deg stor fleksibilitet når det gjelder å flytte ting rundt på nettstedet ditt og håndtere ting på en måte som er visuell.
Det finnes også andre typer blokker. En liste, for eksempel, blir en blokk helt alene.
Jeg begynner med å dele opp mitt eksisterende innhold i blokker ved å klikke på kontrollikonet og velge Konverter til blokker fra menyen som vises.
Gutenberg skiller deretter ut overskriftene og de enkelte avsnittene, og det skaper også separate blokker for hver liste. Så det er veldig raskt og enkelt å konvertere dine eksisterende innlegg til Gutenberg-kompatibelt innhold.
Du kommer til å huske i begynnelsen, jeg sa at det ikke var noen faner øverst for tekstvisningen og kodevisningen. I stedet for det, kan du bare jobbe med koden for en enkelt blokk. Så hvis jeg klikker på kontrollikonet til høyre, kan jeg velge Rediger som HTML. Deretter viser blokken i kodevisning, og jeg kan redigere koden i den aktuelle blokken.
Hvis du er noe som meg, og du har måttet grave dypt inn i koden bak et langt innlegg, kan det være veldig forvirrende å prøve å finne den teksten du har jobbet med, så dette gjør det mye, mye lettere å jobbe med et bestemt stykke kode.
Så blokker gjør virkelig Gutenberg hva det er, og jeg håper dette har gitt deg litt følelse for blokker og hvordan de fungerer. En blokk er i utgangspunktet ekvivalent med et element i HTML-en din. Hvis du skulle se på utdataoppdateringen for filen din, ville du se at hver av disse var på samme nivå. Så du har overskrifter, avsnitt og lister, og de er alle på samme nivå i HTML-koden din.
Du kan også dele og flette blokker med samme kontrollmeny som dukker opp fra ikonet med de tre punktene, og det er også en angre knappen opp øverst, noe som er veldig nyttig. Og med lister kan du enkelt bytte mellom ulike nivåer av innrykk, eller mellom punktliste og nummererte lister, bare ved å bruke menyen over den aktuelle blokk.
Nå som jeg har konvertert innholdet mitt til individuelle blokker, kan jeg også klikke Blokkere i sidefeltet til høyre og endre innstillingene for hver blokk.
Du kan også vise og skjule innstillingsverktøylinjen ved å klikke på kontrollmenyen ved siden av en blokk og velge Vis avanserte innstillinger eller Skjul Avanserte innstillinger. Hvis du gjemmer det, får du en fin, ren redigering opplevelse.
Slik gir du en oversikt over de viktigste tingene du kan gjøre med blokker i Gutenberg. Du kan legge til blokker, endre typen blokk, noe er, og du kan redigere den underliggende koden. Du kan duplisere blokker, du kan fusjonere dem, du kan dele dem opp, og du kan flytte dem rundt i dokumentet.
Jeg har ikke brukt Gutenberg på et live sett ennå, men å løpe gjennom det for dette kurset har gjort meg ganske spent på hvordan Gutenberg fungerer, og hvordan det kan hjelpe meg med å redigere mitt eget innhold på mitt WordPress-nettsted.
Jeg håper Gutenberg vil være nyttig for deg, og jeg håper du likte denne raske gjennomgangen av hovedtrekkene.
Lær hvordan du bruker WordPress, eller sett deg fast og lær WordPress-utvikling med våre komplette guider. Alle kursene i disse veiledningene er gratis å vise med et abonnement på Envato Elements. For en enkelt månedlig avgift får du ubegrenset tilgang til vårt voksende bibliotek med over 1000 videokurser og bransjeledende e-bøker på Envato Tuts+.
I tillegg får du ubegrensede nedlastinger fra det store biblioteket Envato Elements med 500.000 + kreative eiendeler. Lag med unike skrifttyper, bilder, grafikk og maler, og lever bedre bedre prosjekter raskere.
Accentsconagua