Plugin WordPress – Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire



Très rapidement lorsque on est titulaire d’un blog sous WordPress ou sur un autre système de publication, on souhaite mettre avant le contenu que l’on poste avec la plus grande aisance possible. Naturellement, il existe de nombreux plugins qui permettent de, mettre en avant, souligner vos liens, vos interventions dans les commentaires afin de faciliter la lecture des articles et l’interaction avec vos lecteurs.

La mise en avant de votre contenu

On a donc sélectionné un assortiment de plugin tout simple qui permettent de rehausser la lisibilité de votre contenu en appuyant de manière assez classique et discrète votre contenu qu’il soit article ou commentaire.

Les plugins selectionnés se répartissent en 2 types :

  • Les plugins de mise en avant des commentaires (comment highlight). La fonction de ce plugin consiste à souligner vos interventions dans les commentaires des utilisateurs notamment vos réponses éventuelles à leurs questions.
  • Les plugins de gestion de lien extérieur (external link) dont la fonction est d’indiquer à votre lecteur la nature du lien au sein du texte d’un article.

Ces deux changements qui lient contenu et webdesign peuvent sembler à priori dérisoires mais il apporte une aide intuitive dans la compréhension de votre contenu par les lecteurs de votre blog.

Les plugins de mise en avant des commentaires (comment highlight)

Nous avons sélectionné 2 plugins qui rendent ce genre de service, cela consiste à souligner automatiquement les interventions émanant de l’administrateur du blog, c’est à dire vous !

Highlight Author Comments

C’est le plugin le plus complet. Il permet de souligner vos interventions sur les commentaires notamment.
La configuration du plugin
Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Le résultat sur les commentaires de l’admin
Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Source : http://wordpress.org/extend/plugins/highlight-author-comments/

BM Comment Highlight

La mise en place est complexe pour un résultat pas toujours garanti… Si vous ne souhaitez pas mettre les mains dans le code, mieux vaut s’abstenir ! Ce plugin soulignera pas seulement les réponses de l’administateur, vous pouvez souligner les commentaires de chaque type d’utilisateur via la CSS de votre thème.

A ajouter dans le fichier comments.php de votre thème dans wp-content/themes/le_nom_de_votre-theme/comments.php

		<!-- <ol class="commentlist"> -->
		<?php // wp_list_comments(); ?>
		<!-- </ol> -->
 
	<ol class="commentlist">
		<?php foreach ( $comments as $comment ) { 
				$commentClass = bm_commentHighlight(); ?>
				<li class="<?php echo $commentClass; ?>">
				<?php comment_text(); ?>
				</li>
			<?php } ?>
	</ol>

A ajouter à la feuille de style de votre thème dans wp-content/themes/le_nom_de_votre-theme/style.css

/* comment style */
.user { 
font-weight:normal;
color: #000;
}
.reader {
	font-weight:italic;
	color: #000;
}
.author { 
	font-weight:bold;
	color: #FF6600;
	}

Avant…
Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Après… Bien sur cet après demanderai un peu plus de styling CSS !!
Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Source : http://wordpress.org/extend/plugins/bm-comment-highlight/

Les plugins de gestion de lien extérieur (external link)

Pour cette mise en avant, c’est au départ un très bon plugin qui existe sur DorClear nommé Hreflang Manager v.1, l’outil de gestion de blog francophone. On a donc cherché un équivalent sur Worpdress ce qui n’a pas été difficile à trouver.

Le plugin Hunk External Links

Un souci sur Internet Explorer, le disposition de l’icone à proximté du lien laisse souvant à désirer….

L’installation et la configuration du plugin sur votre blog WordPress
Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Un article avec des liens extérieurs
Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Le plugin Hunk External Links

Ce petit artifice peut toutefois être mis en place sans l’aide d’un plugin, ce qui vous donnera une meilleur maitrise dans l’affichage ou dans l’utilisation que vous souhaitez du marquage des liens vers l’extérieur de votre blog. Si vous souhaitez par exemple signifier la langue à l’aide d’un drapeau…

