Site de vidéos, de diaporamas, d'informatique…

MENUMENU
  • Accueil
    • Videos tous
    • videos nature
    • videos art
    • video monuments
    • videos villes
    • videos guerres
    • Videos Insolites
    • videos terre
    • Videos Animaux
    • Videos Espagnol
    • videos gags
    • videos blagues
    • videos divers
  • Informations
    • mediapart
    • Clique
    • sciences
    • culture
    • zdnet
    • cnet
    • Insoumission
  • Matieres
    • sciences
      • maths
      • physiques
      • sciences
      • astronomie
    • matières divers
      • histoire
      • politique
      • philosophie
      • grammaire
      • economique
      • écoles
      • bricolage
      • divers sites
    • drones sites
    • Wordpress
      • Wordpress
      • WordPress Sites
    • Informatique
      • informatique site
      • BlockChain
      • couleurs
      • alas des flux
      • maths magiques
  • AVC
    • Travail Maison
    • Ajouter
      • Insérer lettre
      • lettres manquantes
      • ajouter
    • Remplacer
      • Autres mots
      • Remplacer adjectif
      • Remplacer noms soulignés par d’autres conviennent
      • Remplacer truc ou faire
      • Remplacer
      • déformés
      • phrases complètes
    • Supprimer
      • Barrer noms
      • supprimer ou ajouter
      • barrer
    • Les lettres
      • Mots croisés
      • Incorrectes
      • supprimer ou ajouter des lettres
      • Nouvelles trop lettres
      • a table
      • livre trop lettres
      • trouver les mots
      • pseudo mot
    • Les phrases
      • remplacer noms incorrectes
      • Pseudo mot convient
      • trouver mots
      • fluence croisée
      • évocation indicée
      • répertoire
      • synonymes
      • nouvelle google
    • Information AVC
      • Sons – AVC
      • 50 Nouvelles
      • 80 Nouvelles
      • Types de sons
      • Ortho site
      • synonymes
      • AVC sites
      • cerveau
      • kinesitherapeute
    • Karaoké
    • Gym
      • Entrainement
      • Gym Equipt
      • Gym sans equipt
      • gymnastique
      • gym site
      • GYM Musique
      • Technique Nadeau
  • Historique
    • Lune & étoiles
    • Sainte Gemme
    • Prieure gemme
    • Diaporamas
    • Gags
    • Ecrivain Public
    • ASPPDOR
    • Livre Legende
    • site ligne
    • artlepic
  • Articles de Blog
    • Dictionnaire
    • Listes
    • wordpress
    • Virus
    • Sciences
    • NAS
    • Informatique
    • post table
    • en et fr
    • Le glossaire WordPress
    • à propos
  • Jeux
    • Maths
      • Sudoku facile
      • Sudoku
      • Maths riddles
    • Mots
      • Zigmo
      • Boggle
      • mots coupés
      • mots de blocs
      • Pendu
      • écrire étoiles
      • videz votre sac
      • maitre mots
      • mots mêlés
      • mots fléchés
      • mots croisés
      • mots codés
      • mots cachés
    • Mémoire
      • memoire
      • mosky memory
    • Cartes
      • Solitaire
      • Belote
      • Poker
      • Blackjack
    • Réflexion
      • labyrinthe
      • tétris
    • Stratégie
      • Dame
      • échecs
    • Aide
  • Recettes
    • Apéritif
      • Mojito
      • Chips au four
      • Amuses brochettes
      • Amuse gueule
      • Mini burgers
      • Sangria espagnole
      • Boulettes de steaks
      • Chips aux crevettes
      • Mini brochettes
    • Entrées
      • Tomates farcies
      • Salade niçoise
      • Tzatziki simple
      • Melon au Pineau
      • Tarama facile
      • Mini burgers
      • Dip de lentilles corail
      • Caviar d’aubergines
      • Chips au micro-onde
      • Guacamole
    • Plats
      • Hamburger
      • Pâte à pizza
      • Endives au jambon
      • Cassoulet au canard
      • Pot au feu
      • Tomates farcies
      • Coq au vin
      • Hachis parmentier
      • Poulet au curry
      • Tomates farcies
      • Blanquette de veau
      • Omelette courgettes
      • Tartiflette express
      • Chili con carne
    • Poissons
      • Coquilles st jacques
      • Fruits de mer curry
      • Calmar poélés
      • Palourdes, Coques
      • Encornets
      • Sushis de poissons
    • Légumes
      • Purée de pommes
      • Ratatouille niçoise
      • Purée de pois
    • Boissons
      • Jus d'orange
      • Sangria espagnole
      • Mojito
      • Gin tonic
      • Punch
    • Dessert
      • crepes
      • Iles flottantes
      • Tiramisù à l’italienne
      • Marrons chauds
      • brioche
  • Musique
    • Pïano
      • Programme
      • exercices
      • Gamme
      • Arpèges
      • Accords
      • Doigt
      • Théorie
        • Notes
        • Harmonisation
        • voicing
        • Cycle des quintes
        • Transposition
        • Intervalles
        • Improvisation
        • Modulation
        • Cadences
        • Glissando
        • Astuces- Trucs
      • Morceaux
        • Classique
        • Jazz
        • Paroles
        • Chanson
      • Trille
      • Octave
      • GYM PIANO
      • Rythme
      • vocal
      • Echauffement
      • Tendinite
      • Italien
      • Oreille
    • Etranger
      • POP étrangères
      • Beatles
      • John Elton
      • Rolling Stones
      • Rocks
    • Classique
      • Chopin
      • Mozart
      • Bach
      • Beethoven
      • Glissando
      • Brahms
      • Haendel
      • Strauss
      • Tchaikovsky
      • Verdi
      • Schubert
      • Divers

