Magazine High tech

10 hacks Wordpress pour vous simplifier la vie

Publié le 30 août 2008 par Ekevin

Ceci est une traduction de l’article 10 WordPress Hacks to Make your Life Easy

Afficher les gravatars dans les commentaires

Pour rafraîchir votre mémoire, les Gravatars sont des petites images pour les utilisateurs venant du site Gravatar.com. Les gravatars sont disposés contre les commentaires dans le thème (si le thème est construit pour supporter les gravatars). Beaucoup de thèmes WordPress sont conçus sans l’intégrer. Voici une aide qui vous permettra de l’intégrer vous-même dans votre thème. Ouvrez le fichier comments.php à l’aide de l’éditeur de thème et trouvez cette partie de code :

<?php comment_text() ?>

Remplacez le code ci-dessus avec le code suivant :

<div class="gravs">
<?php if (get_bloginfo(’version’)>=2.5)
echo get_avatar( $comment->comment_author_email, $size = ‘50′, $comment->comment_author_link);?>
<?php comment_text() ?>
</div>
<br clear=”all” />

Le code ci-dessus affichera les gravatars. Ajoutons un peu de CSS dans le fichier style.css de votre thème :

.gravs {margin-top:20px;}
.avatar {float:left; margin-right:5px; margin-bottom:5px; padding:3px; border:1px solid #999999;}

Vous devriez voir maintenant les gravatars à côté de vos commentaires.

10 hacks Wordpress pour vous simplifier la vie

Galerie d’images dans WordPress

Toutes les versions supérieures à WordPress 2.5 sont construites avec une gallerie d’images où vous pouvez transférer vos images et les insérer soit dans vos pages ou dans vos articles.

Mais la plupart des vieux thèmes (avant 2.5) et beaucoup de nouveaux n’intégrent pas cette fonctionnalité. Voici comment ajouter cette fonction.

Dans votre thème courant, ouvrez single.php et sauvez le sous image.php, toujours dans le même répertoire. Maintenant ouvrez ce fichier avec un éditeur et cherchez la ligne qui affiche le contenu. Ce devrait être quelque chose de ce genre. Il se peut que cette partie diffère mais la fonction est appellé the_content comme suit :

<?php the_content('Read More'); ?>

Insérer maintenant ce code au-dessus de the_content.

<p class="attachment">
<a href=”<?php echo wp_get_attachment_url($post->ID); ?>”><?php echo wp_get_attachment_image( $post->ID, ‘medium’ ); ?></a>
</p>
<div class=”caption”>
<?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the “caption” ?>

</div>

Et le code suivant après la fonction the_content.

<div class="imgnav">
<div class=”imgleft”><?php previous_image_link() ?></div>
<div class=”imgright”><?php next_image_link() ?></div>
</div>
<br clear=”all” />

Ajoutons ce CSS dans votre fichier style.css :

/****************Image Gallery *********************/
.gallery {text-align:center;}
.gallery img {padding:2px; height:100px; width:100px;}
.gallery a:hover {background-color:#ffffff;}
.attachment {text-align:center;}
.attachment img { padding:2px; border:1px solid #999999;}
.attachment a:hover {background-color:#FFFFFF;}
.imgnav {text-align:center;}
.imgleft {float:left;}

.imgleft a:hover {background-color:#FFFFFF;}
.imgleft img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
.imgright {float:right;}
.imgright a:hover {background-color:#FFFFFF;}
.imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}

Le code ci-dessus fixe la galerie par défaut de Wordpress qui n’apparaît pas de façon esthétique. Maintenent vous pouvez insérer vos images dans vos articles et pages, allez dans les options de la gallerie (après avoir transférer toutes vos photos) et insérez la galerie dans un article/page. C’est tout!

Ajoutez le lien souscrivez au flux en bas de chaque article

10 hacks Wordpress pour vous simplifier la vie

Beaucoup de personnes utilisent ce type de message pour aider à souscrire les lecteurs de leur blog. Ils le placent en général à la fin de chaque post. Nous pouvons le réaliser avec un plugin ou en faisant comme suit. Si vous voulez que le message apparaise en-dessous de chaque article en page d’accueil, ouvrez index.php et insérez après la fin du content (the_content) ces lignes :

<div style="padding:5px; border:1px solid #999999; margin-top:10px; background-color:#FFF8AF;">
Souscrivez à mon flux RSS
</div>

Vous pouvez faire la même chose pour single.php, pour l’afficher sur chaque post.

Affichez les messages Twitter sur votre blog

10 hacks Wordpress pour vous simplifier la vie

Si vous avez un compte Twitter.com et que vous voulez afficher les messages Twitter, voici ce qu’il faut faire.

Loggez-vous à votre compte Twitter. Ensuite allez à cette adresse :
http://twitter.com/badges/html et choisissez vos paramètres. Copiez le code et collez-le dans votre blog. Vous pouvez le coller directement dans le thème ou utiliser le widget text pour le mettre dans votre sidebar. Vous pouvez aussi le styliser grâce au CSS.

Afficher la bio de l’auteur

Dans un blog multi-utilisateur, il peut être bénéfique de montrer la bio de l’auteur en dessous de chaque post, afin que le lecteur ait des informations de l’auteur du post. Pour le faire il faut renseigner les informations biographiques dans votre profile dans la section utilisateurs de WordPress.

Pour intégrer cette bio, ouverez single.php et ajoutez sous la ligne the_content line ce bout de code :

<div class="author">
<?php the_author_description(); ?>
</div>

Maintenant ajoutez ce code CSS dans style.css :

.author{
color: #222222;
font-family: Arial;
font-size: 12px;
border:1px solid #CCCCCC;
width: 500px;
padding: 5px;
margin-top:10px;
margin-bottom:10px;

}

Maintenant en rafraîchissant un de vos posts vous devriez voir les informations de l’auteur en-dessous du post.

Liste déroulante des catégories

Pour ajouter une jolie liste déroulante qui listera toutes les catégories existantes, ajoutez le code suivant dans votre template. Vous pouvez le faire dans votre sidebar.php file ou n’importe où dans index.php.

<form action="<?php bloginfo('url'); ?>/" method="get">
<?php
$select = wp_dropdown_categories(’show_option_none=Select category&show_count=1&orderby=name&echo=0′);
$select = preg_replace(”#<select([^>]*)>#”, “<select$1 onchange=’return this.form.submit()’>”, $select);

echo $select;
?>
<noscript><input type=”submit” value=”View” /></noscript>
</form>

Liste déroulante des archives

Comme pour les catégories, nous aurons une liste déroulante affichant les archives par mois.

<select name=\"archive-dropdown\" onChange='document.location.href=this.options[this.selectedIndex].value;’>
<option value=\”\”><?php echo attribute_escape(__(’Select Month’)); ?></option>
<?php wp_get_archives(’type=monthly&format=option&show_post_count=1′); ?> </select>

Publicité 125 x 125 dans votre sidebar

Beaucoup de monde ne sait pas comment intégrer une bannière publicitaire de 125 sur 125 dans le thème de sa sidebar. Voici l’explication. Enregistrer l’image suivante sur votre ordinateur.

10 hacks Wordpress pour vous simplifier la vie

Créez un dossier “ads” dans le répertoire de votre thème (le thème dans lequel vous souhaitez afficher les bannières) et placez cette image (125.gif) dans ce dossier. Maintenant ajoutez ce code dans votre sidebar, où vous saihaitez que la bannière apparaisse.

<div class="bannerads">
<div class=”ad_125×125″><a href=”#”><img src=”<?php bloginfo(’template_directory’); ?>/ads/125×125.gif” border=”0″ alt=”Advertising” /></a></div>
<div class=”ad_125×125″><a href=”#”><img src=”<?php bloginfo(’template_directory’); ?>/ads/125×125.gif” border=”0″ alt=”Advertising” /></a></div>

</div><!– bannerads –>
<br clear=”all” />

Enfin, ajoutons un peu de CSS dans notre fichier style.css.

.bannerads {width:270px; margin:10px auto;}
.ad_125×125 {float:left; margin:0px 5px 10px 5px; width:125px; height:125px;}

En rafraîchissant votre thème, vous devriez voir deux bannières de 125 x 125 dans votre sidebar. Vous pouvez changez les images et le liens comme il vous plaîra.

Afficher les articles les plus populaires

Il est toujours intéressant pour les bloggueur de montrer les articles les plus populaires ou ceux avec le plus de commentaire. Voici comment faire.

Placez le code suivant à la fin de votre fichier header.php. Vous pouvez changer le nombre d’articles populaire en changeant la variables $no_posts dans le code.

<?php function most_popular_posts($no_posts = 5, $before = '<li>', $after = '</li>', $show_pass_post = false, $duration='') {
global $wpdb;
$request = “SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS ‘comment_count’ FROM $wpdb->posts, $wpdb->comments”;
$request .= ” WHERE comment_approved = ‘1′ AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = ‘publish’”;

if(!$show_pass_post) $request .= ” AND post_password =””;
if($duration !=”") { $request .= ” AND DATE_SUB(CURDATE(),INTERVAL “.$duration.” DAY) < post_date “;
}
$request .= ” GROUP BY $wpdb->comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts”;
$posts = $wpdb->get_results($request);

$output = ”;
if ($posts) {
foreach ($posts as $post) {
$post_title = stripslashes($post->post_title);
$comment_count = $post->comment_count;

$permalink = get_permalink($post->ID);
$output .= $before . ‘<a href=”‘ . $permalink . ‘” title=”‘ . $post_title.’”>’ . $post_title . ‘</a> (’ . $comment_count.’)’ . $after;
}
} else {

$output .= $before . “None found” . $after;
}
echo $output;
} ?>

Maintenant, où vous souhaitez afficher la liste des articles populaires, ajoutez le code ci-dessous. Vous pouvez le faire dans la sidebar ou dans index.php.

<?php most_popular_posts(); ?>

Ajoutez un bouton imprimer à vos articles

10 hacks Wordpress pour vous simplifier la vie

Pour permettre à vos utilisateurs d’imprimer vos articles, nous pouvons ajouter un bouton imprimer dans votre blog. Ouvrez single.php et ajoutez le code suivant, où vous voulez avoir l’option imprimer.

<a href="javascript:window.print()">Imprimer cet article</a>

J’espère que vous aurez aimé ces hacks pour Wordpress et qu’ils faciliteront votre vie.


Retour à La Une de Logo Paperblog

A propos de l’auteur


Ekevin 5 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog