Den komplette guide til WordPress widgets: Sådan bruges, tilføjes og implementeres de til at tilpasse dit websted

WordPress-widgets er utroligt nyttige. De giver dig mulighed for at tilføje alle slags ekstra content til dit websted uden for selve indlægget eller siden, og opfordrer brugerne til at få information, følge links eller tage handling.

I dette indlæg vil jeg vise dig alt hvad du har brug for at vide om WordPress-widgets. Sådan tilføjes dem til dit websted, hvordan man opretter widget-områder, hvor man kan placere dem, hvordan man installerer plugins, der giver dig flere af dem, hvordan man koder sine egne widgets og meget mere.

Lad os først starte med at identificere, hvad WordPress-widgets er.

Hvad er WordPress-widgets?

I WordPress er widgets uddrag af indhold, der lever uden for strømmen på siden eller indlæg.

Widgets indeholder information, navigation eller medier, der er adskilt fra et individuelt indlæg eller en side. I de fleste tilfælde vises hver widget på hver side på webstedet, men du kan også registrere widgetområder til specifikke sider, f.eks. startsiden.

For at tilføje en widget til dit websted skal du tilføje den til et widget-område. Widgetområder oprettes af dit tema, fordi de vedrører design og layout af dit websted og ikke til funktionalitet.

De fleste WordPress-temaer har widgetområder i sidebar og footer, selvom nogle vil have flere widgetområder mange steder, f.eks. under eller over indholdet eller i overskriften.

Se screenshot nedenfor, på et af mine egne websteder, viser widgets i sidebjælken og sidefoden.

WordPress kommer med en masse widgets, der er forudindlæst, så du kan bruge dem uden at skulle installere plugins eller skrive nogen kode. Men du kan også tilføje mange flere widgets ved at installere plugins eller kode dine egne.

Disse kan dække en lang række indholdstyper, såsom medier, sociale mediefeeds, navigation, søgning, kort og meget mere. Der er meget lidt, du måske ønsker på dit websted, som du ikke kan finde en widget til. Faktisk er den største udfordring ofte at vælge mellem alle mulighederne og ikke gå over bord.

Hvornår skal man bruge WordPress widgets

Du skal bruge en widget, når du vil føje ekstra indhold til en eller flere sider på dit websted (og når jeg siger side, inkluderer jeg poster, arkiver osv.), Men det er ikke en del af indholdet på denne side. De er især nyttige til indhold, du vil vise på hver side på webstedet, f.eks. en liste over dine seneste indlæg, en indkøbsvogn eller en call to action-knap.

Tænk på hvor mange brugere der har brug for adgang til hver widget, og hvor vigtigt det er, når du beslutter, hvor den skal placeres. Widgets i sidebar vil være mere fremtrædende end dem i footeren, som nogle brugere muligvis ikke engang ser.

Så en widget med det nyeste indlæg eller en call to action-widget er måske bedre stillet i sidebar, hvor folk har større chance for at interagere med dem, mens et feed på sociale medier kan gå i footeren.

Hvis dit tema også har specielle widgetområder til startsiden, kan du bruge disse til at navigere rundt på dit websteds afdelinger, lister over relevant indhold eller medier, såsom en video, der byder folk velkommen til webstedet.

11 eksempler på widgets i WordPress

Den bedste måde at forstå mulighederne, der tilbydes af WordPress-widgets, er ved at se på nogle eksempler på dem. Lad os se på elleve typer widgets, som du ofte ser på WordPress-websteder.

1. Widget for nyeste indlæg

Den nyeste post-widget er muligvis den mest almindeligt anvendte widget i blogs.

Det giver dig mulighed for at vise en liste over dine seneste indlæg i sidebar eller footeren på hver side på dit websted, hvilket øger muligheden for, at folk vil gennemse stedet og læse et antal indlæg.

Den nyeste post-widget leveres forudinstalleret med WordPress. Det giver dig mulighed for at indstille, hvor mange indlæg du vil vise, og hvilken overskrift du vil give widget’en.

Hvis du vil tilføje ekstra funktionalitet, kan du installere et plugin til en alternativ widget som WordPress Popular Posts, der viser det mest populære indhold. Alternativt opdateres widget Advanced Random Posts hver gang brugeren besøger en ny skærm.

