Laisser un commentaire

4 façons d'avoir plusieurs pages de blog avec WordPress

Wordpress est un super moteur de blog, mieux, il est même un CMS complet. La preuve ? Il propulse la grande majorité des blogs auto-hébergés (bien devant drupal, joomla etc) et est derrière des centaines millions de sites : blogs, sites d’information, sites vitrines, ecommerces…

Cependant, 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 (oui les tondeuses ça change de l’informatique pour l’exemple !).

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, allez jetez un oeil dans votre base de données pour récupérer les ID correspondants à ces catégories. Ils sont stockés dans la table wp_terms. Si vous y accédez par PhpMyAdmin, un petit coup de ctrl (cmd pour mac) + f vous donnera un bon coup de main pour trouver la catégorie souhaitée. Par exemple, si je cherche la catégorie What’s Up On Da Web, son slug est whats-up-on-da-web et son ID 6 (c’est uniquement chez moi).

Cette fois vous pouvez ouvrir votre… index.php. C’est bien, vous m’écoutez ! 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 :

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

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 live.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=-6');.

En effet, cette ligne signifie “n’affiche pas le ou les articles dont je te donne le/les id de la/les catégories (en l’occurrence 6)”, mais 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 bien 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.

Note : tout dépend de la manière dont est fait votre thème. En ce qui me concerne, j’avais une gestion du cas où la loop ne trouve pas de contenu. C’est à dire qu’avant le :

<?php while(have_posts()) : the_post(); ?>

J’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).

Note : 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 (donc ne faites pas la boulette de l’enlever aussi de votre index.php, c’est juste pour votre nouvelle page on est bien d’accord).

Let the magic happen

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

En revanche, si vous avez une page blanche ou une erreur, vous avez peut-être une ancienne version de Wordpress. Dans ce cas, je vous conseille très fortement de faire une mise à jour (pour des considérations évidentes de sécurité). Néanmoins, dans les anciennes versions, pour pouvoir lancer la loop d’une autre page que la page de blog “normale”, il faut ajouter ces deux lignes au début de votre live.php :

<?php
define('WP_USE_THEMES', false);
require('./wp-load.php');
?>

Ça devrait maintenant marcher !

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=whats-up-on-da-web&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(); ?>

Notez qu’il vous faut placer dans ce bout de code le slug de votre catégorie, ici whats-up-on-da-web.

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 propre 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 le CMS spécialisé Prestashop (il y a aussi Magento ou Oscommerce d’assez populaires), mais ces CMS sont justement assez mauvais dans la gestion de contenu éditorial. Ils excellent pour éditer les fiches produits, regorgent de fonctionnalité pour analyser les données de vente mais ne sont pas capables d’écrire des articles de blogs ou même des pages rédactionnelles avec beaucoup de contenu.

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 blog ! Cependant, si vous préférez n’avoir qu’une seule base et une seule interface d’administration, passez directement à la troisième approche. Bon, attaquons !

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 raconter votre vie (au secours !). 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 blog normal !!). Vous pouvez aussi supprimer les fichiers contenus dans /wp-content/uploads. Une fois ceci fait, accédez à ce nouveau blog (il est disponible à l’url www.mon-blog.fr/life). Wordpress va vous demander de le configurer comme un nouveau blog (mais c’est un nouveau blog !). 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 blog le même thème que votre blog 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 blogs, et donner l’illusion qu’il s’agit d’un seul et même blog. 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 blog).

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">Blog</a></li>
<li><a href="/life">Life</a></li>
</ul>

“Blog” étant ici votre page de blog d’accueil et “life” amène à votre “second blog” maintenant intégré comme si les deux n’en faisaient plus qu’un seul. 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 et expliquer votre blog 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 blog. Je vais me baser sur twentyten mais cette manipulation vaut aussi pour twentyseven, et 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 blogs” pour 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 point, comme les deux blogs 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. C’était cool n’est-ce pas ?! Laissez-moi savoir ce que vous pensez de ce petit tuto. Ou dites moi simplement merci, ce sera sympa, j’ai mis un moment à l’écrire -_-‘ !

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
```