Cours 3

1. Cours 3 Photos, images, illustrations et droits d’utilisation Programmer un formulaire Optimiser pour les moteurs de recherche Installer SEO by Yoast Projet personnel

2. Photos et Illustrations Attention à leur provenance et à leur utilisation!

3. Les images sur internet appartiennent à quelqu’un! • Vous ne pouvez pas utiliser les images que vous trouvez sur Google pour votre propre site sans le consentement écrit du propriétaire. • Vous vous exposer à des poursuites si vous le faites. • Il y a des firmes spécialisées à temps plein dans la récupération d’argent par rapport au non respect des droits d’auteurs. • Les montants réclamés par les propriétaires sont de plusieurs milliers de dollars pour une seule photo!

4. Ajouter des imagesà votre site • Bonne pratique : Créez votre propre matériel! • Google aime le contenu original et unique. • Si possible, engagez un photographe professionnel et spécialisé dans votre domaine. • Plan B : Utiliser une banque de photos • Istockphoto.com • Shutterstock.com • GettyImages.ca • Et bien d’autres.

5. Extensions Pour ajouter des fonctionnalités avancées

6. Modules, Plug-ins, Extensions : C’est La même chose! • WordPress.org/plugins – 6 avril 2014“30,316 PLUGINS, 629,919,908 DOWNLOADS, AND COUNTING” • Exemples d’utilisation extensions : • Création de formulaires • Traduction • Optimisation pour les moteurs de recherche • Copie de sauvegarde • Commerce électronique • Amélioration de l’administration de WordPress • Amélioration de la vitesse de chargement du site • Et bien d’autres!

7. Installer Contact Form 7 • Pour ajouter un formulaire sur la page de contact, nous allons installer une extension nommée Contact Form 7. • Dirigez-vous dans le panneau d’administration du site et cliquez sur l’option Extensions du menu de droite. La page listant les extensions installées. • Cliquez ensuite sur le bouton Ajouter dans le haut à la suite du titre de la page. • Dans la recherche, entrez Contact Form 7 puis faites Chercher parmi les extension. Le résultat de recherche apparait. • Trouver l’extension nommée Contact Form 7 (devrait être la première en haut) puis cliquez sur Installer maintenant.

8. Installer contact form 7 • Un message de confirmation va apparaitre. Cliquez sur OK pour confirmer l’installation. L’installation prendra quelques secondes. • Un fois l’installation complétée, cliquez sur Activer l’extension. L’option Contact s’ajoutera au menu de gauche d’administration. • Cliquez sur Contactpour lister les formulaires disponibles. Un formulaire nommé Formulaire de contact 1 devrait déjà être présent. Il est créé par défaut lors de l’installation de l’extension. • Bravo! Vous avez installez votre première extension de WordPress avec brio!

9. Personnaliser le formulaire • Cliquez sur Formulaire de contact 1 pour le modifier. • La fiche de modification présente d’abord le titredu formulaire (Formulaire de contact 1). Vous pouvez cliquez dessus pour modifier son nom. Retirer le 1 à la fin du titre pour ne conserver que Formulaire de contact. • Sous le titre se trouve le shortcode([contact-form-7 id="76" title="Formulaire de contact 1"]) permettant d’insérer le formulaire dans une page. On verra comment l’utiliser un peu plus tard. • Ensuite, on trouve une boite contenant du texte et code mélangé. C’est le code HTML permettant d’afficher les champs du formulaire. Cela signifie que quelqu’un avec une connaissance de base du langage HTML peut mettre en page des formulaires plus complexes à l’aide de Contact Form 7.

10. Personnaliser le formulaire • À la droite de la boite de HTML, se trouve un bouton nommé Générer un marqueur. Il permet d’ajouter un nouveau champ au formulaire. Cliquez sur le bouton. • Un menu déroulant apparait avec différent type de champs. Choisissez Menu déroulant puisque nous voulons ajouter un champ permettant de préciser si nous parlons à Monsieur ou Madame. • Cochez Champ Obligatoire afin d’obliger le visiteur à entrer une valeur avant d’envoyer le formulaire. • Dans le champ Nom écrivez sexe. • Dans le champ Choix, écrivez Monsieur sur une première ligne et Madame sur une deuxième ligne. • Cochez Insérer un choix vide comme première option sinon la première option sera sélectionnée par défaut.

11. Personnaliser le formulaire • Allez dans la boite contenant le HTML et copier/coller le premier bloc de texte afin qu’il se retrouve deux fois de suite au début. • <p>Votre nom (obligatoire)<br />[text* your-name] </p><p>Votre nom (obligatoire)<br />[text* your-name] </p><p>Votre email (obligatoire)<br />[email* your-email] </p><p>Sujet<br />[text your-subject] </p><p>Votre message<br />[textarea your-message] </p><p>[submit "Envoyer"]</p>

