Hvordan bygger man blokke med Bento i WordPress i 2025?

at designe moderne hjemmesider i WordPress , især med muligheden for at bygge blokke med Bento. Denne funktion handler om at give dig kreativ frihed uden besværet med ekstra kodning eller store plugins.

Med Bento kan du skabe rene, responsive layouts, der passer problemfrit ind i dit websitedesign, uanset om du ønsker et minimalistisk look, et dristigt gitterlayout eller en afbalanceret sidestruktur. Det er bygget til at spare tid, forenkle designet og hjælpe selv begyndere med at oprette sektioner i professionel kvalitet.

Ud over blot det visuelle sikrer Bento også ydeevne og responsivitet. Hver blok, du opretter, justeres problemfrit på tværs af enheder, hvilket får dit websted til at se elegant ud på desktops, tablets og mobiler.

For bloggere, ejere af små virksomheder eller udviklere betyder fleksibiliteten til at bygge blokke med Bento mere kontrol, hurtigere arbejdsgange og design, der skiller sig ud.

I denne guide vil vi trin for trin gennemgå processen for at få mest muligt ud af Bento i WordPress, så du kan frigøre dets fulde potentiale til dine hjemmesideprojekter.

Forståelse af Bento og Gutenberg

Bento er en samling af højtydende webkomponenter designet til at forenkle og forbedre webudvikling. Disse komponenter er genbrugelige, tilgængelige og kompatible med flere browsere, hvilket gør dem til et pålideligt valg for udviklere, der bygger moderne webapplikationer.

Det, der adskiller Bento, er dens alsidighed. Den tilbyder komponenter som React, Preact og brugerdefinerede elementer, hvilket sikrer problemfri integration i forskellige miljøer, herunder WordPress.

Med Bento kan udviklere:

• Eliminer overflødig kodning ved at udnytte genbrugelige komponenter.

• Sørg for tilgængelighed og en problemfri brugeroplevelse på tværs af alle enheder.

• Brug stærkt optimerede komponenter, der bidrager til hurtigere sideindlæsningstider.

Gutenberg er WordPress' kraftfulde blokeditor, bygget på React, der giver brugerne mulighed for at designe og strukturere indhold ved hjælp af blokke. Hver blok repræsenterer en specifik funktionalitet, fra tekst og billeder til komplekse brugerdefinerede funktioner.

Gutenbergs virkelige magi ligger i dens fleksibilitet. Udviklere kan gå ud over de native WordPress-blokke og oprette brugerdefinerede blokke, der er skræddersyet til specifikke behov.

Den traditionelle metode til at bygge disse blokke kræver dog ofte, at funktionaliteten kodes to gange: én gang til React-editoren og én gang til frontend'en. Denne dobbeltarbejde kan føre til ineffektivitet og uoverensstemmelser.

Hvorfor kombinere Bento med Gutenberg?

Bento bygger bro over dette hul ved at give udviklere mulighed for at:

• Skriv komponenter én gang, og brug dem konsekvent på tværs af blokeditoren og frontend'en.

• Reducer udviklingstiden ved at eliminere overflødigt arbejde.

• Udnyt velafprøvede, funktionsrige komponenter som karruseller, harmonikaer og meget mere.

Ved at kombinere Bento med Gutenberg får udviklere en strømlinet og effektiv måde at oprette brugerdefinerede WordPress-blokke på, der både er funktionelle og visuelt tiltalende. I næste afsnit vil vi undersøge, hvordan Bento kan forenkle din udviklingsworkflow.

Hvorfor bruge Bento til Gutenberg-blokudvikling?

At oprette brugerdefinerede blokke til Gutenberg kan være en givende, men udfordrende proces. Udviklere jonglerer ofte mellem React-baserede editorkomponenter og frontend-implementering, hvilket resulterer i duplikeret kode og vedligeholdelsesproblemer. Det er her, Bento udmærker sig ved at tilbyde en elegant løsning, der forenkler processen og sikrer en problemfri oplevelse.

Lad os undersøge, hvorfor Bento er den perfekte ledsager til Gutenberg-blokudvikling.

Undgå kodeduplikering

Traditionelt involverer opbygning af Gutenberg-blokke implementering af funktionalitet to gange:

• Redigeringskomponent: Bygget med React til blokeditoren.

• Frontend-komponent: Genimplementeret uden React til rendering på frontend.

Dette overflødige arbejde øger udviklingstiden og skaber potentielle uoverensstemmelser mellem editoren og frontend-versionerne. Med Bento skriver du kun funktionaliteten én gang ved hjælp af dens genanvendelige komponenter, som fungerer problemfrit i begge miljøer.