2. Widget med nylige kommentarer

Vil du vise besøgende, hvor levende dit websted er, og hvor meget dit publikum engagerer sig med dit indhold?

The Recent Comments widget viser de nyeste kommentarer på dit websted, hvilket giver besøgende mulighed for at navigere direkte til disse kommentarer og deltage i diskussionen.

The Recent Comments widget leveres med WordPress. Igen, hvis du vil tilføje ekstra funktionalitet, kan du installere et tredjeparts comment-plugin, f.eks. WP Social Comments-widgeten, som lader folk kommentere ved hjælp af deres Facebook-konto: godt til engagement ved sociale medier.

3. Call to Action Widgets

En stor brug af en widget er at tilskynde folk til at gribe ind, og du kan gøre dette med en call to action-widget.

Din widget kan være en simpel knap, eller du kan oprette noget mere skræddersyet ved hjælp af en tekstwidget eller HTML-widget eller endda en billede-widget, som alle er forudinstalleret med WordPress.

På et af mine egne websteder har jeg oprettet en Call to action widget til at opfordre folk til at tilmelde sig min mailliste. Dette bruger den indbyggede HTML-widget, hvor jeg har inkluderet et billede, noget tekst og en knap, som jeg har kodet i HTML.

4. Navigations Widgets

Du kan også bruge widgets til at tilskynde folk til at navigere rundt på dit websted.

Der er et par muligheder til dette: widgeterne Kategorier eller Tag Cloud og Navigation Menu widget.

Navigation Menu Widget giver dig mulighed for at oprette en custum navigationsmenu såvel som hoved navigationsmenu på dit websted og derefter føje det til et widgetområde.

Du kan endda tilføje din hoved navigationsmenu til et widgetområde, selvom dette kun fungerer, hvis du har en lille navigationsmenu.

Tilføjelse af en navigationsmenu til footer på dit websted vil opfordre folk til at nå slutningen af et indlæg til at navigere rundt på dit websted. Det er især nyttigt for mobilbrugere, der muligvis bliver nødt til at udføre en hel del scrolling, for at komme tilbage til hoved navigationsmenuen efter at have nået slutningen af et indlæg.

Alternativt kan du bruge den indbyggede kategori-widget til at vise en liste over kategorierne på dit websted eller Tag Cloud-widget for at gøre det nemt for folk at få adgang til tagarkiver.

5. Media Widgets

Tilføjelse af medier til din sidebar eller sidefod giver dit websted liv og giver brugerne noget at se på eller interagere med.

Du kan bruge den indbyggede billedewidget til at vise ethvert billede i din sidebar eller footer, og det giver dig mulighed for også at omdanne dette billede til et link.

Alternativt giver video-widget dig mulighed for at streame video fra YouTube eller Vimeo lige ind i widgetområdet på dit websted. Dette er især nyttigt, hvis dit websted har specielle widgetområder til startsiden, men kan også være god i footeren som en måde at fange folks opmærksomhed på, når de kommer til slutningen af et indlæg.

6. Social Media Widgets

Hvis du vil engagere dig i mennesker, der besøger dit websted af sociale medier, vil du tilføje dit sociale medie feed til sidebar eller footeren på dit websted og vise folk, at du er aktiv på sociale medier og opfordre dem til at like eller følge dig.

En måde at få adgang til sociale medier widgets til de største platforme (Facebook, Twitter, Instagram) er at installere Jetpack-plugin, som inkluderer alle disse og meget mere.

Alternativt har alle sociale medieplatforme deres egne plugins, der er gratis tilgængelige via plugin-biblioteket. Eller du kan finde tredjeparts-plugins, der giver dig mulighed for at tilpasse den måde, du viser dit sociale medie feed.

7. Widget til indkøbskurv

Hvis du kører en e-handelsbutik på dit websted ved hjælp af et plugin som WooCommerce, er det en god ide at medtage en cart widget, så brugere let kan navigere til deres indkøbsvogn, uanset hvor de er i butikken.

