Cheatsheet

4 façons d'avoir plusieurs pages de blog

Laisser un commentaire

Comme tout outil, WordPress a ses limites : il ne permet pas d’avoir plus d’une page de blog (comprendre page qui liste les articles ou posts).

Cette limitation est inhérente à l’architecture originelle de WordPress, qui n’est à la base qu’un simple moteur de blog. Mais nous l’avons dit, notre cher WordPress est aujourd’hui un vrai CMS et ses différents usages nécessitent de la souplesse. Voici donc quatre manières d’afficher plusieurs pages d’articles.

De la plus à l’arrache à la plus aboutie, ces différentes techniques ont chacune leurs particularités. Trois d’entre elles se différencient nettement par leur approche au niveau de la base de données, la première, qui est la plus facile à mettre en place, ne nécessite même pas de mettre les mains dans le cambouis (au détriment peut-être d’une certaine flexibilité).

Utilisation des catégories comme pages de blog

Cette technique est d’une simplicité incroyable mais elle reste extrêmement efficace. C’est la seule manière d’obtenir l’effet souhaité sans toucher au code.

Résumons la situation. Vous avez un blog et vous écrivez des articles dans différentes catégories. Vous voulez par exemple avoir une page avec vos articles techniques sur la programmation et une autre avec les articles qui traitent de l’actualité.

Autre cas, vous avez un e-commerce et vous avez plusieurs gammes de produits. Chaque produit correspond à un post et vous souhaitez qu’une page regroupe les tondeuses 2 temps tandis qu’une autre n’affiche que les tondeuses 4 temps.

Dans le menu de WordPress, il vous suffit de vous rendre dans Apparence > menus, puis d’ajouter à votre menu la catégorie 2 temps et la catégorie 4 temps (si votre thème le supporte).

Vous n’avez plus qu’à cocher les catégories correspondantes dans vos articles pour qu’ils se “rangent” automatiquement sur la bonne page !

La limite de cette technique est que votre page de blog principale affiche toujours l’ensemble de vos articles. Vous pouvez mettre une page statique en page d’accueil (ça se fait dans Réglages > lecture) et ne pas attribuer de page spécifique à votre page de blogs qui contient tous les articles. Virtuellement, elle sera inexistante.

Cette solution convient tout à fait pour une entreprise qui présente sa philosophie, son expertise ou son domaine d’activité en homepage par exemple. Mais il y a de nombreux cas où la page d’accueil doit être la page qui liste les articles : imaginez un magazine en ligne ou la page d’accueil ne regroupe pas les derniers articles parus ?! Dans ces cas là, il va falloir ouvrir votre éditeur de code !

Deux pages (ou plus) de blogs sur mesure

C’est une technique que j’utilise assez souvent. Vous n’avez qu’une seule interface d’administration, une seule base de données et vous n’ajoutez aucune table. Vous allez créer une ou plusieurs catégories et dire en quelque sorte à WordPress que pour ces catégories, vous voulez qu’il les affiche sur une autre page que celle de blog “normale”. Commençons !

Filtrons les catégories sur la homepage

Puisque certaines catégories seront affichées sur une page à part, il serait pas mal qu’elles ne s’affichent pas aussi sur la page de blog “normale”, non ? Pour ce faire, il va falloir ajouter un petit bout de code sur la page index.php de votre thème.

Pas d’empressement cependant ! Il va déjà falloir créer les catégories en question… Créez donc vos catégories puis déterminez-en les ID. Vous pouvez les trouver dans les url lorsque vous cliquez sur le nom d’une catégorie (…tag_ID=xx).

Cette fois vous pouvez ouvrir index.php. Ajoutez-y donc la ligne suivante – avant le début de la loop, soit le if(have_posts()) : – pour que cette catégorie ne s’affiche plus sur la page :

// Remplacez xx par votre id de catégorie
<?php query_posts($query_string . '&cat=-xx'); ?>

Au cas où vous voudriez exclure plusieurs catégories – admettons la catégorie ayant pour ID 8 en plus de la 6 – mettez une virgule puis -8. Comme ceci les amis :

<?php query_posts($query_string . '&cat=-6,-8'); ?>

Toi comprendre ? Bien, poursuivons !

Créons un template de page

Dans l’état actuel des choses, votre page de blog “index” n’affiche déjà plus les articles dont vous avez sélectionné les ID. Vous allez maintenant devoir créer un template pour votre nouvelle page de blog.

Créez donc un fichier, par exemple categorie-perso.php, et copiez-y tout le contenu du fichier index.php de votre thème. Attention, lorsque je dis tout le index.php, je parle du index.php avant modification, c’est à dire sans query_posts($query_string . '&cat=-xx');.

