Vai al contenuto principale

Come creare un widget personalizzato su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Vuoi creare i tuoi widget personalizzati su WordPress?

I widget ti consentono di trascinare e rilasciare elementi in qualsiasi barra laterale o area widget pronta sul tuo sito web. In questo articolo, quindi, ti mostreremo come creare facilmente un widget WordPress personalizzato.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Crea un widget personalizzato su wordpress

Cos'è un widget WordPress?

I widget di WordPress contengono parti di codice che puoi aggiungere alle barre laterali del tuo sito web o alle aree compatibili con i widget. Considerali come moduli che puoi utilizzare per aggiungere diversi elementi utilizzando una semplice interfaccia "Drag and Drop".

Per impostazione predefinita, WordPress viene fornito con un set standard di widget che puoi utilizzare con qualsiasi tema WordPress. 

Scopri anche i nostri migliori temi WordPress premium.

Widget del dashboard di Wordpress

WordPress consente inoltre agli sviluppatori di creare i propri widget personalizzati. Molti temi e plugin di WordPress sono dotati di widget personalizzati che è possibile aggiungere alle barre laterali.

Ad esempio, puoi aggiungere un modulo di contatto, un modulo di accesso personalizzato o una galleria fotografica in una barra laterale senza scrivere alcun codice.

Detto questo, vediamo come creare facilmente i tuoi widget personalizzati su WordPress.

Come creare un widget personalizzato su WordPress

Questo tutorial è per le persone che hanno conoscenza dello sviluppo web.

Prima di iniziare, sarebbe meglio creare un plug-in specifico sul sito Web in cui incollare il codice del widget per questa esercitazione.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Puoi anche incollare il codice nel file "Functions.php" del tuo tema WordPress. Tuttavia, sarà disponibile solo quando quel particolare tema di WordPress è attivo.

In questo tutorial, creeremo un semplice widget che saluterà semplicemente i visitatori. Guarda questo codice, quindi incollalo nel tuo plug-in specifico per vederlo in azione.

// Registra e carica la funzione widget wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget'); // La creazione della classe widget wpb_widget estende WP_Widget {function __construct () {parent :: __ construct (// Base ID del tuo widget 'wpb_widget', // Il nome del widget apparirà nell'interfaccia utente __ ('BPC Widget', 'wpb_widget_domain') , // Widget description array ('description' => __ ('Simple WordPress Widget', 'wpb_widget_domain'),)); } // Creazione di widget di funzione widget front-end pubblici ($ args, $ instance) {$ title = apply_filters ('widget_title', $ instance ['title']); // gli argomenti prima e dopo il widget sono definiti dai temi echo $ args ['before_widget']; if (! empty ($ title)) echo $ args ['before_title']. $ titolo. $ args ['after_title']; // Qui è dove esegui il codice e visualizzi l'output echo __ ('Simple Widget', 'wpb_widget_domain'); echo $ args ['after_widget']; } // Modulo funzione pubblica del backend del widget ($ istanza) {if (isset ($ istanza ['titolo'])) {$ titolo = $ istanza ['titolo']; } else {$ title = __ ('Nuovo titolo', 'wpb_widget_domain'); } // Widget modulo di amministrazione?> get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

Dopo aver aggiunto il codice, devi andare su " Aspetto> Widget ". Noterai il nuovo widget " PCB widget Nell'elenco dei widget disponibili. È necessario trascinare e rilasciare questo widget in una barra laterale.

Widget personalizzato per Wordpress

Ora visitando il tuo blog, vedrai un widget sulla barra laterale in cui hai aggiunto il widget in questione.

Ora diamo un'occhiata a questo codice.

Innanzitutto, abbiamo registrato " wpb_widget E caricato il nostro widget personalizzato. Successivamente, abbiamo definito cosa fa questo widget e come visualizzarlo sulla dashboard.

Infine, abbiamo definito come gestire le modifiche apportate al widget.

Ora, ci sono alcune cose che potresti voler sapere. Ad esempio, qual è l'obiettivo " wpb_text_domain "?

WordPress utilizza "gettext" per gestire la traduzione e la localizzazione. Pertanto " wpb_text_domain "e __e dice a gettext come recuperare una stringa di traduzione se esiste.

Se crei un widget personalizzato per il tuo tema WordPress, puoi sostituire "wpb_text_domain" con il testo del dominio del tuo tema.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Galaxy Funder

Galaxy Funder è un sistema di crowdfunding ricco di funzionalità progettato per qualsiasi sito Web WooCommerce. Utilizzando il plugin WordPress premium Galaxy Funder, sarai in grado di gestire il tuo sito web di crowdfunding o aggiungere campagne di raccolta fondi nell'intestazione del tuo negozio online WooCommerce.

Plugin per il sistema di crowdfunding woocommerce del finanziatore Galaxy wordpress

Puoi anche usare qualsiasi file gateway di pagamento supportato da WooCommerce. Si noti che "Galaxy Funder" funziona direttamente sulla pagina del negozio online, il che semplifica il processo di contribuzione dell'utente.

Download | DemoWeb hosting

2. Fare clic su Chat WhatsApp

Il plugin premium per WordPress Fai clic su WhatsApp Chat consente ai clienti di WordPress di connettersi facilmente con il proprietario del sito Web o l'assistenza clienti utilizzando il proprio account WhatsApp. 

Fai clic sulla chat di whatsapp per il plugin wordpress

Basta un clic sull'account WhatsApp e verrà indirizzato direttamente all'account WhatsApp mobile con un messaggio predefinito. E se il client è su desktop o laptop, verrà reindirizzato a WhatsApp Web.

Questo plugin richiede il numero di WhatsApp, l'ora e il giorno, che il proprietario del sito web o il team di supporto utilizzerà per discutere. Il pulsante chat può essere aggiunto alla pagina dei dettagli del prodotto WooCommerce, che è direttamente correlato a questo prodotto.

Download | Demo | Web hosting

3. Scarica filigrana immagine

Questo plugin premium per WordPress ti consente di aggiungere facilmente filigrane alle tue immagini Facile Digital Downloads.facile-digitale-file-download-immagine della filigrana

Ces filigrane può essere un'immagine simbolo di copyright, a logo della compagniao parte del marchio come immagine PNG trasparente.

Download | Demo | Web hosting

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti permetta di creare widget personalizzati sul tuo blog WordPress. Se si dispone di commentaires o suggerimenti, non esitate a farcelo sapere nella sezione riservata.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network

...  

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
10 azioni
quota8
Tweet1
Enregistrer1