Vil du lage dine egne tilpassede widgeter på WordPress?

Med widgets kan du dra og slippe elementer til et hvilket som helst klart sidefelt eller widgetområde på nettstedet ditt. I denne artikkelen vil vi derfor vise deg hvordan du enkelt kan lage en tilpasset WordPress-widget.

Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

Lag en egendefinert widget på wordpress

Hva er en WordPress-widget?

WordPress-widgets inneholder kodestykker som du kan legge til i sidelinjene på nettstedet ditt eller til områder som er kompatible med widgets. Tenk på det som moduler du kan bruke til å legge til forskjellige elementer ved hjelp av et enkelt "Dra og slipp" -grensesnitt.

Som standard kommer WordPress med et standard sett med widgets som du kan bruke med ethvert WordPress-tema. 

Oppdag også våre beste premium WordPress-temaer.

Wordpress dashbord-widget

WordPress lar også utviklere lage sine egne tilpassede widgets. Mange temaer og WordPress plugins kommer med sine egne tilpassede widgets som du kan legge til sidefeltene dine.

For eksempel kan du legge til et kontaktskjema, et påloggingsskjema tilpasset eller et bildegalleri i en sidefelt uten å skrive noen kode.

Når det er sagt, la oss se hvordan du enkelt kan lage dine egne tilpassede widgeter på WordPress.

Hvordan å lage en tilpasset widget på WordPress

Denne opplæringen er for folk som har kunnskap om nettutvikling.

Før du starter, ville det være bedre å opprette en spesifikk plugin på nettstedet der du limer inn widget-koden for denne opplæringen.

Du kan også lime inn koden i filen "features.php" i WordPress-temaet. Imidlertid vil det bare være tilgjengelig når det aktuelle WordPress-temaet er aktivt.

I denne opplæringen vil vi lage en enkel widget som ganske enkelt vil hilse besøkende. Se på denne koden, og lim den deretter inn i din spesifikke plugin for å se den i aksjon.

// Registrer og last inn widget-funksjonen wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget'); // Oppretting av widgetklassen wpb_widget utvider WP_Widget {funksjon __construct () {parent :: __ construct (// Base ID for widgeten din 'wpb_widget', // Widgetnavnet vises i UI __ ('BPC Widget', 'wpb_widget_domain') , // Widget description array ('description' => __ ('Simple WordPress Widget', 'wpb_widget_domain'),)); } // Opprette widget for funksjonen til den offentlige frontend-funksjonen ($ args, $ instance) {$ title = apply_filters ('widget_title', $ instance ['title']); // før og etter widgetargumenter er definert av temaer echo $ args ['before_widget']; hvis (! tom ($ tittel)) ekko $ args ['før_tittel']. $ tittel. $ args ['after_title']; // Dette er hvor du kjører koden og viser utgangsekkoet __ ('Simple Widget', 'wpb_widget_domain'); ekko $ args ['after_widget']; } // Widget Backend public function form ($ instance) {if (isset ($ instance ['title'])) {$ title = $ instance ['title']; } annet {$ title = __ ('Ny tittel', 'wpb_widget_domain'); } // Administratorskjema-widget?> get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

Etter å ha lagt til koden, må du gå til " Utseende> Moduler ". Du vil legge merke til den nye widgeten " PCB Widget I listen over tilgjengelige widgeter. Du må dra og slippe denne widgeten i en sidefelt.

Wordpress tilpasset widget

Nå ved å besøke bloggen din, vil du se en widget på sidefeltet der du la til den aktuelle widgeten.

La oss ta en titt på denne koden.

Først spilte vi inn “ wpb_widget Og lastet inn vår tilpassede widget. Deretter definerte vi hva denne widgeten gjør og hvordan du viser den på dashbordet.

Til slutt definerte vi hvordan vi skal håndtere endringene som er gjort i widgeten.

Nå er det noen få ting du kanskje vil vite. Hva er for eksempel målet " wpb_text_domain "?

WordPress bruker "gettext" for å administrere oversettelse og lokalisering. Så " wpb_text_domain "og __e forteller gettext hvordan du kan hente en oversettelsesstreng hvis den eksisterer.

Hvis du oppretter en tilpasset widget for ditt WordPress-tema, kan du erstatte "wpb_text_domain" med teksten til domenet til temaet ditt.

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. Galaxy Funder

Galaxy Funder er et funksjonsfylt crowdfunding-system designet for ethvert WooCommerce-nettsted. Bruke WordPress Plugin premium Galaxy Funder vil du kunne administrere ditt eget crowdfunding-nettsted eller legge til pengeinnsamlingskampanjer på overskriften til WooCommerce-nettbutikken din.

Galaxy funder woocommerce crowdfunding system wordpress plugin

Du kan også bruke hvilken som helst betalingsgateway støttet av WooCommerce. Vær oppmerksom på at “Galaxy Funder” fungerer direkte på nettbutikk-siden, noe som gjør prosessen for brukerbidrag enklere.

Last ned | Demo | Webhotell

2. Klikk på WhatsApp Chat

Le WordPress Plugin premium Click to WhatsApp Chat gjør det enkelt for WordPress-kunder å koble seg til nettstedets eier eller kundestøtte ved å bruke WhatsApp-kontoen deres. 

Klikk for å whatsapp chat for wordpress plugin

Bare et klikk på WhatsApp-kontoen, og den blir direkte sendt til den mobile WhatsApp-kontoen med en standardmelding. Og hvis klienten er på stasjonær eller bærbar PC, vil han bli omdirigert til WhatsApp Web.

Dette pluginet krever WhatsApp-nummer og tid og dag, som nettstedseieren eller supportteamet vil bruke til å diskutere. Chat-knappen kan legges til WooCommerce produktdetaljer-side, som er direkte relatert til dette produktet.

Last ned | dEMO | Webhotell

3. Last ned bilde vannmerke

Dette WordPress-utvidelse premium lar deg enkelt legge til vannmerker til bildene dine Enkle digitale nedlastinger.enkel digital-fil-nedlasting-bilde vannmerke

disse vannmerker kan være et copyright-symbolbilde, a firmalogo, eller en del av merkevaren som et gjennomsiktig PNG-bilde.

Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.

konklusjonen

Voila! Det er alt for denne opplæringen, jeg håper det vil tillate deg å lage tilpassede widgeter på WordPress-bloggen din. Hvis du har det commentaires eller forslag, ikke nøl med å gi oss beskjed i den reserverte delen.

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine

...