Installer et configurer le blog prestashop HDClic

tutoriel installation blog prestashop

Tutorial in english

Voici un tutoriel très complet pour la gestion du blog prestashop conçu par HDClic. Vous pourrez ainsi connaître sur le bout des doigts tout ce qui sera nécessaire à la bonne gestion et au bon référencement de vos articles.

Table des matières

Installation

Mise à jour

Configuration

  1. Thèmes et slide (avec Tuto vidéo firebug)
  2. Accueil du blog
  3. Listes d’articles personnalisées
  4. Menu des catégories
  5. Gestion des Blocs
  6. Commentaires
  7. Rewrite
  8. Globale
  9. Lien « blog » dans le menu haut horizontal
  10. Administration des utilisateurs

Gestion des contenus

  1. Gestion des catégories
  2. Gestion des articles
  3. Ajout d’un article
  4. Gestion des langues dans un article
  5. Titre principal de l’article
  6. Activer/désactiver un article
  7. Article en Slideshow ?
  8. Commentaires liés à l’article
  9. Référencer correctement un article
  10. Image principale (slide, article, catégories etc.)
  11. Contenu de l’introduction
  12. Contenu principal
  13. Choix de la catégorie
  14. Produits liés
  15. Qualité des images (PS 1.6)

Outils

  1. L’antispam pour les commentaires de votre blog
  2. l’importation de vos articles depuis wordpress
  3. Sitemap

Modification du template

Installation du module

Conseil : Pensez toujours à créer une sauvegarde de votre base de donnée lorsque vous installez ou mettez à jour un module.

Pour installer ce module, il vous suffit de vous rendre dans votre backoffice et d’envoyer le fichier que vous venez de télécharger. (N’utilisez pas votre FTP)

Pour cela, cliquez sur le bouton « ajouter un nouveau module » en haut à droite  de votre interface. Cliquez ensuite sur Parcourir pour retrouver votre fichier et envoyez le. Cliquez ensuite sur le bouton Installer situé à droite du nom du module.

Si vous rencontrez des difficultés à envoyer votre fichier, votre hébergement vous limite probablement. Pour cela, il vous faudra augmenter les valeurs suivantes dans votre fichier php.ini :

memory_limit = 32M
upload_max_filesize = 24M
post_max_size = 32M

Si vous n’êtes pas ensuite automatiquement redirigé sur le module, accédez au blog directement depuis l’onglet qui vient de se créer dans votre accès rapide.

installer le blog

Vous accèderez ainsi à une nouvelle interface proposant 5 onglets et des informations relatives à votre blog fraichement installé. (commentaires en attente, derniers articles, statistiques)

N’oubliez pas de désactiver le cache de votre boutique et de régénérer les fichiers tpl afin de voir toutes les modifications apportées par le module.

Pour cela, rendez-vous dans votre backoffice onglet :
Paramètre avancés > Performances

Dans cache des templates: Activez « Forcer la compilation à chaque appel »
Dans Cache : Désactivez l’option et cliquez sur effacer le cache de Smarty

N’oubliez pas de remettre les options comme avant une fois que le module est installé et que le template vous convient.

Si vous aviez un blog auparavant, veuillez vérifier que vous n’avez pas déjà un module de blog installé, qu’un dossier /blog/ n’est pas présent à la racine de votre FTP ou que vous n’avez aucune ligne reprenant le mot blog dans votre fichier htaccess (présent à la racine de votre ftp ou dans le dossier des modules)

Interface du blog

Mise à jour de votre blog vers une version plus récente

Depuis la version 3.6 de notre module, l’update est automatique, cependant, avant toute upgrade, et de la même manière que pour tout autre module, il est tout de même important, au cas ou, d’effectuer un backup de votre base de donnée et de vos fichiers afin de pouvoir revenir en arrière en cas d’incident technique. Il vous suffit donc ensuite, d’envoyer votre fichier zip de module ou de cliquer sur upgrader le module dans votre interface section > modules.

Configuration

Thèmes et slideshow du blog

Choix du thème

Cette section comporte désormais un seul templates sur la version 1.7 et 2 pour la version 1.6, le default pour la version de prestashop (1.6) et le deuxième pour une compatibilité avec la version 1.5 de prestashop.

Cela pourra aussi vous permettre dans le cadre d’une multiboutique de gérer chacun de vos thèmes séparément et ainsi proposer des configurations différentes.

Il suffira pour cela de dupliquer les fichiers que vous souhaitez et de les renommer avec le nom de votre nouveau template (votre-template.extension)

Module > Prestablog > views > css > grid-for-1.x-module.css (x étant votre version prestashop)
Module > Prestablog > views > hook & front > tous les fichiers portant le nom du template que vous souhaitez dupliquer