12. Personnaliser le formulaire • Remplacez le premier Votre nom par Sexe. Et remplacez le marqueur [text* your-name] par le marqueur fourni par le générateur de marqueur [select* sexe include_blank "Monsieur" "Madame"] • <p>Sexe (obligatoire)<br />[select* sexe include_blank "Monsieur" "Madame"]</p><p>Votre nom (obligatoire)<br />[text* your-name] </p><p>Votre email (obligatoire)<br />[email* your-email] </p><p>Sujet<br />[text your-subject] </p><p>Votre message<br />[textarea your-message] </p><p>[submit "Envoyer"]</p>

13. Personnaliser le formulaire • Plus bas, vous avez l’option de personnaliser le courriel reçu par l’administrateur lorsqu’un message est envoyé. Vérifiez que c’est bien votre adresse courriel qui est inscrit au champ À. • Un peu plus bas, vous pouvez cocher Utiliser l'email (2) si vous souhaitez envoyer un message de confirmation à la personne qui vous envoie le courriel. • Encore plus bas, vous pouvez personnaliser les différents messages, les erreurs et les consignes qui apparaissent à l’utilisateur. • Pour l’instant, ne touchons à rien et cliquez sur Sauvegarder dans le haut de la page. • Copiez le short code [contact-form-7 id="76" title="Formulaire de contact"] puis dirigez-vous dans la section page pour modifier la page Nous joindre.

14. Insérer le formulaire dans la page • Une fois dans la page de modification de la page Nous joindre, collez le short code dans l’éditeur de texte à l’endroit où vous souhaitez voir apparaitre le formulaire. • Cliquez ensuite sur le bouton Mettre à jour pour sauvegarder la page. • Cliquez sur Afficher la page dans le message qui vient d’apparaitre confirmant la sauvegarde. • La page Nous joindre possède maintenant un formulaire de contact très facile à utiliser. • Si vous essayez d’utiliser le formulaire, vous allez malheureusement recevoir une erreur. C’est parce que nous développement sur notre ordinateur et non un vrai serveur Web qui peut envoyer des courriels. Voyons ce que nous pouvons faire pour contourner ce problème.

15. Une extension utile pour Contact Form 7 • Pour contourner le problème que notre ordinateur ne possède pas ce qu’il faut pour que notre site Web puisse envoyer des courriels, nous allons installer une deuxième extension fonctionnant de paire avec Contact Form 7 nous afin de sauvegarder les messages directement dans WordPress. • Pour ce faire, dans le panneau d’administration, allez dans Extensions puis cliquez sur Ajouter. • Dans la recherche, tapez Contact Form DB puis cliquez sur Chercher parmi les extensions. • Trouvez Contact Form DB dans les résultats et cliquez sur Installer maintenant. Une fois installé, cliquez sur Activer l’extension.

16. Contact Form DB • Dans le menu d’administration, l’option Contact Form DB s’est ajoutée. Si vous cliquez dessus, vous trouverez une page vide. C’est l’endroit où les messages envoyés pourront être récupérés au besoin. • Dirigez-vous dans le menu Contact de l’administration pour aller éditer le Formulaire de contact. • Tout en bas de la page de modification, vous trouverez la section Réglages complémentaires. Inscrivez la commande demo_mode: on puis cliquez sur Sauvegarder. • Cette commande fait en sorte que le formulaire n’affichera pas de message d’erreurs même si des erreurs surviennent.

17. Tester à nouveau le formulaire • Visitez la page nous joindre et testez à nouveau le formulaire. Cette fois, ça devrait fonctionner. • Dirigez-vous ensuite dans le panneau d’administration et vérifier que votre message s’est bien enregistré dans Contact Form DB. • Si c’est le cas, allez retirer la commande demo_mode: on du formulaire pour ne pas avoir de mauvaise surprise un fois votre site en ligne. Exercice • Comme exercice pratique, ajoutez un champ texte Nom à votre formulaire.

18. Installer AeOLUS PORTFOLIO • Dirigez-vous dans la section Extensions de l’administration pour installer et activer Aeolus Portfolio. • Allez ensuite dans la nouvelle section Aeolus Portfolio pour ajouter un nouveau Portfolio nommé Réalisations. (Bouton Add New) • Ajoutez quelques images à l’aide du champ Featured Images. • Allez dans Aeolus Settings, pour éditer le champ Primary colorpour inscrire la couleur hexadécimale 0088cc. • Pour terminer, allez remplacer le menu Réalisations dans la section Apparence/Menus pour mettre le portfolio que l’on vient de créer.

19. Optimisation pour les moteurs de recherche Un beau site c’est bien. Un site populaire c’est mieux!

