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
    – Advanced Editor Tools (previously TinyMCE Advanced)
    Essentiel pour les programmeurs éditant des pages contenant du code et lors de variations de polices, de grandeurs et de couleurs!
    – Cf7 For Elementor; Contact Form 7 et Contact Form 7 Style
    – Duplicate Page
    – Style Kits for Elementor par AnalogWP (essentiel pour les espacements internes des sections)
    – Toolbar Extras (pas sûr)
    – Elementor – Header, Footer & Blocks 
    Cool pour un menu Hamburger pour smartphone
    – WP Mail SMTP pour Contact Form
    – Yoast SEO
    – Awesome Wp Image Gallery
    – HT Mega pour le fil Instagram
    
  • 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 que TwentyTwenty est utilisé, il faudra chercher les bons attributs en inspectant le code HTML, ou alors utiliser les outils de réglage du thème si disponible pour cette partie (avec des thèmes payants en principe))  :

    #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.

  • 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 textes ou des liens URL (Text) il faut aller sous Style Kits, Thème Style Kits et modifier avec Elementor Kit par défaut.
    Bien qu’on ait l’impression que le CSS n’est que disponible dans la version Pro d’Elementor, il est toujours possible d’intégrer du code CSS dans notre thème, comme par exemple:

    .elementor-text-editor a:hover {
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: gray;
    }
    Ceci permet de souligner un lien URL au passage de la souris sur le texte qui deviendra gris aussi. 

  • 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).

  • Lorsqu’on crée une page avec Elementor on aimerait rester un certain temps en mode brouillon: le petit curseur en bas à droite, à côté de PUBLIER, permet de rester en mode brouillon. Sinon, il est nécessaire de passer par WordPress et le mode « Modification rapide ».
  • Il est possible d’ajouter un mot de passe sous « Modification rapide » pour permettre au premiers utilisateurs de vérifier des pages avant publication.
  • Quand on débute avec Elementor, et qu’on désire y intégrer des images, ce serait bien de déposer quelques images dans la médiathèques.
  • Lors de l’édition de texte sous Elementor on oublie souvent qu’il est possible d’agrandir momentanément le panneau de gauche pour avoir plus de confort!

• Si, avant de basculer en mode Elementor, en bas de la page:  Mise en page du contenu / Pleine largeur ne marche pas pour activer le menu à droite (Articles récents, etc), nous irons sous Elementor, dans l’article, la petite roue en bas, pour les Réglages et Modèle de page / Elementor pleine largeur.