Personalizzazione dei commenti in WordPress

Personalizzazione dei commenti in WordPress

Per inserire un modulo dei commenti in WordPress (da ora in poi WP) nel template che visualizza i nostri post bisogna inserire questa chiamata a funzione PHP:

 <?php comments_template(); ?> 

che si occuperà di caricare un apposito script in PHP che andremo a creare e dovremmo chiamare comments.php.

La struttura del file comments.php sarà la seguente:
(in questo esempio, per inserire un commento, l’utente dovrà inserire nome, e-mail e messaggio come campi obbligatori, e il sito web come campo opzionale)


<?php

if (have_comments()) : //controlliamo se abbiamo già dei commenti inseriti
?>

<ol class="commentlist">

<?php

wp_list_comments(array('type' => 'comment', 'callback' => 'wp_get_comment')); /*funzione che visualizza i commenti se presenti: functions.php */

?>

</ol>

<?php else : ?>

<div>

<div>

<p>

Non è stato inserito ancora nessun commento. Inizia tu!

</p>

</div>

</div>

<?php endif;

?>
<!-- successivamente inseriamo il form per inserire i nuovi commenti: -->

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<div >Inserisci un commento</div>

<?php if ( $user_ID ) : //visualizza il nome utente se si è registrati  ?>

<div class='loggato'><?php printf(__('Sei loggato come <a href="%1$s">%2$s</a>.', 'dominioDiTraduzione'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out da questo account', 'dominioDiTraduzione'); ?>"><?php _e('Log out &raquo;', 'dominioDiTraduzione'); ?></a></div>

<?php endif; ?>

<?php if ( !$user_ID ) :  //input per gli utenti non registrati(tutti)    ?>

<div>

<label   class="label-contatti" for="author">Nome <?php if ($req) _e(" (*)", 'dominioDiTraduzione'); ?></label>

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" /> <div class="clear"></div>

<label class="label-contatti" for="url">Sito Web</label>

<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="4" />

</div>

<label  for="email">Mail <?php if ($req) _e(" (*)", 'dominioDiTraduzione'); ?></label>

<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="3" />

</div>

<?php endif; ?>

<div class="clear"></div>

<label for="url">Inserisci un commento</label>

<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="1"></textarea>

<input name="submit" type="submit" id="submit" tabindex="5" value="Inserisci" />

<div class="clear"></div>

<?php comment_id_fields(); ?>

<?php do_action('comment_form', $post->ID); ?>

</form>

Da questo momento il nostro template per inserire i commenti
è pronto. Ora basta solamente applicare un po’ di stile.

Proseguiamo aprendo il file functions.php del nostro tema e andiamo ad inserire la funzione per visualizzare i commenti in questo modo:


//funzione per visualizzare i commenti:

function wp_get_comment($comment, $args, $depth) {

$GLOBALS['comment'] = $comment;

?>

<div id="comment-<?php comment_ID(); ?>">

<?php if ($comment->comment_approved == '0') : ?>

<em class="moderation">Il tuo commento è in moderazione.</em>

<?php endif; ?>

<div><strong><?php echo $comment->comment_author; ?></strong> -

<?php

/* translators: 1: date, 2: time */

printf(__('%1$s alle %2$s', 'dominioDiTraduzione'), get_comment_date(), get_comment_time()); /*data e ora del commento */

?><?php edit_comment_link(__('(Modifica)', 'dominioDiTraduzione'), ' '); /* permette la modifica del commento all'autore */

?>

</div>

<div><p><?php comment_text(); //il contenuto ?></p>

</div>

</div>

<div>

<a name="respond" ></a>

<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))); ?>

</div>

<?php

}

?>

Anche qui, applicare stile a piacere.

A questo punto qualcuno potrebbe dire: “Stiamo scoprendo l’acqua calda in questo modo. Online è pieno di cose del genere!”. E invece no, perché la parte interessante arriva adesso: evitiamo di far visualizzare la decisamente poco user friendly pagina di WordPress per comunicare agli utenti l’avvenuto inserimento del commento o uno stato di errore.

Istruzioni per l’uso

Il primo passo è creare un file javascript che andremo a includere dinamicamente nella pagina dove dobbiamo gestire i commenti.