image_pdfimage_print
Archives de l'auteur: a714691

Clover

Alors franchement moi je trouve que la possibilité d’avoir plusieurs onglets sur nos fenêtres c’est une superbe idée chose qu’on ne peut normalement pas faire et qui est tout à fait possible avec clover .

 

Nous pouvons constater déjà que quelque chose a changé et vous disposez donc d’une gestion d’onglets  de signet sur votre explorateur de fichiers exactement.

Comme sur votre navigateur internet or la première chose qu’on va faire une fois qu’il a été installé .

C’est de se rendre directement sur la petite clé plate vous voyez.

On clique setting en fait on va changer le langage tout de suite .

On déroule le soul engageant choisi france .

Est donc là nous demandent de restart donc on va fermer l’explorateur donc là c’est bon on peut constater maintenant que c’est en français

et que l’on peut désormais ouvrir voyez deux nouveaux onglets donc ouvrir deux nouveaux onglets dans une seule et même fenêtre .

ce qui fait que vous pouvez avoir plusieurs dossiers ouverts up séparément voyez donc là je peux accéder au téléchargement au pc et à mes documents si je le souhaite alors vous avez également des raccourcis clavier .

Pour aller plus vite donc toujours sur la petite clé plate paramètres

et juste à droite sur l’onglet raccourcis donc ça c’est pas mal aussi les signes et donc les raccourcis que vous pouvez gérer à partir de la signer gestionnaire de signer .

Vous pouvez ajouter une catégorie par exemple .

Nouveaux dossiers enregistrés et dans celui ci a ajouté un signe et je sais pas vous mais telle adresse de votre raccourci est ici l’adresse url donc une page web ou l’adresse d’un dossier sur votre pc

mais pour ça il ya plus un pl on va voir après est enregistrée le nouveau dossier donc la catégorie que j’écris se trouve ici dans la barre de favoris à l’intérieur duquel se placeront les signes et que vous aurez créé comme je disais pour les dossiers ya plus simple on peut aussi déplacer manuellement et c’est tout bête par exemple je vais sur mon dossier téléchargements je veux placer mon application ici

 

et j’ai juste voyez à rester cliquer gauche et a glissé sur la barre de favoris pour le placer donc là j’ai passé une application je peux placer un dossier on parle je vais sur ce pc je veux que mon dossier musique .

 

se retrouve dans mes raccourcis et lorsque je clique dessus et bien j’accède au dossier musique je peux également le placer dans mon dossier nouveaux dossiers qu’on a créé tout à l’heure ce qu’il ajoutera en tant que signer dans la catégorie nouveau dossier voilà ce qui est pas mal aussi ce qui vous évitera d’ouvrir par exemple deux fenêtres côte-à-côte .

Vous avez pour glisser déposer un fichier d’un dossier à un autre avantage donc ici avec clover 3 c’est que par exemple .

vous rendez sur votre dossier vous voulez déplacer des fichiers sur un autre dossier donc on va dire le bureau eh bien vous avez simplement les sélectionner .

Donc je vais en prendre à eux deux vous restez cliqué et hop vous glisser sur le bureau le dossier et vous lâcher.

ça c’est pas mal dans le sens où ça évite justement de s’embêter avec les fenêtres à devoir les déplacés pour justement les placer correctement et glissez les fichiers sans problème voilà globalement pour clover très bon petit soft je trouve qui vous permettra à coup sûr de mieux vous organiser et de ne plus surcharger inutilement votre bureau de diverses fenêtres.

 

Créer un sommaire


Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Créer un sommaire (tables des matières) pour vos articles WordPress

Si vous écrivez de longs articles dans WordPress, une table des matières (sommaire) en haut de vos billets de blog est une très bonne option qui s’offre à vous. Cela agit comme un résumé rapide afin que les lecteurs puissent avoir un petit résumé sous forme de titres principaux de votre article et peuvent passer directement à un sujet qui les intéresse en un clic.

Avec le plugin gratuit Easy Table of Contents , vous pouvez insérer une table des matières dans une publication WordPress. Chaque rubrique de la publication sera accessible via un lien au début. L’image ci-dessous montre le plugin en action:

plugin gratuit pour ajouter un sommaire à vos article

Ce tutoriel expliquera l’installation et l’utilisation du plugin Easy Table of Contents.

Étape 1. Installer Easy Table of Contents pour créer des sommaires

  • Dans votre site WordPress, cliquez sur Plugins> Ajouter un nouveau .

  • Tapez easy table dans la zone de recherche.

  • Choisissez le plugin Easy Table of Contents .

  • Cliquez sur Installer maintenant , puis sur Activer .

Étape 2. Configuration facile de la table des matières

Sur la page Extensions , cliquez sur le lien Paramètres de votre nouveau plugin.

La configuration de la table des matières simple est divisée en trois zones principales:

  • Général

  • Apparence

  • Avancée

 

Réglages généraux

Les paramètres généraux contrôlent comment et où la table des matières apparaît sur votre site.

Par défaut, la table des matières n’apparaîtra que sur les pages. Vous pouvez changer cela en utilisant l’option « Activer le support » en haut de l’écran.

Vous pouvez également contrôler si la table des matières est insérée automatiquement ou non. Dans l’image ci-dessous, le sommaire (table des matières) est automatiquement inséré dans tous mes articles.

  • Cocher la case insertion automatique (articles)

  • Laisser la position d’insertion par défaut (avant le premier titre)

ajouter un sommaire aux articles wordpress

Un peu plus bas sur l’écran, vous pouvez contrôler où la table des matières apparaîtra. J’ai choisi «Avant le premier titre».

le plugin easy table of content options

 

 

Faites défiler plus bas et vous pouvez personnaliser la table des matières (sommaire) de plusieurs façons. Voici certaines de mes recommandations:

  • Changez le nombre de titres en 3

  • Modifier l’étiquette d’en-tête

  • Changer le style de compteur en romain

  • Laissez les autres valeurs par défaut

options du plugin easy table of content

Apparence

La section Apparence vous permet de configurer l’apparence et le style de votre table des matières, y compris la taille des polices. Encore une fois, je vais vous donner quelques paramètres recommandés, basés sur mes tests du plugin.

  • Laissez la largeur automatique par défaut

L’option de largeur personnalisée ne s’appliquera pas car la largeur par défaut est Auto.

  • Modifier la taille de la police du titre

  • Modifier la taille de la police du texte

  • Choisissez Personnalisé pour créer un style personnalisé pour la table des matières

personnaliser la table des matières pour wordpress

  •  Modifiez les couleurs du thème selon vos besoins.

