Pour ses sept ans, Afrimag s’offre un site sur WordPress !

Pour son septième anniversaire, le site d’information économique “Afrimag” s’est offert un site sous WordPress, que j’ai réalisé en collaboration avec Webartis, qui s’est chargée de l’intégration et de l’hébergement, pendant que je mettais les mains dans le code.
Réalisé sur une base de Sahifa, le site met à disposition gratuitement ses articles, un mois après la parution en kiosque. Des évolutions sont prévues, tant au niveau de la monétisation que du contenu, les “bases” sont là dans la structure de données, mais la mise en place se fera dans quelques mois, le temps que le client maîtrise son nouvel outil.
Un magazine africain, basé au Maroc

Anthioumane Tandia, le fondateur d’Afrimag
Bien qu’il soit aussi disponible en kiosque en France, Afrimag est surtout distribué en Afrique francophone (Maroc, Mauritanie , Sénegal, Mali, Côte d’Ivoire).
Son fondateur, Anthioumane D.Tandia, est mauritanien. Il vient au Maroc pour faire ses études d’économie, et y reste. Il commence sa carrière professionnelle comme analyste en salle de marchés, puis devient journaliste à la Gazette du Maroc. Trois ans plus tard, il fait partie des créateurs de Challenge Hebdo. Au bout de quelques années, il quitte le magazine pour diriger Conjoncture, la revue de la Chambre Française de Commerce et d’Industrie au Maroc. Enfin, en Mai 2007, il lance Afrimag.
Son objectif ?
Combler un manque avec une information centrée sur le développement économique de l’Afrique
A ce moment-là, l’économie bouge énormément au Maroc. Le pays a une grosse pépinière d’entreprise, contrairement à de nombreux autres pays africains (à mon avis, seuls le Kenya et l’Afrique du Sud sont au même niveau), et surtout, il favorise ses marchés externes et se positionne comme un centre régional.
Afrimag se veut une interface entre les opérateurs économiques, informe sur la réalité des marchés africains. Il travaille, sur certains numéros, en coopération avec des acteurs nationaux, comme la Belgique (un dossier spécial Belgique réalisé avec l’Association Wallonne pour l’export, au tout début, ou le soutien du forum Mauritanides qui se tient en ce moment).
Le défi ? Accroitre son audience en passant au numérique
Nous avions donc un client qui a une véritable crédibilité, et une longue histoire “papier” (soixante quatorze numéros, dont un certain nombre sont mis en ligne rétroactivement), mais pas d’expérience du numérique. Même s’il se trouve sur le même créneau que les cahiers économiques de Slate Afrique ou Jeune Afrique, ceux-ci sont avant tout des sites généralistes. Côté magazines strictement économiques, la concurrence est plus faible.
C’est un secteur ou le duplicate content est roi !
Il a donc été décidé d’avoir une stratégie en plusieurs étapes :
- mise en ligne du magazine papier, avec un décalage d’un mois pour ne pas cannibaliser l’édition papier. L’édition numérique est entièrement gratuite
- puis création de contenus spécifiques à l’édition numérique
- puis monétisation de certains contenus, soit sous forme d’abonnement ou de vente de contenus spécifiques
Côté technique, la rédaction du magazine doit découvrir les codes de la rédaction web, différents de la rédaction papier.
La base : le thème Sahifa
Sahifa est un thème distribué par ThemForest. Cela fait partie des “thèmes à options” que je n’aime pas trop, mais il a l’avantage d’avoir une structure magazine claire, et d’être très personnalisable. Il est livré avec de nombreux widgets pour la monétisation. Il fait partie des thèmes très vendus, avec plus de 11.000 ventes.
Un thème difficile à personnaliser proprement

Sahifa, un thème de TieLabs sur ThemeForest
En revanche, côté “mains dans le cambouis”, je ne vous le recommande pas : Sahifa est un thème envahissant, qui remplace beaucoup de fonctions du core par les siennes. Il est donc assez difficile à customiser proprement. Nous avons bien sûr fait un thème enfant, mais nous avons dû faire quelques modifications dans Sahifa même, car il n’y avait pas d’autre alternative ; en particulier, Sahifa a la mauvaise idée d’utiliser des fonctions pour l’affichage des dates, au lieu de filtres.
Aparté technique : un filtre permet de remplacer une fonction WordPress par une autre. Par exemple, dans le cas de Sahifa, la fonction de récupération de la date du post tie_get_time() change le format d’affichage de la date, en fonction d’options. Bien. Mais elle est utilisée partout dans les templates.
Or, contrairement aux templates, dans le cas d’un thème enfant, les fonctions du thème parent sont chargées avant, et ne peuvent pas être modifiées.
Si on veut la modifier, on a le choix entre :
- modifier tous les templates dans le thème enfant (idiot, dans ce cas, la notion de thème enfant n’a plus de sens)
- hacker la fonction dans le core (ce que nous avons fait, en indiquant la ligne dans le “a propos” du fichier style.css, facile de s’en souvenir avant une mise à jour).
En utilisant un filtre, add_filter ( ‘the_date’, ‘tie_get_time’ ), il était très simple de modifier (“surcharger”) la fonction dans le thème enfant avec un remove_filter préalable, et en mettant ensuite notre propre thème.
Par ailleurs, pour sa gestion des sidebars et des bios auteurs, Sahifa désactive certaines fonctions de base de WordPress, ou les modifie, ce qui peut générer des incompatibilités avec des plugins.
Enfin, quelques erreurs, comme des fichiers .php qui ne commencent pas par <?php ont été remontées au développeur, car là aussi cela génère des problèmes.
Bref, pour résumer mon appréciation sur Sahifa :
- apparence (clarté, charge graphique, etc) : très bien
- facilité de prise en main pour l’utilisateur final : très bien
- qualité du code : moyen-bien
- “customisabilité” : mauvais
Les développements spécifiques pour Afrimag
La gestion au numéro

