Come aggiungere suggerimenti di jQuery nel modulo dei commenti di WordPress

I commenti consentono agli utenti di interagire con i contenuti del tuo sito web. Questo è il motivo per cui crediamo che sia importante modellare il layout dei commenti e il modulo dei commenti, quindi è facile da usare e di bell'aspetto. Recentemente, un utente ci ha chiesto come è possibile aggiungere le descrizioni dei comandi jQuery al modulo di commento di WordPress. Abbiamo pensato che anche altri potrebbero trovare utile questo. In questo tutorial, ti mostreremo come aggiungere suggerimenti di jQuery nel modulo di commento di WordPress.

Perché aggiungere descrizioni comandi jQuery?

I suggerimenti appaiono quando un utente porta il mouse su un oggetto, solitamente fornendo loro una descrizione su quel particolare oggetto. In questo tutorial, aggiungeremo suggerimenti di jQuery per mostrare suggerimenti come, Si prega di utilizzare il tuo vero nome nei campi del modulo di commento.

Aggiungendo le descrizioni dei comandi jQuery, puoi migliorare l'esperienza utente e sembrerà più bello.

Come aggiungere descrizioni comandi jQuery

Per prima cosa, devi creare una cartella sul desktop e nominarla WPB-commento-tooltip. All'interno di questa cartella, è necessario creare questi tre file:

• WPB-commento-tooltips.php
• WPB-tooltip.css
• WPB-tooltip.js

Utilizzare un editor di testo semplice come Blocco note per creare questi file. Una volta creati i file, è necessario aprire WPB-commento-tooltip.php nell'editor di testo. Copia e incolla questo codice nel file:

 '. __ ('Email', 'twentythirteen'). ''. ($ req? '*': "). '
'; $ fields ['url'] = '
'. __ ("Sito web", "ventitreesimo"). ''. '
'; $ fields ['author'] = '
'. ''. __ ('Nome', 'ventitre'). ''. ($ req? '*': "). '
'; restituire $ campi;  add_filter ('comment_form_default_fields', 'alter_comment_form_fields'); ?> 

Nel codice precedente, abbiamo prima creato un'intestazione di plugin, dato questo plugin un nome e una descrizione. Successivamente, carichiamo il nostro file JavaScript e CSS (consulta la nostra guida su come aggiungere JavaScript e stili in WordPress).

Ci assicuriamo inoltre che questi file vengano caricati solo quando viene visualizzato un modulo di commento. Successivamente abbiamo modificato il modulo di commento predefinito e aggiunto l'attributo titolo nei campi di input. Questo attributo del titolo contiene il messaggio che vogliamo venga visualizzato nel suggerimento. Ad esempio, nel campo autore abbiamo usato:

title = "Utilizza il tuo vero nome, nessuna parola chiave".

Ora che hai creato il file plugin, è ora di aggiungere un po 'di jQuery. Aperto WPB-tooltip.js file e aggiungi questo codice al suo interno:

 (function ($) $ ("#commentform") .tooltip (position: my: "center bottom-10", at: "center top", usando: function (position, feedback) $ (this). css (position); $ ("") .addClass ("arrow") .addClass (feedback.vertical) .addClass (feedback.horizontal) .appendTo (this););) (jQuery); 

In questo codice, #commentform è il selettore in cui jQuery mostrerà i suggerimenti e .tooltip è la parte del contenuto in cui abbiamo definito la posizione per i suggerimenti.

Ora il passo finale è aggiungere un po 'di CSS WPB-tooltip.css file. Basta copiare e incollare questo codice:

 .ui-tooltip, .arrow: after background: # 356aa0; bordo: 2px bianco solido;  .ui-tooltip padding: 10px 20px; colore bianco; border-radius: 20px; font: grassetto 14px "Helvetica Neue", Sans-Serif; text-transform: maiuscolo; box-shadow: 0 0 7px # 356aa0; max-width: 350px;  .arrow width: 70px; altezza: 16px; overflow: nascosto; posizione: assoluta; a sinistra: 50%; margin-left: -35px; fondo: -16px;  .arrow.top top: -16px; fondo: auto;  .arrow.left left: 20%;  .arrow: after content: ""; posizione: assoluta; a sinistra: 20px; inizio: -20px; larghezza: 25px; altezza: 25px; box-shadow: 6px 5px 9px -9px # 356aa0; -webkit-transform: ruotare (45 gradi); -moz-transform: ruota (45 gradi); -ms-transform: ruota (45 gradi); -o-trasforma: ruota (45 gradi); tranform: ruotare (45 gradi);  .arrow.top: after bottom: -20px; inizio: auto;  

Sentiti libero di modificare questo file CSS per soddisfare le tue esigenze.

È tutto. Ora hai creato con successo un plugin che aggiunge le descrizioni di jQuery nel tuo modulo di commento WordPress. Tutto ciò che devi fare è caricare WPB-commento-tooltip cartella dal desktop a / Wp-content / plugins / directory sul tuo server web usando un client FTP come Filezilla. Una volta caricato il plugin, vai a plugin pagina nell'area admin di WordPress e attiva il plugin.

Speriamo che questo tutorial ti abbia aiutato ad imparare come aggiungere suggerimenti di jQuery nel modulo di commento di WordPress. Ti invitiamo a modificare questo codice e a provare ad aggiungere suggerimenti in altri luoghi. Ad esempio, guarda come abbiamo aggiunto le testimonianze di tooltip al nostro sito. Per feedback e domande, si prega di lasciare un commento qui sotto.