All’interno del nostro functions.php, possiamo far capire a WP, attraverso le funzioni descritte di seguito, che vogliamo includere dei CSS o dei javascript custom:


wp_register_script('gestioneCommenti', TH_TEMPLATE_URL . '/js/gestCommenti.js', array(), '1.0', TRUE);

Vediamo i parametri nel dettaglio

  • Il primo è ‘gestioneCommenti’ è una stringa e sarà il nome del nostro script;
  • il secondo è composto da una costante ( TH_TEMPLATE_URL ) definita all’inizio del file functions.php in questo modo:
     defined(TH_TEMPLATE_URL) or define ('TH_TEMPLATE_URL',get_bloginfo('template_url')); 

    che, come suggerisce il nome, è il path assoluto del sito WP;

  • il terzo parametro è un array con le eventuali dipendenze dello script che stiamo includendo. Dal momento che in questo caso non ci sono dipendenze viene passato un array vuoto;
  • il quarto parametro  è una stringa. E’ la versione dello script da aggiungere. Può risultare comodo quando ci troviamo ad operare con fastidiose configurazioni di Apache o per forzare il browser a scaricare sempre l’ultima versione del nostro javascript;
  • il quinto e ultimo parametro indica al core di WP dove vogliamo includere lo script. E’ un booleano e se lo settiamo a TRUE come in questo caso, il nostro javascript verrà incluso nel footer; se viene passato FALSE verrà incluso nel tag <head> del nostro tema.

A questo punto WP ha registrato il nostro script. Per completare l’inclusione basterà richiamare la funzione

 wp_enqueue_script('gestioneCommenti') 

Naturalmente andremo a chiamare la funzione wp_enqueue_script() per includere il nostro javascript solamente nella pagina dove sono abilitati i commenti. Ad esempio, se vogliamo includere  gestioneCommenti solamente nella pagina Home dovremo scrivere sempre all’interno del nostro functions.php:


<?php

function miei_script() {

…....

…....

wp_register_script('gestioneCommenti', TH_TEMPLATE_URL . '/js/gestCommenti.js', array(), '1.0', TRUE);

…..

…..

if(is_page('Home')){

wp_enqueue_script('gestioneCommenti');

}

}

add_action('wp_enqueue_scripts', 'miei_script');

?>

Di seguito la struttura del nostro file gestCommenti.js:

NB:

andremo ad operare come se stessimo utilizzando jQuery (http://jquery.com/) e il plugin blockUI (http://www.malsup.com/jquery/block/) inclusi.


jQuery(document).ready(function($){

var str='';

$('#IDdelform').submit(function(){

if(!emailCheck($('#IDcampoE-mail').val())){

return false;

}

if(!msg($('#richiesta-commenti').val())){

return false;

}

// altri controlli simili sui campi di testo obbligatori

return true;

});

if(window.location.href.match(/#comment-/)) {

str='Il tuo commento è stato inserito con successo! Grazie';

}

Dialog(str,'si');

}

});

function msg(messaggio){

if(messaggio.length<=0 || typeof(messaggio) === undefined){

Dialog('Tutti i campi sono obbligatori!');

return false;

}

return true;

}

function Dialog(str,reload){

$.blockUI.defaults.css = {};

$.blockUI({

css: {

//reset dei css base di blockUI

},

message:'<div style=”contenitore della modal”>'+str+'</div>',

onBlock:function(){

$('.blockOverlay').click(function(){

$.unblockUI(); //sblocca la pagina in caso di click sullo sfondo

});

//Naturalmente è possibile inserire altri eventi per sbloccare la pagina es: click su un elemento

},

onUnblock:function(){

if(reload=='si'){

window.location.hash="";

}

}

})

}

NB:

In caso di errore simile a: “TypeError: $ is not a function” vi basterà sostituire il $ con jQuery oppure molto più rapidamente all’inizio dello script javascript andando ad assegnare l’oggetto jQuery al $ in questo modo $=jQuery;

La funzione “emailCheck(e-mail)” non è presente in questo tutorial; in rete è pieno di esempi ed espressioni regolari per controllare la veridicità di un indirizzo e-mail.

     

Partecipa alla discussione

Non è stato inserito ancora nessun commento, inizia tu!