WordPress : Créer sa boutique en ligne avec WooCommerce

Configurer sa boutique en ligne WordPress avec WooCommerce
Afficher une page produit sous WordPress
WooCommerce : Affichage d’un nouveau produit

Comment créer sa boutique e-commerce gratuitement sous WordPress

Tout comme WordPress est gratuit, il est possible d’installer un plugin gratuit pour créer facilement sa boutique en ligne sur son site internet : woocommerce. Cette extension WordPress utilisée par des millions de personnes permet de créer une partie e-commerce à son site internet WordPress.

Créer sa boutique e-commerce sur WordPress

Nous allons vous expliquer dans ce tutoriel comment créer sa boutique e-commerce sur WordPress.

Installer le plugin de e-boutique WooCommerce

  • Rendez-vous dans l’administration.
  • Dans Extensions, cliquez sur “Ajouter“.
  • Cherchez “WooCommerce“.
  • Installez & activez-le.

Comment configurer WooCommerce et WordPress pour sa boutique en ligne ?

Il est très facile de créer sa boutique WordPress en ligne avec WooCommerce. C’est aussi intuitif si ce n’est encore plus que Prestashop – sans ses nombreux inconvénients.

Configurer sa boutique en ligne WordPress avec WooCommerce
WooCommerce : Configurer son site internet WordPress en e-boutique

L’assistant d’installation de sa boutique e-commerce est facile à mettre en oeuvre, voici un descriptif détaillé pour bien s’y prendre en installant sa boutique.

Créer sa boutique en ligne e-commerce avec WordPress et WooCommerce
WooCommerce : Configurer sa boutique e-commerce WordPress
Créations des pages WordPress pour Woocommerce (boutique...)
WooCommerce : Création des pages e-boutique

Ce sont les pages nécessaires au fonctionnement de WooCommerce, nous vous recommandons fortement de laisser WooCommerce créer ces pages pour vous.

Configuration des prix des produits avec la TVA
WooCommerce : Configuration de la TVA avec le prix des produits

Configurer facilement la TVA. Vous pouvez choisir comment vous allez rentrer le prix de vos produits.

Vous pouvez configurer la TVA de manière plus avancée dans l’onglet Réglages TVA de WooCommerce (voir ci-après).

Mise en place de moyens de paiement sous WooCommerce
WooCommerce : Configuration des moyens de paiements

Vous pouvez choisir tous les moyens de paiements sur votre site internet e-commerce. Les paiements par carte de crédit / Paypal sont les plus utilisés sur Internet.

Créer sa boutique en ligne sur WordPress
WooCommerce : Fin de la configuration

C’était aussi simple que cela de configurer sa boutique e-commerce avec WordPress. Cette pré-configuration est utile pour vous permettre de comprendre un peu comment fonctionne WooCommerce, cela vous permet aussi de générer les diverses pages nécessaires à votre boutique.

(*) Astuce : Vous pouvez installer de nombreuses extensions pour votre site e-commerce WooCommerce.

WooCommerce : Configurer les zones géographiques et le paramétrage de la TVA

Les zones géographiques sont retrouvables grâce aux zones de livraison. Vous pourrez également configurer la TVA à appliquer pour les différentes zones.

Bannière de configuration WooCommerce sur les zones géographiques et la TVA
WooCommerce : Options de paramétrages de la TVA
Paramétrer la zone géographique et la TVA pour la France
WooCommerce : Configurer la zone TVA pour la France

WooCommerce : Créer une fiche produit

Vous avez la possibilité de créer des produits directement depuis le menu “Produits” de WordPress. Vous pouvez également ajouter des catégories à vos produits comme vous le feriez pour les articles.

Créer un nouveau produit dans sa boutique e-commerce sous WordPress
WooCommerce : Créer un nouveau produit

Voici la simple fiche de création de produit. Je n’ai rien mis dans la description car je n’en avais pas besoin. La description entrée créera un onglet “Description” à côté de l’onglet “Avis” dans la fiche produit (voir photo tout en haut).

WordPress : Sauvegarder son site internet tous les jours (backup)

Sauvegarder son site internet Wordpress
Sauvegarder son site internet WordPress
Sauvegarder son site internet WordPress avec le plugin backWPup

Comment mettre en place la sauvegarde de son site internet WordPress

Faire des sauvegardes (backups) de son site internet devrait être obligatoire, je ne compte plus le nombre de personnes que je connais ayant perdu leur données en ayant dit “Je ferais des sauvegardes”.

Sur internet c’est encore plus vrai, car n’importe quel serveur peut crasher, et si votre hébergeur n’a pas de système de sauvegarde, vous l’avez dans l’os (chez Cubis nous sauvegardons les backups sur un autre serveur).

Un exemple simple. Vous faites une mise à jour de WordPress, dès lors, plus moyen d’accéder au site internet ni à l’administration ; votre site reste blanc. Si vous avez mis en place des sauvegardes, il sera bien plus rapide de restaurer votre site internet.

BackWPup : Sauvegarder son site internet WordPress tous les jours