Du kan placere dette i sidebar, hvor folk let kan se det eller i overskriften for at tilføje synlighed, hvis dit tema inkluderer et widget-område der.

Ecomerce-plugins som WooCommerce inkluderer widgets til indkøbskurv og andre e-handels widgets som en del af plugin, så når du først har føjet e-handel til dit websted, finder du dem tilføjet til din Widgets-skærm.

8. Formular-widget

Hvis du vil have folk til at kontakte dig, stille spørgsmål eller tilmelde dig en mailingliste, kan du tilføje en formular til din sidebar.

Der er ikke en form-widget inkluderet i WordPress, men du kan tilføje plugins for at give dem, såsom den gratis Contact Form 7 eller den premium, men meget kraftige Gravity Forms.

9. Kort widget

Hvis din virksomhed er baseret på en fysisk placering, og du ønsker, at folk let kan finde dig, vil det at tilføje en kort-widget til dit websted hjælpe.

Der er et antal gratis Google Map-widget-plugins, du kan bruge, såsom WP Google Maps-plugin.

Alternativt, hvis du ikke ønsker at installere et plugin, kan du hente den embedded kode fra Google Maps og tilføje den til en HTML-widget.

10. Login-widget

Hvis du kører et medlems-websted, vil en login-widget gøre det let for folk at logge ind på dit websted uden at skulle gå til en separat login-side.

Meta-widget, der leveres med WordPress, indeholder et login-link, men det indeholder også andre ting, du måske ikke ønsker, så jeg vil anbefale at bruge et separat plugin til dette fra plugin-biblioteket.

Login med Ajax-widget giver dig en login-formular i din widget, hvilket betyder, at folk kan logge ind på dit websted fra enhver side.

11. Search Widget

En virkelig enkel, men utrolig nyttig widget er Search widget, der kommer forudindlæst med WordPress.

Føj dette til din sidebar eller header, og du gør det lettere for folk at finde ting på dit websted.

Hvis du vil øge kraften i din søgemaskine, kan du installere den gratis WP Google Search widget, der bruger Google-søgning.

Sådan tilføjes widgets til dit WordPress site

Når du har besluttet, hvilken slags widgets du har brug for dit WordPress-sted, er det tid til at installere dem.

Bliv ikke fristet til at tilføje for mange. Jo flere der er, jo mindre sandsynligt er det, at brugere vil se dem. Fokuser i stedet på to eller tre nøglewidgets til din sidebar. Du kan føje mere til footeren, hvor de alligevel er mindre vigtige.

Og hvis du har nogle ekstra widget-områder i dit tema, skal du bestemme, hvilke widgets du vil lægge i dem. Sørg for, at de passer til layoutet og designet på dit websted.

Der er tre måder at tilføje widgets på:

• Brug widgets, der allerede leveres med WordPress.
• Tilføj en tredjeparts widget fra plugins-biblioteket.
• Køb et premium-plugin, der indeholder en widget.

Find widgets til dit WordPress site

Der er en lang række tilgængelige widgets, så det kan være vanskeligt at vælge, hvilken der skal installeres. Lad os se på indstillingerne og derefter undersøge, hvordan du muligvis vælger den bedste til dig.

Widgets, der følger med WordPress

Hvis en af de forudinstallerede widgets gør det, du har brug for det, skal du bruge det. Det sparer tid og betyder mindre kode, der kører på dit websted.

De forudinstallerede widgets er:

• Arkiv: link til arkiver efter måned, designet til blogs men temmelig forældet nu.
• Kalender: en kalender med dine indlæg, igen egnet til blogs, især hvis din er tidsfølsom (men ikke så almindelig i disse dage).
• Custom HTML: den ultimative fleksibilitet, tilføj uanset indhold, du ønsker, ved at skrive eller indsætte i HTML (som Google forms). Undgå dette, hvis du ikke er tilpas med kodning.
• Billede: vis et billede fra dit mediebibliotek.
• Navigationsmenu: Vis hovednavigationsmenuen eller en separat, du opretter.
• Seneste kommentarer: en liste med nylige kommentarer med links til dem.
• Tag Cloud: en liste med tags i et skyformat med links til de relevante arkiver.
• Video: integrer en video fra YouTube eller en hvilken som helst anden streamingtjeneste.
• Audio: integrer en podcast, en player, en sang eller andre lydklip (foreslået læsning: Sådan starter du en podcast ved hjælp af WordPress).
• Kategorier: en liste over kategorierne på din blog med links til arkivsiderne.
• Galleri: mere avanceret end billedwidgeten, vis et galleri med billeder.
• Meta: metadata såsom login-links og RSS-feeds. Et levn fra WordPress’ tidlige dage og ikke meget nyttigt nu.
• Sider: vis en liste over dit websteds sider med links.
• Seneste indlæg: vis en liste over dine seneste indlæg for at opmuntre folk til at læse dem.
• Søg: et simpelt søgefelt.
• Tekst: enhver tekst, du vil tilføje, f.eks. information om webstedet.