Vous pouvez renommer chacun des thèmes comme vous le souhaitez, ils apparaîtront directement dans la liste déroulante du choix de thème.

Concernant l’intégration du blog sur votre front office, il se peut, dans certain cas, que vous ayez certains bugs liés à votre fichier global.css qui aurait été modifié sans respecter les standards de développement. Vous aurez donc peut être besoin d’ajuster certains styles. Nous vous conseillons donc d’utiliser l’outil de développeur intégré à votre navigateur (F12 pour le faire apparaitrer) afin de repérer quels sont les class à modifier. Il existe d’excellents tutoriels pour apprendre à les utiliser. .

En effectuant une recherche sur votre navigateur préféré, vous retrouverez de nombreux tutoriels vous expliquant comment l’utiliser correctement. (recherche exemple : outil de développement firefox tutoriel)

Choix du style de votre template (Version 1.7)

Choisissez si vous souhaitez afficher des colonnes sur votre blog. Cela n’a aucune incidence sur votre template général, et ne modifiera que le design du blog. Cependant, certain templates ont homis volontairement les colonnes, vous ne pourrez ainsi pas ajouter de colonnes à votre blog, ou il faudra modifier le template de votre shop directement.

Configuration du slideshow

Vous avez le choix de l’activer ou non

  • en page d’accueil
  • en page de blog
  • ou sur les deux pages

Dans la section images principale, vous pourrez voir comment retrouver la largeur de votre contenu, cette valeur sera logiquement la même que la largeur de votre slideshow. Vous pouvez cependant la retrouver aussi en utilisant l’outil de développement de votre navigateur comme vu précédemment.

Une fois cette valeur retrouvée, fixez la largeur de votre image de slideshow, ainsi que la hauteur. Celle-ci sera systématiquement utilisée lorsque vous publierez un article pour pouvoir mettre votre actu à la une. Attention, si vous changez cette valeur après avoir rédigé des articles, vous devrez régénérer les images afin qu’elle reprennent les nouvelles dimensions. (Ne les changez pas directement sur votre ftp, le crop ne fonctionnera plus correctement ensuite, car les dimensions de bases sont enregistrées)

Si vous avez des problème de qualité avec vos images, vérifiez que votre prestashop est configuré en compression jpg supérieur à 90 dans apparence > images

Options des listes

Longueur du titre indique le nombre de caractères maximum à utiliser dans le slideshow.
Longueur de l’introduction indique le nombre de caractères maximum à utiliser dans le slideshow (n’est pas utilisé sur la version responsive).

Accueil du blog

Url de l'accueil du blog

Dans cette partie, vous pouvez gérer la balise titre de l’accueil du blog et récupérer l’url de celui-ci afin de l’inclure la ou vous en avez besoin (Mega menu par exemple).

Liste d’articles personnalisés

Il se peut, pour les besoins de votre boutiques, et/ou de votre référencement, que vous ayez besoin d’afficher des informations du blog sur votre page d’accueil ou ailleurs dans l’un de vos tpl. Cet outil est fait pour vous.

Si vous désirez utiliser cette fonctionnalité, vous devez tout d’abord l’activer. Cliquez ensuite sur le bouton, « créer une liste ».
Vous pourrez ensuite décider des informations que vous souhaitez afficher, vous avez la possibilité de donner un espace de temps, si par exemple, vous souhaitez promouvoir une certaine catégorie de votre blog pendant une opération marketing…

Concernant la partie Hook, vous pouvez décider de 3 méthodes différentes,

  • la première, DisplayHome affichera votre liste personnalisée sur votre page d’accueil,
  • tandis que la deuxième, DisplayCystomHook vous permettra d’intégrer un code directement dans l’un des TPL de votre template boutique afin d’afficher la liste que vous aurez au préalable créé (exemple : {hook h=’displayPrestaBlogList’ id=’2′ mod=’prestablog’} inséré dans product.tpl)
  • la 3ème quand à elle vous permet d’ajouter un encart de statistiques sur la page d’accueil admin de votre blog. (Actualités les plus ou les moins commentés, les plus ou les moins lues). Très pratique pour voir d’un coup d’œil vos stats blog.

stats-dashboard

Configuration du blog

Si vous n’avez pas de colonnes dans votre template, il est très utile d’ajouter le block de catégories d’articles afin de permettre à vos utilisateurs de naviguer entre les pages du blogs. Dans ce cas, nous vous conseillons de l’activer sur toutes les pages du blog. Sinon, c’est à votre convenance. Les options proposées vous permettront de vraiment customiser comme vous le souhaitez.

Attention, afficher la description peut générer du contenu dupliqué sur votre site, il est donc préférable de ne pas l’activer ou du moins, d’utiliser le moins de caractères possibles afin d’en limiter les effets. (Conseil SEO)

