Advertisement
  1. Code
  2. WordPress Plugins

Creare un sistema di messaggistica personalizzata in WordPress, parte 3

Scroll to top
Read Time: 11 min
This post is part of a series called Creating a Custom WordPress Messaging System.
Creating a Custom WordPress Messaging System, Part 2
Creating a Custom WordPress Messaging System, Part 4

Italian (Italiano) translation by Roberta C (you can also view the original English article)

A questo punto della serie, abbiamo posto le basi per il nostro plugin, definito un hook personalizzato e cablato un messaggio perpetuo per mostrare come trarre vantaggio da questo hook.

Quello che non abbiamo fatto, però, è implementare i diversi tipi di messaggio, consentire l'input dell'utente e visualizzare i messaggi come risultato dell'input che l'utente ha fornito.

Ma prima di farlo, abbiamo bisogno di aggiungere il supporto per i vari tipi di messaggi, una classe interfaccia che supporti ogni tipo di messaggio e le strutture dati necessarie per la memorizzazione di tali messaggi.

Sei pronto per iniziare?

Non vedo l'ora di continuare con questo tutorial, ma ci sono alcune cose da rivedere prima di saltare nuovamente dentro il codice sorgente. Assicurarsi che il proprio sistema abbia i seguenti software installati:

  • 5.6.25 PHP e MySQL 5.6.28
  • Apache o Nginx
  • WordPress 4.6.1
  • Il tuo editor di codice preferito

E se stai cercando una soluzione tutto incluso, non dimenticate di provare MAMP.

La strada fin qua

Come accennato in precedenza, siamo nel bel mezzo di questa serie. Se hai perso uno dei precedenti tutorial, ecco di cosa ci siamo occupati finora:

  1. Nel primo tutorial, ci siamo concentrati sul gettare le basi minime indispensabili per iniziare con il nostro plugin.
  2. Nella seconda parte,abbiamo complicato un po' il plugin aggiungendo una pagina di amministrazione di WordPress molto base. Abbiamo anche fatto una chiamata al hook personalizzato che stiamo usando, sul lato server. Abbiamo anche gettato le basi per le impostazioni del nostro Messenger.

Ed ecco cosa ci sarà da rivedere nel tutorial finale:

  1. Finiremo unendo tutto insieme, lo vedremo in azione e renderemo disponibile al pubblico il download del plugin finale.

Per ora, però, abbiamo altri aspetti su cui concentrarci.

Torniamo al lavoro

Per tornare al lavoro (e come abbiamo esaminato nel precedente tutorial), andiamo a guardare la seguente implementazione di questo pezzo della serie:

In questo tutorial, inizieremo ad implementare le impostazioni del nostro Messenger aggiungendo il supporto per i messaggi di errore e di successo, tratteremo inoltre alcuni punti sulla sicurezza.

Nell'ultimo articolo, abbiamo cominciato a lavorare sulle impostazioni del Messegger, ma solo impostando una funzione che perennemente visualizzerà un avviso di successo ogni volta che viene caricata la pagina personalizzata.

The permanent success message we displayed in the last tutorialThe permanent success message we displayed in the last tutorialThe permanent success message we displayed in the last tutorial

In questo tutorial, aggiungeremo il supporto per i messaggi di errore, di avviso e di successo. Andremo anche a visualizzarli su schermo così possiamo avere un'idea di come funzionerà poi il Messenger.

Inoltre, faremo un altro cambio che aggiungerà il supporto per chiudere gli avvisi a discrezione dell'utente.

Questo è il piano di lavoro che andremo a eseguire in questo tutorial, diamoci da fare.

Espandere le impostazioni del Messenger

Ricordate che il ruolo delle impostazioni del Messenger  è quello di definire un modo di lavorare con messaggi personalizzati, hooks personalizzati e le API native di WordPress per visualizzare messaggi nell'ambito della zona di amministrazione di WordPress.

Per fare questo, andiamo ad espandere il lavoro che abbiamo fatto nella precedente esercitazione e da li continuiamo a crescere .

