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
Le résultat sur les commentaires de l’admin
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…
Après… Bien sur cet après demanderai un peu plus de styling CSS !!
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
Un article avec des liens extérieurs
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’hui la création de site web, de manière professionnelle, se réduit le plus souvent au <b>dilemme suivant</b> dans sa réalisation : <ul> <li>Soit le site est développé <code><em>from scratch *</em></code> à l'aide de préférence d'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'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éro, d'une feuille blanche...</em> </p> |
Le résultat produit par cette manipulation dans la CSS
Pour aller plus loin
- Highlight Author Comments
http://wordpress.org/extend/plugins/highlight-author-comments/ - BM Comment Highlight
http://wordpress.org/extend/plugins/bm-comment-highlight/ - Plugin Dotclear : Hreflang Manager v.1, un plugin intéressant pour l’outil de gestion francophone dotClear
http://www.babylon-design.com/site/index.php/2006/11/03/154-plugin-dotclear-hreflang-manager-v1 - Highlighting External Links within WordPress
http://blog-well.com/2008/07/06/highlighting-external-links-within-wordpress/ - Hunk External Links
http://wordpress.org/extend/plugins/hunk-external-links/ - Le tag
highlightdes plugins WordPress, vous aurez à tous les plugins qui permettront de rehausser votre contenu
http://wordpress.org/extend/plugins/tags/highlight