Notez qu’il existe un bouton pour réinitialiser le style par défaut, au cas où vous voudriez recommencer à partir du style par défaut.

changer les couleur table des matières

 Avancée

Cette dernière section contient des ajustements pour personnaliser en profondeur votre table des matières.

Une option très utile est «Exclure les en-têtes». Cela est utile si votre article est très long et que vous ne voulez pas encombrer le tableau avec des sous-titres (par exemple des titres au cinquième ou au sixième niveau). Vous pouvez également exclure les en-têtes qui ne sont pas liés au contenu: par exemple «Publicité» ou «Sponsorisé».

exclure des titres

Les dernières options de configuration font référence à plusieurs fonctionnalités clés :

  • Décalage à conserver lors du défilement (effet de défilement) sur les ordinateurs de bureau ou mobiles.

  • Limiter le chemin d’accès aux pages avec un certain modèle d’URL (cela offre une grande flexibilité).

  • Épingler la table des matières dans une zone de widget (barre latérale).

configuration table des matières

Étape 3. Créer une table des matières WordPress

  • Créer un article avec plusieurs titres

  • Assurez-vous d’y inclure des titres .

Une chose à noter est que vous pouvez spécifier les paramètres global du plugin Easy Table of Contents pour chaque article. Cela offre encore plus de flexibilité, car vous pouvez personnaliser chacune des tables de contenu selon vos besoins spécifiques.

Conclusion

Le plugin Easy Table of Contents facilite l’insertion des table des matières (sommaire) dans vos publications WordPress. Chaque lien de la liste amène le lecteur à une section (titre) de l’article en utilisant un effet de défilement animé. Ceci est très utile sur des articles particulièrement longs .

 

FACEBOOKTWITTERPINTERESTWHATSAPPEMAIL

Comment télécharger des images dans WordPress via FTP

Comment télécharger des images dans WordPress via FTP ?

29 septembre 2018

8 mn de lecture

7 commentaires

Télécharger des images dans WordPress via FTP parait être un jeu d’enfant. Vous vous demandez même pourquoi cela peut donner lieu à la rédaction d’un article…

Pourtant si vous avez déjà mené l’expérience, vous avez dû vous rendre compte que les images téléchargées via FTP n’apparaissent pas dans votre bibliothèque de médias. Et c’est bien dommage !

De la même façon que l’on peut envoyer un thème ou un plugin via l’administration de WordPress ou bien via FTP, nous devrions être dans la possibilité d’en faire de même pour les images.

images dans WordPress via FTP

Dans cet article, nous allons voir pourquoi et comment envoyer des images dans WordPress via FTP afin qu’elles soient prises en compte par votre site.

 

Pourquoi envoyer des images via FTP ?

médias uploader de WordPress

Même s’il est très facile et pratique d’envoyer des images via le bouton “choisir des fichiers” disponible dans l’onglet Médias > Ajouter, cette méthode peut être contre-productive lorsqu’on doit télécharger un grand nombre d’images.

Dans quels cas envoyer des images dans WordPress via FTP ?

Il y a de nombreuses circonstances qui peuvent vous pousser à utiliser la voie du FTP pour transférer vos images :

  • vous avez une mauvaise connexion internet et la méthode FTP est plus rapide,

  • vous avez de nombreuses photos à importer. Ça peut être le cas si vous êtes photographe par exemple et que vous souhaitez mettre en ligne le dossier de votre dernier shooting. Ou bien si vous maintenez un e-commerce et avez besoin d’importer de nombreuses images produits,

  • vous procédez à la création d’un site et vous souhaitez importer toutes vos images en une seule fois afin de les avoir à portée de mains quand vous commencerez à créer vos contenus et vos design,

  • vous déplacez votre site WordPress avec un plugin comme Duplicator et vous n’avez pas embarqué le dossier “uploads” dans votre archive pour des raisons de poids trop conséquent,

  • vous souhaitez placer vos images dans des dossiers bien distincts, plutôt qu’elles se placent automatiquement dans des dossiers affectés à des dates d’importation (dossier années / mois).

 

Comment envoyer les images via FTP ?

La méthode est classique et c’est la même que pour importer n’importe quels fichiers ou répertoires au sein de son site.

Pour commencer, vous devrez être en possession de vos identifiants FTP ainsi que d’un logiciel comme FileZilla.

Ensuite, vous devrez repérer l’arborescence de votre site jusqu’à atteindre le dossier nommé UPLOADS. Généralement : www > wp-content > uploads > dossier année > dossier mois

Enfin, vous serez libre d’envoyer vos images au sein d’un dossier déjà présent – comme 2018 > 07 par exemple – ou bien de créer un nouveau dossier spécialement pour accueillir vos nouvelles images.

Une fois vos images importées, vous pourrez retourner dans l’administration de votre site.

 

Les images n’apparaissent pas dans la bibliothèque des médias…

Et oui, voilà le hic ! Si elles apparaissaient, cet article n’aurait eu aucun intérêt…

En effet, les images que vous importez via FTP ne sont pas visibles dans la bibliothèque des médias même si vous les voyez bien sur votre serveur.

images WordPress - FTP

Lorsqu’on envoie des images via FTP et que l’on retourne dans l’administration de WordPress, ces images n’apparaissent pas.

Cette particularité est due au fait que le CMS doit traiter les images pour générer les diverses miniatures (thumbnails). Habituellement, c’est l’interface de téléchargement des médias qui s’occupe de faire ce travail…

 

Traiter les images à l’aide de l’extension Add From Server

Que ferait-on sans les plugins ? Même s’il existe une manière manuelle d’arriver aux mêmes résultats, le développeur Dion Hulse a créé une extension qui traite les images importées par FTP afin qu’elles soient utilisables depuis l’administration de votre site.

Voici comment utiliser l’extension Add From Server :

Étape 1 : installer Add From Server

images WordPress - add fom server

Convertir les images importées via FTP grâce à l’extension “Add From Server”

Tout simplement, rendez-vous dans l’onglet Extension > Ajouter pour rechercher et activer l’extension.

 

Étape 2 : traiter les images

Une fois l’extension activée, vous verrez un nouvel onglet apparaitre, il s’agit de Médias > Ajouter depuis le serveur. Il se situe sous l’onglet Médias > Ajouter que nous connaissons tous.

Dans cet onglet, vous verrez apparaitre l’arborescence des fichiers et dossiers présents sur votre serveur.

Cliquez jusqu’à atteindre le dossier où vous avez importé les images via FTP (wp-content > uploads > votre dossier ou dossier par mois/années).

images FTP

En quelques clics, sélectionnez les images présentent dans le dossier Uploads pour les convertir

Sélectionnez toutes les images qui doivent être traitées puis cliquez sur IMPORTER.

Vous verrez une option supplémentaire qui vous permet de choisir la date liée aux images : date actuelle ou date du fichier.

 

Étape 3 : vérifier la bibliothèque

Voilà, à présent vous n’avez plus rien à faire.

L’extension s’est occupée de tout et a généré toutes les miniatures associées à vos images.

thumbnails générées

Add From Server a généré les miniatures nécessaires à votre thème WordPress

Ces miniatures sont utilisées par votre thème. Par exemple, le thème Twenty Seventeen génère 4 nouvelles tailles en plus de la taille originale de votre image. Selon le thème que vous utilisez, le nombre de miniatures peut-être bien plus élevé.

les images sont visibles

Avec l’aide de Add from Server, vos images sont enfin visibles dans la bibliothèque des médias

Si vous retournez à l’onglet Bibliothèque, vous devriez voir apparaitre toutes les images précédemment importée par FTP.

 

En conclusion…

Je suis certaine que cette fonctionnalité va ravir plus d’un utilisateur WordPress. Grâce à cette extension légère et simple d’utilisation, vous allez gagner beaucoup de temps lors de vos prochains imports d’images.

Ajoutez un formulaire de contact à votre site avec Contact-7


Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5327

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /home3/boge3946/public_html/wp-content/plugins/docxpresso/classes/ODF2HTML5/ODF2HTML5.inc on line 5333

Ajoutez un formulaire de contact à votre​​ site avec Contact 7

  • Votre thème possède un modèle de page « Contact » ou un autre moyen d’inclure un formulaire et, dans ce cas, c’est tout bon.

  • Passer par une extension pour inclure un formulaire dans votre page Contact.

Dans cet article, nous allons voir comment utiliser un plugin téléchargé plus d’1 milliard 300 millions de fois (au moment d’écrire ces lignes) ! J’ai nommé Contact Form 7 (CF7).

Bien qu’il soit assez simple d’utilisation, je tenais à rédiger une « recette » pour vous montrer comment intégrer des formulaires de contact plus ou moins évolués sur votre site.

Voyons de quoi se compose cet article dans le…

Sommaire

 

Qu’est-ce que Contact Form 7 ?

Contact Form 7 est une extension WordPress gratuite pour créer des formulaires de contact simplement et rapidement.

Flexible grâce à la présence de nombreux champs personnalisables, elle permet aussi de lutter contre le spam.

Elle fait partie des plugins les plus populaires du répertoire officiel.

Capture de l'extension Contact Form 7 sur le répertoire officiel

 

Configurer un formulaire de base

Une fois que vous aurez installé et activé Contact Form 7 (jetez un oeil à ce tuto pour découvrir comment installer un plugin), vous verrez qu’un élément Contact a été ajouté dans le menu (sous Commentaires). Cliquez dessus pour vous arriver sur la page principale de l’extension :

Contact Form 7 homepage

Comme vous pouvez le voir, le plugin a été traduit en français par de gentils contributeurs​​ 🙂

D’entrée de jeu Contact Form 7 vous informe que vous êtes protégés du spam via Akismet ou reCAPTCHA.

Vous êtes également invité à télécharger une extension supplémentaire, Flamingo, également conçue par Takayuki Miyoshi, le créateur de CF7.

 

Grâce à elle, vous pouvez sauvegarder en base de données tous les messages soumis dans vos formulaires. Sans ça, vous ne les auriez que dans votre boîte de réception (mais ça vous suffira peut-être).

Enfin, ne vous inquiétez pas, ce tuto va vous aider à créer votre premier formulaire. Pour ce faire, cliquez simplement sur le bouton Créer un formulaire en haut de l’écran (ou dans le menu).

Création d'un formulaire sur CF7

Vous arrivez sur la page suivante qui comporte 4 onglets différents :

  • Formulaire

  • Email

  • Messages

  • Réglages additionnels.

Ajout d'un formulaire de contact

Il y en a un formulaire présent par défaut. Voyons à quoi correspondent les différentes options :

Saisissez le titre de votre formulaire

Cette première section sert à donner un nom à votre formulaire. Appelez-le « Contact », ou comme bon vous semble.

Vous pouvez aussi lui donner un nom particulier, si le formulaire que vous créez doit être placé sur une page spécifique (formulaire de support, de demande de devis, etc).

Un bouton Enregistrer est également présent. N’oubliez pas de vous en servir une fois que vous aurez apporté vos modifications.

Onglet « Formulaire »

Cette section contient le code HTML de votre formulaire de contact. Plusieurs paragraphes sont présents (balises <p>...</p>) avec des marqueurs pour les champs du formulaire ainsi que le bouton Envoyer.

Détaillons tout cela pour mieux comprendre.

<label>Votre nom (obligatoire)
[text* your-name]</label>

Le code ci-dessus affichera le texte « Votre nom (obligatoire) » puis le champ texte associé au nom.

Dans la seconde partie de ce tutoriel, nous verrons comment créer des marqueurs. Vous verrez que leur syntaxe n’est pas très importante.

Les champs email, sujet et message sont structurés de la même façon. Le dernier élément entre crochets – [submit "Envoyer"] – embarque le marqueur du bouton de validation du formulaire.

Utilisations des marqueurs

Marqueurs de formulaire Contact Form 7


Les boutons au-dessus du formulaire vous permettent d’ajouter toutes sortes de champs dans les formulaires que vous créez : texte, email, date, menu déroulant, boutons radios, quiz et même envoyer des fichiers.

Nous verrons comment les configurer dans la partie « Ajouter des champs supplémentaires » de cet article.

Email du destinataire

Etudions les champs de cette section et ce qu’ils contiennent :

Email du destinataire

Pour : L'email vers lequel le message doit être envoyé (votre email ou celui de votre client).

De : Email de l’expéditeur. Ici on récupère l'email de la personne à partir du champ email du formulaire (identifié par le marqueur [your-email] dans le code du formulaire). Le nom est indiqué avant l'email par le marqueur [your-name].

Il est important de bien garder la structure NOM <EMAIL> dans ce champ pour que cela s’affiche convenablement dans votre boite de réception.

Objet : Dans notre cas, le formulaire récupère le sujet indiqué par l’expéditeur grâce au marqueur [your-subject]. Cela dit vous n’êtes pas obligé de vous en servir. Si j’utilisais CF7 pour WP Marmite, je pourrais choisir le sujet suivant « [WP Marmite] Message de [your-name]« .

En-têtes additionnelles : Ce champ est utile pour spécifier des personnes à mettre en copie et en copie cachée. Vous pouvez par exemple envoyer une copie de l'email à la personne qui vous contacte (on verra que nous pouvons le faire d’une autre manière juste après).

Pour mettre une personne en copie, ajoutez Cc : cofondateur@site.com. Vous pouvez aussi utiliser la structure NOM <EMAIL> vue précédemment : Cc : GÉRARD <cofondateur@site.com>

Afin de mettre une personne en copie cachée, utilisez Bcc : cofondateur@site.com. Comme pour la copie normale, la structure NOM <EMAIL> fonctionne aussi.

Corps du message : Ce champ va servir à mettre en page le message que vous allez recevoir. Dans la capture d’écran, on voit que les marqueurs sont réutilisés.

Pour y voir plus clair, insérez uniquement le marqueur [your-message] afin de n’avoir que le message de l’expéditeur (l'email et le nom étant déjà dans le champ De). En procédant ainsi, le message reçu ressemblera davantage à un message envoyé directement.

Une signature est ajoutée automatiquement par Contact Form 7 pour indiquer à partir de quel formulaire le message a été envoyé. Elle n’est peut-être pas optimale mais je vous conseille de la conserver pour vous rappeler de la provenance de l'email. Vous pouvez l’éditer à votre guise pour la rendre plus pertinente.

Exclure les lignes dont la balise d'email est vide : La traduction n’est pas correcte ici. Cette option sert à exclure les lignes pour​​ lesquelles le marqueur n’a pas été indiqué par l’expéditeur. Par exemple, si vous avez un champ Ville et que la personne ne remplit pas ce champ, la ligne devant afficher le marqueur Ville ne sera pas affiché. Vous voyez où je veux en venir ?

Envoyer cet email au format HTML : Ici rien de compliqué, cochez la case pour recevoir les emails de contact au format HTML. Dans la plupart des cas, ce n’est pas nécessaire.

Pièces jointes : Dans le cas où vous donnerez la possibilité d’envoyer des pièces jointes. Il faudra indiquer le ou les marqueurs correspondants dans ce champ pour les recevoir (ne vous étonnez pas de rien recevoir si vous avez laissé ce champ vide).

Email (2)

À partir du moment où l’on a la possibilité de mettre des personnes en copie, on peut se demander à quoi sert un second champ d'email.

Ce champ est utile si vous désirez envoyer un message structuré différemment.

Par exemple, si vous voulez envoyer une copie de l'email à l’expéditeur, vous pouvez ajouter une phrase du genre en introduction : « Merci de m’avoir contacté, je vous répondrai d’ici 24h. Pour rappel, voici le contenu de votre message : ». Voyez plutôt :

Email 2 de CF7

Onglet Messages

Ensuite viennent les messages d’erreur et de réussite qui s’afficheront en retour lors de l’envoi de l'email.

Si tout se passe bien, le message de réussite s’affichera (le premier), sinon un des messages d’erreur sera affiché selon le problème.

À vous de voir ce que vous désirez modifier. Vous pouvez personnaliser le message de réussite et d’erreur pour être moins froid. Voilà ce que j’ai mis à l’époque pour WP Marmite :