Le plugin BackWPup permet de sauvegarder facilement son site internet WordPress sans connaissance techniques.

Dans BackWPup > Opérations, créer une nouvelle opération : je l’ai appelé Sauvegarde journalière.

Sauvegarder son site internet WordPress avec backWPup
Paramétrer la sauvegarde quotidienne de son site Internet WordPress

J’ai coché toutes les sauvegardes possibles

  • Sauvegarde de la base de données (essentiel)
  • Sauvegarde des fichiers (essentiel)
  • Export XML WordPress (permet d’exporter le contenu du site WP pour le réimporter dans une nouvelle instance de WP)
  • Liste des extensions installées (pour pouvoir les réinstaller facilement en cas de restauration)
  • Vérification des tables (optionnel, permet de vérifier si la base de données n’est pas corrompue)
Sauvegarder son site internet WordPress sur un autre espace
Déplacer sa sauvegarder WordPress par email, DropBox…

Sauvegarder dans le répertoire est la bonne chose à faire de base.

Le mieux est d’envoyer la sauvegarder sur un autre serveur (comme un FTP). DropBox permet de stocker gratuitement quelques gigas, mais je ne fais absolument pas confiance à ce service.

Enregistrer ensuite la nouvelle opération de sauvegarde quotidienne de WordPress.

Programmer la sauvegarde de son site internet WordPress

Dans l’onglet programmation, j’ai simplement indiqué une sauvegarde quotidienne de WordPress.

Sauvegarder son site internet WordPress tous les jours
Paramétrer la sauvegarder de WordPress tous les jours à 3h du matin

Lancer la sauvegarde manuelle de son site internet WordPress

Dans BackWPUp > Opérations, passez votre souris sur la sauvegarde que vous voulez tester et cliquez sur “Lancer la sauvegarde manuelle“.

Votre site sera alors sauvegardé et vous pourrez vérifier que votre système de sauvegarde fonctionne correctement.

WordPress en cours de sauvegarder via le plugin backWPup
Sauvegarde en cours de WordPress…

 

WordPress : Comment modifier correctement son thème ?

Modifier un thème Wordpress via le CSS
Modifier un thème WordPress via le CSS
Capture d’écran de l’inspecteur CSS de Google Chrome sur mon thème WordPress

Pour bien modifier votre thème WordPress, et le modifier correctement, vous allez avoir besoin de créer un thème enfant.

Un thème enfant vous permettra de modifier votre thème WordPress courant sans pour autant vous priver de ses mises-à-jour.

1 – Créer un thème enfant sous WordPress

Un excellent plugin existe pour créer un thème enfant sous WordPress, il s’agit de Child Theme Configurator, nous en parlions dans notre article : Les meilleurs plugins WordPress en 2017.

En un clic, il vous permet de créer la copie conforme de votre thème actuel WordPress.

Une fois installé, Child Theme Configurator se trouve dans Outils > Thèmes enfants.

Pour créer un nouveau thème enfant WordPress il suffit de voir l’option : “CRÉER un nouveau thème enfant“. Une fois analysé, votre thème est prêt à être copié dans un thème enfant, cliquez sur le bouton en bas “Create new child theme“, laissez toutes les options proposées par défaut.

Modifier son thème WordPress avec un thème enfant
Thème enfant du thème WordPress par défaut : Tweenty Seventen

2 – Activer son thème enfant pour modifier son thème WordPress

Une fois le thème enfant créé, dans Apparence, un nouveau thème s’est créé, votre thème enfant. Activez-le.

A ce stade retournez sur votre site, vous devriez avoir exactement la même chose qu’avec le thème parent.

Si ce n’est pas le cas, la feuille de style a probablement sauté, essayez de changer cette option dans Child Theme Configurator ou laissez-nous un commentaire pour que l’on puisse vous aider.

Maintenant que le thème enfant de votre thème WordPress est activé, nous allons pouvoir modifier le thème sans casser les mises à jour du thème parent.

3 – On peut maintenant customiser son thème WordPress

Dans Apparence > Editeur, vous voyez que la structure a changé, un seul fichier CSS existe, le fichier style.css dont vous allez vous servir pour réécrire les propriétés de votre thème parent. Ne touchez pas au fichier functions.php.

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Tags: one-column,two-columns,right-sidebar,flexible-header,accessibility-ready,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,post-formats,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready
Version: 1.1.1488900103
Updated: 2017-03-07 15:21:43
*/

C’est ici que vous placerez votre nouveau CSS, le fichier est vide, c’est normal ! Par exemple, vous allez pouvoir changer la couleur de fond de l’entête votre thème WordPress ici, grâce au CSS.

Modifier le code CSS de son thème WordPress

Modifier un thème WordPress via le CSS
Capture d’écran de l’inspecteur CSS de Google Chrome sur mon thème WordPress

Sur Google Chrome (CTRL+MAJ+I), sur Firefox (F12).

  • La petite flèche en haut à gauche de la console permet de sélectionner un élément (passez votre souris sur la page).
  • En bas à gauche, on peut modifier notre code CSS à la volée pour voir ce que cela donne.