Tilføjelse af widgets med et plugin

WordPress plugin-biblioteket har tusinder af gratis widget-plugins, der giver dig flere widgets at vælge imellem.

Derudover inkluderer masser af andre plugins også widgets, såsom et e-handelsplugin, der giver dig en indkøbsvogn-widget og mere.

Hvis plugin-biblioteket ikke har det plugin, du har brug for, kan du beslutte at tilføje et premium-plugin. Nogle gange vil disse tilbyde flere funktioner eller en mere intuitiv interface. Men nogle gange finder du de samme funktioner i et gratis plugin, så lav en god søgning i plugin-biblioteket, før du betaler for plugins.

Sådan finder du den rigtige widget til dit websted

Følg disse tip for at finde den rigtige WordPress-widget til dig:

1. Identificer nøjagtigt, hvad du har brug for fra en widget. Hvilken funktionalitet skal den have, og hvordan vil du have den til at se ud? Har det brug for at linke til tredjeparts API’er?
2. Kontroller de indbyggede widgets for at se, om der er en, der opfylder dine behov. Test eventuelle relevante, hvis du finder en passende, det er fantastisk. Hvis ikke…
3. Kontroller plugin-biblioteket, som du kan få adgang til via Plugins> Tilføj nyt. Prøv at søge efter mere end et udtryk for at finde det rigtige plugin til dig, og søg med og uden ordet ‘widget’. Undertiden inkluderer et plugin, der ikke er fokuseret på widgets, en widget som en del af et bredere sæt funktioner.
4. Hvis du ikke kan finde noget passende blandt de gratis plugins, skal du kigge efter et premium plugin. Spørg andre WordPress-brugere om anbefalinger og se på anmeldelser, før de vælger en.

Uanset hvilken widget du vælger, skal du teste den for at kontrollere, at den fungerer, som du vil have den. Hvis du køber premium plugins, vil jeg anbefale at købe en med en tilbagebetalingsgaranti eller en gratis prøveperiode, hvis det ikke er det rigtige for dig.

Sådan føjes widgets til sidebar og footer i WordPress

Nu har du valgt din widget, det er tid til at føje den til dit websted.

Du kan tilføje widgets til alle aktive widgetområder, der leveres af dit tema. Hvis dit tema ikke har et widgetområde på det sted, du vil have et, kan du prøve at lede efter et alternativt tema.

Senere i dette indlæg viser jeg dig, hvordan du koder dit eget widget-område.

Der er to måder at tilføje widgets til dit websted:

• Ved at bruge Customizer. Gå til Udseende> Customizer> Widgets i admin-menuen, eller Tilpas> Widgets fra admin-linjen øverst på skærmen.
• Via widgets-skærmbilledet. Gå til Udseende> Widgets i admin-menuen, eller klik på Tilpas> Widgets fra admin-linjen.

Jeg viser dig, hvordan du bruger begge disse metoder inden for kort tid, men lad os først se på widgetområder, og hvorfor du får dem du gør med dit tema.

Widgets er ikke kun til sidebar

Afhængigt af dit WordPress-tema kan du måske finde ud af, at du har widgetområder flere steder.

De fleste temaer har widgetområder i sidebar og footer. Men nogle har dem også andre steder, som under eller over indholdet eller i overskriften.

Hvis du går til skærmbilledet for indstillinger for widgets i WordPress-admin, kan du se alle widgetområderne i dit tema.

