Intégrer un blog WordPress dans un site E-commerce Prestashop ;)

Formation à l'E-commerce avec Prestashop et au blog avec WordPress
L'E-commerce avec Prestashop et WordPress

Bien que le sujet a déjà était traité à de nombreuses reprises sur le Web, certains d’entre nous doutent encore de l’intérêt d’un blog couplé à une boutique E-commerce ou à un site Internet vitrine…Pourtant les bénéfices à en tirer sont nombreux :

  • Génère une audience plus importante.
  • Améliore significativement le référencement naturel.
  • Développe la notoriété de l’entreprise via la diffusion d’informations.
  • Permet d’aller à la rencontre des clients.
  • Permet de prendre connaissance des besoins et attentes du marché via la relation client au travers de l’écoute, du dialogue, de l’échange et du feedback.
  • Véhicule une image dynamique et professionnelle qui valorise l’expertise de l’entreprise.
  • Induit une veille sur le domaine d’activité assurée par l’entreprise et par les contributeurs du blog.
  • Crée de l’émulation et participe au développement de la culture d’entreprise.

Je vous invite d’ailleurs à lire à cet effet Les 10 commandements du blogueur ou encore cet excellent article Est-il intéressant pour un e-commerçant de bloguer ?

Passons à présent à l’objet de ce billet, a savoir l’intégration « sauvage » d’un blog WordPress dans une boutique Prestashop à la façon de Prestashelp. Pour info, Ve-blog en est une parfaite illustration.

Attention ne fonctionne pas avec Prestashop 1.5

(Voir la nouvelle méthode)

L’opération consiste à remplacer le header ainsi que le footer du blog WordPress par celui de la boutique Prestashop. Et ensuite à harmoniser le thème du blog à celui de la boutique via les styles CSS.

Avant de commencer, il est vivement recommandé d’effectuer une sauvegarde de la boutique Prestashop (base de données et fichiers sources). Juste au cas où.

Ne pas oublier de désactiver le cache Smarty et de forcer la compilation dans le back office Prestashop sans quoi les modifications apportées n’apparaîtront pas forcément.

Intégrer WordPress dans Prestashop

  1. 1 – On installe le blog WordPress sur l’hébergement Web. Par exemple, dans un dossier blog créé à cette occasion : http://www.monsite.com/blog. Important, lors de l’installation de WordPress, il faut spécifier la même base de données que celle de Prestashop sans quoi des problèmes d’affichage du sideBar WordPress sont susceptibles de se produire. Pour télécharger WordPress, c’est ici et  pour des infos sur l’installation WordPress, c’est làIci, la boutique est installé à la racine du site.
  1. 2 – On remplace le header WordPress par celui de Prestashop. Pour cela, on ouvre le fichier header.php du thème WordPress (un thème basique tel que TwentyTen est conseillé pour simplifier la mise à jour ultérieure des CSS) et on y place le code suivant (en début de page) :

<?php
// On inclut l’environnement Prestashop
require_once(dirname(__FILE__).’/../../../../config/config.inc.php’);
// On crée un objet par l’instanciation de la classe FrontController
$controller = new FrontController();
//La méthode displayHeader permet affiche le Header de Prestashop
$controller->displayHeader();
?>

  1. 3 – On remplace le footer de WordPress par celui de Prestashop. Pour cela, on ouvre le fichier footer.php du thème WordPress et on y place le code suivant :

<?php
require_once(dirname(__FILE__).’/../../../../config/config.inc.php’);
$controller = new FrontController();
$controller->displayFooter();
?>

Et voilà, le tour est joué ! Plutôt simple, non ? Enfin, reste le plus ennuyeux : modifier le fichier style.css du thème WordPress pour l’adapter au thème Prestashop afin d’assurer l’harmonie graphique et la cohérence visuelle de l’ensemble. Au besoin, on peut s’aider de l’utilitaire Firebug pour repérer plus rapidement les styles CSS à modifier. Et oui, ne pas oublier de faire un lien de la boutique vers le blog. Et puis encore d’animer à présent le blog.

En conclusion :

Cette méthode n’est certainement pas la plus aboutie et les puristes pourraient bien en avoir une attaque néanmoins elle a le mérite d’être gratuite, rapide, facile à mettre en œuvre et cela fonctionne plus que bien. De plus, il s’agit là d’une véritable intégration qui pour le coup est efficace pour le référencement contrairement à l’utilisation d’iframe dans un CMS Prestashop. D’autres façons de procéder plus élaborées sont envisageables, toujours sur Prestashelp. Sinon, il existe également des addons payants.

Certains préfèreront faire l’inverse, c’est-à-dire intégrer Prestashop dans WordPress afin de bénéficier de templates plus séduisants et de fonctionnalités ou widgets (SEO, réseaux sociaux, captcha, …)  en plus grande quantité et surtout moins onéreux (la plupart sont gratuits). Toute contribution à ce sujet est la bienvenue. D’ici là, bon blog !!

Et pour ceux que cela intéressent notre formation E-commerce.

Intégrer un blog WordPress dans un site E-commerce Prestashop 😉
Votez pour ce billet !

23 thoughts on “Intégrer un blog WordPress dans un site E-commerce Prestashop ;)”

  1. bonjour,

    avec le théme twenty ten
    j’ai effacé ce que contenait header.php et remplacé par le code proposé
    displayHeader();
    ?>

    Mais quand je vais sur le site wordpress j’ai uniquement une page blanche

    pouvez vous m’aider ?

    1. Tout d’abord, comme indiqué dans le billet, je ne saurais que trop vous conseiller de faire une copie de vos fichiers avant d’entreprendre de les modifier.

      Là, il est difficile de me prononcer… La solution présentée a été testé avec Prestashop 1.4.7 et WordPress
      3.3.2.

      Peut-être une erreur sur le chemin d’accès au fichier config.inc.php au niveau require_once(dirname(__FILE__)… ? ou du code effacé par mégarde ?

      Au pire des cas, se procurer le thème modifié et récupérer le header.php afin de recommencer la manip.

      En vous souhaitant toute toute la réussite !!

  2. Bonjour,

    Après plusieurs tentative ,sur mon blog d’essai
    http://www.mediateurnumerique.com/blog/
    apparait le message d’erreur

    Warning: require_once(/homez.323/mediateuz/www/blog/wp-content/themes/twentyten/../../../../PS/config/config.inc.php) [function.require-once]: failed to open stream: No such file or directory in /homez.323/mediateuz/www/blog/wp-content/themes/twentyten/header.php on line 113

    Fatal error: require_once() [function.require]: Failed opening required ‘/homez.323/mediateuz/www/blog/wp-content/themes/twentyten/../../../../PS/config/config.inc.php’ (include_path=’.:/usr/local/lib/php’) in /homez.323/mediateuz/www/blog/wp-content/themes/twentyten/header.php on line 113

    j’utilise prestashop 1.5

    merci de votre aide

    1. Déception, cette méthode ne fonctionne pas avec la version 1.5 de Prestashop. J’ai également la page blanche… Je publierai une solution dès que j’ai du temps à y consacrer !

  3. Bonsoir

    Je n’ai peut être pas bien compris, mais votre titre me semble faux, en effet cette méthode est selon moi une intégration de prestashop dans wordpress et non pas le contraire !
    c’est bien l’environnement de prestashop que l’on charge dans le header de wordpress.

    Ensuite j’ai beau chercher je n’arrive pas à comprendre pourquoi la méthode ne fonctionne pas avec la version 1.5 de prestashop.

    Pour ma part, je n’ai pas une page vide, mais une redirection, si j’appel :
    http://www.ve-studio.net/blog le navigateur me renvoie vers http://localhost/prestashop/index.php?

    Si quelqu’un a une idée, elle est bienvenue…

    1. Bonjour,

      Visuellement, on a l’impression que c’est WordPress qui est intégré dans la boutique Prestashop et non l’inverse d’où ce titre. Après, il est vrai que votre remarque est pertinente. Tout est là, une question d’interprétation.

      Pour ce qui est de la redirection ??? Etrange…

      Dans tous les cas, je compte migrer Ve-studio.net vers la version 1.5 de Prestashop, une fois que celle-ci sera stable et il me faudra bien trouver une solution pour le blog. Je ne manquerai pas de vous en faire part… à moins qu’un bon samaritain ne se manifeste avant !!

  4. Bonjour

    merci pour ce développement et votre article. N’ayant pas beaucoup de connaissance je n’arrive pas à comprendre pourquoi la manipulation fonctionne en localhost tandis qu’en ligne je perds ma colonne de droite et mon footer. Mystère, mystère… Merci

  5. Bonjour
    Merci pour cette méthode. Par contre, je trouve certaines de mes images référencées sur le Net et cela ne tombe pas sur une page bien intégrée. Est-ce normal ?

    1. Oui, certaines des images référencées renvoient vers des pages qui ne sont pas forcément bien intégrées ! Alors qu’à l’inverse, pour d’autres images référencées, les pages s’affichent correctement. Je n’ai pas d’explications… A défaut, je me dis que cela renvoie sur le blog, ce qui en soit est déjà un bon début.

      1. Merci pour votre réponse.
        J’ai mixé avec d’autres méthodes d’intégration (dans l’index au lieu du header et du footer) puis j’ai nettoyé et là j’ai l’impression que cela fonctionne. Toujours dans la même idée. Merci en tout cas, c’est simplissime et cela fonctionne bien pour 99% des pages.

        1. Très jolie votre boutique ! Sobre, design, épurée. classe…

          Et si à tout hasard, vous avez le n° de téléphone de l’une ces charmantes demoiselles, je suis preneur 😉

  6. Bonjour,

    Je voulais savoir si vous parvenez bien à faire cette modification avec Prestashop 1.6 ? Ca a parfaitement bien fonctionné avec la 1.5.6 mais après l’update, le blog ne s’affiche plus. C’est pareil pour vous aussi ?

  7. Bonjour et merci pour le tutoriel !

    Avec la dernière version de PS (1.6) et de WP (4.1), j’ai inexorablement une page blanche 🙁

    Auriez vous à tout hasard une mise à jour ?

    Vraiment merci beaucoup par avance !
    Sébastien

    1. Bonjour, certainement un problème de redirection. Dans le fichier de config, autorisez l’affichage des erreurs ce qui vous permettra d’en savoir un peu plus sur la nature de l’erreur.

      1. Bonjour et merci pour votre réponse !
        Je viens d’aller sur /config/defines.inc. en mettant toutes les données à true :
        /* Debug only */
        if (!defined(‘_PS_MODE_DEV_’))
        define(‘_PS_MODE_DEV_’, true);
        /* Compatibility warning */
        define(‘_PS_DISPLAY_COMPATIBILITY_WARNING_’, true);
        if (_PS_MODE_DEV_)

        Mais toujours la page blanche sans affichage des erreurs, doit toucher autre chose sur le fichier ?

        Merci par avance

        1. Ah si, ca yest, le message d’erreur apparaît maintenant !

          Uh-oh, something went wrong! Error Code: 500

          Qu’en pensez-vous ?
          Merci et cordialement
          Sébastien

          1. L’erreur 500 correspond à une erreur « serveur » donc pour ma part je resterai sur un pb de redirection. Voir aussi peut être du côté du .htaccess ou de la réecriture d’URL. Bon courage…

  8. Merci pour votre retour rapide !

    Mais je crois que je m’avoue vaincu et vais capituler en acheter clé en main un blog module prestashop.

    Merci encore et bonne journée !
    Sébastien

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *