Menu Fermer

Introduction: Mes premiers pas avec WordPress Elementor

Date de la dernière modification: 26 septembre 2020

Introduction

J’ai commencé avec mon premier site Web au début des années 2000. J’ai passé ensuite à Joomla en 2011, où j’y suis toujours présent:  http://www.boichat.ch/joomla/.
En 2017, j’ai aussi débuté avec WordPress, http://www.boichat.ch/wordpress/ et pour poursuivre avec un second site, un peu plus tard, pour mon dernier livre  http://www.boichat.ch/wpjrsp/.

Ces trois sites sont avant tout orientés pour une présentation texte, pour décrire mon travail, mes bouquins et mes articles, qui sont presque tous dédiés à la programmation et aux micros-contrôleurs. Même mes articles dédiés à la photo sont plus orientés aux techniques, à mes achats et à mes expériences.

C’est en 2020, lorsque j’ai préparé un site ultra simple pour ma fille, à présent architecte d’intérieur, qu’il m’a fallu travailler avec des présentations totalement différentes. Son hébergeur n’avait que 10 Moctets à disposition et j’ai alors développé une page tout simple, unique, en HTML et CSS, avec peu de texte dans des polices très particulières, quelques belles images et un gros travail SEO (qui marche bien). 
 
J’ai repris le site construit pour ma fille, dont j’ai modifié le contenu, et je l’ai déposé ici: http://boichat.ch/html_css_only/.

L’idée est maintenant de me baser sur ce exemple et de faire l’équivalent sous WordPress et Elementor.

Auparavant, je ne connaissais pas Elementor. Comme on le dit volontiers, il me manquait une page. C’est en fait un peu normal, vu mon travail et mes autres présentations, sous une forme différente, comme mon article Python Flask et SQLite pour le Raspberry Pi 3 ou 4 ….

Je vais essayer de le décrire ici mon travail de telle manière qu’un débutant, disons même un débutant « zéro », puisse s’en sortir.

Prérequis pour WordPress Elementor

Il faudra un hébergeur où WordPress pourra être utiliser voire installer. Il est évidemment possible de l’installer sur un PC (Windows ou Mac) lorsqu’on débute ou alors pour ne pas risquer d’endommager son propre site WordPress.

J’ai moi-même écris quelques articles pour conserver mes notes et les partager, comme par exemple:
WordPress avec le thème Customify
ou encore:
Installation d’un second site WordPress pour mon livre Programmer en Java pour le Raspberry Pi 3 et 4

Mes nombreux articles de Mon expérience Joomla sont aussi utilisables, avec des notes sur les sauvegardes, incluant WordPress.

Notes personnelles 

Sans entrer dans les détails et les explications, j’ai déposé ici mes notes personnelles pour la création d’un site WordPress avec Elementor et sur un hébergeur qui a déjà une base de données et pareil pour mon PC avec Wampserver64. C’est donc la même procédure sur chaque site sauf que j’utilise un client FTP.

  • Télécharger le dernier WordPress sur le site https://wordpress.org/download/, c’est à dire le fichier FTP pour le transfert et quelques corrections de fichiers de configuration.
  • Déziper le répertoire wordpress de wordpress-5.5.1.zip dans un nouveau répertoire du serveur Web  (PC: D:\wamp64\www\wpnath).
  • Copier wp-config-sample.php en wp-config.php ou je corrige
    $table_prefix = ‘wp_’;
    en
    $table_prefix = ‘wpnath_’; 
  • Il faut adapter les trois DB_NAME, DB_USER et DB_PASSWORD correspondant à notre base de données déjà installée!
  • Ensuite on lance l’installation: http://127.0.0.1/wpnath/.
    La langue sera le français. On mettra le titre Site de Nath et on donnera un nom d’utilisateur et son mot de passe!
    Il faut aussi spécifier l’adresse de messagerie.
    On termine avec le bouton: Installer WordPress.
  • Plus tard les adaptations se feront avec http://127.0.0.1/wpnath/wp-admin/.
  • Lorsque c’est installé, j’ai transféré avec FTP le répertoire wpnath sur mon site OVH.
  • Il faut vérifier que le préfixe de table est bien correct, c’est à dire wpnath_.
    Les variables DB_NAME, DB_USER et DB_PASSWORD devront être correctes (consulter la configuration d’un site wordpress dans wp-config.php).
  • Pour un bon départ nous allons installer et activer aussi les extensions suivantes:
    – Custom Fonts de Brainstorm Force
    – Elementor Website Builder
    – Cf7 For Elementor; Contact Form 7 et Contact Form 7 Style
    – Duplicate Page
    – Style Kits for Elementor
    – Toolbar Extras (pas sûr)
    – WP Mail SMTP pour Contact Form
    – Yoast SEO
    – Awesome Wp Image Gallery
    – UpdraftPlus WordPress Backup Plugin (pour sauvegarde et restauration)
  • Pour me simplifier la tâche j’ai utilisé le dernier thème venant avec ma dernière installation: Twenty Twenty. J’y ai évidemment défini un thème enfant comme décrit dans mon article  pour un autre de mes sites Web: WordPress avec le thème Customify. Je l’ai nommé twentytwentychild.
  • Dans Apparence Personnaliser, j’ai ajouté le code CSS suivant permettant de désactiver les header et trailers (si un autre thème est utiliser il faudra chercher les bons attributs en inspectant le code HTML)  :

    #site-header {
    display:none
    }

    #site-footer {
    display:none
    }

  • Pour tous les articles qu’on crée sous Modification rapide: Modèle Elementor Canevas, pas de commentaires ni de ping. (Non … à revoir)
  • Pour « essayer » de désactiver le « search engine » de Google durant développement avec une personne de l’extérieur, j’ai mis un mot de passe sur chaque page et sous Menu du tableau de bord / Réglages / Lecture coché Demander aux moteurs de recherche de ne pas indexer ce site
  • En même temps, il est possible pendant le développement de protéger les pages par mot de passe (sous Modification rapide)
  • Pour changer la couleur des liens URL (Text) il faut aller sous Elementor, Réglage du site et typographie.
  • Pour les Image, sous Style et Au survol, on peut créer un effet.
  • Pour les Email form, j’ai installé Contact Form 7 et WP Mail SMTP configuré avec mon serveur OVH (paramètre repris de Thunderbird).
    Essai CSS avec:
    div.wpcf7 {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    padding:10px;
    }
    .wpcf7 input[type= »text »],
    .wpcf7 input[type= »email »],
    .wpcf7 textarea {
    background:#EEEEEE;
    color:#000000;
    font-family:lora, sans-serif;
    font-style:italic;
    }
    .wpcf7 input[type= »submit »],
    .wpcf7 input[type= »button »] {
    background-color:#000000;
    width:100%;
    text-align:center;
    text-transform:uppercase;
    }

La suite … bientôt!

C’est parti

Nous trouverons la suite des ces premiers pas dans l’article Ma première page WordPress avec Elementor