Widget numéro en cours
C’était le premier élément à mettre en place.
Le site est organisé autour de la notion de numéro en cours (déterminé dans une page d’option dans l’admin).
Les numéros sont identifiés via une custom taxonomie. En utilisant Taxonomy Metadata on rajoute à chaque numéro des informations, comme la date de publication et l’image de couverture.
Deux pages d’archives spéciales ont été faites :
- la liste de tous les numéros (fonction personnalisée, avec un shortcode)
- un “sommaire‘ de chaque numéro (archive de taxonomie)
Partout dans le site, la date des articles est remplacée par l’indication du numéro et de son mois de publication (fonction personnalisée, qui permettra d’afficher la “vraie date” pour les articles spécifiques au web, pour lesquels la taxonomie “numéro” ne sera pas renseignée), deux widgets présentent le numéro en cours dans le site et, en bas, le numéro dans les kiosque.
(Les pages d’abonnement sont aussi gérées dans les options du site : hardcoding is evil !)
Des custom taxonomies à la pelle
Pour un magazine centré sur une zone géographique, la géolocalisation est essentielle. Il était donc évident que nous allions créer une custom taxonomie pour les lieux.
Nous avons aussi scindé les mots clés en plusieurs “types” donc custom taxonomies, ce qui permettra, à terme, de faire des pages d’archives enrichies. Il y a déjà en footer un nuage de tag reprenant une de ces custom taxonomies.
Les catégories, elles, correspondent aux rubriques du magazine.
La custom taxonomy lieux
Elle est organisée de façon hiérarchique avec quelques contraintes :
- Le premier niveau correspond aux grandes régions africaines mais n’est pas utilisé dans les articles (par contre, en utilisant Intuitive Category Checklist, il permet de naviguer plus facilement dans la liste de pays)
- Le second niveau, c’est le pays. On y rattache plusieurs informations, dont le drapeau
- Un troisième niveau, optionnel, concerne les villes
- Dans un article donné, on sélectionne toujours le niveau le plus bas. Ainsi l’article sur le maire d’Akanda est rattaché uniquement à Libreville. et on essaye de ne pas sélectionner plusieurs éléments enfants d’un même parent (si un article concerne trois villes au Maroc, il est rattaché au Maroc)
Un travail sur l’affichage des custom taxonomies
Si on reprend l’exemple de cet article sur le maire d’Akanda, on voit donc ceci :

Screenshot d’un article Afrimag : présentation des taxonomies
En haut sous le titre de l’article, le numéro et son mois de publication, ensuite la catégorie.
Vient la taxonomie “lieux”, avec le drapeau du pays et la ville. Quand l’article est rattaché à un pays, le drapeau est cliquable. Sinon, il est là simplement comme marqueur visuel.
En bas, on a deux custom taxonomies, mais visuellement, elles sont mélangées. Là encore, une fonction personnalisée, pour regrouper tous les termes, et les trier par ordre alphabétique.
La gestion des auteurs
Chaque journaliste, ainsi que “la rédaction” a sa propre page. Dans les éléments d’identification, on a rajouté une fonction, et le lieu de travail. Ces éléments sont repris comme meta dans les articles, ce qui permet de générer automatiquement une signature de ce type :