En effet, cette ligne signifie :

n’affiche pas le ou les articles dont je te donne le/les id de la/les catégories

Or c’est justement sur cette page que l’on voudra afficher ces articles, pensez donc à effacer cette ligne ! Il faut aussi ajouter un tag en haut du fichier PHP pour que WordPress comprenne qu’il s’agit d’un template. Rajoutez ce tag au début du fichier.

<?php /* Template Name: Live */ ?>

Enregistrez ce fichier et placez-le dans le répertoire de votre thème. Dirigez-vous maintenant dans votre interface d’administration, créez une nouvelle page, puis dans le panneau attribut de la page, choisissez le modèle de template que vous venez de créer.

Chaque thème est différent

Tout dépend de la manière dont est fait votre thème. J’avais dans mon thème une gestion du cas où la loop ne trouve pas de contenu. C’est à dire qu’avant le <?php while(have_posts()) : the_post(); ?> ; il y avais une condition qui venait vérifier qu’il y ait bien des posts à afficher.

<?php if (have_posts()) : ?>

Et après la fermeture de ma loop, qui correspond à :

<?php endwhile; ?>

J’avais ma condition qui venait afficher un message d’erreur plus le formulaire de recherche (seulement au cas où il n’y ait aucun article à afficher), comme ceci :

<?php else : ?>
<h2>Oooopppsss...</h2>
<p>Désolé, mais vous cherchez quelque chose qui ne se trouve pas ici .</p>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>

Tout ce petit monde provoquait des erreurs. J’ai donc viré la ligne du if have posts ainsi que le else suivant la fin de la boucle (ça correspond au deuxième et au dernier des quatre blocs de code ci-dessus).

Enlever cette gestion d’erreurs n’a aucun impact puisqu’on arrive à cette page en général à cause d’une mauvaise url où d’une recherche qui ne correspond à aucun contenu. Dans tous les cas, le index.php du thème s’en chargera.

Let the magic happen

Si vous vous rendez sur la nouvelle page créée, vous avez tous les articles, même ceux maintenant disparus de votre home. C’est que tout va bien.

Quoi qu’il en soit, avoir absolument tous nos articles sur cette page n’est vraiment pas le résultat voulu. On va donc dire à WordPress de n’afficher que les articles d’une catégorie donnée sur cette page. Pour cela, il faut lui adjoindre un autre morceau de code, que vous placerez juste avant la ligne du while (have_posts()) :, de la manière suivante :

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('category_name=ma-super-categorie&paged=$paged');
?>

// La ligne suivante, vous l'avez déjà, ne la mettez donc pas deux fois,
// il s'agit juste de placer le morceau ci-dessus avant la ligne qui suit
<?php while(have_posts()) : the_post(); ?>

Deux bases de données

Les deux techniques suivantes sont selon moi moins flexibles. Elles fonctionnent tout à fait et seront certainement adaptées à des situations précises mais me paraissent un peu moins propres dans leur logique.

Quoi qu’il en soit, la logique appliquée à ces deux approches est souvent utilisée pour offrir un espace de blog aux boutiques en lignes. Bien souvent les e-commerce reposent sur des CMS spécialisé (Prestashop ou Magento pa exemple) mais ces CMS sont justement assez mauvais dans la gestion de contenu éditorial.

Alors pour tricher, un WordPress est souvent mis en place avec la même charte graphique que le site de e-commerce, on place les bons liens dans le menu de l’un et de l’autre et voilà.

C’est un peu la méthode à la wanéguen ! Mais elle est parfaitement fonctionnelle et offre l’avantage (ou l’inconvénient) de totalement séparer les bases de données de chacune de vos pages de blog.

En réalité, vous aurez avec cette technique deux blogs distincts, donc deux interfaces d’administration (avantage ou inconvénient encore une fois, c’est selon les utilisations), mais d’un point de vue cosmétique, de design, vos visiteurs croiront que vous n’avez qu’un seul site. Cependant, si vous préférez n’avoir qu’une seule base et une seule interface d’administration, passez directement à la troisième approche.

Configurons le blog

Admettons que vous ayez déjà un blog sous WordPress sur votre hébergement, à l’adresse www.mon-blog.fr. Vous voulez ajouter une page de blog “life”. Pour cela, ajoutez un répertoire au dossier contenant votre site WordPress (à côté de wp-admin, wp-content etc). Ensuite, copiez-y tous les fichiers et dossiers de votre WordPress déjà existant.

arborescence hebergement WordPress

Une fois la copie terminée, supprimez le fichier wp-config ( /!\ celui contenu dans life, pas celui de votre site normal). Vous pouvez aussi supprimer les fichiers contenus dans /wp-content/uploads. Une fois ceci fait, accédez à ce nouveau site (il est disponible à l’url www.mon-blog.fr/life). WordPress va vous demander de le configurer comme un nouveau site. Fournissez lui donc toutes les infos qu’il demande au niveau de la base de données.