Voilà rapidement la marche à suivre, il vous faut modifier en conséquence la feuille de style de votre thème et appeler la bonne classe lorsque vous faites un lien et le tour est joué !

 
 
		/* Global
		-------------------------------------------------------- */
		html { overflow-y: scroll; }
		body {
			width: 922px;
			margin: 0 auto;
			font: 12px/24px "Lucida Grande", "Helvetica Neue", Arial, sans-serif;
			position: relative;
		}
		a:link    { color: #FF6600; text-decoration: underline; }
		a:visited { color: #FF6600; text-decoration: none; }
		a:active, a:focus, a:hover   { color: #667788; text-decoration: none; }
 
	/* ==== to be continued ...  */
 
		/* Post-Content: #wrapper #main #content .post .post-content
		-------------------------------------------------------- */
		.post-content { overflow: hidden; }
		.post-content ul {
			margin: 0 0 12px 0;
		}	
 
		.post-content a[hreflang]:after { content: "000a0[" attr(hreflang) "]"; font-size: 10px; }
		.post-content a.external { padding: 5px 13px 5px 0; background: transparent url(img/external.gif) no-repeat center right; } 
 
 
	/* ==== to be continued ...  */
 
 
		/* counter-increment - 1st time I hear about that was here http://mezzoblue.com/archives/2006/11/01/counter_intu/ */
		.post-content ol {
			counter-reset: i;
			|list-style: decimal inside;
		}
		.post-content ol li { counter-increment: i; }
		.post-content ol li:before { content: counter(i, decimal) ")000a0"; color: #814cd6; }
		.post-content ul li { list-style: none; background: url(img/square_8a48d9.png) no-repeat 0 10px; text-indent: 10px; }
		.post-content blockquote {
			border: 10px solid #EBEBEB;
			border-width: 0 0 0 6px;
			padding: 4px 0 4px 10px;
			font-style: italic;
		}
 
		/* ==== to be continued ...  */
<p>
	Aujourd&rsquo;hui la cr&eacute;ation de site web, de mani&egrave;re professionnelle, se r&eacute;duit le plus souvent au <b>dilemme suivant</b> dans sa r&eacute;alisation :
		<ul>
			<li>Soit le site est d&eacute;velopp&eacute; <code><em>from scratch *</em></code> &agrave; l&#x27;aide de pr&eacute;f&eacute;rence d&#x27;un Framework dans un langage connu tel que PHP, Python, Ruby ou Perl.
				Pour PHP, citons  <a hreflang="en" title="Zend Framework. En anglais" href="http://www.symfony-project.org/" class="external">Symfony</a>, <a hreflang="en" title="Zend Framework. En anglais" href="http://framework.zend.com/" class="external">Zend</a>, <a hreflang="en" title="Zend Framework. En anlais" href="http://codeigniter.com/" class="external">Code Igniter</a>, <a hreflang="en" title="Zend Framework. En anglais" href="http://www.kohanaphp.com/" class="external">Kohana</a>
				Pour Perl, citons <a hreflang="en" title="Catalyst - Web Framework. En anglais" href="http://www.catalystframework.org/" class="external">Catalyst</a>
				Pour Python, citons <a hreflang="en" title="Django | The Web framework for perfectionists with deadlines. En anglais" href="http://www.djangoproject.com/" class="external">Django</a>
				Pour Ruby, citons <a hreflang="en" title="Ruby on Rails. En anglais" href="http://www.rubyonrails.org/" class="external">Ruby on Rails</a></li>
			<li>Soit le site s&#x27;appuie sur un CMS existant : <a hreflang="en" title="WordPress | A semantic personal publishing platform with a focus on aesthetics, web standards, and usability. En anglais" href="http://www.wordpress.org/" class="external">WordPress</a>, <a hreflang="en" title="Drupal | Official homepage of the open source content management system. En anglais" href="http://www.drupal.org/" class="external">Drupal</a> , <a hreflang="en" title="Joomla! - the dynamic portal engine and content management system. En anglais" href="http://www.joomla.org/" class="external">Joomla!</a>, <a hreflang="en" title="CMS Made Simple - the open source content management system for the rest of us. En anglais" href="http://www.cmsmadesimple.com/" class="external">CMS Made Simple</a> </li>
		</ul>
 
		Hormis cela point de salut !
 
	<em>* de z&eacute;ro, d&#x27;une feuille blanche...</em>
 
</p>

Le résultat produit par cette manipulation dans la CSS
Plugin WordPress - Rehausser le contenu de votre blog et mettre en avant vos réponses en commentaire

Pour aller plus loin