Share
Nel tutorial precedente, abbiamo iniziato a parlare di spazi dei nomi e autoloading con PHP nel contesto dello sviluppo di WordPress. E anche se non abbiamo mai introdotto nessuno di questi due argomenti, li abbiamo definiti e abbiamo iniziato a gettare le basi per come li introdurremo in un prossimo tutorial.
Prima di farlo, però, ci sono alcune funzionalità che dobbiamo completare per completare il nostro plugin. L'obiettivo è terminare il plugin e le sue funzionalità in modo da avere un plugin di base orientato agli oggetti che è documentato e funziona bene con un avvertimento; non usa namespace o autoloading.
Questo, a sua volta, ci darà la possibilità di vedere come appare un plugin prima e dopo aver introdotto questi argomenti.
Prima di procedere, consiglio di leggere il tutorial precedente. In questo modo, avrai la comprensione di quali sono gli spazi dei nomi e l'autoloading, fino a questo punto avremo la versione funzionante del plug-in (dato che ci stiamo per costruire su di essa), e quindi sarai pronto per procedere da quel punto in avanti.
Una volta letto, sentiti libero di tornare a questo tutorial e riprendere il tuo lavoro.
Come con tutte le mie esercitazioni, presumo che tu abbia un ambiente di sviluppo funzionante sulla tua macchina. Questo include quanto segue:
Se sei così avanti nella serie (o hai letto uno dei miei lavori precedenti), suppongo che tu abbia già qualcosa come sopra già in atto.
E quando lo fai, siamo pronti per iniziare.
Ricorda dal precedente tutorial:
Creeremo un plug-in che semplifica il caricamento di fogli di stile e stili JavaScript nel nostro plug-in e visualizza una meta-box che richiede all'utente una domanda per aiutarli a fare brainstorming su quale blog.
Sì, è semplice e non è probabile che qualcuno userà al di fuori di studiare i concetti che copriamo in questo blog. Ma i mezzi con cui stiamo insegnando i concetti che stiamo usando sono ciò che è importante.
Questo plugin ci dà la possibilità di fare esattamente questo.
Alla fine dell'ultimo tutorial, siamo partiti con un plug-in che mostra una domanda casuale allo scrittore nella parte superiore della barra laterale nella schermata di creazione post di WordPress.
Ogni volta che aggiorni la pagina, viene caricata una nuova domanda. Così com'è, non è male, ma ci sono alcuni miglioramenti che possiamo apportare in termini di stile del contenuto nella meta-box.
Cioè, possiamo introdurre fogli di stile che ci aiuteranno a creare una presentazione un po 'più visivamente accattivante. Inoltre, ci darà la possibilità di esplorare alcune altre tecniche orientate agli oggetti che possiamo usare quando lavoriamo con risorse come i fogli di stile.
Quindi iniziamo.
Ai fini di questo tutorial, non ho intenzione di utilizzare alcun tipo di preprocessore. Sto solo usando CSS vanilla. Ma il modo in cui accodiamo le risorse sarà un po 'più orientato agli oggetti di quello che molti sviluppatori di WordPress sono abituati a vedere.
Tutto ciò contribuirà all'obiettivo di utilizzare spazi dei nomi e autoloading in questa serie. Ma prima, iniziamo con l'introduzione di questi fogli di stile, creando le interfacce di classe, le classi e le comunicazioni necessarie con l'API di WordPress.
Nel Admin directory, creare una sottodirectory chiamata risorse. All'interno del risorse directory, creare una sottodirectory chiamata css e quindi aggiungere il file admin.css.
La struttura finale della directory dovrebbe assomigliare a questa:
Non siamo ancora pronti a fornire qualsiasi tipo di stile. Invece, dobbiamo rivolgere la nostra attenzione al codice lato server responsabile per l'accodamento di questo foglio di stile.
Per quanto riguarda la registrazione e l'accodamento di entrambi i fogli di stile e JavaScript, la maggior parte degli sviluppatori di plug-in di WordPress ha familiarità con gli hook necessari per farlo. Specificamente, mi riferisco a admin_enqueue_scripts e wp_enqueue_style.
E anche se useremo questi hook, lo installeremo in un modo semplice, orientato agli oggetti. No, questa serie non ha lo scopo di fare un tuffo nei principi orientati agli oggetti ma, quando applicabile, sono felice di provare a mostrarveli.
Nella programmazione orientata agli oggetti, un'interfaccia è definita come tale:
Un'interfaccia è una struttura / sintassi di programmazione che consente al computer di applicare determinate proprietà su una classe.
Un altro modo per pensarci è questo:
Se hai una classe che implementa un'interfaccia, la classe dovere definire le funzionalità dettate dall'interfaccia.
Quindi se l'interfaccia ha due firme di metodo con una visibilità e un nome specifici, la classe che implementa l'interfaccia deve avere due metodi con la stessa visibilità e nome e un'implementazione del metodo reale.
Ed è quello che faremo. Innanzitutto, dobbiamo definire la nostra interfaccia. Quindi nel util directory, creare Interfaccia-assets.php e quindi aggiungere il seguente codice:
Si noti, l'interfaccia in realtà non definisce la funzionalità. Invece, specifica che cosa le classi che implementano questa interfaccia dovrebbero definire.
Come potreste supporre, le classi che implementeranno questa interfaccia avranno due metodi sopra insieme a un'implementazione reale per ogni funzione. E vedremo come funziona momentaneamente.
Quindi, assicurati di includere questo file nel file del plugin principale:
Successivamente, dobbiamo creare un file che implementa questa interfaccia. Dato che lavoriamo con i file CSS, creeremo un caricatore CSS.
Il caricatore CSS
Questa è la classe che è responsabile per l'implementazione dell'interfaccia e sta facendo il lavoro effettivo di registrare la funzione con il gancio WordPress necessario (e in realtà dando l'implementazione a detta funzione).
Se dai un'occhiata al codice qui sotto, dovrebbe sembrare molto simile a qualcosa che hai visto o forse lavorato in un precedente progetto:
Il codice sopra dovrebbero essere relativamente facile da seguire, dati i commenti al codice, ma descriverò cosa sta succedendo:
Accentsconagua
dentro e enqueue sono entrambe le funzioni richieste mentre la classe implementa il Assets_Interface.dentro è chiamato, registra il enqueue funziona con il gancio responsabile della registrazione di un foglio di stile.enqueue il metodo registra il admin.css file e usi filemtime come modo per sapere se il file è stato modificato o meno (il che ci consente di escludere qualsiasi versione memorizzata nella cache del file durante la pubblicazione).In questa implementazione, il reale admin.css il file viene aggiunto su ogni pagina. Aggiungere un condizionale per verificare quale pagina è attualmente attiva e quindi determinare se il foglio di stile deve essere aggiunto o meno può essere aggiunto come esercizio post-tutorial. Per un suggerimento, controlla get_current_screen ().
Successivamente, dobbiamo includere questo file nel file del plugin principale:
Successivamente, abbiamo bisogno di istanziare il caricatore CSS e chiamarlo
dentrometodo nel complessotutsplus_namespace_demofunzione:dentro();Supponendo che hai fatto tutto bene, dovresti essere in grado di aggiornare il Aggiungi nuovo post pagina, visualizzare la fonte e vedere
admin.csselencato come un foglio di stile disponibile.Abbiamo ancora una cosa da fare prima di concludere questa parte del tutorial. Abbiamo bisogno di scrivere effettivamente dei CSS.
Disegna la Meta Box
Poiché la maggior parte del tutorial si è concentrata su alcune tecniche orientate agli oggetti e abbiamo ancora alcuni nuovi argomenti da esplorare in questa serie, renderemo questa parte relativamente facile.
Piuttosto che usare solo alcuni stili predefiniti forniti da WordPress, miglioriamo la meta-casella solo un po '.
In primo luogo, individuare il
renderefunzione nelMeta_Box_Displayclasse. Modifichiamolo in modo che restituisca il contenuto del file in un elemento di paragrafo con l'attributo ID di "tutsplus-author-prompt".Per fare questo, introdurremo un nuovo metodo che utilizzerà un metodo API di WordPress per la sanitizzazione dell'HTML.
array ('id' => array (),),); restituisce wp_kses ($ html, $ allowed_html);Chiameremo quindi questa funzione dall'interno del
renderemetodo per visualizzare il contenuto nella meta-scatola.question_reader-> get_question_from_file ($ file); $ html = "$ domanda
"; echo $ this-> sanitized_html ($ html);Ora possiamo aprire admin.css e apportare alcune piccole modifiche per aggiornare l'aspetto della meta-box in Aggiungi nuovo post schermo. Aggiungiamo il seguente CSS:
# tutsplus-author-prompt font-style: italic; allineamento del testo: centro; colore: # 333;E a questo punto, il tuo meta-box dovrebbe ora assomigliare al seguente:
Come accennato all'inizio, non è nulla di importante, ma è qualcosa che migliora un po 'l'aspetto della domanda.
Qual'è il prossimo?
A questo punto, abbiamo introdotto diverse classi, interfacce e altre funzionalità orientate agli oggetti. Abbiamo un plug-in che utilizza i dati di un file di testo, che comunica con l'API di WordPress e che disinfetta le informazioni prima di renderle nella home page.
Abbiamo una buona base da cui iniziare a parlare di spazi dei nomi. Quindi, nel prossimo tutorial, faremo esattamente questo. Se devi ancora aggiornarti sul resto della serie, allora lo consiglio perché continueremo a costruire su ciò che abbiamo imparato.
Se, nel frattempo, stai cercando altro materiale relativo a WordPress, puoi trovare tutti i miei tutorial precedenti sulla mia pagina del profilo e puoi seguirmi sul mio blog o su Twitter.
Fino ad allora, non dimenticare di scaricare la versione funzionante del plugin (versione 0.2.0) allegata a questo post. Il collegamento è disponibile nella barra laterale sotto un pulsante intitolato Scarica allegato. E, come al solito, non esitate a fare domande nei commenti!
risorse