20. Quelques notions de SEO • Sujets et mots-clés • N’ayez qu’un seul sujet par page. • Utilisez beaucoup de synonymes reliés au sujet de la page. • Qualité des pages et des articles • Produisez du contenu original et évitez à tout prix de copier intégralement du contenu présent sur un autre site. • Incluez un texte d’au moins 1 000 mots sur vos pages à propos du sujet de la page. Mettez ce texte dans le bas de la page si le texte nuit à l’expérience utilisateur. • Faites attention à votre grammaire et à votre orthographe. • Contenu frais • Proposez du contenu frais sur votre site. Google va vous favorisé parce que l’information proposée est plus récente que la compétition. • Partagez ce contenu sur les médias sociaux pour étendre votre cercle d’influence.

21. Quelques notions de SEO • Titre de page • Prenez soin de choisir des mots-clés important qui résume bien le sujet que traite la page dans le titre de la page. • Faites en sorte que ce soir clair pour l’utilisateur qui lira ce titre dans les résultats des moteurs de recherche. • Description de page • Prenez le temps d’entrer une courte description unique à chacune des pages de votre site. Cela n’améliorera pas votre classement mais améliorera votre taux de clic si vous accrochez l’attention de l’internaute qui fait sa recherche. • Keyword Stuffing ou Créer de la densité des mots clés. • Évitez cette pratique qui vous pénalisera. • Vos textes doivent se lire naturellement autant pour les visiteurs que les moteurs de recherche.

22. Quelques notions de SEO • URLs lisibles et efficaces • Mettez des mots clés dans vos URLs (permalien). • Rendez les faciles à lire pour améliorer votre taux de clique.Exemple : http://la-conjugaison.nouvelobs.com/du/verbe/sembler.php • N’utilisez pas les permaliens par défaut avec les URLs contenant des variables illisibles. • Vitesse des pages • Gardez les pages le plus légères possibles. Ne mettez pas d’images trop lourdes. Pensez au mobile! • Navigation optimisé pour le robot « crawler » de Google • N’utilisez pas de JavaScript ou de Flash pour les menus. • Créez un sitemap.xml pour Google.

23. Le plus important : Les liens entrants (Backlinks) • Un lien entrant est un lien vers votre site à partir d’un autre site. • C’est ce qui compte le plus (à mon avis!) dans l’algorithme de classement de Google. • Google prend en compte : • Le nombre de liens • La qualité des liens / la notoriété du site faisant un lien vers votre site • Le nombre de cliques vers votre site • Le texte sur les liens • Est-ce que le lien semble avoir été acheté?

24. Installer WordPress SEO by Yoast • WordPress SEO by Yoast est une extension pour WordPress permettant d’étendre d’avantage les fonctionnalités de WordPress au niveau de l’optimisation pour les moteurs de recherche. • Fonctionnalités principales de WordPress SEO by Yoast • Analyse des pages • Édition des titres de page et méta descriptions • XML sitemaps • Dirigez-vous dans le panneau d’administration. Installez puis activez l’extension WordPress SEO by Yoast.

25. Utiliser WordPress SEO by Yoast • Dirigez-vous dans la section Pages de l’administration puis éditez la première page. • Vous verrez qu’un nouveau bloc est apparu sous l’éditeur de texte nommé WordPress SEO par Yoast. • Explorons le ensemble.

26. Changer de site Web • Il est important de faire des redirections 301 des anciennes pages vers les nouvelles afin de transférer la notoriété de l’ancien site vers le nouveau. • On peut également demander aux administrateurs des sites qui font des liens vers notre site de mettre à jour leurs liens. • Installez l’extension Redirection pour effectuer vos redirections 301. • Cette extension peut également vous permettre de créer des adresses plus facile à retenir pour des campagnes de promotions et de rediriger automatiquement les pages pour lesquelles vous avez changer l’adresse.

27. L’extension Redirections • À l’exception des autres extensions vues précédemment, l’extension Redirections n’ajoute pas de nouveaux éléments de menu dans l’administration de WordPress. Il faut plutôt aller dans la liste des extensions et cliquer sur Réglages sous le nom de l’extension Redirections. • Dirigez vous à l’onglet Options. À la section Surveillance des URL, sélectionnez Ne pas surveiller puis cliquez sur Enregistrer. Cela empêchera de futurs problèmes reliés avec le changement du permalien d’une page si on change un permalien et on revient ensuite au permalien original. • L’onglet Redirections est l’endroit où l’on peut programmer les redirections de pages à faire. Par exemple, si la page produits de notre ancien site se trouvait à l’adresse monsite.com/produits.php, on inscrit seulement la partie suivant le nom de domaine /produits.php dans le champ URL source. On inscrit ensuite l’url complet de notre nouvelle page dans l’URL cible. Par exemple : http://monsite.com/produits/. • Attention, les redirections ne fonctionneront pas sur EasyPHP.

28. AU PROCHAIN COURS • Comment créer un site bilingue • Comment faire des copies de sauvegarde de son site • Finalisation de notre projet personnel