Kompatibilitet på tværs af platforme

Bento-komponenter er designet til at være kompatible på tværs af flere platforme, hvilket sikrer ensartet adfærd i forskellige browsere og enheder.

Uanset om du arbejder i en React-baseret Gutenberg-editor eller renderes blokken på frontend, tilpasser Bentos komponenter sig ubesværet og leverer en ensartet brugeroplevelse.

Tilgængelighed lige fra starten

Tilgængelighed er ikke længere valgfrit, det er afgørende for at levere en god brugeroplevelse.

Bento-komponenter er bygget med tilgængelighed i tankerne og overholder webstandarder som ARIA-roller og tastaturnavigation. Dette sikrer, at dine Gutenberg-blokke er inkluderende og brugervenlige for alle målgrupper.

Høj ydeevne til hurtigere hjemmesider

Bento-komponenter er optimeret til hastighed, hvilket bidrager til hurtigere sideindlæsning og forbedret hjemmesideydelse.

Dette er især vigtigt for WordPress-sider, hvor ydeevnen kan have direkte indflydelse på SEO-rangeringer og brugertilfredshed. Brugen af ​​Bentos lette og effektive komponenter sikrer, at dine blokke ikke oppuster dit websted.

Opsætning af dit udviklingsmiljø

Før du kaster dig ud i at oprette en Bento-drevet Gutenberg-blok, er det vigtigt at have dit udviklingsmiljø konfigureret korrekt. Et velforberedt miljø sikrer en problemfri udviklingsproces og reducerer potentielle problemer senere. Følg nedenstående trin for at gøre alt klar.

Forudsætninger

Før du dykker ned i Bento-drevet Gutenberg-blokudvikling, skal du sørge for at have følgende klar:

Node.js og npm installeret:

• Installer Node.js (som inkluderer npm) for at administrere afhængigheder og bygge dit projekt.

• Bekræft installationen ved at køre følgende kommandoer i din terminal:

node -v npm -v

WordPress installeret lokalt:

• Opsæt et lokalt WordPress-miljø ved hjælp af værktøjer som Local by Flywheel, XAMPP eller Docker.

• Sørg for adgang til mappen wp-content/plugins for at installere og aktivere dit brugerdefinerede plugin.

Kendskab til React og Gutenberg:

• Hav en grundlæggende forståelse af React, da det er fundamentet for Gutenberg-blokudvikling.

• Sæt dig bekendt med Gutenbergs blokstruktur, især hvordan redigerings- og gemningsfunktionerne fungerer.

Installation af @wordpress/create-block

Værktøjet @wordpress/create-block forenkler processen med at oprette brugerdefinerede Gutenberg-blokke. Sådan konfigurerer du det:

Kør Create-Block-kommandoen:
I din terminal skal du navigere til WordPress-plugins-mappen og køre følgende kommando for at oprette et nyt blok-plugin:

npx @wordpress/create-block fantastisk-karrusel

Dette vil generere en ny plugin-mappe kaldet awesome-carousel, der indeholder alle de filer, der er nødvendige for at starte udviklingen.

Naviger til plugin-mappen:
Flyt til den nyoprettede mappe:

cd awesome-karrusel

Start udviklingsmiljøet:
Kør følgende kommando for at initialisere udviklingsserveren:

npm-start

Denne kommando kompilerer dine blokfiler og holder øje med ændringer under udviklingen.

Aktivér plugin'et i WordPress:

Gå til WordPress-administratordashboardet.

Naviger til Plugins ⟶ Installerede plugins, og aktiver Awesome Logo Carousel .

Dit brugerdefinerede plugin er nu aktivt, og en basisblok er tilgængelig i Gutenberg-editoren.

Oprettelse af en brugerdefineret bentoblok: Trin-for-trin-guide

Opbygning af en brugerdefineret Bento-drevet Gutenberg-blok starter med ordentlig forberedelse, som inkluderer opsætning af plugin-strukturen, installation af de nødvendige Bento-komponenter og gengivelse af din første blok i editoren. Følg denne trinvise vejledning for at oprette en problemfri og funktionel karruselblok.

Første opsætning

Ved at komme i gang med den indledende opsætning sikrer du, at dit projekt har det rette fundament til at bygge en brugerdefineret Gutenberg-blok. Ved at følge disse trin opretter du en fuldt funktionel plugin-struktur, der kan udvides med Bento-komponenter. Denne opsætning indeholder alle de nødvendige filer og konfigurationer til problemfri udvikling.