Messaggi di successo

Abbiamo iniziato con il messaggio di successo nell'esercitazione precedente, andiamo avanti. Ora, abbiamo un metodo hard-coded che visualizza un singolo metodo:

1
<?php
2
3
public function display_message() {
4
5
      $html = "

6
            <div class='notice notice-success'>

7
                <p><strong>You have successfully displayed a custom success message.</strong></p>

8
            </div><!-- .notice-success -->

9
        ";
10
11
        $allowed_html = array(
12
            'div' => array(
13
                'class' => array(),
14
            ),
15
            'p' => array(),
16
        );
17
18
        echo wp_kses( $html, $allowed_html );
19
}

Idealmente, vorremmo introdurre una struttura di dati che supporti più messaggi, una funzione che ci permetta di aggiungere quanti messaggi vogliamo e una funzione che ci permetta di eseguire il rendering di tutti i messaggi di successo.

In primo luogo, si comincerà con un array. Si tratta di un attributo private della classe, e verrà inizializzato nel costruttore. La parte iniziale del Settings_Messenger ora dovrebbe assomigliare a questo:

1
<?php
2
3
class Settings_Messenger {
4
5
    private $success_messages;
6
7
    public function __construct() {
8
9
        $this->success_messages = array();
10
    }
11
}

Come potete vedere, abbiamo definito esattamente quello che abbiamo detto, tranne per il fatto che non abbiamo stabilito un metodo per aggiungere i nostri messaggi, e non abbiamo definito un messaggio per eseguire i nostri messaggi.

Quindi cerchiamo di farlo ora. In primo luogo, aggiungiamo un metodo che ci permetterà di aggiungere i nostri propri messaggi:

1
<?php
2
3
public function add_success_message( $message ) {
4
    $this->success_messages[] = sanitize_text_field( $message );
5
}

Si noti qui che stiamo usando sanitize_text_field per igienizzare i dati da passare nell'array. È possibile effettuare la sanificazione in maniera più o meno rigorosa a seconda di come si preferisce. Ho optato per questo metodo in particolare, perché ci aiuta ad arrivare al punto senza allontanarci troppo dai propositi del tutorial.

Ora definiamo un metodo che ci permetterà di visualizzare i messaggi sul front-end:

1
<?php
2
3
public function get_success_messages() {
4
5
    if ( empty( $this->success_messages ) ) {
6
        return;
7
    }
8
9
    $html  = "<div class='notice notice-success'>";
10
    $html .= '<ul>';
11
    foreach ( $this->success_messages as $message ) {
12
        $html .= "<li>$message</li>";
13
    }
14
    $html .= '</ul>';
15
    $html .= '</div><!-- .notice-success -->';
16
17
    $allowed_html = array(
18
        'div' => array(
19
            'class' => array(),
20
        ),
21
        'ul' => array(),
22
        'li' => array(),
23
    );
24
25
    echo wp_kses( $html, $allowed_html );
26
}

Certo, questo metodo può essere migliorato e ci metterò mano sopra alla fine di questo tutorial.

Per ora, però, mettiamo alla prova questo. Proviamo il seguente codice nel file tutsplus-custom-message.php e quindi ricarichiamo la schermata di amministrazione che abbiamo usato finora in questa serie.

1
<?php
2
$messenger = new Settings_Messenger();
3
$messenger->init();
4
5
$messenger->add_success_message( 'This is a test message' );
6
$messenger->add_success_message( 'This is also a test message, too.' );

Se tutto è stato implementato correttamente, si dovrebbe vedere qualcosa di simile:

Multiple success messagesMultiple success messagesMultiple success messages

Per fortuna, aggiungere i due tipi di messaggi è molto simile a quello che abbiamo fatto finora in questa sezione.

Messaggi di avviso

Aggiungere il supporto per i messaggi di avviso sarà quasi esattamente come fare quello che abbiamo fatto prima; Tuttavia, invece di nominare il nostro array e le relative funzioni con qualcosa che ha a che fare con successo, assegneremo loro qualcosa che ha a che fare con gli avvisi.