Depuis la V3, vous pouvez maintenant configurer le menu des catégories qui se situera en haut du blog. Il permet ainsi d’ajouter un menu horizontal pour pouvoir naviguer facilement sur les sites 1 colonnes. Il est bien entendu utilisable sur les sites à plusieurs colonnes. Vous pouvez aussi le désactiver évidemment.

Menu catégories dans les pages du blog

Il est déconseillé pour ces deux menus (bloc et haut du blog) d’afficher les catégories vides, ca n’aidera pas votre référencement 😉 (Conseil SEO)

Haut de la première page d’une catégorie

Une des nouveautés de cette V3, c’est aussi la possibilité de personnaliser votre catégorie avec une image, une description, et surtout, une balise h1 que vous pourrez optimiser pour votre référencement (Conseil SEO).

Options des listes d’articles

Veillez à indiquer les bonnes largeur afin de ne pas perdre en qualité. (voir quelques conseils dans la section images du tutoriel pour retrouver la bonne taille si vous avez des difficultés)

h1 et categories

Gestion des blocs

Si votre template ne dispose pas de colonnes, cette section ne vous intéressera pas beaucoup. En effet, les blocs s’affichent sur les colonnes (hook_right et hook_left). Vous pouvez cependant activer les derniers articles en footer si vous le souhaitez.

Bloc derniers articles

bloc derniers articlesSi vous activez ce bloc, vous pourrez voir les derniers articles en colonne de droite ou de gauche. Vous pouvez activer ou non le bouton pour accéder à tous les articles, l’index de votre blog en fait.

Bloc Articles par date

Ce bloc affiche les liens envoyant vers les archives par année.

Bloc de recherches d’articles

Il permet d’ajouter un bouton dans votre colonne pour rechercher dans vos articles.

Bloc RSS pour tous les articles

Ce bloc permet aux utilisateurs de suivre votre blog via leur agrégateur. L’affichage ne peut pas être correcte sans avoir au préalable installé un agrégateur. Cet outil est cependant de moins en moins utilisé par les internautes.

Ordre des blocs dans les colonnes

Glissez déposez chaque bloc sur la colonne de gauche ou de droite. (Hook_left ou Hook-right)

Ordre des blocs par rapports aux autres modules de blocs

Si vous souhaitez modifier l’emplacement de vos blocs par rapport à d’autre modules (par exemple, le bloc meilleurs ventes), il suffit de vous rendre dans Modules > Positions.

Retrouvez la partie displayLeftColumn ou displayRightColumn et changez l’emplacement de prestablog en glissant déposant ou à l’aide des flèches prévues à cet effet.

Si vous souhaitez que certains blocks de votre boutique n’apparaissent pas sur le blog. Toujours dans la page Positions, éditez le block que vous souhaitez faire disparaître et dans les exceptions, recherchez la valeur « module-prestablog-blog » (sans les guillemets), sélectionnez et enregistrez.

Dernières actualités en footer

Un bloc parfait si vous n’avez pas de colonnes pour permettre à vos visiteurs d’accéder à vos derniers articles depuis n’importe quelle page de votre site. D’un point de vue référencement, cela permet aussi d’ajouter un peu de jus à vos publications récentes.

Configuration des commentaires

Depuis la version 3.6, il vous est désormais possible d’activer les commentaires facebook au lieu du système classique.

Si vous souhaitez modérer les commentaires via l’outil facebook, rendez-vous sur https://developers.facebook.com/tools/comments/
Si vous n’avez pas de compte actif, je vous invite à en créer un en cliquant en haut à droite sur my apps > add a new apps
. Suivez ensuite les instruction sur facebook.

Retour à votre backoffice prestashop, saisissez le numéro API facebook ID dans le champ prévu.

Vous pouvez aussi ajouter des modérateurs qui pourront intervenir directement sur les commentaires dans le dernier champ.

Cliquez sur mettre à jour.

Vous pouvez, si vous préférez, utiliser le systeme de commentaires classique ci dessous :

Configurer les commentaires du blog

Simple à configurer, ce module vous permet de gérer comme vous le souhaitez les commentaires.

Lorsque l’option « toujours visualiser les commentaires » est désactivée, un bouton javascript doit être cliqué pour les afficher, peut être utile pour certains besoins. Attention, si votre template n’intègre pas fancybox sur les pages du blog, le bouton afficher les commentaires ne fonctionnera pas. il vous faudra donc intégrer le js dans toutes les pages du site.

Approuver automatiquement est fortement déconseillé.

Lien en nofollow, certaines personnes souhaitent ne pas donner de jus aux commentaires de leurs internautes, c’est un choix. Cela n’empêche pas de perdre le jus, mais ça n’en transmet pas. (le jus : puissance donnée à un lien permettant de gagner indirectement des positions en référencement)

Pour le reste, il n’est pas nécessaire de donner des explications, l’indication dans le module est tout à fait suffisante.

