Share
Nel post precedente di questa serie, ho iniziato a creare una pagina di benvenuto per un plug-in di WordPress. Ho discusso l'architettura dei plugin e come funziona. Poi ho scritto il codice per i suoi file di base e inizializzatore dove abbiamo aggiunto i blocchi di codice per l'aggiunta e l'eliminazione di un transitorio basato sull'attivazione e disattivazione del plugin.
In questo articolo finale, discuterò i restanti file del plugin insieme all'implementazione pratica del plugin. Verso la fine di questo articolo, sarete acutamente consapevoli del processo di codifica della prima pagina di benvenuto per un plug-in di WordPress.
Il welcome-init.php file definisce tutto il codice rilevante che inizializza il processo per la nostra pagina di benvenuto. Cominciò con l'aggiunta e l'eliminazione dei transienti tramite il set_transient () (sull'attivazione del plugin) e delete_transient () funzioni (disattivazione del plugin).
Detto questo, ora abbiamo bisogno di un modo per reindirizzare l'utente alla nostra pagina di benvenuto. Per gestire la logica del plugin, ho creato un file separato chiamato welcome-logic.php.
Esaminiamo il codice per questo file.
Accentsconagua
'wpw_welcome_page'), admin_url ('plugins.php'))); add_action ('admin_init', 'wpw_safe_welcome_redirect');Quindi, come ormai sapete, mi piace seguire gli standard di codifica e documentazione di WordPress, motivo per cui vi è molta documentazione, mentre alcuni sono stati aggiunti per la vostra comprensione.
C'è un'intestazione del file DocBlock che viene utilizzata per fornire una panoramica di ciò che è contenuto nel file. Il codice inizia con un ABSPATH controllare, che termina l'operazione di plugin se qualcuno tenta di accedere direttamente al file del plugin. Dopo ciò, ho scritto la routine del codice per un reindirizzamento sicuro.
Ho quindi definito una funzione denominata wpw_safe_welcome_redirect () per gestire il reindirizzamento sicuro alla pagina di benvenuto. Al suo interno, ho eseguito alcuni Se controlla che monitora il metodo di reindirizzamento. Se hai seguito gli articoli precedenti, allora sai che ho definito il _welcome_redirect_wpw transitorio e imposta il suo valore su true. Userò la stessa chiave per eseguire questi controlli. Per ottenere una migliore comprensione del codice, è necessario esaminare dettagliatamente l'articolo precedente.
Iniziamo con ciò che sta accadendo nel wpw_safe_welcome_redirect () funzione.
Ho controllato se esiste un transitorio di reindirizzamento dell'attivazione, cioè. _welcome_redirect_wpw transitorio, via il get_transient () funzione. Questa funzione è usata per ottenere il valore di un transitorio. Se il transitorio non esiste, non ha un valore o è scaduto, il valore restituito sarà falso.
Quindi, se il valore recuperato non è uguale a vero, quindi non abbiamo bisogno di reindirizzare l'utente a una pagina di benvenuto. Se il valore recuperato è vero e il transitorio di reindirizzamento dell'attivazione è presente, quindi andiamo avanti.
Se il transitorio _welcome_redirect_wpw ritorna vero, ciò significa due cose: prima è presente nel database e in secondo luogo che non abbiamo reindirizzato l'utente alla pagina di benvenuto. Cancelliamo questo transitorio e reindirizza l'utente alla nostra pagina di benvenuto.
Quindi abbiamo un'altra dichiarazione di controllo che conferma che un reindirizzamento della pagina di benvenuto sicuro avviene solo per un sito che non è una rete o un sito multiplo. Non vogliamo il reindirizzamento della pagina di benvenuto se il plugin viene attivato da una rete.
Alla fine, dopo tutti questi controlli, ho reindirizzato l'utente alla nostra pagina di benvenuto. Il wp_safe_redirect ($ posizione) funzione esegue un reindirizzamento locale e comunica al server informazioni su $ location per reindirizzare l'utente.
Per definire la posizione, ho usato il add_query_arg () funzione che recupera una stringa di query URL modificata. Prende un array associativo che ha una coppia chiave-valore insieme all'URL della posizione.
In questo caso, sto creando una chiave chiamata pagina con un valore wpw_welcome_page e reindirizzandolo al plugins.php file tramite il ADMIN_URL () funzione. Ciò significa che sto reindirizzando l'utente a una pagina personalizzata all'interno del menu Plugin e l'utente verrà reindirizzato al your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page URL.
Successivamente, ho agganciato il tutto wpw_safe_welcome_redirect () funzione al admin_init.
Finora, ho definito la procedura per un reindirizzamento sicuro. La posizione è a pagina che esiste all'interno del PLUGINS menu. Ma non ho ancora creato la pagina. Ora creiamo una pagina di benvenuto all'interno del plugin menu.
Il codice rimanente del welcome-logic.php il file è:
/ ** * Aggiunge il sottomenu della pagina di benvenuto. * * @since 1.0.0 * / function wpw_welcome_page () global $ wpw_sub_menu; $ wpw_sub_menu = add_submenu_page ('plugins.php', // Il nome di slug per il menu genitore (o il nome del file di una pagina di amministrazione standard di WordPress). __ ('Pagina di benvenuto', 'wpw'), // Il testo a essere visualizzati nei tag del titolo della pagina quando il menu è selezionato. __ ('Pagina di benvenuto', 'wpw'), // Il testo da utilizzare per il menu. 'leggi', // La capacità richiesta per questo menu 'wpw_welcome_page', // Il nome slug per riferirsi a questo menu per (dovrebbe essere univoco per questo menu). 'wpw_welcome_page_content' // La funzione da chiamare per generare il contenuto per questa pagina.) ; add_action ('admin_menu', 'wpw_welcome_page'); / ** * Contenuto della pagina di benvenuto. * * @since 1.0.0 * / function wpw_welcome_page_content () if (file_exists (WPW_DIR. '/welcome/welcome-view.php')) require_once (WPW_DIR. '/welcome/welcome-view.php'); Per aggiungere il sottomenu, ho creato a wpw_welcome_page () funzione, all'interno della quale ho chiamato il add_submenu_page () funzione.
Il add_submenu_page () la funzione aggiunge una pagina all'interno di un menu. Ci vuole un elenco di parametri:
wpw_welcome_page, lo stesso che abbiamo definito durante la funzione di reindirizzamento sicuro.Ho definito i valori di questi parametri e, infine, ho aggiunto il wpw_welcome_page () funzione come add_action al admin_menu.
Ora dobbiamo gestire il contenuto della pagina di benvenuto, per il quale ho creato un wpw_welcome_page_content () funzione (questa è la funzione di callback per add_submenu_page ()) che richiede il welcome-view.php file.
Avrai notato che ho creato una variabile globale $ wpw_sub_menu che contiene l'ID della schermata di pagina per la nostra nuova pagina di sottomenu. Lo useremo nella prossima sezione.
Subito dopo tutto questo, ho accodato a style.css file per personalizzare lo stile degli elementi nella nostra pagina di benvenuto. All'interno del codice sopra, ho impostato una variabile globale $ wpw_sub_menu che conteneva l'ID della schermata della pagina sub_menu.
Possiamo controllare questo ID dello schermo mentre accodiamo il nostro file di stile per assicurarci che sia accodato solo quando navighiamo nella pagina di benvenuto e non ovunque nell'admin. Questo è ciò che sta facendo il seguente codice.
/ ** * Accoda stili. * * @since 1.0.0 * / function wpw_styles ($ hook) global $ wpw_sub_menu; // Aggiungi stile solo alla pagina di benvenuto. if ($ hook! = $ wpw_sub_menu) return; // Stili di pagina di benvenuto. wp_enqueue_style ('wpw_style', WPW_URL. '/welcome/css/style.css', array (), WPW_VERSION, 'all'); // Accoda gli stili. add_action ('admin_enqueue_scripts', 'wpw_styles');La logica della nostra pagina di benvenuto è completa. È possibile visualizzare il codice completo per il file welcome-logic.php su GitHub.
Ora che la logica della nostra pagina di benvenuto è completa, puoi effettivamente testare il plug-in che hai creato e ti reindirizzerà alla pagina di benvenuto. L'unica cosa che rimane da fare è costruire la vista della tua pagina di benvenuto. Questo potrebbe essere qualsiasi cosa tu voglia, ma voglio lasciarti con qualche standard per ovvi motivi.
La parte HTML e CSS del plugin risiede all'interno di welcome-view.php file. Il suo codice è il seguente:
Il file inizia come un normale file PHP con un DocBlock e quindi il codice per un file ABSPATH controlla in modo che nessuno possa accedere direttamente al file. Successivamente, ho creato una variabile per la versione plug-in e il percorso per la nostra immagine del logo.
Ho aggiunto una cartella chiamata css e un file chiamato style.css al suo interno per creare alcuni stili personalizzati per la pagina di benvenuto. Il codice ha il seguente aspetto. È il codice utilizzato per modificare la classe extra che ho aggiunto per il nostro logo. (Puoi aggiungerlo nel modo che preferisci, ho appena sovrascritto il logo WP per semplificare le cose ai fini di questo tutorial.)
/ * Logo * / .svg .wp-badge.welcome__logo background: url ('... /img/logo.png') center 24px no-repeat # 0092f9; background-size: contenere; colore: #fff; / * Responsive Youtube Video * / .embed-container height: 0; larghezza massima: 100%; overflow: nascosto; imbottitura-fondo: 56,25%; posizione: relativa; .embed-container iframe, .embed-container object, .embed-container embed top: 0; altezza: 100%; a sinistra: 0; posizione: assoluta; larghezza: 100%; Dopodiché, c'è la parte HTML della nostra pagina. C'è un video da YouTube incorporato come video reattivo.
La parte HTML della pagina di benvenuto è simile a quella della pagina di benvenuto predefinita di WordPress. Il vantaggio è che non dobbiamo scrivere molto CSS e gli utenti hanno già familiarità con il formato integrato.
I plugin sono estensioni per WordPress. Puoi estendere WordPress creando un plug-in, ed è per questo che penso che tu debba sempre usare gli sguardi / stili predefiniti e integrati per mantenere le cose più in linea con il dashboard di WordPress. Alcuni plugin aggiungono icone colorate e sfondo pesante o altro, ma alla fine della giornata finiscono per disturbare una fluida esperienza utente.
Sono sicuro che gli sviluppatori di plug-in sono esperto di programmazione HTML. Ecco il codice comunque.
Il codice mostra il seguente layout:
Al momento della scrittura, puoi utilizzare le seguenti classi CSS per creare colonne:
.caratteristica sezione insieme a .uno-col: Per creare una singola colonna..caratteristica sezione insieme a .due col: Per creare due colonne..caratteristica sezione insieme a .tre col: Per creare tre colonne.Questo completa il nostro sviluppo di plugin. Proviamolo su un sito web demo.
Per testare il plug-in su un sito Web demo, è possibile scaricare e installare il WP-Welcome-Page-Boilerplate-For-TutsPlusda GitHub.
Quindi, procedere come segue:
Ecco! Sono stato reindirizzato alla pagina di benvenuto?
Una volta che hai finito, torna alla pagina iniziale della dashboard e passa il mouse sopra il plugin menu. Viene aggiunto un sottomenu aggiuntivo, denominato come Pagina di benvenuto. Per ricordarti ancora, questa è la stessa pagina che ho creato in precedenza.
A proposito, la pagina di benvenuto finale assomiglia a questo.
Ecco il layout completo della schermata di benvenuto.
È così che puoi creare una pagina di benvenuto per il tuo plugin WordPress. Ho descritto un'implementazione molto semplice. È possibile modificarlo in base alle proprie esigenze. Consiglierei di scaricare il benvenuto cartella e includendo il welcome-init.php al tuo prodotto (cambia le costanti globali nei file welcome - *. php).
Infine, puoi prendere tutti i miei corsi ed esercitazioni sulla mia pagina del profilo, e puoi seguirmi sul mio blog e / o raggiungere Twitter @mrahmadawais dove scrivo dei flussi di lavoro di sviluppo nel contesto di WordPress.
Come al solito, non esitare a lasciare qualsiasi domanda o commento qui sotto e cercherò di rispondere a ciascuno di essi.