Opret Block-pluginnet ved hjælp af @wordpress/create-block

Brug værktøjet @wordpress/create-block til at oprette et nyt blok-plugin. Dette genererer alle de nødvendige filer og mapper, hvilket giver en brugsklar struktur.

Kør følgende kommando:

 npx @wordpress/create-block fantastisk-karrusel

En ny mappe med navnet awesome-carousel vil blive oprettet i din WordPress plugins-mappe.

Naviger til plugin-mappen

Flyt til den nyoprettede blokmappe:

cd awesome-karrusel

Start udviklingsserveren

Start udviklingsmiljøet, som kompilerer og overvåger ændringer under udviklingen: npm start

Aktivér plugin'et i WordPress

• Log ind på dit WordPress-administratordashboard.

• Naviger til Plugins ⟶ Installerede plugins, find Awesome Carousel- pluginnet, og aktiver det.

Når den oprindelige opsætning er færdig, har du nu et grundlæggende Gutenberg-blok-plugin klar til tilpasning.

Udforsk: Trin-for-trin guide til, hvordan man bygger en Web3 hjemmeside med WordPress

Installation af Bento-komponenter

Integrering af Bento-komponenter i din blok er et afgørende skridt, der frigør det fulde potentiale for genbrugelighed og ydeevne.

Bento Base Carousel-komponenten fungerer som rygraden i din brugerdefinerede blok og giver en præbygget, men fleksibel karruselfunktionalitet. Med blot et par kommandoer kan du integrere Bentos tilgængelighed og platformskompatibilitet i dit projekt.

Installer Bento Base Carousel-komponenten

Installer Bento Base Carousel-komponenten ved hjælp af npm: npm install –save @bentoproject/base-carousel

Importér Bento-karrusel i blokken

Åbn src/edit.js-filen, og tilføj følgende importfiler:

import { BentoBaseCarousel } fra '@bentoproject/base-carousel/react'; import '@bentoproject/base-carousel/styles.css';

BentoBaseCarousel React-komponenten leverer karruselfunktionalitet, mens CSS

sikrer korrekt styling for både editoren og frontend.

Når Bento er installeret og importeret, er du klar til at gengive din første karruselblok i Gutenberg.

Læs også: Sådan bygger du en SaaS-hjemmeside med WordPress

Rendering af karrusellen i Gutenberg

Ved at gengive karrusellen i Gutenberg kan du se Bento i aktion i WordPress-blokeditoren. Dette trin fokuserer på at integrere BentoBaseCarousel React-komponenten og sikre, at den fungerer som forventet.

Du lærer også, hvordan du styler blokken, så den ser godt ud i både editoren og frontend'en. Ved afslutningen af ​​dette trin har du en fungerende karruselblok, der viser Bentos kraft.

Opdater redigeringskomponenten

Åbn filen src/edit.js, og opdater redigeringskomponenten, så den inkluderer BentoBaseCarousel:

importér { useBlockProps } fra '@wordpress/block-editor'; importér { BentoBaseCarousel } fra '@bentoproject/base-carousel/react'; importér '@bentoproject/base-carousel/styles.css'; eksportér standardfunktion Rediger() { return (}  } <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></BentoBaseCarousel></div></div> ); }

Denne kode integrerer Bento Base Carousel-komponenten med et sæt eksempelbilleder.

Lær: Sådan opbygger du dit WordPress-websted ved hjælp af Underscores-temaet

Tilføj karruselspecifik CSS

Åbn filen src/style.scss, og tilføj følgende CSS for at sikre, at karrusellen har ensartede dimensioner:

wp-block-create-block-awesome-carousel .awesome-carousel-wrapper, .wp-block-create-block-awesome-carousel .awesome-carousel-wrapper > * { billedformat: 1200 / 800; }

Dette sikrer, at karrusellen bevarer sit billedformat på tværs af enheder og ser professionelt ud.

Forhåndsvisning af karruselblokken i editoren

Gem dine ændringer og genopbyg blokken ved hjælp af udviklingsserveren (npm start hvis den ikke allerede kører).

Gå til WordPress-blokeditoren, tilføj Awesome Carousel- blokken, og se karrusellen i aktion.

På dette stadie er din Bento-drevne Gutenberg-blok funktionel i editoren. I de næste trin kan du forbedre dens interaktivitet og optimere den til frontend-ydeevne.

Læs: Sådan opretter du en WordPress-billedkarrusel

Tilføjelse af interaktivitet til Bento-blokke