Une signature d’article : un nom, une fonction, un lieu
La page “auteur” va être enrichie au fur et à mesure, avec une photo, une bio, des éléments de contact.
Une amélioration du marquage HTML
Enfin, d’une manière générale, on a amélioré le marquage HTML pour une meilleure optimisation on-site (notamment la hiérarchie des titres). Là encore, la structure de code de Sahifa, en particulier les sidebars optionnelles, pose problème. Mais bon…
Les évolutions sont “programmées”
Beaucoup de temps a été passé, dans le développement, à imaginer un futur possible. Par exemple, bien que le magazine soit aujourd’hui en français, tout les développements ont été faits avec des chaines en anglais, traduites via GetText, au cas où une version anglaise verrait le jour.
La gestion des numéros, des taxonomies, a été réfléchie dans l’optique d’une future monétisation.
Lorsque le site sera encore enrichi en contenu, et en contenu rédigé pour le web, les archives de taxonomies autres que les catégories et les numéros seront modifiées et mises en “do index”.
Pour finir, cela a été un vrai plaisir de faire avec Webartis ce site sur WordPress, au lieu de Spip, très répandu au Maroc, ou Joomla.
Assez intéressant, plutôt épuré tout en paraissant sophistiqué (et vice versa), c’est déjà pas mal. Moins ostentatoire que ses concurrents.
Ça me semblait une élégante alternative à Suffusion (que je songe à remplacer), mais ce que tu dis de Sahifa m’en dissuade illico. Merci de m’avoir évité des mois de galère. :D
Un oubli : pas de rubrique ou mention « Qui sommes-nous ? », « À propos » ou similaire.
Un doublon : la rubrique société apparaît deux fois.
Une erreur : « abonnez-vous » a perdu son trait d’union – vu que ça apparaît sur toutes les pages, autant le corriger une bonne fois pour toutes. ;)
Une idée que je retiens : ta technique pour afficher une vignette avant la balise more et une taille d’image plus grande dans la page article. Si un thème automatise ça sans se salir avec du cambouis numérique, ça m’intéresse.
Les traits d’union sont ma faiblesse :) :)
Les qui sommes-nous, contact et mentions légales sont cachés dans le menu du haut, on manque de place
Pour la rubrique société, c’est transmis à l’intégrateur ^^^
Pour les vignettes, en réalité il ne s’agit de vignettes sur le single.php mais d’images insérées à la main, pas toujours en haut de l’article. Tu peux automatiser avec des plugins qui permettent de récupérer automatiquement la première image comme image à la une, et désactiver l’affichage sur le single.php, beaucoup de thèmes le proposent en option.
Sahifa est très bien pour quelqu’un qui ne veut pas coder. Il a énormément d’options, de possibilités de personnalisations. Ici, nous sommes allés assez loin, il faudrait que tu ailles voir leurs docs et les options disponibles. Ne jamais oublier que mon avis est celui de quelqu’un qui met les mains dans le cambouis avec délices !
C’est toujours un plaisir de voir de nouveaux médias africains de qualité ! Félicitations à vous et longue vie sur le web.
Salut Marie Aude, beau boulot et sympa tes CPT !
L’abus de fonctions est effectivement un problème, en même temps Sahifa je connais bien et je l’aime bien ce thème.
Sur WPF j’ai principalement axé le travail sur de petites modifications CSS (logo, taille des polices…) mais j’ai surtout modifié les templates et les widgets pour éviter l’abus de “lire la suite”… Bon pas la meilleure option mais Sahifa a fait son temps chez moi et la V3 est en route alors…
Merci :)
C’est vrai que tu as aussi un Sahifa. Comme dit Philippe, “épuré mais pas trop”. Il est bien, effectivement, d’ailleurs je n’ai râlé que sur un aspect particulier. Tu as fais un thème enfant ou tu as modifié directement dans le code ? Changer les templates de widgets est souvent lourd, si on le fait proprement dans un child.
Non comme je te l’ai dit, j’ai beaucoup/bêtement bidouillé lors de l’optimisation SEO on-site et si je devais mettre à jour maintenant arghhhhhh, il faudrait que je compare les 2 versions (màj et thème en place). Je vais bientôt changer (j’ai presque trouvé le thème idéal ;) donc inutile de mettre en place le child sur mon sahifa…
Belle réalisation et magnifique exécution. Juste un point. Il n’auraient pas intérêt à placer un format “leaderboard” en 728×90 en header plutôt que le format “bannière” pour leur Adsense…? C’est mieux en terme d’intégration (si on adapte le logo à la même largeur), mais surtout pour le taux de clic.
J’ai juste une petite question concernant le site, un site WordPress comme celui de ce magazine Africain Vs un site, par exemple, WordPress de bas avec un thème pré-établi où tu rajoutes justes des plugin et c’est fait, est-ce que c’est une grosse différence en terme de réalisation? Car tu parles de ”Programmation” et du ”Codage” dans le site WordPress proprement dit, alors que personnellement outre pour changer la terminologie des plugins du Français à l’anglais, je n’ai jamais touché au code!
Bonsoir
je ne suis pas certaine de bien avoir compris la question. On peut bien sûr faire des sites WordPress uniquement en installant des plugins. Tout dépend des besoins du site. Ici, ça ne suffisait pas, et si on s’était orienté dans cette direction, cela aurait demandé un grand nombre de plugins, sans doute pas tous compatibles entre eux.
De plus, un certain nombre de choses doivent être modifiées dans l’affichage, ce qui implique bien de “coder” et de “programmer” (jamais dans WordPress même, mais dans un thème, enfant, et dans des plugins que tu fais toi-même).
Donc à la fin, oui, c’est une grosse différence.
Et accessoirement, je ne pense pas qu’on puisse optimiser un site pour le référencement sans mettre les mains dans le code.