Adaptons le template

Une fois l’installation terminée, appliquez à ce nouveau site le même thème que votre site principal. Mis à part le contenu, les deux sont maintenant identiques. Il serait néanmoins quand même sympa d’avoir un onglet dans le menu de navigation pour pouvoir naviguer directement entre vos deux site. Il va pour cela falloir modifier un peu votre thème pour configurer le menu.

Avant de se plonger dans le code, si votre thème le supporte, vous pouvez faire cela directement depuis l’interface d’administration. Allez donc dans Apparence > menus, puis cliquez sur l’onglet lien. Vous pouvez ici ajouter un élément de menu pour le faire pointer vers le lien de votre choix (en l’occurrence l’adresse de votre second site).

Si par malchance, votre thème ne supporte pas cette fonctionnalité, vous allez devoir remonter vos manches. Dans le cas où vous n’avez pas de menu, il suffira de l’écrire en dur dans le header de votre thème :

<ul>
    <li><a href="http://www.mon-blog.fr">Home</a></li>
    <li><a href="/life">Life</a></li>
</ul>

“Home” étant ici votre page de d’accueil et “life” amène à votre “second site” maintenant intégré comme si les deux ne faisaient plus qu’un. Cependant, il est peu probable que vous n’ayez pas de menu, puisque vous avez certainement dû créer au moins une page pour vous présenter etc.

Il va donc falloir ajouter cette nouvelle catégorie au menu dynamique de WordPress. L’adaptation dépendra ici du thème que vous avez sur votre site. Je vais me baser sur twentyten mais cette manipulation devrait convenir à la plupart des thèmes.

La fonction WordPress permettant de générer automatiquement le menu correspond à cette ligne dans le fichier header du thème twentyten :

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

Elle génère le code html suivant :

<div class="menu"><ul><li class="current_page_item"><a href="http://www.mon-blog.fr/" title="Accueil">Accueil</a></li><li class="page_item page-item-643"><a href="/live/">Live</a></li><li class="page_item page-item-23"><a href="/a-propos/">A propos</a></li><li class="page_item page-item-91"><a href="/contact/">Contact</a></li></ul></div>

On pourrait vouloir simplement ajouter un lien avant la fonction wp_nav_menu, cependant, elle génère elle-même une liste (ul), on obtiendrait soit un lien hors de la liste, soit deux listes l’une contre l’autre et ce ne serait donc pas une solution propre. On va donc avoir recours à la fonction wp_list_pages. Nous allons remplacer la ligne wp_nav_menu, par ceci :

<div class="menu">
  <ul>
    <li><a href="http://www.mon-blog.fr">Blog</a></li>
    <li><a href="http://www.mon-blog.fr/life">Life</a></li>
    <?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
   </ul>
</div>

Nous avons donc ajouté plusieurs choses/

Note : vous trouverez toutes les informations concernant les fonctions wp_nav_menu et wp_list_pages dans le codex WordPress.

N’oubliez pas de mettre à jour le thème sur les deux installations afin que le tout soit cohérent. Enfin, dernière petite adaptation, dans le thème de “life”, modifiez le lien du logo pour qu’il pointe vers www.mon-blog.fr et non www.mon-blog.fr/live, sinon ça fait un peu bizarre.

Dernier détail, comme les deux sites ne partagent pas la même base de données, si dans votre sidebar vous avez des liens vers les catégories etc, ils seront différents sur chacune de vos pages de blog. Encore une fois, certains trouverons que c’est un avantage (contenu qui s’adapte en fonction de la page et du sujet), d’autres n’y trouveront pas leur compte…

Une seule base mais avec des tables différentes

Ça, ça va être très très rapide à expliquer. L’intérêt ici est que si vous n’avez pas d’autre base de données à votre disposition, vous pouvez tout à fait configurer plusieurs blogs avec une seule base de données. La technique est exactement la même que la précédente. Au moment de la configuration de WordPress, lorsque celui-ci vous demande le nom de votre BDD, le mot de passe etc, vous donnez les mêmes informations qu’avec votre blog déjà en fonctionnement (vous les retrouverez au besoin dans le fichier wp-admin), mais vous changez le préfixe des tables ! C’est aussi simple que cela. Roulez jeunesse !

Note : je vous conseille quand même de faire une sauvegarde de votre base de données avant d’y effectuer ce genre d’opérations, on n’est jamais trop prudent…

Voilà ! Nous avons fini de charcuter WordPress pour l’adapter à nos besoins.

Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```