Interaktivitet er nøglen til at skabe engagerende blokke i WordPress. Med Bentos robuste API kan du tilføje dynamiske funktioner såsom navigationskontroller, der giver brugerne mulighed for problemfrit at interagere med din karruselblok, både i editoren og på frontend.

Brugerinteraktion i editoren

For at gøre karrusellen interaktiv i Gutenberg-editoren kan brugerdefinerede knapper til navigation (f.eks. Næste og Forrige) tilføjes. Ved at bruge Bentos API kan du styre karrusellens funktionalitet direkte i React.

Først skal du opdatere din src/edit.js-fil for at inkludere navigationskontroller. Brug createRef-funktionen til at få adgang til karrusellens API. For eksempel:

import { createRef } from '@wordpress/element'; import { Button } from '@wordpress/components'; export default function Edit() { const ref = createRef(); const goToNextSlide = () => ref.current.next(); const goToPreviousSlide = () => ref.current.prev(); return ()     Bemærk: } Tilføjelse: } Please provide the text and the two translations. Indeholder en variabel kode som "goToPreviousSlide" og "return" som "default". Det er ikke en god idé at oversætte teksten direkte til en anden enhed. Hvis du bruger en specifik funktion, skal du bruge den til at oversætte teksten direkte. <div {...useBlockProps()}><div className="awesome-carousel-wrapper"><BentoBaseCarousel ref={ref} autoAdvance={false} loop={false} snap={true}><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></BentoBaseCarousel></div> <Button isSecondary onClick={goToPreviousSlide}>Forrige</button> <Button isSecondary onClick={goToNextSlide}>Næste</button></div> ); }

Tjek: Udforsk de bedste WordPress-bloktemaer

Disse knapper giver brugeren mulighed for at navigere karrusellen direkte i blokeditoren ,hvilket gør den interaktiv og brugervenlig.

Brugerinteraktion på frontend

Interaktiviteten på frontend'en afspejler editorens funktionalitet. I stedet for React-komponenter bruges dog Bentos native brugerdefinerede elementer. Opdater src/save.js-filen for at inkludere karrusellen og navigationsknapperne:

eksport standardfunktion gem() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Forrige</button> <button className="awesome-carousel-next">Næste</button></div></div> ); }

For at aktivere navigationsknapperne på brugerfladen skal du oprette en src/view.js-fil. Denne fil interagerer med Bentos API for at håndtere brugerhandlinger:

eksport standardfunktion gem() { return ( <div {...useBlockProps.save()}><div className="awesome-carousel-wrapper"><bento-base-carousel auto-advance="false" loop="false" snap="true"><img src="https://source.unsplash.com/random/1200x800?1" alt="Slide 1" /><img src="https://source.unsplash.com/random/1200x800?2" alt="Slide 2" /><img src="https://source.unsplash.com/random/1200x800?3" alt="Slide 3" /></bento-base-carousel></div><div className="awesome-carousel-buttons"> <button className="awesome-carousel-prev">Forrige</button> <button className="awesome-carousel-next">Næste</button></div></div> ); }

Dette script sikrer, at navigationsknapperne interagerer problemfrit med karrusellen på frontend'en.

Læs: Hvad er WordPress-blokmønstre

Styling og frontend-optimering

Korrekt styling og optimering er afgørende for at sikre, at blokken ser godt ud og fungerer godt i både editoren og frontend'en. Brug filen src/style.scss til at definere stilarter, der er specifikke for din karrusel, og sørg for, at den er visuelt ensartet på tværs af enheder. Undgå at bruge generiske klassenavne for at forhindre konflikter med andre temaer eller plugins.

For at optimere ydeevnen skal du indlæse stilarter dynamisk ved hjælp af PHP. Opdater din plugin.php-fil for kun at registrere og sætte stilarter i kø, når blokken gengives:

function create_block_awesome_carousel_register_assets() { wp_register_script('bento-runtime', 'https://cdn.ampproject.org/bento.js', [], false, true); wp_register_script('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js', ['bento-runtime'], false, true); wp_register_style('bento-base-carousel', 'https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css', []); } add_action('init', 'create_block_awesome_carousel_register_assets');   * ..

Registrering af aktiver og administration af gengivelseskald

Effektiv indlæsning af aktiver sikrer, at din blok forbliver let. Brug PHP's render_callback til kun at indlæse scripts og stilarter, når blokken er til stede på siden. Rediger plugin.php-filen som følger:

function create_block_awesome_carousel_block_init() {
    register_block_type(__DIR__, [
        'render_callback' => 'create_block_awesome_carousel_render_block',
    ]);
}

