Nella continua ricerca di soluzioni per migliorare questo blog, sono arrivati ai commenti. Ovviamente non ricordo su quale blog ho visti dei commenti nidificati, ma il pensiero è stato il solito. Perchè non averli anche io?

Solita ricerchina sul web e ho trovato questo e questo che mi hanno permesso di procedere in modo abbastanza agevole, il risultato, direi che potete vederlo su questo blog… funziona ! Ma solo per le versioni di WordPress >= alla 2.7.

Come al solito ho trovato qualche problemino nel far funzionare il tutto come dicevo io unicamente con le informazioni trovate nei due siti citati sopra, ho dovuto sbatterci un attimo la testa sopra. Spero che le informazioni che darò in questo articolo, evitino un po’ di mal di testa a chi proverà a seguirle per ottenere il medesimo effetto.

Iniziamo con il file comments.php che troverete qui: root/wp-content/themes/nomevostrotheme/comments.php. Fatevi un backup del vecchio file, non si sa mai.

<?php // Do not delete these lines
	if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Per favore non caricare questa pagina direttamente. Grazie!');

	if ( post_password_required() ) { ?>
		<p class="nocomments"><?php _e('Questo post è protetto da una password. Inserisci la tua password per vedere i commenti', 'kubrick'); ?></p>
	<?php
		return;
	}
?>

<!-- You can start editing here. -->
<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php comments_number(__('Nessun commento', 'kubrick'), __('Un commento', 'kubrick'), __('% Commenti', 'kubrick'));?> <?php printf(__('per &#8220;%s&#8221;', 'kubrick'), the_title('', '', false)); ?></h3>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>

	<ol class="commentlist">
		<?php wp_list_comments('avatar_size=64&reply_text=Rispondi a questo commento'); ?>
	</ol>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>

 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments"><?php _e('I commenti sono chiusi.', 'kubrick'); ?></p>

	<?php endif; ?>
<?php endif; ?>

<?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h3><?php comment_form_title( __('<p>Lascia un commento</p>', 'kubrick'), __('<p>Lascia una commento per %s</p>' , 'kubrick') ); ?></h3>

<div id="cancel-comment-reply">
	<small><?php cancel_comment_reply_link('Cancella il commento') ?></small>
</div> 

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p><?php printf(__('Devi essere <a href="%s">connesso</a> per commentare.', 'kubrick'), get_option('siteurl') . '/wp-login.php?redirect_to=' . urlencode(get_permalink())); ?></p>
<?php else : ?>

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

<?php if ( $user_ID ) : ?>

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

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small><?php _e('Nome', 'kubrick'); ?> <?php if ($req) _e("(richiesto)", "kubrick"); ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small><?php _e('e-mail', 'kubrick'); ?> <?php if ($req) _e("(non sar&agrave; pubblicata - richiesta)", "kubrick"); ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small><?php _e('Sito Web', 'kubrick'); ?></small></label></p>

<?php endif; ?>

<!--<p><small><?php printf(__('<strong>XHTML:</strong> Puoi usare questi tag: <code>%s</code>', 'kubrick'), allowed_tags()); ?></small></p>-->

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

<p><input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e('', 'kubrick'); ?>" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; // if you delete this the sky will fall on your head ?>

Rispetto alle versioni fornite dai due siti già citati ho tradotto il tutto in italiano, ho fissato la grandezza dell’avatar a 64×64 pixel e cambiato Replica con Rispondi a questo commento (riga 22), infine ho modificato Cancella replica con Cancella il commento (riga 49).

Adesso bisogna aggiungere un po’ di classi al nostro style.css, lo troviamo nella stessa cartella di comments.php.

/* Commenti */

.thread-alt {
	background-color: #EEEEEE;
}

.thread-even {
	background-color: #FFFFFF;
}

.depth-1 {
	border: 1px solid #CC3300;
}

.even, .alt {
	border-left: 1px solid #CC3300;
}

.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.commentlist li ul li {
	font-size: 1em;
}

.commentlist li .avatar {
	float: left;
	border: 1px solid #CC3300;
	padding: 2px;
	margin-right: 10px;
	background: #fff;
}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	margin: 5px 5px 10px 0;
}

#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	margin: 5px 0;
}

.commentmetadata {
	font-weight: normal;
	margin: 0;
	display: block;
	font-size: 0.8em;
}

#commentform {
	margin: 5px 10px 0 0;
}

#commentform input {
	width: 150px;
	padding: 2px;
	margin: 5px 5px 1px 0;
}

#commentform textarea {
	width: 100%;
	padding: 2px;
}

#respond:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
}

.alt {
	margin: 0;
	padding: 10px;
}

.commentlist {
	padding: 0;
	text-align: justify;
}

.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;
	font-weight: bold;
}

.children { padding: 0; }

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}

Nella versione originale del css fornito c’era la ripetizione di alcune classi, che io ho accorpato, snellendolo un po’. Queste sono ovviamente le mie impostazioni, ma ci vuole poco a cambiarle, adesso guarderemo più nel dettaglio cosa fa ogni classe. Una piccola precisazione, alcune di queste classi erano già presenti nel nostro CSS, dato che già prima i commenti erano supportati. Per evitare conflitti dovremo eliminare le vecchie classi in favore di quelle fornite qui sopra, mi raccomando fate un backup anche del vecchio style.css. Le classi doppie sono:

.commentmetadata, .commentlist, e .commentlist li. Cancelliamole pure in favore delle nuove.

Adesso guardiamo nello specifico cosa fa ogni classe:

thread-alt : Gestisce lo sfondo dei post dispari

thread-even Gestisce lo sfondo dei post dispari pari

depth-1 Gestisce il bordo alto, destro e basso commenti

even, .alt Gestisce i bordo sinistri dei commenti e dei reply

commentlist cite, .commentlist cite a Indica la grandezza del nome di chi scrive, della parola scrive:, della data, di modifica, di rispondi e di cancella commento.

commentlist li ul li Indica la grandezza del nome di chi scrive, della parola scrive:, della data, di modifica, di rispondi e di cancella commento. Tutto ciò solo nel caso di un reply, non per i commenti.

commentlist li .avatar Setta la posizione, il bordo, il padding e margini dell’avatar

commentlist cite, .commentlist cite a Modifica le caratteristiche del nome di chi scrive il commento/reply

commentlist p Indica le caratteristiche del testo del commento

#commentform p Gestisce le caratteristiche del paragrafo “sei loggato come X. Log out >>”

commentmetadata Setta le caratteristiche della data del commento

#commentform Indica le caratteristiche del box per scrivere il commento

#commentform input assegna lo stile al pulsante “commenta”

#commentform textarea Indica le caratteristiche della textarea

#respond:after Setta le caratteristiche del box “rispondi al commento”

#commentform #submit Qui caratteristiche del pulsante per inviare il commento

alt assegna il colore alternato tra un commento e l’altro

commentlist Qui le caratteristiche della zona commenti

commentlist li Qua invece le caratteristiche dei singoli commenti

children Qui trovate le caratteristiche dei commenti annidati (reply)

nocomments Infine, le caratteristiche del box nel caso in cui non ci sono commenti

Una volta adattato tutto secondo le vostre esigenze, avete finito :-)

EDIT: Un ringraziamento particolare a Francesco Gavello per un paio di dritte sul CSS :-D

Interagisci con l'articolo !
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • MySpace
  • Print
  • Technorati
  • Twitter
  • Live
  • Wikio IT
  • email
  • Add to favorites
  • FriendFeed
  • RSS
  • LinkedIn
  • Tumblr

Articoli correlati