Così, in primo luogo, aggiungiamo l'array per contenere i nostri messaggi:

1
<?php
2
3
class Settings_Messenger {
4
5
    private $success_messages;
6
7
    private $warning_messages;
8
9
    public function __construct() {
10
11
        $this->success_messages = array();
12
        $this->warning_messages = array();
13
    }
14
}

Poi aggiungiamo le funzioni che ci permetteranno di aggiungere avvisi al Messanger:

1
<?php
2
3
public function add_warning_message( $message ) {
4
    $this->warning_messages[] = sanitize_text_field( $message );
5
}

E infine, aggiungiamo una funzione per visualizzare la funzione quando necessario (si noti che stiamo usando la classe di nome notice-warning quando si crea l'elemento div):

1
<?php
2
3
public function get_warning_messages() {
4
5
    if ( empty( $this->warning_messages ) ) {
6
        return;
7
    }
8
9
    $html  = "<div class='notice notice-warning'>";
10
    $html .= '<ul>';
11
    foreach ( $this->warning_messages as $message ) {
12
        $html .= "<li>$message</li>";
13
    }
14
    $html .= '</ul>';
15
    $html .= '</div><!-- .notice-warning -->';
16
17
    $allowed_html = array(
18
        'div' => array(
19
            'class' => array(),
20
        ),
21
        'ul' => array(),
22
        'li' => array(),
23
    );
24
25
    echo wp_kses( $html, $allowed_html );
26
}

Si noti che il come visualizzare questo particolare insieme di messaggi dipende da voi. Si può scegliere di visualizzarli in combinazione con quelli di successo, o si può scegliere di visualizzarli in modo completamente separato.

Per questo tutorial, ho intenzione di mantenere le cose semplici e di visualizzare al momento solo il messaggio di avviso. Così vado ad aggiungere la seguente riga di codice al file principale del plugin:

1
<?php
2
$messenger->add_warning_message( 'Warning! Danger Will Robinson!' );

Aggiornerò l'hook nel metodo init del Settings_Messenger:

1
<?php
2
public function init() {
3
    add_action( 'tutsplus_settings_messages', array( $this, 'get_warning_messages' ) );
4
}

E poi aggiornerò la pagina. Supponendo di aver seguito correttamente tutto il codice sopra, si dovrebbe vedere qualcosa di quasi simile a questo:

A demonstration of a warning messageA demonstration of a warning messageA demonstration of a warning message

Se no, ricontrollare il codice o scaricare il file progetto allegato a questo tutorial.

Messaggi di errore

Infine, facciamo la stessa cosa per i nostri messaggi di errore. Andremo a ripetere esattamente quello che abbiamo fatto nelle sezioni precedenti, a questo punto dovrebbe diventare un po' come una seconda natura.

In primo luogo, abbiamo bisogno di aggiungere un attributo che conterrà l'array dove conserviamo i nostri messaggi di errore:

1
<?php
2
3
class Settings_Messenger {
4
5
    private $success_messages;
6
7
    private $warning_messages;
8
9
    private $error_messages;
10
11
    public function __construct() {
12
13
        $this->success_messages = array();
14
        $this->warning_messages = array();
15
        $this->error_messages   = array();
16
    }
17
}

In secondo luogo, abbiamo bisogno di aggiungere una funzione che ci permetterà di aggiungere la nostra lista di errori:

1
<?php
2
3
public function add_error_message( $message ) {
4
    $this->error_messages[] = sanitize_text_field( $message );
5
}

E quindi dobbiamo essere in grado di visualizzarli:

1
<?php
2
3
public function get_error_messages() {
4
5
    if ( empty( $this->error_messages ) ) {
6
        return;
7
    }
8
9
    $html  = "<div class='notice notice-error'>";
10
    $html .= '<ul>';
11
    foreach ( $this->error_messages as $message ) {
12
        $html .= "<li>$message</li>";
13
    }
14
    $html .= '</ul>';
15
    $html .= '</div><!-- .notice-error -->';
16
17
    $allowed_html = array(
18
        'div' => array(
19
            'class' => array(),
20
        ),
21
        'ul' => array(),
22
        'li' => array(),
23
    );
24
25
    echo wp_kses( $html, $allowed_html );
26
}

Per aggiungere i nostri messaggi, torniamo al file principale del plugin e aggiungiamo il seguente codice:

1
<?php
2
3
$messenger->add_error_message( 'Believe what you want. But neither you nor I are special.' );
4
$messenger->add_error_message( 'In my life, as I was making my way, I always asked the question, am I the most powerful person in the room?' );
5
$messenger->add_error_message( 'People always told me growing up that it\'s never about the destination. It\'s about the journey. But what if the destination is you?' );

Successivamente, aggiorniamo la funzione init nel Settings_Messenger, e quando si aggiorna la pagina dovrebbe apparire qualcosa come questo:

A list of error messagesA list of error messagesA list of error messages

E così è come abbiamo aggiunto i messaggi personalizzati alla nostra pagina di amministrazione utilizzando ganci personalizzati. But we've got one more thing to introduce before wrapping up this article.

Eliminare i messaggi

Prima di concludere, voglio mostrarvi come possiamo rendere i nostri messaggi cancellabili o, più semplicemente, fare in modo che siano removibili dall'utente. Per fare questo, possiamo prendere vantaggio di funzionalità che è già incorporato in WordPress.

Dato che fino ad ora stavamo lavorando sui messaggi di errore, usiamo i messaggi di errore come esempio. Quando si compila il codice HTML per i messaggi di errore, è possibile aggiungere un altra classe all'elemento div che contiene i messaggi.

Vale a dire, aggiungiamo is-dismissible:

1
<?php
2
3
$html  = "<div class='notice notice-error is-dismissible'>";
4
$html .= '<ul>';
5
foreach ( $this->error_messages as $message ) {
6
    $html .= "<li>$message</li>";
7
}
8
$html .= '</ul>';
9
$html .= '</div><!-- .notice-error -->';

Abbastanza facile, non è vero? Si ottiene un'icona che consente all'utente di fare click su di questa e, quando lo fa, il messaggio scomparirà.

Questa è una bella funzionalità che si adatta bene all'interno dell'esperienza utente di WordPress, un po' meno per il nostro fine.

Conclusione

Ora abbiamo un Settings_Messenger abbastanza funzionale. Possiamo aggiungere i messaggi di successo, i messaggi di errore e i messaggi di avviso. Possiamo eliminare i messaggi. Siamo in grado di gestire tutto questo indipendentemente da qualunque altra cosa su WordPress.

Ma se avete letto uno dei miei tutorial precedenti, sapete che io non sono un fan dei codici duplicati. Né sono un fan di avere una classe per fare molte cose. E, purtroppo, è esattamente ciò che stiamo facendo qui.

Ai fini di questa esercitazione, non intendo pianificare un refactoring del codice di questo esempio. Siamo passati attraverso questo tipo di materiale in precedenza. Inoltre, lo scopo di quello che stiamo facendo è di mostrare come lavorare con messaggi di errore personalizzati, non come applicare le più avanzate tecniche di programmazione orientata agli oggetti (anche se sarebbe bello, non è vero?).

In base al feedback che riceverò per questa serie, forse lo potrei rivisitare così possiamo vedere che tipo di lavoro e che principi possono essere applicati.

Nel frattempo che aspettate che il prossimo tutorial sia pubblicato, sappiate che sono sempre felice di rispondere a domande attraverso i commenti, potete visitare il mio blog e seguirmi su Twitter.  Di solito parlo di sviluppo WordPress e relativi argomenti.

Fino ad allora, scaricate il codice sorgente disponibile, confrontatelo con quello che abbiamo qui e assicuratevi di eseguirlo sul computer locale, quando avrete familiarità con ciò che è lasciato ci muoviamo verso la parte finale di questa serie.

Risorse

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.