Systèmes de Gestion de Contenu (CMS) PDF

Systèmes de Gestion de Contenu (CMS) Présentée par Dr. CHOUHAYEBI Hajar Année Universitaire : 2024-2025 PLAN 1. C’est quoi un CMS ? A quoi ca sert ? 1.1 Historique du Content Management Systems 1.2 Définition du CMS 1.3 Schéma de fonctionnement 1.4 Approche technique 1.5 Principales caractéristiques 1.6 Principaux CMS 2. Définition du WordPress 3. Installation et configuration du WordPress 4. Espace Administration Back end du WordPress 5. Prestashop 6. Conclusion C’est quoi un CMS ? A quoi ca sert ? Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.1 Historique du Content Management Systems Les débuts (1990-2000) : Les premiers sites web nécessitaient une programmation manuelle en HTML, ce qui limitait la création de sites web aux développeurs. Avec l’essor du web, le besoin d’outils simplifiant la gestion des sites s’est fait ressentir. Les premiers CMS sont apparus pour répondre à ce besoin :  1995 : Lancement de CNET’s Vignette (l’un des premiers logiciels de gestion de contenu).  1997 : Introduction de systèmes comme PHP-Nuke, qui posaient les bases des CMS modernes. Hajar CHOUHAYEBI 4 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.1 Historique du Content Management Systems L'ère des CMS open source (2000-2010) : Le développement des CMS a explosé avec l’apparition de projets open source :  2000 : Lancement de DotNetNuke et Movable Type.  2003 : Apparition de WordPress, qui est aujourd'hui le CMS le plus populaire au monde.  2005 : Lancement de Joomla (fork de Mambo) et Drupal, qui se sont imposés comme des concurrents majeurs. L'essor des CMS modernes (2010 à aujourd'hui) : Les CMS se sont adaptés aux besoins modernes : design responsive, SEO intégré, support des médias riches. L’augmentation de la popularité de WordPress, qui domine aujourd’hui environ 43% des sites web dans le monde. Les CMS sans tête (headless CMS) comme Strapi et Contentful ont émergé, permettant une gestion flexible des contenus pour plusieurs plateformes (sites web, applications mobiles, etc.). Hajar CHOUHAYEBI 5 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.2 Définition du CMS Les CMS - Content Management System sont une famille de logiciels destinés à la conception et à la mise à jour dynamique de site web ou d'application multimédia. Ils partagent les fonctionnalités suivantes : Ils permettent à plusieurs individus de mettre à jour une administration, où les utilisateurs sont définis par des rôles, avec des actions possibles. Ex : Un rôle « super admin » à tous les privilèges (création, édition, suppression) sur un article, un rôle « éditeur » ne peut pas créer mais seulement éditer un article, un simple utilisateur ne peut pas accéder à l'administration. Ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu des documents. On peut donc faire passer un article par plusieurs « états » : brouillon, non-publié puis publié. Ils permettent de séparer les opérations de gestion de la forme et du contenu : Système de Template, interface d'administration déjà prête. Ils permettent de structurer le contenu (de blogs, de forums de discussion, etc…) Hajar CHOUHAYEBI 6 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.2 Définition du CMS L'avantage principal d'un CMS est donc la rapidité du déploiement pour un site dynamique. C'est une solution « clef en main », adaptée pour tout type de projets. L'interface d'administration étant déjà faite (back office), il « ne reste plus » qu'à s'occuper du front office. Et encore, avec le système de templates, cette tache peut aussi être facilitée. L'inconvénient est donc la personnalisation. Il existe des templates tout fait, des widgets ou des plugins pour avoir plus de fonctionnalités. Il existe de nombreux CMS, avec chacun ses spécificités, type, avantages et inconvénients, adaptés aux projets, aux clients et aux développeurs à différents niveaux de compétences. Par exemple : Blog : Wordpress, Dotclear... Site : Joomla, Drupal … E-commerce : Prestashop, os-commerce … Etc.. Hajar CHOUHAYEBI 7 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.2 Définition du CMS Deux types de contenus sont généralement distingués : d'une part, les documents statiques (audio/vidéo, bureautiques, graphiques, etc.) stockés par les systèmes de fichiers (ce sont les contenus non structurés); d'autre part, les documents dynamiques (Web notamment) agençant des éléments (textes, images, etc.) en provenance d'une ou de plusieurs bases de données de l'entreprise (les contenus structurés). Hajar CHOUHAYEBI 8 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.3 Schéma de fonctionnement Hajar CHOUHAYEBI 5 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.4 Approche technique Les CMS fonctionnent avec deux parties :  une partie publique  Une partie administration Le langage dynamique (php par exemple) qu’ils utilisent permet aux utilisateurs de ce genre de programme de créer non seulement de l'interactivité et un genre de dynamisme avec le utilisateurs du site mais aussi de séparer le contenu (tout ce qui a rapport à la saisie, l’administration et le publication) du contenant (la structure du site formée de modèles de page, de modules, de fonctions,...). Les CMS se basent normalement sur l’utilisation de bases de données mais ce n'est pas une obligation, surtout pour les petits sites. Hajar CHOUHAYEBI 11 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.5 Principales caractéristiques Les principales caractéristiques d’un CMS sont la suivante: Un CMS permet la différentiation entre le design du site et son contenu, on peut donc modifier la forme sans toucher au fond ce qui ne nous oblige pas de recopier tous le contenu a chaque fois qu on veut changer le design du site. Cette notion permet aussi à chaque utilisateur du site d’avoir sa propre vue du site tout en fournissant à tous les utilisateurs le même contenu. Le fait que son contenu soit stocke dans une base de donnée à part de façon centrale permet le réutilisation de ces informations dans différents endroits du site, pour des technologies de navigateurs web différents et de les formater différemment à chaque fois. La base de données les plus utilisée est MySQL et le langage est le PHP car ils sont acceptés par tous les opérateurs en général. En plus, le fait d’utiliser des langages dynamiques permet la création de l’interactivité et du dynamisme du site. La production de contenu a partir des CMS est simple pour les utilisateurs n’ayant pas de grande connaissance en langage du Web, ceci grâce a son interface graphique permettant une gestion simplifiée du contenu. Hajar CHOUHAYEBI 12 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.5 Principales caractéristiques La maintenance du site est décentralisée ce qui veut dire que la zone d’administration du site est accessible depuis n’importe quel endroit connecte a internet. Les CMS présentent la possibilité de définition des droits d’accès aux utilisateurs, ce qui permet par exemple de restreindre l’accès au contenu ou a l’administration du site a des utilisateurs et on peut de même a plusieurs personne de gère notre site. En plus de ces caractéristiques le CMS offrent des sites qu’il suffit de paramétrer pour utiliser (=>prêt a emploi), un workflow comme précise dans l’introduction, la possibilité de délégation de la gestion, et l’utilisation des modèles pour la structure du site. Hajar CHOUHAYEBI 13 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1.6 Principaux CMS Les CMS libres ou open source ont beaucoup d’avantages comme on vient de le voir et leur intérêt est explique par leur succès. Il n'y a bien évidemment pas que des CMS open source. Certaines entreprises développent et commercialisent des produits qui peuvent présenter un intérêt. Les principaux CMS sur le marché sont aujourd’hui : WordPress Prestashop SPIP Mambo Typo3 Joomla PHP-Nuke NPDS daCode Xoops Evolution eZ publish Lou Portail MyPHP Nuke Cvidentia Portix-PHP PHPortal Zope XarayaDrupal Hajar CHOUHAYEBI 13 2024-2025 Définition du WordPress CMS Définition du Installation et WordPress configuration Espace Back end Prestashop Conclusion Le logiciel WordPress est gratuit. Il peut être téléchargé librement sur le site : https://fr.wordpress.org/download/ C’est est un système de gestion de contenu libre (open source) écrit en PHP et reposant sur une base de données MySQL. WordPress est surtout utilisé comme moteur de blog, mais ses fonctionnalités lui permettent également de gérer n'importe quel site Web, et c'est là l'avantage ! WordPress possède une communauté très forte qui est un avantage déterminant pour lui, et pour un CMS en général : C'est la communauté qui développe des plugins, des templates et peut aider chacun d’entre nous face à un problème…  WordPress est un logiciel libre  WordPress est simple d‟utilisation  Wordpress a une communauté forte : Plugins, thèmes, widgets, du gratuit au payant. Hajar CHOUHAYEBI 14 2024-2025 CMS Définition du Installation et WordPress configuration Espace Back end Prestashop Conclusion WordPress est généralement structuré de la manière suivante : un bloc d’en-tête a ; (il mentionne le plus souvent le titre du blog, qui est cliquable et permet d’accéder à la page d’accueil. Il accueille également souvent le menu principal.), une colonne b (réservée à l’affichage des contenus : articles, pages, listes de résultats, etc… ), une colonne c (appelée colonne latérale ou sidebar, est organisée sous forme de sections qu’il est possible de gérer depuis l’espace d’administration.), un pied de page d (accueille généralement des liens et des éléments communs tels qu’une mention de copyright ou une référence au moteur utilisé pour concevoir le blog (WordPress, dans le cas présent). Hajar CHOUHAYEBI 6 2024-2025 Installation et configuration Du WordPress Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration i. Première méthode: l'Installation de WordPress en local 1. Télécharger WordPress : Allez sur le site officiel de WordPress : wordpress.org. Cliquez sur le bouton "Download" pour télécharger la dernière version de WordPress au format.zip. 2. Télécharger XAMPP : Allez sur le site de XAMPP : apachefriends.org. Téléchargez la version de XAMPP adaptée à votre système d'exploitation (Windows, macOS ou Linux). 3. Installation de XAMPP : Une fois le fichier XAMPP téléchargé, double-cliquez sur le fichier pour commencer l'installation. Suivez les instructions à l'écran pour installer XAMPP sur votre machine. Hajar CHOUHAYEBI 17 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration i. Première méthode: l'Installation de WordPress en local 4. Lancer XAMPP : Après l'installation de XAMPP, ouvrez le Panneau de Contrôle XAMPP. Dans le panneau de contrôle, vous verrez plusieurs services. Cliquez sur Start à côté de Apache et MySQL pour les démarrer.  Apache est le serveur web qui exécutera votre site WordPress.  MySQL est le serveur de base de données nécessaire pour WordPress. Hajar CHOUHAYEBI 18 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration i. Première méthode: l'Installation de WordPress en local 5. Télécharger et installer WordPress : Une fois Apache et MySQL démarrés, ouvrez votre navigateur et tapez : http://localhost. Allez dans le répertoire où vous avez installé XAMPP, généralement dans le dossier htdocs (par exemple, C:\xampp\htdocs\). Décompressez le fichier WordPress téléchargé dans un nouveau dossier à l'intérieur de htdocs (par exemple, C:\xampp\htdocs\mon_site). Hajar CHOUHAYEBI 19 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration i. Première méthode: l'Installation de WordPress en local 6. Modifier le fichier wp-config-sample.php : Allez dans le dossier où vous avez décompressé WordPress (par exemple, C:\xampp\htdocs\mon_site). Ouvrez le fichier wp-config-sample.php avec un éditeur de texte (comme Notepad++ ou Sublime Text). Recherchez les lignes suivantes et remplacez-les par les informations de votre base de données que vous avez créées dans phpMyAdmin. Enregistrez les modifications dans ce fichier. Renommez le fichier en supprimant "sample" pour qu'il s'appelle wp-config.php. Vous pouvez le faire en cliquant droit sur le fichier, en choisissant "Renommer" et en modifiant le nom. Hajar CHOUHAYEBI 20 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration i. Première méthode: l'Installation de WordPress en local 7. Configurer la base de données pour WordPress : Ouvrez votre navigateur et allez à http://localhost/phpmyadmin. Dans phpMyAdmin, créez une nouvelle base de données pour votre site WordPress.  Par exemple, appelez-la wordpress_db. Hajar CHOUHAYEBI 21 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration i. Première méthode: l'Installation de WordPress en local 8. Finaliser l’installation de WordPress : Retournez dans votre navigateur et tapez http://localhost/mon_site (ou le nom du dossier où vous avez décompressé WordPress). Vous serez accueilli par l'installateur WordPress. Suivez les étapes pour entrer les informations de votre base de données :  Nom de la base de données : wordpress_db (ou le nom que vous avez choisi).  Nom d’utilisateur : root (par défaut, pour XAMPP).  Mot de passe : laissez vide (par défaut, XAMPP n'a pas de mot de passe pour MySQL).  Cliquez sur "Envoyer" puis "Lancer l'installation". Hajar CHOUHAYEBI 22 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration i. Première méthode: l'Installation de WordPress en local. Compléter l'installation de WordPress : Entrez les informations de votre site (titre, nom d'utilisateur, mot de passe, etc.) et cliquez sur "Installer WordPress". Une fois l'installation terminée, vous pourrez accéder à votre site WordPress via http://localhost/mon_site. Hajar CHOUHAYEBI 10 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration ii. Deuxième méthode: Hébergement WordPress avec Un site d’hébergement (exemple : InfinityFree) 1. Inscription et Création de Compte : Rendez-vous sur InfinityFree et créez un compte. Connectez-vous au tableau de bord une fois l'inscription terminée. 2. Création de Site et Installation de WordPress : Dans le tableau de bord d'InfinityFree, ajoutez un nouveau site en sélectionnant un nom de domaine gratuit ou en utilisant votre propre domaine. Sélectionnez WordPress depuis la section d’installation automatique (Softaculous) d’InfinityFree. 3. Configuration Automatique de la Base de Données : InfinityFree configure automatiquement la base de données pour vous, ce qui simplifie le processus d'installation. Aucun fichier de configuration manuel (wp-config.php) n'est requis. 4. Accès au Site : Accédez au site en utilisant l’URL du domaine choisi. Connectez-vous au tableau de bord WordPress en ajoutant /wp-admin à l'URL pour commencer la personnalisation et la gestion de contenu. Hajar CHOUHAYEBI 24 2024-2025 Espace Back end du WordPress Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 1) Le tableau de bord : Une fois connecté (http://votreDomaine/wp-admin/ ) , vous arrivez sur le tableau de bord qui contient plusieurs sections. Il y a trois parties principales: La topbar ( menu du haut) Le menu principal à gauche Le contenu principal ( qui est amené à changer) Hajar CHOUHAYEBI 6 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 2) La topbar :: On a le logo Wordpress qui permet d'accéder (à un résumé de la version, à la documentation, aux forums d'entraide…) On peut aller sur la partie public ( front-end) ( on peut donc passer très rapidement du back-end au front-end et inversement) On a la possibilité de créer rapidement un article, une page , un utilisateur..) On a les informations sur notre profil Hajar CHOUHAYEBI 27 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 3) Article VS Page : Les article (posts) et la page sont les deux types principaux de WordPress. Les articles sont amenés à changer fréquemment. On peut organiser les articles par auteur, par date, par catégorie, rajouter des tags (identifie le type de contenu). On a également la possibilité de le commenter. Les pages sont caractérisées par un contenu permanent (à propos, contact …). Elles contiennent des informations statiques. Les pages sont indépendantes les unes des autres. On ne peut pas commenter et partager une page sur les réseaux sociaux, ni organiser par date, auteur …. On les rend accessible via le menu. Hajar CHOUHAYEBI 28 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 4) Création d’un article : Cliquer sur Ajouter, puis lorsque vous êtes dans « Ajouter un article », on peut toujours personnaliser le visuel en déplaçant les blocs les uns par rapport aux autres et grâce à l'onglet: "Option de l'écran" pour rajouter d’autres modules (facultatifs) dans l’espace de travail. b a c d Hajar CHOUHAYEBI 6 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Section a : : Editeur de texte enrichi WYSIWYG: What You See Is What You Get. Il offre beaucoup de possibilités telles que gras, souligné, italique, couleur, coller un texte de Word …) Il peut présenter le contenu sous deux formes VISUEL ou TEXTE (HTML). Lorsque vous écrivez le titre d’un article un permalien apparaît (adresse qui pointe vers l’article).Vous pouvez éventuellement le modifier ou faire certains réglages (url rewriting). Section b : On peut enregistrer (Ctrl + S raccourci) l’article sous forme de brouillon => N’apparaît pas sur le site. On peut prévisualiser l’article avant de le publier. On peut choisir la visibilité (public, avec mot de passe ou privé). On peut le publier à une certaine date. Hajar CHOUHAYEBI 30 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Section c : Lorsque l’on crée un article, on peut éventuellement ajouter des mots clefs ou des catégories Format: permet d'identifier le type d'article. La stylisation peut être différente suivant le thème utilisé. Cela permettra également de filtrer les articles. Etiquette (tags) => mots résumant le contenu de l’article (permet de faire des liens entre les différents articles). Catégories => permet de classifier vos articles par catégorie. Elles peuvent avoir des catégories parentes. Hajar CHOUHAYEBI 31 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Section d : Ce sont des fonctionnalités pas forcément utilisées à chaque fois, mais qui sont des compléments à votre article. Pour modifier un article précédemment créé, il faut cliquer sur « Tous les articles » dans le menu Articles. On aura alors la liste de tous les articles créés. Pour un article, on a alors accès à modifier, modification rapide, mettre à la corbeille, afficher Hajar CHOUHAYEBI 32 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Catégories VS Tags: Ce sont les deux moyens principaux afin d'organiser le contenu Tout article doit appartenir à au moins une catégorie Les tags sont une organisation associative. Catégorie: Cet article appartient à la catégorie …. ( groupement sur un sujet précis ) Tags: Cet article parle de …. ( ils mettent en relation certains articles ) 1. Création d'une catégorie dans Articles > Catégorie ou au niveau d'un article dans le bloc Catégorie Hajar CHOUHAYEBI 33 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Catégories VS Tags: 2. Au niveau de Réglages > Ecriture , on peut choisir la catégorie par défaut 3. On ajoute les tags séparés des virgules dans le bloc Etiquettes lors de la création d'un article. Hajar CHOUHAYEBI 34 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Ajouter un média: Articles et pages peuvent être enrichis d’éléments multimédias. Au niveau de la création d'un article, on clique sur Ajouter un média On peut insérer depuis son ordinateur, depuis le web ou depuis la bibliothèque ( Menu Médias). Une fois uploadé , on peut leur donner quelques informations ( titre, légende, texte alternatif, alignement, lier à …=> si on clique sur l'image … ) Hajar CHOUHAYEBI 35 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Ajouter un média: Une fois uploadé , on peut leur donner quelques informations ( titre, légende, texte alternatif, alignement, lier à …=> si on clique sur l'image … ) Galerie d'images Aller sur Créer une galerie, puis sélectionnez les images faisant partie de la galerie Image mise en avant ( si le thème supporte l'option): Image mis au premier plan qui permet d'illustrer l'article ( en général au-dessus du contenu de l'article). Hajar CHOUHAYEBI 36 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Ajouter un média: Insérer à partir d'une adresse web: On peut mettre un lien vers une image, mais aussi un lien youtube, dailymotion, vimeo, twitter… Concernant les vidéos, WordPress est capable de détecter toutes les propriétés pour l’affichage de vidéos provenant de certaines urls ( Youtube, DailyMotion, viméo… ). WordPress vous permet d’ajouter que seulement quelques types de fichiers. Il faut savoir que par mesure de sécurité, certains types de fichiers sont bloqués par WordPress lors de l’envoi dans les médias. Fichiers images :.jpg,.png,.gif et.ico ; Fichiers audio :.mp3,.m4a,.ogg,.wav ; Fichiers vidéo :.mp4,.m4v,.mov,.wmv,.avi,.mpg,.ogv,.3gp,.3g2 ; Documents :.pdf,.doc,.docx,.ppt,.pptx,.pps,.ppsx,.odt,.xls,.xlsx,.psd ; Hajar CHOUHAYEBI 37 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Les révisions: Permet de passer d'une version x à une version y d'un article. Exemple , on veut revenir à une version d'un article dans lequel on a supprimé un paragraphe. A chaque fois que l'on enregistre un article , Wordpress créé une révision. Apparait en rouge ce qui a été retiré et en vert ce qui a été ajouté Hajar CHOUHAYEBI 38 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Publier un article: Pour l'instant, on a enregistré l'article sous forme de brouillon. On va maintenant le rendre public. Pour un article, nous avons: l'Etat (brouillon et attente de relecture) la Visibilité (public, protégé par mot de passe et privé). La date de publication Les articles publiés s'affichent automatiquement en page d'accueil par ordre chronologique Hajar CHOUHAYEBI 39 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Création et modification des pages : Les pages contiennent du contenu statique et elles sont indépendantes les unes des autres. Les articles eux sont affichés chronologiquement. Les pages sont affichées en haut dans le menu comme la page d’exemple. Les pages comme les catégories peuvent agir comme parent. Les pages peuvent être ordonnées au niveau de l’apparition dans le menu. La création et la modification d’une page est similaire à un article. L'interface de création d'une page est sensiblement la même que celle d'un article. Mais nous n'avons plus le choix d'une catégorie et les tags, car les pages ne sont pas des articles. On a maintenant une architecture hiérarchique ( parents – enfants ). Hajar CHOUHAYEBI 40 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Création et modification des pages : Si on publie une page, nous n'avons pas la possibilité de la voir en frontend. On rend les pages accessibles soit par le menu principal ou soit en les mettant au niveau du footer En fonction du thème utilisé, certaines fonctionnalité supplémentaires seront disponibles. ( exemple avec le thème Twenty Fourteen les pages crées sont directement présentes dans le menu du haut et si des pages sont enfants d'autres pages cela créera un menu déroulant) On peut également spécifier un modèle d’affichage pour les pages. Permet de changer l'apparence des pages. Les modèles sont fonctions des thèmes utilisés ( parfois il n'y a pas de modèles disponibles) Hajar CHOUHAYEBI 41 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Les thèmes: Vous avez le choix entre plusieurs thèmes que l'on peut personnaliser. Les modifications possibles dépendent du thème utilisé. On voit les modifications en temps réel. Hajar CHOUHAYEBI 42 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Création de menus personnalisés: On peut créer des menus totalement personnalisés et les placer à différents emplacements du site: dans le menu principal, la colonne latérale et le pied de page. On peut placer dans le menu non seulement les pages, les catégories mais également n’importe quel autre lien. Une fois dans Apparence => Menus et après avoir créé le nom du menu, nous voyons dans la partie gauche : Pages : pour ajouter des pages WordPress dans votre menu ; Articles: pour ajouter des articles WordPress dans votre menu ; Liens personnalisés : très pratique pour insérer des liens vers d‟autres sites Web ; Catégories : pour insérer des catégories WordPress dans votre barre de navigation ; Pour réarranger l’ordre du menu, glissez / déposez les différents éléments tout en sachant qu'il est possible de créer des sous-menus. Pour ce faire, décalez l’élément vers la droite pour créer une imbrication. Hajar CHOUHAYEBI 43 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Utilisation des widgets : Les widgets sont des bouts de code (affichage calendrier, liste mots clés, menu personnalisé, flux …) permettant de diffuser de l’information supplémentaire dans des zones qui dépendent du thème utilisé (colonnes latérales , pied de page …) Grâce à des glisser-déposer, il est possible d’ajouter ou de supprimer des Widgets des colonnes latérales prévues pour un thème donné. Le Widgets Texte et HTML personnalisé permettent d’insérer des bout de texte ou de code HTML Hajar CHOUHAYEBI 44 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Page d'accueil statique et page d'articles: Par défaut sur l'accueil , on a les derniers articles affichés par ordre chronologique. Mais peut-être souhaitez-vous avoir une page statique. Tout d'abord , il faut créer la page statique par exemple de nom Accueil. Puis on va sur Réglages > Lecture Au niveau de la page d'accueil, on sélectionne page statique et on sélectionne la page à mettre en accueil. Mais en mettant une page statique en accueil, nous n'avons plus accès à l'ensemble des articles. On va donc par exemple créer une nouvelle page (BLOG) qu'on laissera vierge et que l'on sélectionnera ensuite comme page des articles. Il faudra néanmoins ajouter cette page au niveau d'un menu pour pouvoir y accéder. Hajar CHOUHAYEBI 45 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Les plugins (extensions): Les extensions sont en des bouts de programme permettant l’ajout de nouvelles fonctionnalités qui ne sont pas disponibles par défaut dans WordPress. Il existe des milliers d’extensions pour WordPress. Vous n'aurez pas la possibilité d'en rajouter. Vous avez à votre disposition les plugins suivants (voir utilisation des plugins): Advanced Editor Tools ( pour rajouter des bouton dans l'éditeur) Contact Form 7. : génération de formulaires de contact Attention: Ne sauvegarde pas les emails envoyés Advanced Iframe: possibilité d'insérer des iframes (google map, youtube, viméo…) Easy Twitter Feed Widget: permet d'afficher des fils twitter NextGEN: génération de galerie d'image, slideshow… Akismet anti spam ( supprime les spams des commentaires ). Les commentaires sont désactivés sur les WordPress académiques. CF7 simple Recaptcha : Mettre un captcha sur le formulaire Contact Form 7 pour éviter les spams. Pdf Embedder: intégrer des pdf au sein d'une page ou d'un article. WP Maintenance Mode: Ce plugin peut aussi être utile en cas de maintenance temporaire de votre site. TablePress: permet de mettre des tableaux dans le contenu) slideshow CK: Permet d'afficher des diaporamas GDPR Compliance & Cookie Consent : permet à tout site d'être conforme au RGPD WP Statistics: outil d’analyse statistique Hajar CHOUHAYEBI 46 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Gestions des utilisateurs : On peut créer des utilisateurs (Utilisateurs => Ajouter ) et à leur assigner des droits relatifs au niveau de sécurité que l’on souhaite leur donner. L’utilisateur peut avoir plusieurs rôles : Abonné (personne qui peut lire du contenu protégé : visible que pour des abonnés) Administrateur (personne qui a tous les droits) Editeur (peut ajouter du contenu ou modifier du contenu d’autres personnes) Auteur ( peut créer du contenu et l’insérer sur le site) Contributeur ( ressemble à un auteur mais le contenu créé doit être validé par un administrateur ou éditeur) Hajar CHOUHAYEBI 47 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Outils : A l’aide de ce menu on peut : publier un article rapidement; ( ajout au favoris du navigateur) importer des articles et des commentaires d’un autre type de site web; exporter les données de votre site web à tout moment. ( fichier xml) Hajar CHOUHAYEBI 48 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Réglages : Les réglages vous permettent de configurer la façon dont votre site web se comporte, comment vous interagissez avec votre site web et comment vos visiteurs interagissent avec votre site web. Général : Mise à jour de votre site web, la création de compte et la façon dont s’affichent les dates et les heures; Écriture : Personnalisation de l’interface utilisée lors de la composition d’un article; Lecture : Type d’affichage des pages et articles, nombre d’articles et de commentaires affichés par page, paramètre de gestion du fil RSS. Discussion : options de discussions => commentaires. Médias : Spécification des dimensions lors d’insertion d’images. Vie privée : Choix entre l’affichage ou pas de votre site web dans les moteurs de recherche. Permaliens : Création personnalisée des liens de votre site web. Hajar CHOUHAYEBI 49 2024-2025 Prestashop Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Sa Philosophie et ses Concepts : PrestaShop est une plateforme de gestion de contenu (CMS) dédiée à l’e-commerce. Sa philosophie repose sur la flexibilité, l’accessibilité et la modularité. En tant que solution open-source, PrestaShop permet aux utilisateurs de personnaliser leur boutique en ligne selon leurs besoins spécifiques, que ce soit en ajoutant des fonctionnalités via des modules ou en modifiant son apparence grâce à des thèmes personnalisables. Le système est conçu pour être intuitif, même pour les débutants, tout en offrant des options avancées pour les développeurs expérimentés. L’objectif principal de PrestaShop est de démocratiser l’e-commerce, en permettant aux petites comme aux grandes entreprises de créer des boutiques en ligne performantes, sans nécessiter de compétences techniques approfondies. PrestaShop encourage également une communauté dynamique et collaborative, qui contribue à l’évolution du logiciel en proposant des modules, des thèmes, et des solutions innovantes. Hajar CHOUHAYEBI 52 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Historique PrestaShop a été lancé en 2007 par deux entrepreneurs français, Bruno Lévêque et Igor Schlumberger. À ses débuts, le projet visait à offrir une alternative gratuite aux solutions payantes d’e-commerce, en s’appuyant sur le modèle open-source. Rapidement adopté par les commerçants, PrestaShop a gagné en popularité grâce à sa simplicité d’utilisation et ses nombreuses fonctionnalités. En 2010, la communauté internationale de PrestaShop s’est développée, rendant le logiciel disponible dans plusieurs langues et adapté à différents marchés. Avec le lancement de la version 1.7 en 2016, PrestaShop a introduit des améliorations significatives, comme un système de thèmes simplifié et une interface utilisateur plus moderne. Aujourd’hui, plus de 300 000 boutiques en ligne dans le monde fonctionnent grâce à PrestaShop, en faisant l’un des leaders du marché des CMS e-commerce. Hajar CHOUHAYEBI 53 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Offres Commerciales de la Société Bien que le CMS de base soit entièrement gratuit, PrestaShop propose plusieurs services et produits payants pour enrichir l’expérience utilisateur et répondre aux besoins des entreprises. Ces offres incluent une vaste marketplace où les commerçants peuvent acheter des modules et des thèmes premium. Ces modules ajoutent des fonctionnalités spécifiques, comme des systèmes de paiement, des outils marketing, ou des options avancées de gestion des stocks. En outre, PrestaShop propose des services d’assistance technique payants pour les entreprises nécessitant un accompagnement personnalisé. Ces offres permettent de bénéficier d’un support rapide en cas de problème technique ou de questions sur l’utilisation du logiciel. Les thèmes premium, quant à eux, offrent des designs professionnels et une personnalisation accrue, adaptés aux entreprises qui souhaitent se démarquer visuellement. Hajar CHOUHAYEBI 54 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Ressources en Ligne PrestaShop met à disposition une riche collection de ressources en ligne pour accompagner les utilisateurs dans la création et la gestion de leur boutique. Le site officiel, prestashop.com, propose des téléchargements du CMS, des actualités sur les nouvelles versions et des guides pratiques. La marketplace officielle, addons.prestashop.com, permet d’accéder à des modules et des thèmes pour enrichir la boutique en ligne. Hajar CHOUHAYEBI 55 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Modules et Extensions Les modules sont au cœur du fonctionnement de PrestaShop. Ils permettent d'étendre les fonctionnalités de base de la plateforme. Par exemple, un module peut ajouter une méthode de paiement comme PayPal ou Stripe, ou permettre une intégration avec des services tiers comme Google Analytics. PrestaShop est livré avec une série de modules natifs couvrant les besoins essentiels : gestion des paiements, des livraisons, des promotions, et plus encore. Vous pouvez également télécharger des modules supplémentaires depuis la Marketplace officielle PrestaShop Addons. Ces modules peuvent être gratuits ou payants, selon leur complexité et leur utilité. Tous les modules sont gérés via le tableau de bord dans l'onglet "Modules", où vous pouvez les installer, les configurer ou les désactiver. Hajar CHOUHAYEBI 56 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Personnalisation des Thèmes Un des atouts majeurs de PrestaShop est sa capacité à personnaliser l'apparence de la boutique grâce aux thèmes. Les utilisateurs peuvent choisir parmi des milliers de thèmes disponibles sur la Marketplace officielle ou créer leur propre thème. La personnalisation de l'apparence se fait via le "Personnaliseur de thème", accessible depuis le Back Office. Ce dernier permet de modifier facilement les couleurs, les polices et l'organisation des blocs. Pour les utilisateurs plus techniques, il est possible d’éditer directement les fichiers CSS, HTML, et les templates.tpl pour une personnalisation avancée. Ces ajustements permettent de créer une boutique unique et cohérente avec l'identité visuelle de la marque. Hajar CHOUHAYEBI 57 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Gestion des Commandes et des Clients PrestaShop offre une interface intuitive pour gérer les commandes et les clients. Dans l'onglet "Commandes" du Back Office, vous pouvez consulter les commandes reçues, vérifier leur statut, les modifier si nécessaire, ou encore gérer les retours et les remboursements. Quant à la gestion des clients, elle permet de visualiser les profils des utilisateurs enregistrés, leurs informations d'achat, et de segmenter les clients en groupes (comme VIP ou Fidélité). Cette segmentation est utile pour offrir des promotions spécifiques à certains groupes. De plus, PrestaShop propose des outils de fidélisation, comme les points de récompense, pour encourager les clients à revenir. Hajar CHOUHAYEBI 58 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Statistiques et Rapports L'onglet "Statistiques" dans PrestaShop fournit des données détaillées sur les performances de la boutique. Vous pouvez y analyser les ventes par produit ou catégorie, identifier les produits les plus populaires, et suivre les comportements des clients, comme les paniers abandonnés. Ces données sont essentielles pour prendre des décisions informées sur la gestion de votre boutique et l'optimisation des campagnes marketing. PrestaShop propose également des modules de reporting avancé pour créer des rapports personnalisés en fonction des besoins de votre entreprise. Hajar CHOUHAYEBI 59 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Hébergement et Mise en Ligne Pour mettre une boutique PrestaShop en ligne, vous devez disposer d'un hébergement compatible. Une fois que le site est configuré en local, vous pouvez le transférer vers un serveur en ligne à l’aide d’un client FTP comme FileZilla. Ce transfert inclut tous les fichiers de votre site ainsi que la base de données. Ensuite, vous devez configurer les DNS de votre domaine pour pointer vers votre hébergeur. Cela permettra à votre boutique d’être accessible depuis n’importe quel navigateur. Les critères pour choisir un bon hébergeur incluent la vitesse du serveur, la sécurité des données, et un support technique réactif. Hajar CHOUHAYEBI 60 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Sécurité et Maintenance La sécurité est un aspect crucial pour toute boutique en ligne. PrestaShop propose plusieurs outils pour protéger votre site et vos données. Par exemple, l’installation d’un certificat SSL permet de crypter les échanges entre le serveur et les utilisateurs, ce qui est essentiel pour les transactions en ligne. De plus, il est recommandé de mettre régulièrement à jour PrestaShop, ainsi que les modules et thèmes, pour éviter les failles de sécurité. Enfin, configurez un système de sauvegarde automatique pour sauvegarder vos fichiers et votre base de données. Cela vous permettra de restaurer votre site rapidement en cas de problème Hajar CHOUHAYEBI 61 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Modes de Paiement et Livraison PrestaShop simplifie la configuration des méthodes de paiement et des options de livraison. Vous pouvez installer des modules comme PayPal ou Stripe pour proposer des paiements en ligne sécurisés, ou configurer des passerelles bancaires locales. Pour les livraisons, PrestaShop permet d’ajouter des transporteurs tels que DHL ou La Poste, avec des frais de livraison basés sur les zones géographiques ou le poids des colis. Ces paramètres sont accessibles via les onglets "Paiements" et "Transporteurs" du Back Office. Hajar CHOUHAYEBI 62 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Outils Marketing Intégrés PrestaShop propose des outils marketing puissants pour booster les ventes. Vous pouvez créer des coupons de réduction ou organiser des promotions limitées dans le temps pour attirer les clients. Le CMS inclut également des fonctionnalités SEO pour optimiser vos pages produits et catégories afin qu'elles soient mieux référencées sur les moteurs de recherche. Enfin, la configuration de campagnes d’emailing permet de communiquer directement avec vos clients, par exemple pour annoncer de nouveaux produits ou des offres spéciales. Hajar CHOUHAYEBI 63 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Outils Marketing Intégrés PrestaShop propose des outils marketing puissants pour booster les ventes. Vous pouvez créer des coupons de réduction ou organiser des promotions limitées dans le temps pour attirer les clients. Le CMS inclut également des fonctionnalités SEO pour optimiser vos pages produits et catégories afin qu'elles soient mieux référencées sur les moteurs de recherche. Enfin, la configuration de campagnes d’emailing permet de communiquer directement avec vos clients, par exemple pour annoncer de nouveaux produits ou des offres spéciales. Hajar CHOUHAYEBI 64 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration 2.Installation et Paramétrage i. Première méthode: Téléchargement et Installation d’un Serveur Local Pour utiliser PrestaShop en local, il est nécessaire d’installer un serveur local, tel que XAMPP ou WAMP, qui permettent de simuler un environnement web sur un ordinateur personnel. Ces serveurs incluent les outils nécessaires, comme Apache (serveur web) et MySQL (base de données), indispensables pour faire fonctionner PrestaShop. Téléchargement de XAMPP : Rendez-vous sur le site officiel apachefriends.org. Téléchargez la version de XAMPP adaptée à votre système d’exploitation (Windows, macOS ou Linux). Installation : Une fois téléchargé, lancez le fichier d’installation et suivez les étapes. Pendant l’installation, sélectionnez les composants nécessaires : Apache et MySQL. Démarrage des services : Après l’installation, ouvrez le Panneau de Contrôle XAMPP. Cliquez sur Start à côté de Apache et MySQL pour les activer. XAMPP est apprécié pour sa simplicité d’utilisation et sa compatibilité avec plusieurs systèmes d’exploitation, ce qui en fait un choix populaire pour les développeurs. Hajar CHOUHAYEBI 65 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage i. Première méthode: Téléchargement du CMS PrestaShop Le CMS PrestaShop est disponible gratuitement sur son site officiel prestashop.com. Suivez ces étapes pour le télécharger et l’installer : 1. Accédez à la section de téléchargement et téléchargez la dernière version disponible. 2. Une fois le fichier téléchargé (au format ZIP), décompressez-le. 3. Déplacez les fichiers extraits dans le dossier htdocs de votre serveur local (généralement situé à C:\xampp\htdocs). Exemple : Placez les fichiers dans un sous-dossier comme C:\xampp\htdocs\mon_site. Le dossier htdocs correspond à l’emplacement où les fichiers des sites web sont stockés pour être accessibles via le serveur local. Hajar CHOUHAYEBI 66 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage i. Première méthode: Installation et Paramétrage sur Réseau Local L’installation de PrestaShop est facilitée par un assistant intégré qui guide l’utilisateur étape par étape : 1. Lancer l’installation : Ouvrez votre navigateur web et entrez l’adresse suivante : http://localhost/mon_site. L’assistant d’installation s’ouvre automatiquement. Hajar CHOUHAYEBI 58 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage i. Première méthode: Installation et Paramétrage sur Réseau Local L’installation de PrestaShop est facilitée par un assistant intégré qui guide l’utilisateur étape par étape : 2. Suivre les étapes de l’assistant : Sélectionnez la langue dans laquelle vous souhaitez configurer votre boutique. Acceptez les conditions générales d’utilisation. Vérifiez que votre configuration système est compatible avec PrestaShop (le test est effectué automatiquement). Hajar CHOUHAYEBI 58 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage i. Première méthode: Installation et Paramétrage sur Réseau Local L’installation de PrestaShop est facilitée par un assistant intégré qui guide l’utilisateur étape par étape : 3. Configurer la base de données : Accédez à phpMyAdmin en tapant http://localhost/phpmyadmin dans votre navigateur. Cliquez sur Nouvelle Base de Données et entrez un nom, par exemple : prestashop_db. Hajar CHOUHAYEBI 58 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage i. Première méthode: Installation et Paramétrage sur Réseau Local L’installation de PrestaShop est facilitée par un assistant intégré qui guide l’utilisateur étape par étape : 3. Configurer la base de données : Dans l’assistant PrestaShop, entrez les informations de la base : Nom de la base de données : prestashop_db. Nom d’utilisateur : root (par défaut dans XAMPP). Mot de passe : Laissez vide (par défaut). Hajar CHOUHAYEBI 58 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage i. Première méthode: Installation et Paramétrage sur Réseau Local L’installation de PrestaShop est facilitée par un assistant intégré qui guide l’utilisateur étape par étape : 4. Finalisation de l’installation : L’assistant vous demandera de configurer un compte administrateur (email, nom d’utilisateur et mot de passe). Une fois terminé, supprimez le dossier /install pour des raisons de sécurité (l’assistant vous en informera). Hajar CHOUHAYEBI 59 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage i. Première méthode: Installation et Paramétrage sur Réseau Local L’installation de PrestaShop est facilitée par un assistant intégré qui guide l’utilisateur étape par étape : 5. Accéder au tableau de bord : Renommez le dossier /admin pour sécuriser l’accès (par exemple, /admin123). Accédez au tableau de bord via l’adresse http://localhost/mon_site/admin123. Hajar CHOUHAYEBI 59 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage ii. Deuxième méthode: Hébergement Prestashop avec Un site d’hébergement (exemple : InfinityFree) 1. Connectez-vous à votre Compte InfinityFree Rendez-vous sur https://www.infinityfree.net. Connectez-vous à votre tableau de bord avec vos identifiants. 2. Accédez au Softaculous Apps Installer Une fois dans le tableau de bord, sélectionnez votre domaine ou site actif. Cliquez sur Control Panel (cPanel) pour accéder à toutes les fonctionnalités. Dans le cPanel, recherchez l'option Softaculous Apps Installer ou Softaculous dans la catégorie "Software". 3. Recherchez PrestaShop Une fois dans Softaculous, utilisez la barre de recherche pour trouver PrestaShop. Cliquez sur PrestaShop pour ouvrir la page de détails. Hajar CHOUHAYEBI 73 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage ii. Deuxième méthode: Hébergement Prestashop avec Un site d’hébergement (exemple : InfinityFree) 4. Configurez l'Installation 4.1 Cliquez sur Install Now. 4.2 emplissez les champs nécessaires : Choose Protocol : Choisissez http:// ou https:// si SSL est configuré. Choose Domain : Sélectionnez votre domaine ou sous- domaine. Directory : Laissez vide pour installer PrestaShop à la racine (par exemple, http://votresite.epizy.com). Admin Username : Choisissez un nom d'utilisateur pour l'administrateur. Admin Password : Définissez un mot de passe fort. Admin Email : Fournissez une adresse e-mail valide. Hajar CHOUHAYEBI 74 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Installation et Paramétrage ii. Deuxième méthode: Hébergement Prestashop avec Un site d’hébergement (exemple : InfinityFree) via Softaculous 5. Lancer l'Installation  Cliquez sur Install pour démarrer l’installation.  Attendez que Softaculous termine l'installation. Cela prend généralement quelques minutes 6. Accéder à Votre Boutique 6.1 Une fois l'installation terminée, Softaculous vous fournira deux liens : Front Office : Votre boutique en ligne (par exemple, http://votresite.epizy.com). Back Office : Panneau d'administration (par exemple, http://votresite.epizy.com/admin123). 6.2 Connectez-vous avec les identifiants administrateurs que vous avez définis. Avantages de l'Installation via Softaculous Automatisation : Pas besoin de télécharger ou transférer des fichiers manuellement. Configuration guidée : Softaculous s’occupe de la base de données et des paramètres techniques. Rapidité : L'installation est généralement terminée en quelques minutes. Hajar CHOUHAYEBI 75 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Présentation de l’Interface Back et Front Office Back Office : Le Back Office de PrestaShop est l’interface d’administration où le commerçant gère tous les aspects de sa boutique en ligne. Il comprend un tableau de bord qui offre une vue d’ensemble des ventes, des commandes et des performances. Les différents onglets permettent de gérer les produits, les commandes, les clients, les modules et les paramètres généraux du site. Hajar CHOUHAYEBI 60 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Présentation de l’Interface Back et Front Office Front Office : Le Front Office correspond à l’interface visible par les clients. Il s’agit du site web public, où les visiteurs peuvent naviguer, consulter les produits et passer commande. Le Front Office peut être personnalisé via des thèmes et des modules pour offrir une expérience utilisateur optimale. Hajar CHOUHAYEBI 60 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Présentation de l’Interface Back et Front Office Identifier un Template Un template, dans PrestaShop, est un thème qui définit l’apparence visuelle de la boutique en ligne côté client (Front Office). Les templates permettent de personnaliser l’aspect graphique de la boutique sans toucher au code. Par défaut, PrestaShop est livré avec un thème standard, mais il est possible d’en installer d’autres depuis la marketplace officielle ou via des fichiers.zip. Pour appliquer un nouveau template, il faut accéder au menu Apparence > Thèmes dans le Back Office, puis télécharger et activer le thème souhaité. Chaque thème peut être configuré pour ajuster les couleurs, les polices et la mise en page selon les besoins de la boutique. Hajar CHOUHAYEBI 78 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Présentation de l’Interface Back et Front Office  La Console Administrateur et ses Onglets de Gestion La console administrateur est l’interface principale où les commerçants gèrent tous les aspects de leur boutique. Elle se compose de plusieurs onglets : 1. Tableau de Bord : Vue d’ensemble des ventes, commandes et performances. 2. Produits : Ajout et gestion des produits, description, prix, images, et stock. 3. Commandes : Suivi des commandes, gestion des statuts et remboursements. 4. Clients : Gestion des clients inscrits, groupes et communications. 5. Modules : Ajout de fonctionnalités spécifiques, comme des modes de paiement ou des outils marketing. 6. Paramètres : Configuration des taxes, livraisons, devises et autres options générales.  Téléchargement des Photos dans le Logiciel Pour enrichir les produits, PrestaShop permet de télécharger des images directement via l’interface administrateur. Dans l’onglet Produits, sélectionnez un produit, puis utilisez l’option Images pour importer des photos. PrestaShop prend en charge plusieurs formats (JPG, PNG, GIF) et optimise automatiquement les images pour un affichage rapide sur le site. Hajar CHOUHAYEBI 79 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Présentation de l’Interface Back et Front Office Publication des Composants et Modules Les modules sont des extensions qui ajoutent des fonctionnalités spécifiques à PrestaShop, comme des systèmes de paiement, des outils de marketing ou des intégrations avec des services tiers. Pour gérer les modules : 1. Accédez à l’onglet Modules > Gestionnaire de modules. 2. Recherchez un module dans la marketplace ou téléchargez un fichier.zip. 3. Installez et configurez le module selon vos besoins. L’Affichage des Produits Les produits sont affichés côté Front Office dans des catégories définies par l’administrateur. Chaque produit peut comporter : Un titre, une description courte et une description longue. Des images, des déclinaisons (par exemple : tailles, couleurs). Des options comme les produits associés ou les promotions en cours. Hajar CHOUHAYEBI 80 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Présentation de l’Interface Back et Front Office Présentation du Compte Client et de son Panier Le compte client permet aux utilisateurs de gérer leurs informations personnelles, consulter leurs commandes passées et suivre leurs livraisons. Quant au panier, il constitue une fonctionnalité clé, permettant aux clients d’ajouter des articles, de modifier les quantités ou de supprimer des produits avant de passer commande. Transactions et Statistiques Les transactions sont gérées par les modules de paiement configurés dans le Back Office. PrestaShop permet également de consulter des statistiques détaillées via l’onglet Statistiques : Analyse des ventes par produit ou catégorie. Suivi des comportements des clients (paniers abandonnés, fidélité). Performances des campagnes marketing. Hajar CHOUHAYEBI 81 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Réalisation de la Page d’Accueil et d’une Page Produits Création des Menus du Site Les menus sont essentiels pour la navigation des visiteurs. Dans PrestaShop, les menus peuvent être personnalisés via l’onglet Modules > Apparence > Menu Principal. Ajoutez ou modifiez des éléments de menu pour inclure des catégories, des pages CMS ou des liens externes. Création des Catégories de Produits Les catégories permettent d’organiser les produits de manière logique. Pour en créer une : 1. Accédez à l’onglet Produits > Catégories. 2. Cliquez sur Ajouter une catégorie. 3. Remplissez les informations comme le nom, la description et l’image. Hajar CHOUHAYEBI 82 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Réalisation de la Page d’Accueil et d’une Page Produits Saisie du Texte et Mise en Forme Dans chaque fiche produit ou page CMS, vous pouvez saisir du texte et utiliser un éditeur visuel pour le formater : Ajoutez des titres, des paragraphes, des listes à puces. Utilisez des styles (gras, italique) pour mettre en valeur des informations importantes. Insertion de Photos et Images Pour chaque produit ou page, insérez des images dans les sections dédiées. Assurez-vous d’utiliser des images de haute qualité et d’ajouter des balises alternatives (ALT) pour optimiser le SEO. Hajar CHOUHAYEBI 83 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration Finalisation du Site et des Pages Produits Personnalisation avec PrestaShop La personnalisation consiste à adapter le design et les fonctionnalités de votre boutique à votre identité visuelle. Cela peut inclure le choix des couleurs, des polices, et l’agencement des blocs sur les pages. Outils Nécessaires à la Personnalisation Éditeur de texte ou de code : Notepad++, Sublime Text. Logiciels graphiques : Photoshop, Canva pour les visuels. Navigateur : Pour tester les modifications en temps réel. Architecture et Organisation des Dossiers Les fichiers de PrestaShop sont organisés de manière hiérarchique : Modules : Contient les fonctionnalités installées. Themes : Contient les fichiers liés aux templates. Img : Stocke les images téléchargées. Hajar CHOUHAYEBI 84 2024-2025 Définition du Installation et CMS Espace Back end Prestashop Conclusion WordPress configuration  En conclusion, WordPress et PrestaShop sont deux systèmes de gestion de contenu (CMS) puissants et adaptés à des besoins différents, mais complémentaires. WordPress, avec sa simplicité et sa polyvalence, est la solution idéale pour créer des sites vitrine, des blogs, ou des portails d’information. Il offre une immense bibliothèque de thèmes et de plugins pour personnaliser et étendre ses fonctionnalités.  D’un autre côté, PrestaShop se distingue comme une plateforme dédiée à l’e-commerce, offrant des outils avancés pour gérer les produits, les commandes, et les transactions. Sa modularité et sa personnalisation permettent de répondre aux exigences complexes des boutiques en ligne, tout en restant accessible aux utilisateurs non techniques.  Ces deux CMS démontrent l’importance des outils numériques pour répondre aux défis modernes, qu’il s’agisse de promouvoir un contenu ou de gérer une boutique en ligne. En maîtrisant WordPress et PrestaShop, vous êtes mieux équipés pour entreprendre des projets variés et répondre aux besoins du marché digital.  Continuez à explorer leurs fonctionnalités, leurs extensions et leurs communautés actives pour approfondir vos connaissances et développer des solutions toujours plus performantes. Le succès de vos projets dépendra de votre créativité et de votre capacité à tirer parti de ces outils puissants. Hajar CHOUHAYEBI 84 2024-2025

Systèmes de Gestion de Contenu (CMS) PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue