Come creare un plugin per widget WordPress
Pubblicato: 2022-10-02Se sei un fan di WordPress, probabilmente hai familiarità con i widget. I widget sono quelle piccole scatole che puoi aggiungere alla barra laterale o ad altre aree pronte per i widget del tuo tema. Di solito contengono informazioni come i post recenti del tuo blog, il tuo feed Twitter o un calendario. Ma lo sapevi che puoi creare i tuoi widget? In realtà è abbastanza facile da fare. In questo articolo, ti mostreremo come creare un plugin per widget WordPress. Inizieremo creando un file di plug-in di base e quindi aggiungendo una classe di widget . Registreremo quindi il nostro widget in modo che appaia nell'amministratore di WordPress. Infine, aggiungeremo del codice per visualizzare il nostro widget sul front-end del nostro sito. Iniziamo!
Di recente ho sviluppato un plugin chiamato Freelancer Widgets Bundle. Quando mi è stato chiesto cosa avrei dovuto scrivere per un plugin, ho pensato che fosse giunto il momento di scrivere questo post perché le persone lo avevano chiesto. Quando installi un plugin per WordPress, ti viene richiesto di aggiungere un codice aggiuntivo. Avrai bisogno di un editor come Coda (Mac) o Dreamweaver (PC) per sviluppare il tuo plugin. Il costruttore è la funzione che definisce il nome del widget e gli argomenti principali; questo è un esempio di come potrebbe apparire. Quando apporti modifiche ai campi del modulo, assicurati di utilizzare esc_attr(), poiché ciò viene fatto per motivi di sicurezza. Il parametro 'customize_selective_refresh' consente di aggiornare il widget in Aspetto e durante la modifica.
In altre parole, non è necessario aggiornare le modifiche al widget affinché appaia nell'elenco. Tutti i tag, ad eccezione del testo di base, vengono rimossi con WP_strip_all_tags. WP_kses_post_string() è la stessa funzione della stringa di contenuto del post. Questa funzione genererà contenuto per un sito Web utilizzando la funzione widget(). Questa funzione può essere personalizzata per includere un tag o una classe specifici. GitHub è il luogo ideale per visualizzare l'intero codice.
Quando vuoi aggiungere il widget a un sito web, vai alla pagina in cui vuoi farlo e incolla il codice prima che il tag HTML “/body” si chiuda. È necessario includere il codice in ogni pagina web in cui si desidera visualizzare il widget. Controlla il tuo firewall per vedere se il Web Widget (Classic) è abilitato.
Sono entrambe creature visive, ma i due hanno caratteristiche distinte, come visibilità e interazione. Se la tua pagina funziona senza intoppi e correttamente in background, questo è un plug-in. Affinché un utente possa interagire con esso sulla pagina, deve essere visibile all'utente.
Come posso creare un plug-in widget personalizzato per WordPress?
Per creare un plugin widget personalizzato per WordPress, dovrai creare un file PHP con il seguente codice: /* Nome plugin: [Nome plugin] Descrizione: [Descrizione plugin] */ // Registrati e carica il widget funzione [nome_del_plugin]_load_widget() { register_widget( '[nome_del_plugin]'); } add_action('widgets_init', '[nome_del_plugin]_load_widget'); // La creazione della classe widget [nome_del_plugin] estende WP_Widget { function __construct() { parent::__construct( // ID di base del tuo widget '[nome_del_plugin]', // Il nome del widget apparirà nell'interfaccia utente __('[Nome del plugin ]', '[nome_del_plugin]'), // Widget description array( 'description' => __( '[Descrizione del plugin]', '[nome_del_plugin]' ), ) ); } // Creazione del front-end del widget // Qui è dove avviene l'azione widget della funzione pubblica ($args, $instance) { $title = apply_filters( 'widget_title', $instance['title'] ); // gli argomenti del widget prima e dopo 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 __( '[Name of plugin]', '[name_of_plugin]' ); echo $args['after_widget']; } // Modulo della funzione pubblica del backend del widget ($istanza) { if ( isset( $istanza[ 'titolo' ] ) ) { $titolo = $istanza[ 'titolo']; } else { $titolo = __( '[Nome del plugin]', '[nome_del_plugin]' ); } // Modulo di amministrazione del widget? > Quando gli utenti di WordPress creano un'area widget, aggiungono piccoli contenuti a quell'area. A seconda dell'area del widget in cui è installato, un widget può visualizzare vari tipi di informazioni su tutte le pagine oppure può visualizzare solo determinate informazioni. Ci sono alcuni widget che sono resi disponibili per impostazione predefinita, mentre altri sono resi disponibili utilizzando un plugin o un tema. I quattro metodi sopra menzionati devono essere aggiunti alla tua classe per creare un widget personalizzato di base. È necessario utilizzare la funzione register_widget() per registrare il widget per poterlo utilizzare all'interno della dashboard. Prima di studiare l'esempio presentato in questo articolo, esamineremo rapidamente lo scopo di ogni sezione del codice. Uno dei metodi usati nella classe Custom_Widget è un metodo per assegnare caratteri. Abbiamo creato il widget con custom_widget come ID con il metodo costruttore usando il metodo __construct(). Utilizzando il metodo register_widget(), viene creato un nuovo widget dopo che quello esistente è stato registrato. Abbiamo racchiuso ciascuna delle parti con le istruzioni if...* per garantire che vengano visualizzate solo quelle parti se sono incluse nelle opzioni del widget. Il metodo widget() includeva la funzione nl2br() per garantire che tutti i testi multiparagrafo fossero visualizzati correttamente. sanitize_text_field() elimina gli spazi bianchi, le tabulazioni e le interruzioni di riga non necessarie dall'argomento. Inoltre, il valore Sì è impostato come predefinito all'interno del campo di selezione, a indicare che la destinazione del collegamento è impostata su _blank nei due casi precedenti. Il titolo, il testo, il collegamento sotto il titolo e se il collegamento deve essere aperto in una nuova scheda devono essere tutti specificati. Salva le opzioni che hai scelto facendo subito clic sul pulsante Salva. Quando selezioni un tema predefinito, il widget produrrà un output diverso. In questo caso, il tuo widget potrebbe essere molto simile a quello mostrato di seguito se utilizzi il tema WordPress Lekker. Come faccio a creare un widget immagine personalizzato in WordPress? Per aggiungere un'immagine a una barra laterale di WordPress, seleziona il widget "Immagine". Puoi apportare modifiche al tuo aspetto andando su Aspetto. Aggiungi il widget 'Immagine' alla barra laterale se hai una pagina che include un widget.Plugin widget personalizzatoCredit: ottobrecms.comUn plug-in widget personalizzato è un plug-in che ti consente di creare il tuo widget personalizzato. Questo plugin è ottimo per coloro che desiderano creare un widget personalizzato per il proprio sito Web o blog. Con questo plug-in, puoi creare facilmente un widget personalizzato senza doverlo codificare da solo. Per fornire un widget personalizzato che può essere utilizzato con Qt Designer, dobbiamo fornire un'implementazione autonoma e un'interfaccia del plug-in. Il widget personalizzato di questo esempio, come la sua controparte dell'orologio analogico, non ha segnali o slot personalizzati. La macro Q_PLUGIN_METADATA() deve essere utilizzata per garantire che il widget sia correttamente identificato come plug-in esportando i dati da esso. La classe AnalogClock può essere utilizzata come widget personalizzato all'interno della casella del widget ed è un esempio di classe autonoma. Una classe plug-in per la classe AnalogClock è inclusa in Qt Designer. Il costruttore per la classe QObject chiama semplicemente il costruttore della classe base QObject, che imposta la variabile inizializzata su false. La funzione isInitialized() verifica se il plugin è pronto per l'uso consentendo a Qt Designer di identificarlo. La funzione createWidget() può generare istanze di un widget personalizzato. Il plugin del widget sarà visibile nel nome del gruppo nella sezione del plugin del widget di Qt Designer. Un suggerimento e cos'è questo? Nella casella del widget, puoi fornire assistenza per il widget personalizzato. La funzione isContainer() verifica se un widget deve essere utilizzato come contenitore per altre immagini di widget. Ciò impedisce all'utente di creare widget al suo interno. Widget personalizzato WordPress CodeCredit: www.hostpapa.inUn widget personalizzato è un ottimo modo per aggiungere funzionalità al tuo sito WordPress. Ci sono alcune cose da tenere a mente quando aggiungi il codice del widget personalizzato al tuo sito. Innanzitutto, dovrai creare un file chiamato "widget.php" nella directory del tuo tema. Successivamente, dovrai aggiungere il seguente codice al tuo file widget.php: class Custom_Widget extends WP_Widget { function __construct() { parent::__construct( 'custom_widget', __('Custom_Widget', 'text_domain'), array ( 'description' => __( 'Un widget personalizzato per il tuo sito WordPress.', ' text_domain' ), ) ); } widget di funzione pubblica ($args, $istanza) { $titolo = apply_filters('widget_title', $istanza['titolo']); echo $args['before_widget']; if ( ! empty( $title ) ) echo $args['before_title'] . $titolo. $args['after_title']; echo __( 'Hello, World!', ' text_domain' ); echo $args['after_widget']; } modulo di funzione pubblica ($istanza) { if ( isset( $istanza[ 'titolo' ] ) ) { $titolo = $istanza[ 'titolo']; } else { $titolo = __( 'Nuovo titolo', 'dominio_testo' ); } ? > } aggiornamento della funzione pubblica ($ istanza_nuova, $ istanza_vecchia) { $ istanza = array(); $instance['title'] = ( ! empty( $new_instance['title']Wordpress Aggiungi widget al modelloL'aggiunta di un widget a un modello WordPress è un processo semplice. Dovrai accedere ai tuoi file WordPress tramite il tuo account di hosting e modificare il appropriato. Nella maggior parte dei casi, questo sarà il file header.php. Cerca il codice che controlla l'area in cui desideri aggiungere il widget. Quindi, copia il codice per il widget che desideri aggiungere e incollalo nell'apposito posto nel file. Salva il file e caricalo sul tuo server. Ecco fatto! Il widget apparirà ora sul tuo sito WordPress. In WordPress, c'è un tag template chiamato the_widget() che ti permette di aggiungere un widget direttamente al tuo file template. Un widget può essere inserito in un file che contiene il nome della classe del widget che vuoi usare e dove vuoi che appaia. In altre parole, se vuoi elencare i commenti recenti, puoi semplicemente scrivere questo: $istanza per ogni widget Usando le funzioni integrate, puoi aggiungere molti dei tuoi valori predefiniti ult WordPress widget sui tuoi file modello invece di usarli. I widget personalizzati possono essere inseriti utilizzando il metodo the_widget() in tutto il modello. I widget personalizzati, che possono essere utilizzati su una piattaforma diversa dalla barra laterale, sono disponibili in molti plugin. Come faccio ad aggiungere un widget al mio tema WordPress? Visita le schermate di amministrazione di WordPress per vedere la pagina Aspetto. Scegli un widget trascinandolo su una barra laterale specifica o facendo clic sul collegamento Aggiungi widget (se il tuo tema ha più di una barra laterale, scegli la barra laterale di destinazione).Come si chiama un widget da un modello di pagina di WordPress?Il primo passo è trovare e inserisci il file dove dovrebbe apparire il tuo widget. Il secondo passaggio consiste nel determinare quale widget si desidera utilizzare. In questa sezione, esamineremo i nomi delle classi del widget WordPress predefinito: WP_Widget_Archives. Come creare un widget immagine personalizzato in WordPress Per creare un widget immagine personalizzato in WordPress, dovrai prima creare un plug-in personalizzato o un tema figlio. Dopo averlo fatto, puoi quindi creare un nuovo file chiamato "image-widget.php" all'interno del tuo plugin o tema figlio. All'interno di questo file, dovrai includere il seguente codice: class WP_Widget_Custom_Image extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __( 'Un widget che ti consente per caricare un'immagine personalizzata.', 'text_domain' ), ); genitore::__construct( 'immagine_personalizzata', __( 'Immagine personalizzata', 'dominio_testo' ), $widget_ops ); } widget di funzione($args, $istanza) { echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $istanza['titolo'] ). $args['after_title']; } if ( ! empty( $instance['image'] ) ) { echo ”; } echo $args['after_widget']; } aggiornamento della funzione ($ istanza_nuova, $ istanza_vecchia) { $ istanza = $ istanza_vecchia; $istanza['titolo'] = sanitize_text_field($nuova_istanza['titolo']); $istanza['immagine'] = esc_url_raw($nuova_istanza['immagine']); restituisce $istanza; } modulo della funzione ($istanza) { $titolo = ! vuoto($istanza['titolo'])? $istanza['titolo'] : __( 'Immagine personalizzata', 'dominio_testo' ); $immagine = ! vuoto($istanza['immagine'])? $istanza['immagine'] : ”; ?Il plug-in Image Widget è un semplice plug-in che può essere utilizzato per aggiungere widget di immagini al tuo sito utilizzando il media manager di WordPress. È comune che i modelli di output dei widget includano un modello predefinito, ma questo può essere modificato dai file nel modello. In 3.2, è stato aggiunto anche il filtro sh_template_image_widget_php, che consente di sovrascrivere il comportamento predefinito del modello. Per saperne di più sull'istanza specifica del widget, devi anche aggiungere due argomenti $args e $instance. Potresti usarlo in un design reattivo se lo sovrascrivi. Come posso aggiungere uno slider per immagini casuali? Sì, hai la possibilità di farlo. In genere, questo viene gestito direttamente tramite la visualizzazione della barra laterale del plug-in Image Widget; la visualizzazione della barra laterale deve essere impostata su una pagina specifica. Fateci sapere se avete domande o commenti su questa pagina. Image Widget è un progetto software open source. Questo plugin è stato reso disponibile al pubblico da una varietà di contributori. Se vuoi includere un'immagine, puoi aggiungere un campo e se vuoi includere un collegamento, puoi aggiungere una classe. Impiegherai circa 15 minuti a farlo, quindi è un investimento utile. Come faccio a creare un nuovo widget in WordPress? Trascina il widget nell'area del widget pertinente o trascinalo dal lato sinistro della pagina a sinistra . Dopo aver fatto clic sul widget che desideri aggiungere, vedrai un elenco di modi per farlo. Per aggiungere nuovi widget a un'area esistente, fare clic sul pulsante Aggiungi widget.