function create_block_awesome_carousel_render_block($attributes, $content) {
    if (!is_admin()) {
        wp_enqueue_script('awesome-carousel-view');
        wp_enqueue_style('bento-base-carousel');
    }
    return $content;
}
add_action('init', 'create_block_awesome_carousel_block_init');


Dette sikrer, at scripts og stilarter kun indlæses på sider, hvor blokken gengives, hvilket forbedrer den samlede ydeevne for webstedet.

Bedste praksis for udvikling af Bento-blokke

Når du arbejder med Bento-blokke i WordPress, sikrer du, at dine blokke forbliver effektive, genanvendelige og brugervenlige ved at følge bedste praksis.

Hold blokkene lette og genanvendelige

Ligesom en Bento-madkasse er opdelt i pæne rum til måltider, snacks, frugt og endda børnemad, bør dine klodser også være modulære og genanvendelige.

Fokuser på rene materialevalg i din kode, og sørg for, at hver blok er robust, holdbar og ikke overbelastet med unødvendige funktioner.

Det gør dem mere bærbare, nemmere at opbevare og praktiske til daglig brug, ligesom en miljøvenlig, lækagesikker og opvaskemaskine-sikker madpakke, som du kan tage med overalt, fra picnic til rejser.

Sikre tilgængelighed (semantisk HTML og ARIA-attributter)

Tilgængelighed er fundamentet for at opbygge sikre og behagelige oplevelser. Ved at bruge semantisk HTML og ARIA-roller korrekt bliver dine Bento-blokke mere inkluderende.

Tænk på det som at sørge for, at en beholder er mikrobølgeovnssikker, tåler opvaskemaskine og håndvask. Alle burde kunne bruge den, uanset præference.

Korrekt mærkning forhindrer også problemer som "spild" eller lækager af indhold, når man navigerer med hjælpeteknologier, hvilket sikrer, at brugerne kan nyde dit indhold, ligesom de ville nyde mad opbevaret i et veldesignet produkt, der undgår uønskede lugte.

Optimer til mobilresponsivitet

I dagens verden interagerer brugerne med hjemmesider på flere enheder, hvilket gør mobilresponsivitet afgørende.

Dine Bento-blokke bør passe til forskellige skærmstørrelser, ligesom man skal vælge den rigtige kapacitet eller mængde beholdere baseret på, hvor meget mad man skal pakke. Uanset om det er til små snacks eller fulde måltider, bør designet skalere flydende.

Et responsivt bloklayout er lige så praktisk som en Bento-boks, der passer i enhver taske, robust, sikkert og designet til at forhindre spild under daglig brug eller rejser.

Brug Bento til performance frem for reaktionstunge blokke

Bentos fordel ligger i dens ydeevne. I stedet for at stole på tunge React-baserede tilgange, holder Bento tingene strømlinede og effektive.

Det er ligesom at vælge en miljøvenlig, mikrobølgeovnssikker, holdbar og lækagesikker beholder frem for en klodset en, der tilføjer ekstra vægt.

Med Bento fokuserer du på hastighed, færre afhængigheder og en renere udvikleroplevelse, ideel til projekter, der skal være sjove, sikre, bærbare og optimerede til ydeevne.

Følg WordPress kodningsstandarder

Endelig skal du altid overholde WordPress kodningsstandarder for at sikre kompatibilitet, vedligeholdelse og sikkerhed.

Ligesom produkter fra Holland eller globalt anerkendte mærker ofte sætter kvalitetsstandarder for pris, materiale, kapacitet og rent design, sikrer kodningsstandarder, at dine blokke forbliver af høj kvalitet, pålidelige og nemme at håndvaske eller "vedligeholde" i det lange løb.

Ved at følge bedste praksis skaber du Bento-blokke, som udviklere vil elske, og som forbliver ideelle til daglig og langvarig brug.

Lær mere: Guide til at oprette brugerdefinerede blokke i WordPress

Afsluttende tanker

 Brug af Bento med Gutenberg transformerer blokudvikling ved at forenkle arbejdsgange, reducere kodeduplikering og forbedre interaktiviteten.

Med genbrugelige komponenter, kompatibilitet på tværs af platforme og indbygget tilgængelighed giver Bento udviklere mulighed for at skabe højtydende, fremtidssikrede WordPress-blokke uden besvær.

Ved at integrere avancerede tilpasninger og optimere ydeevnen kan du levere en problemfri oplevelse for både redaktører og brugere.

Uanset om du bygger til personlige projekter eller skalerer for kunder, leverer Bento værktøjerne til at tage dine Gutenberg-blokke til det næste niveau med lethed og effektivitet.