8 hacks pour le thème Twenty Eleven de WordPress

Twenty Eleven est le thème WordPress par défaut pour 2011. Il remplace Twenty Ten et nous propose un code en HTML5 / CSS3 et les dernières innovations en matière de SEO. Retrouvez une compilation des meilleures astuces qui lui sont consacrées.

#1 – Utiliser un child theme pour Twenty Eleven

Cette astuce doit être perçue comme un pré-requis à la mise en œuvre des points suivants de cette liste. Appliquer des changements directement dans le code source d’un thème n’est pas très judicieux dans la mesure où vous perdrez toutes modifications à la première mise à jour du thème.

C’est pourquoi, il convient de créer un child theme qui abritera vos modifications tout en autorisant les mises à jour du thème de base – en l’occurrence le Twenty Eleven.

Reportez-vous donc au tutoriel Créer des thèmes enfants (child themes) avec WordPress et copiez / collez les lignes de code suivantes pour le point 3 :

/*
Theme Name: Nom du thème enfant
Theme URI: URL du site
Description: Une description du thème
Author: Votre nom
Template: twentyeleven

*/
@import url('../twentyeleven/style.css');

#2 – Ajouter une pagination avec WP-PageNavi

Cette technique va nous permettre d’appliquer une pagination numérotée basée sur l’incontournable plugin WP-PageNavi.

Pour ce faire, suivez les instructions de cet excellent tutoriel : http://zeaks.org/easily-add-wp-pagenavi-to-twenty-eleven/

#3 – Ajouter une sidebar sur toutes les pages du site

Par défaut, seule la page d’accueil du thème dispose d’une sidebar (colonne latérale). Or, de nombreux blogs ont besoin d’afficher des informations sur l’ensemble des pages de leurs sites – aussi bien les pages statiques que celles affichant les articles.

Rendez-vous sur ce tutoriel : http://zeaks.org/add-sidebar-to-post-view-in-twenty-eleven-theme/

#4 – Activer des options supplémentaires pour Twenty Eleven

Twenty Eleven Theme Extensions est un plugin spécifiquement conçu pour ajouter les fonctionnalités suivantes au thème :

  • Ajouter une sidebar sur toutes les pages ;
  • Centrer la navigation supérieure dans les pages d’articles ;
  • Changer la taille par défaut de la bannière d’en-tête ;
  • Ajouter votre propre feuille de styles personnalisée directement depuis le back office de WordPress ;

Ceci n’est qu’un aperçu des nombreuses options supplémentaires qu’ajoute ce plugin. A tester pour éviter d’avoir à passer par le code !

Twenty Eleven Theme Extensions

Plugin ajoutant des options supplémentaires pour le thème Twenty Eleven de WordPress.

Taille : 19, 9 KiB  •  Date : 17 août 2011 •  Hits : 3 714

#5 – Changer la taille de la bannière d’en-tête

Pour cette modification, 2 possibilités : avoir recours à un plugin ou utiliser un hack PHP.

Pour la première solution, optez pour le module Resize Twenty Eleven Header :

Resize Twenty Eleven Header

Plugin permettant de redimensionner facilement l'en-tête du thème Twenty Eleven.

Taille : 48, 5 KiB  •  Date : 17 août 2011 •  Hits : 2 099

Pour la seconde solution, modifiez le fichier functions.php du thème enfant puis ajoutez les lignes suivantes :

// Ajoute un filtre de taille en largeur et en hauteur pour Twenty Eleven
    define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) );
    define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 280) );

Remplacez les valeurs 1000 et 280 par les valeurs en pixels de votre choix.

#6 – Afficher uniquement les extraits d’articles sur la page d’accueil

Par défaut, le thème Twenty Eleven se comporte comme un thème de blog. Autrement dit, l’intégralité du contenu d’un article est visible en page d’accueil. Si vous souhaitez restreindre ce dernier à son extrait, éditez le fichier content.php – dans le cadre de l’utilisation d’un thème enfant, il convient de dupliquer ce fichier au préalable dans le dossier enfant.

Recherchez ensuite les lignes suivantes :

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div>
    <?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div>
    <?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyeleven' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>

Remplacez celles-ci par :

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div>
    <?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div>
    <?php the_excerpt( __( 'Continue reading <span>&rarr;</span>', 'twentyeleven' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>

Notez que des variantes sont disponibles sur le forum de WordPress.org.

#7 – Contrôler la longueur de l’extrait des articles

Pour limiter le nombre de caractères présents dans l’extrait et ainsi obtenir des blocs d’articles homogènes en hauteur, reportez-vous au tutoriel sur Définir une longueur d’extrait personnalisée des articles sous WordPress. Préférez le deuxième bout de code ou le recours à un plugin supplémentaire.

Pour info, le fichier functions.php du thème Twenty Eleven redéfinit cette longueur d’extrait à 40. Il est également indiqué qu’il est possible de surpasser cette valeur en utilisant un thème enfant. Toutefois, malgré mes nombreuses tentatives je n’y parviens toujours pas. Je pense que le problème tient au fait que je n’utilise pas la balise more.

#8 – Ajouter des miniatures d’articles

Le thème Twenty Eleven n’affiche aucune miniature sur la page d’accueil alors même qu’il s’agit d’un fonction incluse dans WordPress depuis pas mal de temps maintenant. Pour en bénéficier, modifiez le fichier content.php puis ajoutez la ligne suivante :

            <?php echo get_the_post_thumbnail($id, 'thumbnail', array('class' => 'alignleft')); ?>

Celle-ci doit être placée juste avant :

            <?php the_excerpt( __( 'Continue reading <span>&rarr;</span>', 'twentyeleven' ) ); ?>

Comme vous pouvez le constater, nous avons appliqué une classe CSS alignleft qui cale l’image sur la gauche. Le thème disposant de son équivalent alignright pour un placement à droite, libre à vous de modifier cette dernière.

Et vous amis lecteurs, connaissez-vous d’autres hacks pour cet excellent thème qu’est Twenty Eleven ? Sachez que la prochaine version de WordPress Channel sera basée en grande partie sur ce dernier…