Activation du rewrite

Rendez-vous dans l’onglet configuration du blog, cliquez ensuite sur l’onglet rewrite pour accéder au bouton d’activation.

C’est le passage obligatoire pour rendre votre blog SEO Friendly et permettre ainsi aux robots des moteurs de recherche de correctement naviguer sur votre blog en ayant des URL plus propres. Une fois activé, vous n’avez rien d’autre à faire. *Ne le désactivez pas une fois votre site mis en production, sinon, vous généreriez de nombreuses erreurs 404 sur votre site impactant ainsi votre référencement.

Configuration globale

Sont regroupés ici les configurations générales de votre front office avec le nombre d’articles que vous souhaitez afficher sur vos pages. 5 est un minimum, nous conseillons généralement entre 5 et 10.

Vous  pouvez ajouter ici un onglet dans les pages produits liés à vos articles.

Activer ou non les boutons de partages pour les réseaux sociaux Google+, facebook et twitter etc.

Dans cette partie, vous pouvez aussi configurer les miniatures qui seront présentes dans le listing de vos articles. Très utile lorsque vous avez un blog dont les largeurs sont différentes du template d’origine. Nous vous conseillons tout de même de toucher à cette option avant d’intégrer vos articles, histoire de ne pas devoir régénérer toutes les images ensuite.

Configuration de l’administration

La partie droite vous permet d’organiser votre backoffice blog, de la manière qui vous semble la plus pratique. suivant les écrans, il peut être intéressant d’afficher plus ou moins d’articles.

Lien « blog » dans le menu haut

lien-blog

Si vous souhaitez supprimer le lien qui apparaît dans le menu haut horizontal de prestashop,

Sur prestashop 1.6

il suffit de vous rendre dans la section modules > positions . Recherchez la partie « hookDisplayNav » et supprimez prestablog.

Sur prestashop 1.7

Cliquez sur « point d’accroche » lorsque vous êtes sur l’interface du blogdans votre backoffice. Recherchez la partie  « displayNav2 » (prestashop 1.7) et supprimez prestablog.

Si vous souhaitez l’ajouter, faites la manipulation inverse.

Configuration des utilisateurs

Il se peut que dans certain cas, vous souhaitiez qu’un de vos employés accède à l’administration du blog, et seulement du blog sur votre shop.
Pour cela, rendez-vous dans l’onglet permission de votre backoffice prestashop, veuillez cocher les parties :

  • Modules et Services (afficher/modifier)
  • PrestaBlog dans la colonne menu (afficher/modifier)
  • PrestaBlog à droite dans la colonne modules (Afficher/configurer)

Gestion des contenus

3 onglets apparaissent, Articles, Commentaires, Catégories.

Dans un premier temps, il serait intéressant de créer vos catégories.

Gestion des catégories

categorie gestion

Cliquez sur le bouton ajouter une catégorie. Le 1er champ à remplir est le nom de votre catégorie, le deuxième servira à indiquer le level de la catégorie (parente ou enfant). Vous n’êtes pas limité dans les sous catégorie, vous pouvez aller jusqu’à 4 voir 5 niveaux, mais nous vous déconseillons tout de même. L’internaute risque de ne pas être agréablement surpris de devoir surfer dans un menu avec de nombreux niveaux. Préférez un menu à 2 niveaux maximum. (une catégorie parent contenant  une sous catégorie qui contient elle même des sous catégories)

Vous pouvez ensuite ajouter une image à la bonne dimension (voir section catégorie dans le menu de configuration pour repérer la bonne dimension.) Comme pour les images du slideshow, il est important d’avoir les bonnes dimensions pour éviter à votre serveur de faire un redimensionnement et perdre en qualité d’image.

En revenant sur la catégorie après avoir validé son insertion, vous pourrez ajuster les différents formats d’images. (miniature pour les blocs ou image large pour le haut des listing de catégorie)

crop image categorie

Le bouton activer ou désactiver peut vous permettre de désactiver toute une catégorie, mais nous vous le déconseillons d’un point de vue référencement, cela pourrait pénaliser le travail que vous avez effectué jusque la en désactivant vos différents articles. Sauf si bien entendu ils sont présents dans d’autres catégories.

Ordre de vos catégories

Pour ordonner vos catégories comme vous le souhaitez, cliquez simplement sur l’onglet en haut de la liste : Ordre des catégories, il vous suffira ensuite de glisser / déposer les différentes catégories dans l’ordre ou vous souhaitez qu’elles apparaissent et de mettre à jour la configuration pour sauvegarder vos changements.

ordonner les catégories du blog

Gestion des permissions de groupe

Comme pour vos catégories de produits, prestablog vous permet de restreindre l’accès à certain groupe. Il suffit, lorsque vous créez une catégorie, de choisir les groupe qui y auront accès.

group-permissions

Gestion des articles

Sur cette page, vous pouvez administrer vos différents articles déjà publiés ou en ajouter un nouveau. N’hésitez pas à utiliser le filtre présent si besoin.

Vous pouvez ainsi activer ou désactiver un article rapidement, voir le publier directement sur le slideshow de votre page de blog (ou d’accueil suivant votre configuration, voir section configuration)

Gestion des articles du blog

Ajouter un article

gestion d'un article du blog
Voici l’interface à la quelle vous avez accès en cliquant sur l’onglet ajouter un article

Gestion des langues

Vous constaterez rapidement que vous pouvez publier un article dans une langue uniquement ou bien choisir de jumeler votre article. Très pratique lorsque vous n’avez pas la possibilité de les traduire par exemple.

Titre principal

Ce titre doit être explicite dans votre article, ni trop long, ni trop court, il va permettre à vos clients de rapidement comprendre de quoi il sera question dans votre article. Il est aussi important pour votre référencement car il s’agit de la balise H1 (balise de titre de niveau 1), il doit donc contenir une partie des mots clefs principaux (n’abusez pas non plus, google n’aime pas la sur-optimisation)

Activer ou désactiver un article

Ces boutons radios vous permettent de rendre votre article accessible ou non, cela vous permet de revenir sur votre article si vous ne l’avez pas encore terminé ou de le désactiver pour une raison ou pour une autre.

Cependant, d’un point de vue référencement, il est conseillé de conserver l’article quitte à le modifier afin de ne pas générer d’erreur 404 (une page supprimée)

Slide

Vous pouvez décider ici si votre article sera mis en avant ou non sur votre slideshow. (voir section configuration)

Commentaires

D’un coup d’œil, vous avez accès aux commentaires de votre article, pratique pour modérer ou revoir les discussions à propos de celui-ci. Il suffit de cliquer pour développer l’interface commentaires.
gestion des commentaires

Optimisez votre article pour le référencement (SEO)

URL rewrite

Si votre article n’est pas encore publié, vous pouvez décider de modifier l’url, il est conseillé de réduire au maximum la longueur de votre url en supprimant les mots clefs qui ne sont pas importants (de, les, du, et, etc.). Tablez sur une url de 3 ou 4 mots maximum.

Si l’article est déjà publié, vous ne pourrez plus changer l’url sans avoir cliqué sur le bouton « activer l’url rewrite ». Toutefois, cela génèrerait des erreurs 404 que les moteurs n’apprécient pas. Veillez donc à bien changer l’url avant que votre article soit indexé par les moteurs de recherche.

Meta title

Important pour votre référencement. Veillez à ne pas dépasser 70 caractères et ne pas utiliser une suite de mots clefs, préférez une phrase simple contenant certains de vos mots clefs principaux.

Meta description

Celle-ci n’est pas importante pour vous positionner, mais elle reste très utile pour optimiser les cliques sur les moteurs de recherche. Avec une belle phrase, vous inciterez au clique, ne la négligez pas.

Meta mots-clef (meta keyword)

Même si la personnalisation est possible, nous vous conseillons de ne pas vous attarder sur les mots clés, devenu inutiles pour les moteurs de recherche.

Bien entendu, pour chacun de ses éléments, vous pouvez optimiser pour chacune des langues de votre article.

Image principale

Image principale du blog

Cette image est importante pour votre blog, elle se retrouvera :

  • dans les catégories
  • sur le slideshow
  • dans les blocs derniers articles
  • dans vos pages produits associés

Il est donc important de mettre une belle image, et surtout aux bonnes dimensions !

Exemple : Votre contenu fait 800 px (pixels) de large, si vous envoyez une image de 400 px, votre serveur la redimensionnera ensuite et devra ajouter des pixels qui dégraderont la qualité de l’image. Veillez donc à utiliser la bonne largeur minimum : 800px.

Une trop grande taille n’est pas conseillée non plus car votre image pourrait aussi être dégradée (suivant le réglage de votre hébergement). Préférez donc utilisez la taille exacte. (tutos photoshop)

Comment retrouver la largeur de votre contenu ?

7Lorsque vous uploadez une image et qu’elle est visible sur votre slideshow, rendez-vous sur votre frontoffice, avec firefox, clique droit sur l’image puis informations sur l’image. Vous obtiendrez ainsi la dimension en pixels. Si l’image est redimensionnée, utilisez ces valeurs.

Cette dimension vous sera aussi utile pour la gestion de vos articles et faire de belles mises en page professionnelles. Elle sera aussi utile pour la configuration de votre slideshow.

Vous souhaitez utilisez qu’une certaine partie de l’image, n’hésitez pas à recadrer l’image via l’outil mis à disposition. Choisissez le thumb par exemple, cliquez sur l’image en restant appuyé, un cadre va apparaitre, placez le à l’endroit que vous désirez, puis cliquez sur le bouton redimensionner

redimensionner une image de blog

Passons au contenu avec l’introduction

Ce texte se retrouvera sur les articles épinglés sur le slideshow mais aussi dans vos catégories et les divers endroits ou vous souhaitez faire apparaitre un article. (colonnes droite ou gauche, footer, articles liés à un produit)

Vient ensuite le contenu principal

Appliquez-vous ! Rédigez un article unique, le contenu copié collé est néfaste pour votre référencement. Que ce soit sur votre site ou depuis l’extérieur, il ne doit exister qu’une seule version de votre texte sinon, vous pénaliserez votre page, voir pire si cela se répète trop, tout votre site internet ! (sans parler du coté illégale de la copie.)

Vous avez accès aux mêmes options que pour vos pages produits.

Concentrons nous sur l’essentiel, le texte, la mise en page et les images. Un article sans images est bien moins intéressant pour vos visiteurs, alors, abusez-en !

La mise en page

Elle doit être aérée et ponctuée de titres (comme sur cet article). Chaque titre a un niveau en fonction de son importance et appartenance à une section de votre article.

  • H1 = titre du document (reprise depuis le champ titre principal au début de votre page)
  • H2 = titre de second niveau
  • H3 = titre de troisième niveau (toujours après une balise h2)
  • Etc.

Viendront ensuite les h4, h5, h6 mais c’est déjà plus rare d’avoir besoin de les utiliser. Par exemple, cet article a été jusqu’aux balises h5 !

N’oubliez pas non plus d’utiliser du gras, des listes à puces etc.

Conseil : N’utilisez pas les fonctions de coloration de texte, évitez de copier/coller depuis word sur n’importe quel système, cela génère du code qui ne devrait pas être sur un site web. D’une manière générale, utilisez les styles de votre template, n’en rajoutez pas, cela nuit à l’uniformité de votre site.

Ajouter des images sur votre article

Pour ajouter une ou plusieurs images, cliquez sur l’icône prévue à cet effet dans votre outil wysiwyg. (voir la capture d’écran ci-dessous Insert/edit image)

ajout images dans le blog

Pour une belle mise en page de votre article, je vous conseille d’utiliser la largeur de votre contenu (nous avons vu précédemment comment récupérer cette valeur avec l’image principale).

Aligner à droite ou à gauche une image

Si toutefois, vous aviez besoin d’aligner à gauche, ou à droite une image, vous aurez besoin (pour les versions < prestablog 3.4) d’activer une option dans le tinymce qui n’a pas été implémenté d’origine par l’équipe prestashop.

Rendez-vous dans le fichier js de prestablog : /modules/prestablog/js/tinymce.inc.1.6.js pour un prestashop 1.6, et …/tinymce.inc.js pour la version 1.5.

Version 1.6 : A la ligne 32, ajoutez une ligne et insérez : image_advtab: true,
Version 1.5 : A la ligne 27, ajoutez une ligne et insérez : image_advtab: true,

Vous aurez ensuite un onglet « advanced » qui apparaitra lorsque vous souhaitez ajouter une image. Pour ajouter des marges, il suffit de mettre une valeur dans les champs vertical space et horizontal space. Vous devrez ensuite ajouter un alignement manuellement,

  • gauche : float: left;
  • droite : float: right;

Rien ne vous empêche ensuite, si vous avez les connaissances css, d’ajouter d’autres styles.

Voir l’image ci-dessous pour bien comprendre :

style img tinymce prestashop

Prenez comme exemple cet article pour vous inspirer de la mise en page.

Choix des catégories

Il vous suffit de cocher la catégorie dans la quelle vous souhaitez voir s’afficher le résumé qui mènera à votre article. Vous avez la possibilité de cocher plusieurs catégories.

Cette partie permet de lier vos articles à vos produits et vice versa (voir la section configuration). Elle permet aussi d’améliorer votre linking interne et favorise ainsi votre référencement.

Entrez dans le tableau de droite le nom d’un produit, cliquez sur la flèche correspondant à celui que vous souhaitez associer.Les éléments liés s’affichent sur le tableau de gauche.

Qualité des images (PS 1.6)

Sur prestashop 1.6, une nouvelle option a fait son apparition, la gestion de la qualité d’upload de vos images.
Pour régler à la compression minimum et obtenir des images de qualité, rendez-vous dans préférences > images et réglez comme ci dessous

qualite images blog prestashop

Onglet Outils

Tois outils sont disponibles,

Antispam

Antispam pour le blog prestashop

Son fonctionnement est simple, vous posez une question et l’internaute doit y répondre pour pouvoir poster un commentaire sur votre blog. S’il s’agit d’un robot, il sera logiquement bloqué à ce niveau là.

