Site communautaire d'aide à la création de site e-commerce avec 
Coupler Prestashop et WordPress. Chap-1: Les grands principes
18 avril 2011 par Integration avec Wordpress
Chap-1: Les grands principes
Salut, cette série d'article sur l'intégration de Prestashop dans WordPress a un double objectif. D'abord, dans une optique personnelle, de documenter mon travail, mais également dans une perspective communautaire, de le mettre à disposition pour d'autres qui souhaitent comme moi coupler WordPress et Prestashop pour ajouter un blog a un site e-commerce.
Pourquoi intégrer un blog sur un site e-commerce?
L'intérêt d'un blog pour une boutique a fait l'objet de nombreux articles sur le net et n'est plus à démontrer. Il est évident que n'importe quel e-commerçant a tout à gagner à intégrer un blog dans son site. Passons rapidement en revue les principaux points.
D'un point de vue technique tout d'abord, le blog est un excellent complément dans une stratégie globale de référencement. Il permet d'avoir un contenu mis à jour fréquemment et riche en mots clés pertinents, éléments dont les moteurs de recherches sont friands. Il permet également d'améliorer le page rank interne du site en augmentant le nombre de liens pointant vers la page principale. D'un point de vue backlinks par ailleurs, un blog est un excellent levier pour en gagner facilement : publications sur des réseaux sociaux, blogs dédiés, etc….
D'un point de vue stratégie marketing et relations clients, le blog est un excellent moyen de préparer le lancement d'un site en attirant et fidélisant des futurs clients. Puis une fois le site lancé, il permet entre autre de tisser une relation de proximité et de confiance entre vendeur et client.
Cette liste d'avantages est loin d'être exhaustive, d'autres articles bien plus fouillés sont disponibles!
Objectif et mise en place du couplage WordPress-Prestashop
Très concrètement, les objectifs de cette intégration sont les suivants.
1) En termes de design
Pouvoir mettre en ligne une boutique en ligne et blog avec une structure commune, sans utiliser de frames. Fusionner les header, footer et sidebar afin de conserver les hooks de chacun des CMS et avoir par exemple un menu commun dans le header.
Par ailleurs, la communauté WordPress met à disposition de nombreux thèmes au design très aboutis, ce qui permet, une fois Prestashop et WordPress fusionné, de pallier la relative pauvreté de l'offre gratuite de beaux thèmes pour Prestashop.
2) En termes de référencement
Il s'agit d'exploiter les indéniables avantages de WordPress pour le SEO : gestion des tags,permalinks, trackbacks, nombreuses extensions d'optimisation du référencement disponibles gratuitement, etc.
La boutique, installée sur le même domaine, bénéficie donc d'une visibilité accrue.
3) En termes d'ajout de fonctionnalités
WordPress dispose aujourd'hui d'une bibliothèque de milliers de widgets gratuits et extrêmement performants : diaporamas, modules sociaux, menus déroulants,… Avec Buddypress, il est maintenant possible de créer un véritable réseau social sur son blog.
Grands principes de l'intégration WordPress-Prestashop
En première approche, il s'agit donc de travailler d'une part sur les aspects développements pour permettre aux environnements php des deux environnement de cohabiter, et d'autre part sur les aspects de design d'avoir des feuilles CSS communes et de conserver les hooks de chaques CMS.
Installation :
Télécharger les deux solutions et les installer à la racine du serveur après avoir créé les bases de données.
Principes de l'intégration
Cette intégration consiste à inclure les hooks Prestashop dans les blocks de la structure wordpress. C'est un parti pris. Nous aurions tout à fait pu faire l'inverse, c'est à dire prendre comme structure d'accueil Prestashop et y inclure des hooks WordPress.
L'intégration se fait ensuite en deux étapes :
1) Identifier les fichiers utilisés par WordPress pour constuire chaque page et les modifier pour y inclure les hooks wordpress
2) Une fois ces nouveaux blocks communs à Prestashop et WordPress, il faut modifier les pages Prestashop pour leur permettre d'afficher cette structure.
Première étape : identification et modification des principaux fichiers du thème Wordpress
Pour fonctionner, WordPress appelle les fichiers de configuration et la template active située dans le repertoire wordpress\wp-content\themes\[nom du theme actif]
Pour le couplage wordpress-prestashop, il ne faut modifier que les fichiers du thème actif de wordpress.
Pour ma part, j'utilise le thème de base twentyten. Voici son fichier index.php.
<?php get_header(); ?> <div id="container"> <div id="content" role="main"> <?php /* Run the loop to output the posts. * If you want to overload this in a child theme then include a file * called loop-index.php and that will be used instead. */ get_template_part( 'loop', 'index' ); ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>
L'index utilise des fonction get_xxxxxx(), équivalentes à des INCLUDE, pour appeler la structure :header, le footer et la sidebar du blog.
Par exemple, pour inclure les hooks Prestashop dans le header WordPress, il faut charger y l'environnement Prestashop : Classes, constantes, etc… gràce au fichier de configuration config.inc.php, puis appeler le header par une instanciation de la classe FrontController() qui contient tous les hooks à afficher. cf code ci-dessous :
<?php /** Loads the PRESTASHOP ENVIRONNEMENT */ require_once($_SERVER["DOCUMENT_ROOT"].'shop/config/config.inc.php'); /** Loads the PRESTASHOP HEADER */ $controller = new FrontController(); $controller->displayHeader(); ?>
Deuxième étape : Identification et modification des pages Prestashop pour afficher le nouveau thème WP + Prestashop
Prenons par exemple le fichier contact-form.php de Prestashop, qui permet d'afficher le formulaire de contact.
Voici son code d'origine, avant l'intégration avec WordPress :
<?php
require(dirname(__FILE__).'/config/config.inc.php');
ControllerFactory::getController('ContactController')->run();
Il faut tout d'abord modifier la fonction run() de la classe FrontController.php de Prestashop pour desactiver le header et le footer : public function run() dont voici le code modifié :
{
$this->init();
$this->preProcess();
$this->setMedia();
// Header Prestashop géré dans header wordpress
//$this->displayHeader();
$this->process();
$this->displayContent();
//Footer Prestashop géré dans Footer WordPress
//$this->displayFooter();
}
Comme pour Prestashop, WordPress a un fichier de configuration principal, qui permet de charger son environnement : wp-load.php. Avant d'inclure les fonctions d'inclusion (get_xxxxx()) de la structure WP, il faut charger ce fichier wp-load.php.
Voici le code de contact-form.php modifié, qui s'intégre maintenant dans la structure wordpress.
<?php
//PRESTASHOP ENVIRONMENT
require_once('\config\config.inc.php');
/* WORDPRESS ENVIRONMENT AND STRUCTURE */
require_once('C:\wamp\www\wordpress\wp-load.php');
get_header();//Header WP modifié qui contient les hooks Prestashop
?>
<div id="container">
<div id="content" role="main">
<?php /* PRESTASHOP FUNCTION */
//permet d'utiliser la méthode run() de l'objet Contactcontroller (qui est une instanciation de FrontController)
ControllerFactory::getController('ContactController')->run();
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar();//colonne WP modifiée qui contient les hooks Prestashop?>
<?php get_footer();// footer WP modifié qui contient les hooks Prestashop
/* END OF WORDPRESS STRUCTURE */?>
Voilà pour les grandes lignes de l'intégration de Prestashop dans WordPress.
Il manque évidemment de nombreuses étapes; la fusion des feuilles CSS notamment ainsi que le chargement des CSS et javascript spécifiques à WP et Prestashop.
Dans le prochain article, j'aborderai plus en détails l'intégration du header et du footer Prestashop dans WordPress avec un thème d'exemple.
Vos commentaires sont les bienvenus en attendant!
A++
Articles liés :
- Mécanique d’affichage de Prestashop Dans cet article, j'ai entrepris d'expliquer simplement la mécanique d'affichage...
- Structure CSS du thème Prestashop Dans le précédent article, j'ai donné une vue d'ensemble de...
- Prestashop dans WordPress ou WordPress dans Prestashop? L'intégration des...
