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:

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)

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

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

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

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

 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é».

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

É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 ?

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.

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

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

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

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.

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

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

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

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 :

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

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

• Formulaire

• Email

• Messages

• Réglages additionnels.

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

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 :

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 :

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 :

Réglages additionnels

La dernière section de cette page concerne des utilisations un peu plus avancées. Nous en verrons quelques une dans les 5 astuces proposées à la fin de l’article.

Vous voilà désormais en possession d’un formulaire de contact basique (n’oubliez pas de le sauvegarder grâce au bouton Enregistrer, situé en haut à droite de la page). Voyons maintenant comment le personnaliser…

Ajouter des champs supplémentaires

Après la découverte des différentes sections de la page d’édition d’un formulaire, intéressons-nous à l’utilisation des marqueurs, ce qui va nous permettre d’insérer de nouveaux champs.

Commençons par cliquer sur le premier élément :

Le Champ texte

Une zone de configuration du champ texte s’affichera. Vous pouvez lui attribuer :

• Une obligation de le remplir ;

• Un nom ;

• Une valeur par défaut (que vous pouvez placer en filigrane) ;

• Une vérification antispam via le plugin Akismet (seulement utile si le champ texte est un nom) ;

• Un identifiant (pour le CSS) ;

• Une classe (toujours pour le CSS) ;

Dans l’exemple ci-dessous, j’ai rendu le champ obligatoire et ajouté du texte en filigrane (placeholder).

Une fois que le champ est configuré, on obtient un marqueur qu’il faut placer dans le code du formulaire.

Cliquez maintenant sur « Insérer la balise » pour cela. Pour conserver un affichage classique, j’ai repris la structure en label des autres champs.

Maintenant que ce champ est dans le formulaire, il faut pouvoir le récupérer lorsqu’une personne enverra un message. D’où la présence d’un second marqueur [text-126].

Comme le plugin l’indique, il faut le placer dans le corps du message de l'email qui nous sera envoyé. 

Enfin, vous pouvez aussi le placer dans le sujet si cela a un intérêt pour vous.

La procédure est la même pour tous les autres champs. Regardons en tout de même certains d’entres-eux.

Je vais passer sur le champ email, URL et les différents nombres pour vous parler du…

Champ date

Admettons que vous créez un formulaire de réservation : avoir une date d’arrivée et une date de départ est impératif. De la même manière que le champ texte, on peut configurer une date :

Pour la date d’arrivée, j’ai défini une date minimale et une date maximale afin d’éviter aux gens d’inclure de mauvaises valeurs.

La zone de texte

Pour rédiger leur message, les expéditeurs auront besoin d’une zone de texte.

Comme pour les autres champs, il faut insérer le premier marqueur dans le code du formulaire, et le second dans le corps du message.

Menu déroulant

Si votre formulaire permet à vos visiteurs de vous contacter au sujet d’une de vos offres, un menu déroulant peut s’avérer utile pour connaître l’offre sur laquelle le visiteur veut des informations.

Indiquez un choix par ligne et cochez éventuellement des options :

Note : Les boutons radios et les cases à cocher ont des fonctionnements similaires.

Confirmation

Avec ce champ, vous pouvez ajouter un bouton d’acceptation. Si le bouton n’est pas coché par votre visiteur, l'email ne pourra pas être envoyé.

Pour vous conformer en partie au RGPD, vous pouvez vous servir de ce champ pour demander à vos visiteurs d’accepter de votre Politique de confidentialité. 

Dans ce cas, pensez à ajouter un petit texte dans ce style “En cochant cette case, j’accepte la Politique de confidentialité de ce site” au milieu de deux balises <label>.

Au niveau des options, notez qu’il est possible de rendre cette case à cocher facultative.

Quiz

Si vous voulez filtrer les emails que l’on vous envoie, vous pouvez utiliser un quiz (je vous parle un peu plus tard d’une autre solution).

Même si le spam est généralement bien traité par Contact Form 7, ajouter une question subsidiaire permet d’être certain que ses interlocuteurs sont bien humains.