Vous devez donc créer les questions et indiquer les réponses, rien de plus simple, il suffit de remplir les deux champs proposés.

La gestion des langues est disponible, n’oubliez pas de traduire la question/réponse sous peine de voir vos vrais clients incapables de répondre.

Évitez les questions trop compliquées…

Importation depuis wordpress

Importation wordpress vers prestashop

Pour importer le contenu d’un blog wordpress directement sur le module blog, vous devez vous rendre sur votre interface wordpress pour générer le fichier XML qui servira à l’importation.

Rendez-vous dans Outils > Exporter > Sélectionnez Articles

Une fois le fichier généré, enregistrez-le, rendez-vous sur votre backoffice prestashop, et importez le fichier

Vous pourrez ainsi choisir la langue d’importation, et vous constaterez que vos articles auront été importés avec succès, conservant ainsi votre contenu ainsi que vos images, votre ancienne url, les metas tags, la date de publication. L’import aura même créé les catégories manquantes.

Il ne vous restera plus qu’a mettre à jour votre image à la une et valider l’article.

Attention à ne pas laisser les deux blogs en ligne, vous risquez d’avoir des problèmes avec google et la duplication de contenu.

Sitemap

Il se peut que vous ayez besoin du sitemap afin de parfaire l’indexation de votre blog, le sitemap est assez simple à utiliser, il regroupe plusieurs sitemap de chacune de vos catégories dans un seul et même fichier principal. Ceci afin d’alléger la charge serveur en cas de blog de grosse envergure. Cependant, si votre blog n’a pas beaucoup d’articles, le sitemap sera probablement inutile pour vous.

Vous pouvez mettre en place une tache cron à l’aide du module éditeur de tâches cron fournit gratuitement par prestashop. Le sitemap se mettra ainsi à jour automatiquement. Attention à ne pas mettre une période trop courte, surtout si vous n’écrivez pas plusieurs articles par jour, ce serait inutile et gourmand en ressource pour rien.

N’oubliez pas ensuite d’indiquer sur votre outil webmaster l’url du sitemap master (il regroupe tous les autres) fournie dans la configuration, sinon, il ne servira à rien ! 🙂

Concernant le robots.txt, il se peut que vous ayez installé une interdiction d’indexer le dossier modules/, dans ce cas, il faudra ajouter la ligne suivante :

Allow: /modules/prestablog

Modification du template

Vous souhaitez modifier le template de votre module prestablog, l’affichage en deux colonnes n’est pas ce que vous souhaitez pour votre design, vous désirez afficher prestablog sur 3 colonnes ? ou même 1 colonne ?

Voici une méthode simple qui vous y aidera…

Comment afficher prestablog sur 3 colonnes

Prenons comme références la dernière version en date à l’heure ou j’écris ce tutoriel, version 4.0.0 de prestablog pour une version 1.7.

Tout d’abord, désactivez le cache et la compression de votre feuille css dans votre backoffice > Paramètres avancés > Performances >

  • Mettre l’option Cache sur « Non », et « recompiler les fichiers de templates s’ils ils ont été mis à jour ».
  • « Smart cache » pour les feuilles de style sur NON

Ouvrez votre navigateur afin d’afficher votre blog. Ouvrez ensuite votre outil de développement en utilisant chrome ou firefox à l’aide de la touche F12.

Une nouvelle fenêtre s’affiche. Cela peut paraitre compliqué au départ, mais vous allez voir que cet outil est très agréable et simple à utiliser.

development tool

Cliquez sur l’icône juste à gauche du bouton inspecteur (le bouton bleu que vous voyez sur la capture d’écran ci dessus.)
Ceci va vous permettre en survolant les zones de votre blog, de mettre en avant les différents styles associés. Repérez le bloc complet qui englobe, la photo, le titre etc. Comme la capture d’écran ci-dessous :

selection bloc

Vous pourrez ainsi voir dans la fenêtre de votre outil de développement le code qui est en rapport avec cet affichage. En l’occurance, la balise <li>, ses règles css associées à droite. Celle qui nous intéresse est tout en haut de la liste et normalement présente à la ligne 379 dans la feuille de style située dans le dossier /modules/prestablog/views/css/grid-for-1-7-module.css. (infos indiquées par l’outil de dev)

info div

Cliquez sur la ligne « width:50% » à l’endroit ou il y a 50%. Passez la valeur à 33%. Vous verrez en direct votre blog passer en 3 colonnes.

Attention, ce n’est pas fini. Maintenant que vous avez repéré la bonne ligne dans votre fichier css, il vous suffit d’utiliser votre éditeur html (dreamweaver, notepad ++, ou un simple éditeur de texte), ouvrir le fichier css dont nous avons retrouvé l’adresse précédemment, repérer la ligne 379 ou la class #blog_list li, et passer le width à 33%, enregistrer, et envoyer via votre ftp le fichier modifié.