Jeg bruger et tema med flere widgetområder mange steder. På skærmbilledet nedenfor kan du se, at der er widgetområder over og under indholdet, i overskriften, under hoved footeren.

Hvis du vil føje widgets til andre steder på dit websted, er det fornuftigt at finde et tema, der har flere widgetområder. Den bedste måde at gøre dette på er at bruge et framework theme.

Et godt eksempel på en widget et sted i dit tema, der ikke er sidebar eller footer, er at tilføje en søgelinje i overskriften, som jeg har på et af mine websteder.

Widgetområder og temaer

Widgetområder er kodet i temaskabelonfilerne samt filen til temafunktioner.

Her kan du se koden, jeg har brugt i min temafunktionsfil til at tilføje et widget-område, der vil gå i headeren.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

Og her er koden i min header.php-fil, der tilføjer dette widgetområde til det rigtige sted i temaet.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Hvis du vil tilføje ekstra widgetområder i dit tema, skal du tilføje den samme type kode. Jeg viser dig, hvordan du gør dette senere i dette indlæg.

Glem ikke, at hvis dit tema ikke har så mange widgetområder, som du gerne vil, kan du altid gøre en af to ting:

• Find et tema, der har widgetområder, hvor du vil have dem.
• Kod det nye widget-område i dit tema eller et child theme.

Når du har fået widgetområder på alle de steder i dit tema, som du vil have dem, kan du begynde at tilføje widgets til dem.

Sådan bruges skærmbilledet Widgets til at tilføje widgets

Der er to måder at tilføje widgets til dit WordPress-sted. Den første er at bruge skærmbilledet Widgets i WordPress-admin.

Klik på Udseende> Widgets. Dette bringer widgets-skærmen op.

For at tilføje en widget kan du gøre en af to ting:

• Træk det over fra listen over widgets i venstre side til det relevante widget-område.
• Klik på den widget, du vil tilføje, så ser du en liste over, hvor du kan tilføje den. Vælg det ønskede widgetområde, og klik på knappen Tilføj widget.

Du skal muligvis derefter redigere, hvor widgetten er placeret i widgetområdet.

Du kan tilføje så mange widgets, som du vil til hvert widget-område, men gå ikke over bord. Du kan trække dem rundt i widgetområdet for at få dem i den rigtige rækkefølge. Du kan også trække dem fra et widget-område til et andet, hvis du beslutter, at du ikke kan lide den måde, de ser ud på.

Du kan også bruge dit tastatur til at tilføje widgets ved hjælp af skærmen Widgets, så hvis du ikke har adgang til en mus, kan du stadig tilføje widgets.

Tilføjelse og redigering af widgets i Accessibility Mode

Hvis du ikke kan bruge en mus, kan du bruge Widgets-skærmen med et tastatur.

Først skal du sætte skærmen i Accessibility Mode ved at klikke på (eller fanen til og vælge) linket Aktiver Accessibility Mode øverst til højre på skærmen.

Skærmen ændres derefter for at afspejle det faktum, at du er i accessibility mode.

Du kan derefter navigere mellem elementer på skærmen ved hjælp af Tab-tasten på dit tastatur og trykke på Enter for at vælge et element og handle på det. Du kan enten fane til en widget, trykke på Return på linket Tilføj og derefter vælge, hvor du vil tilføje det, eller fane til widgetområdet og trykke på Retur på linket Rediger.

Sådan bruges WordPress Customizer til at tilføje widgets

Brug af Customizer til at tilføje widgets i stedet for widgets-skærmen betyder, at du kan se dine widgets, mens du tilføjer dem. Dette gør det lettere at se, hvordan dine widgets ser ud, og flytte dem rundt mellem widget-områder, hvis du vil.

Klik på Udseende> Tilpas i admin-menuen. Alternativt skal du bare klikke på Tilpas fra admin bar øverst på skærmen på det levende websted (forudsat at du er logget ind). Dette åbner Customizer.

Klik nu på indstillingen Widgets, så ser du en liste over alle widgetområder i dit tema. Klik på widgetområdet, hvor du vil tilføje en widget, og klik på knappen Tilføj en widget.

Dette giver dig en liste over alle de tilgængelige widgets til dit websted. Det inkluderer alle de indbyggede widgets, der fulgte med WordPress plus enhver widget, du har tilføjet via plugins

Vælg den widget, du vil tilføje til det widgetområde, og du kan se det i preview-skærmen til højre.

Du kan sortere widgets ved at trække dem op og ned i venstre side eller ved at klikke på linket Omarranger under listen over widgets og derefter klikke på pilene for at flytte dem op og ned.

Når du er færdig med at tilføje widgets via Customizer, skal du ikke glemme at klikke på knappen Publicer øverst til venstre, så dine ændringer gemmes. Hvis du forlader Customizer uden at gøre dette, vil ingen af dine ændringer blive reflekteret på live-stedet.

Når du har tilføjet dine widgets, skal du kigge på dem og kontrollere, hvordan de passer til designet på din side. Hvis du har tilføjet for mange widgetområder, kan ting muligvis se lidt rodet ud. Du skal enten fjerne nogle af dem, eller du kan flytte dem fra det ene widgetområde til det andet.

Det er virkelig let at gøre dette på skærmen Widgets, hvor du kan trække widgets mellem widget-områder.

Sådan føjes en widget til en bestemt side

Nogle temaer inkluderer widgetområder, der kun er til bestemte sider, som for eksempel startsiden. Men hvad nu hvis du vil tilføje en widget til kun en side på dit websted?

Du kan gøre dette i Gutenberg post- og sideditoren.

Tilføj en ny blok på den sædvanlige måde, og vælg derefter bloktypen Widgets.

Du kan derefter vælge mellem mange af de widgets, du har aktiveret til dit websted, og føje det til indholdet af dit indlæg eller side. Det er virkelig nyttigt, hvis du vil tilføje en formularwidget, en widget til call to action eller en liste over dine seneste indlæg.

Sådan redigeres widgets

Når du har tilføjet widgets til dit websted, kan du foretage ændringer til dem. Individuelle widgets har indstillinger, du kan få adgang til via enten widgets-skærmen eller Customizer (det betyder ikke noget, hvilken af ​​disse du brugte til at tilføje widgetten.)

Nogle widgets inkluderer ikke nogen indstillinger, men andre har indstillinger for widget titlen for eksempel eller antallet af viste indlæg. Nogle er mere komplicerede og kræver, at du opsætter widgetten på en separat indstillingsside. Tjek dokumentationen fra dit plugins udvikler.

Indstillinger, du har til redigering af widget-plugins inkluderer:

• Redigering af indstillingerne for plugin.
• Flytning af widget fra et widget-område til et andet.
• Fjernelse af widgetten. Du har to muligheder for dette, som vi vil se på kort.

Hvis du vil redigere indstillingerne for widgetten, skal du finde den widget på widgets-skærmen eller tilpasseren og blot redigere de leverede indstillinger.

Hvis du vil flytte widget fra et område til et andet, skal du åbne widgets-skærmen og trække den fra et widget-område til et andet. I accessibility mode skal du navigere til pilen til højre for widgetten og vælge fra indstillingerne.

Sletning af widgets

For at slette en widget på skærmen Widgets skal du finde den widget og klikke på slet-linket nederst til venstre i widget indstillingsboksen.

For at slette en widget i Customizer skal du finde widgetten i dens widget-område. Klik på pilen til højre for widgetens navn, og klik derefter på linket Fjern til venstre til venstre for widget indstillingerne.

Du kan også fjerne en widget fra et widget-område, men stadig gøre den tilgængelig til brug senere på skærmen Widgets.

Rul ned til området Inaktive widgets mod bunden af ​​skærmen. Træk widgets til dette område for at fjerne dem fra widgetområdet, men hold dem som kladder med deres aktuelle indstillinger. Du kan derefter altid trække dem tilbage til et widget-område, hvis du vil i fremtiden.

Hvis du skifter temaer, og dit nye tema har forskellige widgetområder, flyttes alle widgets, der ikke passer til widgetområderne i det nye tema, automatisk til listen Inactive Widgets af WordPress.

Sådan føjes et nyt widget-område til dit tema

Hvis dit tema ikke har widgetområder, hvor du vil have dem, kan du altid tilføje dine egne. Dette gør du ved at tilføje to kodestykker.

Lad os tilføje et widgetområde under indholdet.

Oprettelse af widgetområdet i filen Temafunktioner

Det første trin er at indstille widgetområdet ved hjælp af funktionen register_widget().

Hvis du bruger et tredjeparts WordPress-tema (her er et udvalg af de bedste), skal du oprette et underordnet tema for at gøre dette. Årsagen hertil er, at hvis du opdaterer temaet i fremtiden, vil alle dine ændringer gå tabt.

Hvis du arbejder med dit eget tema, kan du blot redigere temaet.

Start med at åbne dit temas functions.php fil. Tilføj denne kode i bunden af ​​filen.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Gem nu din features.php-fil. Hvis du går til din Widgets-skærm eller Customizer, finder du det nye widget-område, som du kan tilføje widgets til.

Men hvis du gør dette, vises de faktisk ikke på siden. Dette skyldes, at du er nødt til at tilføje noget kode til din tema skabelonfil.

Tilføjelse af widgetten til en tema skabelonfil

Den første ting er at finde ud af, hvilken temaskabelonfil du skal bruge.

• Hvis du tilføjer en ekstra sidebjælke, skal du tilføje denne kode til din sidebar.php-fil.
• Hvis du tilføjer dit widgetområde før eller efter indholdet, bliver du nødt til at tilføje det til hvilken som helst tema skabelonfiler, der sender ud indholdet.
• Hvis du tilføjer et widget-område til din header, skal du tilføje koden til din header.php-fil.
• Hvis dit nye widgetområde kun er til en side på dit websted eller til en type indhold, skal du bruge WordPress-skabelonhierarkiet til at finde ud af, nøjagtigt hvilken skabelonfil du skal bruge til / oprette og derefter redigere den. Så for eksempel vil du tilføje widgetområder til din startside, skal du oprette en front-page.php-fil og tilføje dit widgetområde der.

Når du har identificeret, hvilken skabelonfil du skal redigere, og nøjagtigt hvor du skal have koden til widgetområdet, skal du tilføje følgende kode. I tilfælde af et widget-område efter indholdet tilføjer vi det til filen post.php og page.php i vores tema:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Gem nu din skabelonfil(er).

Bemærk, at din kode vil være anderledes end min, afhængigt af hvad du har kaldt dit widget-område, og hvilke elementer du vil placere den inde i. Jeg bruger generelt et aside element, fordi de efter min mening er designet til sidebars og widgetområder.

Ninja-tip: Hvis du flytter slutningen af dit container element for indholdet til begyndelsen af sidebar- og / eller footer filen, kan du tilføje dette der, og du behøver kun at tilføje det en gang.

Hvis du nu ser på dit websted, vil du opdage, at alle widgets, du har føjet til dine widget-områder, vises på det rigtige sted. Hvis de ikke er helt på det rigtige sted, skal du gå tilbage og redigere dine skabelonfiler og sørge for at koden er på det sted, hvor du vil have den. Det kan også være nødvendigt, at du redigerer din CSS for at se ud som du ønsker det.

Sådan kodes widgets ved hjælp af Widgets API

Så nu ved du, hvordan man vælger widgets til dit websted, hvordan man tilføjer dem til dit websted, og hvordan man registrerer nye sidebars eller widgetområder. Det næste trin er at lære, hvordan man opretter en WordPress-widget.

Nogle gange kan du opleve, at der ikke er et plugin tilgængeligt til at oprette den nøjagtige widget, du vil have på dit websted. Det betyder, at du bliver nødt til at kode det selv.

I dette eksempel vil jeg vise dig, hvordan du koder en rigtig enkel call to action-widget.

Oversigt over Widgets API

Widgets API i WordPress inkluderer al den kode, du har brug for til at registrere, oprette og kode widgets. Widgets API inkluderer:

• Klasser for at oprette nye widgets.
• Funktioner til at registrere widgets og dæmp dem på dit websted.
• Funktioner til at afregistrere widgets, for eksempel fra et overordnet tema.