Une fois le code CSS modifié, il n’y a plus qu’à le reporter dans notre feuille de style (style.css que l’on a vu plus haut).

body:not(.home) header#masthead { background-color: white; }

Depuis ce que j’ai pu constater dans mon code CSS, ce code devrait fonctionner car au niveau de l’inclusion du code du thème enfant dans WordPress, cette inclusion est faite après le thème parent, donc prend le dessus.

Si ce n’est pas le cas, ne pas hésiter les variantes suivantes, en rajoutant “html” devant ou “!important” après la propriété (en dernier recourt ou pour overrider ce qui est écrit avec la balise html “style”.

html body:not(.home) header#masthead { background-color: white; }
body:not(.home) header#masthead { background-color: white !important; }

Bon courage ! N’hésitez pas à nous poser vos questions sur la modification de thèmes WordPress en commentaire !!

WordPress : Notification si quelqu’un se connecte sur l’admin

Alerte connexion admin Wordpress

Alerte connexion admin WordPress

Alerte de connexion à l’administration de WordPressPour augmenter la sécurité de son site internet WordPress, nous avons choisi d’être averti en cas de logging d’un administrateur sur le backoffice de WordPress.

Recevoir une notification si un administrateur se connecte sur votre site WordPress vous permettra de réagir rapidement en cas d’attaque !

Alerte de connexion sur l’admin WordPress

Le plugin WordPress que nous utilisons s’appelle tout simplement “Email notification on admin login“. Il fonctionne à merveille, voir la capture d’écran en haut de l’article.

Vous n’avez qu’à l’installer et il fait tout tout seul !

Configurer le plugin d’alerte de connexion à l’administration de WordPress

Le plugin très simple comporte deux fichiers situés dans :

/wp-content/plugins/email-notification-on-admin-login/

Changer le destinataire de l’adresse e-mail de notification de connexion

Ligne 13 du fichier config.php, la ligne suivante permet d’utiliser l’e-mail du responsable du site :

 define("ADMIN_EMAIL", "$admin_email");

Vous pouvez remplacer “$admin_email” par une autre adresse e-mail.

Personnaliser la notification de connexion à l’administration de WordPress

Dans le fichier index.php, vous trouverez sous format texte le message du plugin de notification de connexion WP.

$message = <<<MESSAGE
 An admin logged in your WordPress website {$website_name} on {$get_time_of_login}
 with the IP: {$get_ip}
MESSAGE;

Vous pouvez aménager cela comme vous voulez, tant que vous gardez les variables.

WordPress : Désactiver WP REST API (faille de sécurité)

Désactiver WP REST API
Désactiver WordPress REST API
WP-JSON, l’API REST pour WordPress

Désactiver WordPress REST API

Désactiver WordPress REST API est la chose à faire pour éviter les problèmes de sécurité à venir sur WordPress > 4.6. En effet les dernières failles WordPress concernent cette API ouverte.

WordPress a choisi de mettre en ligne sa WP REST API et son protocole XML RPC depuis la version 3.5. Ils servent à des applications de communiquer avec votre site internet WordPress, le célèbre plugin JetPack s’en sert.

Certaines thèmes (récents) s’en servent aussi. Alors une fois l’API REST de WordPress désactivée, pensez à vérifiez que votre site est bien fonctionnel !

Pourquoi autoriser la WP REST API est dangereux ?

Dans les architecture logiciel actuelles (c’est la mode), les développeurs codent avec un côté front (ce que l’utilisateur voit) et un côté back (ce avec quoi l’utilisateur interagi (base de données, articles…)). Une API REST sert justement à cette architecture, on propose au front une interface pour communiquer avec le back.

Jus-qu’il y a quelques années on utilisait tout sur le même projet pour les projets web, cette nouvelle approche apporte une grande flexibilité, mais un peu moins de sécurité…

Désactiver WP REST API sur son site internet WordPress

Un simple plugin pour désactiver l’API WordPress

Si vous ne souhaitez désactiver que l’API REST de WordPress, cette option est toute trouvée pour vous.

Désactiver WP REST API WordPress
Désactiver la REST API de WordPress pour les utilisateurs non enregistrés

https://fr.wordpress.org/plugins/disable-json-api/

Attention, car ce plugin ne désactive que le REST API WP pour les utilisateurs anonymes, si un bot s’est inscrit sur votre site internet les failles seront toujours exploitables.

SecuPress, désactiver l’API REST de WordPress

SecuPress est un très bon plugin de sécurité dont nous avions parlés dans notre article “Les meilleurs plugins gratuits de WordPress en 2017“.

Dans SecuPress > Modules > Données sensibles, cochez les deux cases :

  • Désactiver toutes les fonctionnalités de XMP-RPC
  • Désactiver les fonctionnalités de l’API REST
Désactiver WP REST API et XML RPC
Désactiver l’API REST de WordPress ainsi qu’XML-RPC

https://fr.wordpress.org/plugins/secupress/