Vérifiez en actualisant votre navigateur que votre design est bien modifié. (videz son cache si jamais la modification n’est pas prise en compte).

N’oubliez pas ensuite, de remettre les valeur à la normal dans votre backoffice > Paramètres avancés > Performances

Comment afficher prestablog sur 1 colonnes

Il suffit de mettre 100% sur le width de la class #blog_list li au lieu de 33%, tout simplement.
L’image étant nettement plus grande, il vous faudra par contre revoir les dimensions des thumbs liés à l’article, en allant dans Prestablog > Options des listes d’articles. Repérez la largeur du bloc à l’aide de votre outil de dev, et inscrivez la nouvelle valeur dans la partie « Largeur de miniature d’un article ».

Et voila, vous avez toutes les clefs pour bien utiliser votre blog. Si vous avez des questions, n’hésitez pas à commenter cet article, cela pourrait servir à d’autres utilisateurs.

Acheter chez HDClic Acheter chez Addons

Article publié le 18 décembre 2013 par Benoit Perrier

Il y a 12 commentaires pour ce billet

Le 19 décembre 2013 à 17 h 51 min par Eric

Merci beaucoup pour ce tuto, je suis en train de monter ma boutique et j’ai vraiment bien avancé grâce à ça.

Le 16 septembre 2014 à 10 h 52 min par Mélanie

J’ai lu le tutoriel dans sa totalité, appliqué vos conseils, et le moins qu’on puisse dire, c’est que l’aspect du blog s’en ressent ! Ca fait pro, merci beaucoup.

Le 19 novembre 2014 à 10 h 47 min par Aurélien Debord

Excellent tutoriel, merci.

Le 1 décembre 2014 à 10 h 31 min par Lili

Merci pour cette documentation très détaillées !

Comme le dit Mélanie, j’apprécie aussi votre professionnalisme

Le 20 janvier 2015 à 11 h 42 min par Stefan KRUGER

Bonjour,

Merci pour ce tutoriel que je trouve très complet sur l’utilisation des fonctionnalités.

Je me permet toutefois de vous poser une question ici car certaines personnes pourraient être intéressées ( peut être que cela vous a déjà été demandé ).

Pour l’instant je n’ai pas l’impression qu’on puisse lier des droits aux différents éléments du module. En bref j’aimerais avoir un droit qui correspondrait aux rédacteurs mais qui n’auraient accès qu’à la gestion d’articles et de catégories mais pas à la configuration du blog en lui-même. Actuellement le module se base sur la gestion des droits mais lorsque le module est accessible toutes ses composantes le sont aussi.

Ai-je loupé quelque chose quelque part dans la configuration ?

Il pourrait par exemple y avoir un tableau croisé des droits et des fonctionnalités du blog afin d’affiner la gestion des contenus.

Merci d’avance.

Le 4 mars 2015 à 13 h 45 min par Benoit Perrier (author)

Bonjour Stefan,
Nous avons effectivement regardé les possibilités données par l’outil prestashop pour coupler un système avec droits, mais il s’agit d’une véritable usine à gaz… Et malheureusement, les versions de prestashop évoluant très rapidement, il serait difficile de les suivre à cause d’une telle fonctionnalité.

Le 20 mars 2015 à 16 h 17 min par ROQUES Pierre-Antoine

Tutoriel de grande qualité avec une excellente optimisation du contenu (clair et épuré).

Le 8 juin 2015 à 8 h 13 min par dave

Super blog franchement et fiable stable

Le 5 janvier 2016 à 14 h 11 min par Stéphane

Très sympa mais je n’ai pas réussi à mettre le lien dans ma barre de catégories sur Prestashop.

Le 5 janvier 2016 à 14 h 40 min par Benoit Perrier (author)

Bonjour Stéphane, la barre des catégories de prestashop (le menu horizontal) est un module prestashop, il suffit de s’y rendre, et d’ajouter le lien vers le blog, tout simplement.

Le 20 octobre 2016 à 14 h 25 min par Anne

Bonjour,

Je suis utilisatrice du module Prestablog mais ne trouve pas d’informations sur la manière de mettre en place une vidéo dans un article.

A quoi correspondent les champs : Source / Alternative source et Poster ?

Et est il possible d’intégrer une vidéo depuis Vimeo ?

Merci par avance,

Anne

Le 20 octobre 2016 à 14 h 42 min par Benoit Perrier (author)

Bonjour Anne,
Il suffit d’aller sur l’icone insert vidéo, de cliquer sur embed, et d’importer le code source fournit par vimeo, youtube ou n’importe quel autre fournisseur de video.

Pour discuter de l'article, vous pouvez utiliser les commentaires ci-dessous.