Her bruger vi en klasse til at oprette en widget. Det første trin, er at oprette et plugin, der holder widgetten.

Opret et plugin til din WordPress-widget

For at oprette din egen widget skal du kode et plugin. Føj ikke koden til en ny widget til dit tema, fordi widgets handler om funktionalitet og ikke om visning. Hvis du ændrer dit tema i fremtiden, vil du stadig have adgang til denne widget.

Start med at oprette et tomt plugin. Opret en plugin-mappe i dit wp-content / plugins-bibliotek, og tilføj en tom fil til den. Giv det et passende navn. Åbn denne fil, og tilføj denne kode.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Du skal redigere forfatterens URI og plugin-URI til din egen. Det vil skabe et plugin til dig, som du kan aktivere via skærmbilledet Plugins.

But if you activate it, nothing will happen. You’re going to have to add some code to your plugin.

Widget-plugin i plugins-skærmen

Koden til widgeten er inde i en klasse. Så tilføj nu dette.

class kinsta_Cta_Widget extends WP_Widget {

}

Constructor function

Den første ting, man går ind i klassen, er Constructor function til at oprette widget. Tilføj dette inde i klamme-parenteserne.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Dette vil begynde at opbygge widgetten.

Opret formularen for at udsende widgetten

Dernæst har vi brug for en formular, der bruges af Widgets-skærmen og Customizer til at oprette widgetten. Tilføj dette, stadig inde i seler.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Dette giver brugerne en formular, de kan bruge til at tilføje tekst og et link til call to action-boksen.

Opret funktionen til at gemme widgetten

Nu skal du gemme alt, hvad der er input til denne form. Tilføj dette.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

Dette gemmer dataindtastningen fra brugerne i widgetindstillingerne.

Opret funktionen til at output widget’en

Nu skal du tilføje koden, der viser widgetten på webstedet. Igen, tilføj dette inde i selerne:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
  echo $args['before_title'] . $title . $args['after_title'];
};
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Registrer widgetten

Nu har du skrevet din klasse, det er tid til at registrere WordPress-widgetten, så den fungerer. Tilføj denne kode uden for klassen.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Gem nu din plugin-fil. Gå til skærmbilledet Widgets, så ser du widgetten til brug.

Hvis du føjer det til et widget-område og tilføjer tekst og et link til det, udskrives det på live-webstedet.

Det ser måske ikke så godt ud lige nu. Du skal tilføje nogle CSS for at style det.

Tilføjelse af CSS til widgetten

For at tilføje CSS til dit plugin skal du oprette et stylesheet og indpasse det i dit plugin. Føj dette til din plugin-fil inden klassen.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Nu skal du tilføje en style.css-fil i plugin-mappen og tilføje enhver styling til den. Det overlader jeg til dig!

Du har nu en simpel call to action-knap, som du kan føje til ethvert widget-område på dit websted. Hvis du f.eks. tilføjer det til din sidebar, vil folk være i stand til at bruge det til at komme til din tilmeldingsside hvor som helst på webstedet.

Du kan oprette mere komplekse widgets med ekstra indstillinger og muligheder, men dette giver dig en idé om, hvordan du kommer i gang med at oprette din egen widget.

Hvis du vil se min kode til dette plugin, inklusive styling, kan du finde den på Github. Hvis du starter med kode, er her en dybdegående guide om git vs GitHub, og hvordan du kommer i gang med begge dele.

Resumé

Widgets er en af ​​mine yndlingsfunktioner i WordPress. De kan bringe dit websted til live og hjælpe dig med at få flere tilmeldinger eller konvertere flere besøgende til kunder. Du kan tilføje WordPress-widgets til et hvilket som helst eksisterende widget-område i dit tema, eller du kan tilføje ekstra widget-områder, så du kan tilføje flere widgets flere steder.

Der er også masser af steder at finde widgets. WordPress leveres med et antal af dem forudinstalleret, og du kan også installere flere af dem via plugins. Men det er ikke alt, hvis du har det godt med det, kan du også kode dine egne widgets ved hjælp af Widgets API.

Nu er det din tur: hvordan bruger du WordPress-widgets på dit websted? Hvor mange bruger du?