Spectra  est une extension que l’on ajoute au template Astra. C’est ce que l’on appelle un constructeur de pages, en anglais page builder. Il a la particularité de permettre l’insertion de blocs avec un fort contenu à valeur ajoutée. Par exemple

1. Des slider (diaporama)
2. Compte à rebours
3. Des Call to Action attrayant ….

Rappel sur l’éditeur de bloc WordPress

N’oubliez pas le sélecteur de bloc Spectra à gauche. Rappel : un bloc va accueillir un type de contenu et enrichir votre page. Les plus connus : bloc paragraphe, image titre texte …

Spectra vous en propose de belles fonctionnalités. C’est ce que nous allons voir ci dessous.

A droite c’est le panel qui permets de paramétrer le bloc que vous avez inséré dans votre page.

Le formulaire avec Spectra (form)

Nous allons insérer un formulaire dans la page contact.

Dans la  La colonne de gauche qui gère l’ensemble des blocs chercher le mot “form”. puis insérez ce formulaire dans la page Contact. Pensez à paramétrer l’item “Action” dans la colonne de droite en cliquant sur l’onglet ‘bloc”.

Pensez à tester si votre formulaire fonctionne !

Slider, Diaporama

Sur la page d’accueil nous allons supprimer l’image par défaut ou le bloc bannière, en mettant un “slider”. Attention la manipulation est délicate pour créer son diaporama si vous utilisez un Touch Pad

Le Pop up vs Modal

Comme je vous l’ai déjà expliqué lors du chapitre sur le référencement naturel, les popup ne sont pas appréciés par les algorithmes de Google en ce qui concerne le référencement SEO. Cependant, si les popups sont utilisées de manière judicieuse pour informer les utilisateurs ou pour des interactions pertinentes, elles peuvent être acceptées sans impacter négativement le SEO. Il est donc important de les utiliser avec modération et de manière à améliorer plutôt qu’à nuire à l’expérience utilisateur.

Un modal est une fenêtre qui s’affiche au-dessus du contenu principal d’un site web pour attirer l’attention sur une information ou une action spécifique. Contrairement aux popups qui sont intrusifs lors de l’arrivée sur une page web, un modal reste intégré à la page et nécessite une interaction de l’utilisateur (comme un clic pour le fermer) avant de pouvoir continuer à naviguer. Les modals sont souvent utilisés pour afficher des formulaires, des messages importants ou des confirmations d’actions

Sur la page d’accueil insérez un Modal, pour inviter les internautes à se tendre à la page contact juste après le slider.

Voici un rendu coté front office après avoir cliqué sur le bouton

Google Map

Toujours dans la page contacts , Nous allons insérer une Maps pour localiser notre biscuiterie.

Compte à rebours (countdown)

Le compte à rebours est un bon outil pour insister à l’action. Il est souvent utilisé pour annoncer une promotion limitée dans le temps.

Dans la page cookies nous allons insérer un compte à rebours qui durera 5 jours.  Créez aussi le contenu pour annoncer une promotion sur les biscuits cookies de moins 30% avec un joli CTA.

Testimonial (témoignage)

Sur la page d’accueil, pour rassurer le prospect, insérer et créer de faux témoignages. Voici le paramétrage par défaut de ce bloc Spectra. Il faut juste le personnaliser.

A vous dans le bloc de droite de paramétrer et de régler vos témoignages.

Voici le rendu

Mettre ici un texte fictif

John Doe Client

I have been working with these guys for years now! With lots of hard work and timely communication, they made sure they delivered the best to me. Highly recommended!

Suzanne smith Client

I have been working with these guys for years now! With lots of hard work and timely communication, they made sure they delivered the best to me. Highly recommended!

John Doe Company Name

Equipe (Team)

Sur la page contact ou une page spécifique, présentez votre équipe en ajoutant un bloc team. Attention le bloc est légèrement différent du bloc testimonial. Il faut insérer un bloc pour chaque membre de l’équipe.

Voici le rendu

Emmy

Assistante gestion

Texte de présentation

L’article E5B : WordPress nouveauté session 2025 en digitalisation est apparu en premier sur Web Easy 42.

Ce que l’on attend de vous pour la digitalisation au BTS NDRC E5 B

Si vous êtes évalué sous WordPress, il vous sera demandé de créer un article/page optimisé Seo avec l’extension Yoast non activée. Voici les points sur lesquels vous serez évalués :

1. Activation de l’extension WordPress SEO by Yoast
2. Créer un contenu de 150 mots minimums
3. Structurer votre article/page de façon à ce qu’il soit SEO friendly (structuration Hn + texte alt sur les images). Il doit y avoir une cohérence entre les paragraphes, les sous-titre (H2, H3…)
4. Varier les blocs utilisés avec Gutenberg/spectra  = texte, titre, image, bannière, citation, galerie photo.
5. La qualité de rédaction et l’orthographe seront prises en comptes
6. Optimisation des infos métas avec Yoast (requête cible, méta Title et Description)

Dans cet article, j’essaie d’être synthétique et focus sur ce que les examinateurs peuvent attendre du candidat. Je m’attarde sur la création d’un article optimisé Seo pour l’épreuve de Digitalisation.

Structuration de votre contenu avec Gutenberg de WordPress

Pour rappel, l’éditeur Gutenberg fonctionne par l’ajout de blocs dans votre article/page. Ces blocs peuvent être des paragraphes, des titres, liste, des citations, des contenus embarqués … Pensez à varier les blocs tout en respectant la structuration Hn (sous titre, sous sous titre …) expliquée ci dessus !

Texte et sous titre

Les images

Vous devez compléter la balise Alt (alternative) de l’image dans la bibliothèque Média ou sur le paramétrage du bloc image avec Gutenberg. Le bloc de paramétrage est toujours à droite de l’article dans le back office.

Maillage interne et externe

Le jury de l’éducation nationale va également vérifier si vous avez fait des liens internes. Pour rappel, un lien interne est un lien qui renvoie vers un article ou une page de votre site.

Ils peuvent aussi valider des liens externes. Pour rappel, un lien externe est un lien qui renvoi vers un autre site internet traitant du même sujet que votre contenu.

Les étiquettes si vous rédigez un article (pas pour les pages)

Pour rappel, un article est obligatoirement catégorisé. A cet article vous pouvez ajouter « des étiquettes » et elles sont facultatives. Seulement l’éducation Nationale aime bien les utiliser le jour de l’examen.

Sur Webeasy42.fr, je traite beaucoup d’article sur WordPress, mais il n’y a pas de catégorie WordPress, seulement une étiquette. Voici comment créer une étiquette depuis un article :

Vous pouvez en savoir plus avec l’article sur les étiquettes de Wp Marmite

Créer une structuration Logique et cohérente

Dans cette illustration, la première balise H3(à droite) ne peut pas être ici. Il faut la remplacer par une H2 et ajouter une H3 à la place de la H2 et pour terminer la balise H4 ne peut pas se trouver ici aussi

La méta box de Yoast avec WordPress

Il est important d’affiner le Title et la Description en reprenant les mots clés sur lesquels vous souhaitez vous positionner. Le plugin Yoast est l’extension qui sera installée (non activée) sur le WordPress le jour de votre examen. Ce sera à vous de l’activer, pensez y !

Je vous conseille de compléter :

1. La requête cible
2. Le Méta Title et description

Une info méta doit être optimisée. Le Title doit faire entre 55 et 70 caractères espaces compris. Et la Description entre 145 et 155 caractères espaces compris

Pour aller plus loin dans le référencement naturel

Etre référencé naturellement dans les moteurs de recherche comme Bing ou Google est source de trafic. En 2013 52 % des clics étaient sur les annonces Google contre 45 % en 2017 (source Ifop).

Quant à la question, faut-il optimiser un contenu pour le référencement naturel dans le cadre d’une activité commerciale ? La réponse devient évidente ! Le référencement naturel est une technique très puissante qui apporte du trafic qualifié dans une stratégie d’inbound marketing.

Conclusion et retour d’expérience sur l’article pris en exemple

J’ai été longtemps en réponse 1 sur cet article écrit en 2016, mais plus maintenant. D’autres articles sont apparus. Le web n’est pas statique, mais bien dynamique et rien n’est acquis définitivement.

Le Seo prend et demande du temps. Ce qu’il faut privilégier, c’est toujours un contenu de qualité en direction de votre audience.

Voici la structuration Hn complète de l’article (les paragraphes ne sont pas représentés) :

Voici le lien de l’article pris en exemple : https://www.webeasy42.fr/chronique/c-est-quoi-un-webmaster/.

Rappel des termes techniques pour le Search Engine Optimisation (SEO)

SERP : Search Engine Result Page : Résultat de recherche en fonction de la requête (mots clé) saisie en recherche. C’est les liens proposés par les moteurs de recherche sur lesquels vous pouvez cliquer.

Critères « On site » : Ensemble des éléments importants à mettre en place sur le site internet.

Critère « Off site » :  C’est un ensemble d’élément propre à l’écho système digitale. Il se traduit entre autre par les backlink, la présence sur les réseaux sociaux, les blog …

Blogs sur le Seo à suivre et surtout à lire aussi !

Si vous souhaitez vous perfectionner dans ces techniques, je vous invite à suivre le blog Abondance et Olivier Andrieu, un expert reconnu dans le référencement naturel.
Accès blog abondance

Olivier Duffez est aussi une personne que j’ai beaucoup lu. Conférencier également, il partage de nombreuses infos sur la thématique du SEO.
Accès au blog Webrankinfo

Daniel Roch est une personne à suivre notamment à travers son site SeoMix. Il est spécialisé dans le SEO sous wordpress.

Accès au site seomix

L’article Comment créer un article WordPress pour l’épreuve de Digit E5 B du Bts Ndrc ? est apparu en premier sur Web Easy 42.

Quiz design et structure site web

Allez feu !!!

Question

Votre réponse

Réponse correct

Suivant

Please wait..

↺

Vous avez obtenu {{SCORE_CORRECT}} sur {{SCORE_TOTAL}}

Vos réponses

Toutes les réponses vous seront données à la fin de ce quiz.

L’article Quiz de connaissances : design, structuration et fonctionnement d’un site vitrine est apparu en premier sur Web Easy 42.

Salva Terra, un parc d’animation médiéval dans les mont du Lyonnais

Situé à Haute-Rivoire dans les Monts du Lyonnais, le parc d’animation de Salva Terra est plus un centre d’interprétation du moyen âges qu’un parc d’attraction. Clairement, on ne consomme pas du contenu, on le vit et on participe. Plongé dans le moyen âge du 12ème siècle, le visiteur est immergé dans l’artisanat, la chevalerie et plus largement dans la vie quotidienne des habitants de l’époque.

Ce centre d’interprétation accueille 6 mois 12 des centres de loisirs, scolaires et visiteurs avec une dizaine de comédiens présents toute la saison. Pour compléter son offre, des journées à thème sont régulièrement organisées avec d’autres troupes qui viennent partager eux aussi leur passion du moyen âge. (marché artisanal, tournoi de chevalerie …)

Mon travail de webmaster freelance

J’ai commencé à travailler sur le projet salva-terra.com en 2012… Ah ouaip, ça date. Avec les débuts du Cms WordPress, j’ai créé le site web et depuis cette création je l’anime et le sécurise.

Création du site internet vitrine

C’est une approche assez toute simple sur ce site vitrine. L’idée générale était de présenter le parc et les activités misent en place ainsi que de rendre accessible des informations pratiques pour les usagers. Le client souhaitait également mettre des documents Pdf téléchargeables utiles pour les collectivité, comme les fiches d’inscription, de programme …

Après avoir créer le template wordpress et l’univers graphique, j’ai mis en place les différents contenus, textes et images validés par le client. Pour un site comme celui ci, c’est 35 heures de travail avec un budget de 1900€.

Le site est peut-être resté dans son jus sans amélioration Ux et Ui depuis 2012, mais le client est satisfait car il apporte toutes les infos nécessaires aux usagers.

Mise à jour des contenus et maintenance

Depuis la mise en production du site internet, je fournis une prestation globale à mon client que je facture de façon mensuelle. Elle comprend :

• Les mises à jour des contenus textes, Pdf et images
• La sécurisation de WordPress
• L’hébergement du site chez Ovh

Sécurisation de wordpress avec Sécupress

Pour sécuriser le site, j’ai utilisé le plugin Secupress édité par Julio Potier. La version freemium est déjà extrêmement poussée et ouvre de nombreuses fonctionnalités.

Pour des sites plus étoffés je conseille l’abonnement à ce plugin qui est pour moi une référence en matière de sécurisation de WordPress. L’interface d’administration est très agréable et les explications tout au long du paramétrage sont en français.

Le petit plus Seo avec le cocon sémantique

En tant que webmaster freelance curieux, j’ai testé sur salva-terra.com le cocon sémantique popularisé par Laurent Bourelly. Mais c’est sur le site abondance d’Alain Andrieu, que j’ai appris cette technique.

L’idée était de sortir sur des mots clés de longue traine comme costume médiéval artisanal, activité et vie médiéval ou combat à l’épée médiévale. Hélas par manque de temps, je n’ai pas vraiment eu la disponibilité de monitorer les résultats.

En résumé

• Création du site internet en 2012
• Mise à jour des contenus depuis la création
• Test Seo du cocon sémantique

L’article Salva Terra : parc médiéval, un projet web historique ! est apparu en premier sur Web Easy 42.

Le village du savoir est une association d’artisans loi 1901. Différents corps de métier issus du bâtiment se sont regroupés depuis plus de 10 ans au sein de cette association. L’objectif est de mutualiser des ressources pour apporter le meilleur service à leur client. Dans ce groupement, on retrouve toutes les spécialités du bâtiment : gros, second œuvre et finition.

WordPress l’outil idéal pour ce projet

Le besoin initial était d’avoir un site vitrine pour présenter les artisans membres et également de communiquer sur la vie de l’association. Un projet simple ! mais oh combien passionnant lors de sa mise en place. J’ai collaboré avec l’agence de communication Activ Média, pour le déploiement et l’intégration des différents plugin installés sur le wordpress.

Après la création de l’architecture du site en pré – production, je procède toujours par la sécurisation lors du passage en Prod. Des plugins comme Sécupress ou encore Yoast font partis intégrantes de ma boite à outil.

L’article Les artisans du village du Savoir faire sur le Net avec WordPress ! est apparu en premier sur Web Easy 42.

Mon besoin était d’avoir une gestion multisite WordPress avec des noms de domaines différents sur un mutualisé OVH.

J’ai réussi à créer des sites avec des noms de domaines différents sans l’utilisation du plugin WordPress multi domaine avec également des modifications de la zone Dns sur mon hébergement OVH. Les noms de domaines que j’ai géré sont tous enregistrés chez OVH.

Dans ce tuto, je ne reviendrai pas sur la création d’un réseau multisite wordpress. Je vous conseille de lire le tutoriel sur Wp formation [accès tuto création d’un réseau multisite wordpress ].

Création du nouveau site WordPress

La création commence par un sous domaine

La première étape est de créer un nouveau site depuis le panel de contrôle des multisites WordPress. Comme vous le constatez dans l’image ci-dessous, on peut créer uniquement un sous domaine. Nous verront plus loin comment le modifier par la suite.

Modification du sous domaine

Dans l’image suivante nous avons bien le sous domaine présent et valide, cependant nous voulons : https://leschaletsdor-les2alpes.com. Pour modifier ces paramètres, éditez le nouveau site créé et changez le sous domaine par le domaine que vous possédez.

Il vous suffit de modifier ce sous domaine par : https://leschaletsdor-les2alpes.com.

• « compte » est la pour ajouter des utilisateurs
• « thèmes » pour insérer de nouveau template
• « réglages » est équivalente aux réglages WordPress classiques.

Voila ce que nous devons avoir, après les modifications.

Attention si vous souhaitez accéder au panneau d’administration de votre nouveau site, cela ne fonctionnera pas encore. Vous allez arriver sur une page d’erreur.

Maintenant, nous allons modifier la zone Dns de votre hébergement OVH

Configuration multisite Ovh et vérification DNS

Comme moi, vous avez un hébergement mutualisé chez OVH. Vous verrez, il est très simple de gérer des multisites WordPress avec OVH.

Pour la première étape il faut créer un multisite depuis votre hébergement OVH qui contient l’installation WordPress paramétrée en multisite.

Sur votre Nic Handle OVH, sélectionnez votre hébergement, puis cliquez sur l’onglet « multisite », puis sur créer un « sous domaine ».

Le répertoire de destination que vous devrez sélectionner doit correspondre au répertoire de l’installation de votre WordPress multisite. Dans mon cas, c’est le répertoire WWW. Une fois, vos sélections terminées, il vous suffit de valider.

La configuration de la zone DNS de votre nom de domaine sera activée automatiquement par OVH. Je vous conseille de vérifier tout de même si tout est correct.

Cliquez sur le menu « domaines », puis sélectionnez votre domaine qui doit venir pointer sur l’installation multisite WordPress. Vous devriez avoir sur l’onglet « zone Dns » un enregistrement de type A avec les domaines qui pointe sur l’Ip de votre hébergement mutualisé Ovh.

Bug de connexion au backoffice d’un nouveau site

Il se peut que lorsque vous créez un site avec un nom de domaine différent, vous rencontriez quelques problèmes de connexion au BO de WordPress. Voici la capture d’écran.

Même en connexion privée, ce bug peut persister. Ce problème est du à l’envoie de la variable $secure_cookie sur un canal crypté pour les connexions administrateur. Ce problème peut-être résolu de la manière suivante :

• Vérifier / activer Ssl
• Ajouter à votre config.php la ligne suivantes
  define(‘COOKIE_DOMAIN’, $_SERVER[‘HTTP_HOST’] );

L’article WordPress multisite et multi domaine sans plugin chez OVH est apparu en premier sur Web Easy 42.

Pre-requis pour traduire votre thème

Vous avez créé un thème wordpress de toute pièce sans générateur de thème et vous souhaitez le traduire dans d’autres langues. Vos templates sont personnalisés, vos pages créées …? Alors commençons ou vérifions vos chaînes de caractères qui composent votre thème.

Ecrire correctement ses chaînes de caractères

Dans votre thème wordpress vous avez écrit « en dur » du texte. Exemple, « lire la suite », bonjour… ». Il faut les mettre en anglais. Pour de bonnes pratiques ce sera votre langue par défaut car wordpress est »par défaut en Anglais ». Il n’est pas trop tard, alors reprenez tout en anglais avant de continuer.

Ne laissez pas en Html ces chaines de caractères. Toujours pour de bonnes pratiques, utilisez cette fonction Php :

<?php _e(‘ma chaîne de caractère‘,’le_domaine‘ ) ?>.
Exemple : <?php _e(‘Read more‘,’theme -webeasy42‘ ) ?>

Cette fonction permettra de traduire votre thème sans créer  de bug de traduction dans toutes les langues que vous souhaitez.

Préparez votre thème wordpress à traduire

1. L’ anglais sera la langue par défaut du thème
2. Créez un dossier « lang » ou « languages » (c’est juste pour ranger votre thème et ne pas en avoir de partout)

Loco Translate un outil tout en un !

Ce plugin est capable de traduire votre thème mais également les plugins installés sur votre WordPress. En effet, il se peut que des plugins ne soient pas traduits complètement et grâce à Loco translate vous pourrez terminer la traduction. Dans ce tuto je m’attarde uniquement sur la traduction du thème.

Une fois installé, rendez-vous sur : loco translate > thème et cliquez sur votre thème. Vous arrivez sur un écran qui affiche tous les thèmes présents dans votre site WordPress.

Création du modèle

Comme dans la capture d’écran, nous allons créer un « modèle ». Ce modèle sera le gabarit de votre langue par défaut, je me répète « l’anglais ».

Une fois que vous avez créé votre modèle, nous allons pouvoir traduire le thème dans n’importe quelle langues. Vous n’avez pas quitté la page Thèmes / Mon thèmes ? Alors maintenant cliquez sur « Nouvelle langue ».

Choisir la langue de traduction

1. Sélection votre langue
2. Choisissez l’emplacement où seront déposés vos fichiers de traduction(dans le répertoire lang ou language)
3. Cliquez sur « commencer la traduction »

Sans rentrer dans la technique, lorsque vous traduisez une langue, vous allez créer avec Loco Translate des métas fichiers qui seront par la suite utilisés de manière native par wordpress en fonction des langues qui seront affichées dans votre site. Mais revenons à notre traduction.

Traduction des chaînes de caractères

Vous arrivez sur la fenêtre suivante. Nous allons traduire ce que l’on appelle des « chaîne de caractères ». Si une chaîne n’est pas traduite dans la langue, c’est la langue par défaut du thème qui s’affichera. Dans notre cas l’anglais.

1. Sélectionner dans la première partie de l’écran (« texte source ») la chaîne que vous voulez traduire
2. Traduisez dans la deuxième partie d’écran
3. Puis « enregistrez » votre traduction
4. et ainsi de suite

Loco Translate a créé un fichier « fr_FR » : langues français en France. La traduction ne se fait pas toute seule. C’est à vous de traduire chaque chaînes de caractères en vous aidant de Google Translate par exemple.

Télécharger le plugin sur wordpress : Loco Translate

L’article Traduire un thème WordPress sans le logiciel PoEdit est apparu en premier sur Web Easy 42.

Dans ce tuto, j’aborderais la mise en place du plugin AMP for WordPress et le paramétrage simple de la version gratuite en prenant pour exemple un site vitrine. On va pouvoir créer des contenus spécifiques facilement en limitant les erreurs. La version payante permet d’activer des modules pour le marketing : Formulaire, CTA, Advertising…

Lors de la création des pages AMP, il faut bien avoir conscience que vous allez proposer un site adapté aux mobiles. Les animations, le graphisme et l’ensemble des scripts que vous utilisez pour la version desk ne seront plus les mêmes. Seul le contenu textuel sera identique, même l’arborescence pourra être repensée pour une meilleure expérience utilisateur.

Rappel sur AMP : Accelerated mobile pages

C’est une technologie développée pour faciliter et accélérer l’affichage des pages web sur terminaux mobile. Elle s’applique à tous types de site internet : Blog, e-commerce quelques soit le CMS. Pour la norme AMP, Google est l’un des principaux instigateurs.

Cette techno est puissante, même si elle peut paraître compliquée à déployer. Elle ouvre de grandes perspectives sur le fait que le contenu pour mobile peut être différent, plus rapide et plus adapté.

Si vous utilisez le CMS Worpress, vous pouvez aussi déployer AMP pour avoir un contenu mobile friendly.

Prérequis pour utiliser AMP for WordPress

Installation du plugin AMP for WordPress

Avant de l’installer, il faut vous assurer qu’aucun plugin AMP ne soit présent sur votre site WordPress. Pour vérifier si AMP se déploie correctement, suivez dans le temps comment Google comprend vos pages AMP grâce à la Search Console.

Je vous conseille de faire le paramétrage en une seule fois. Pour y parvenir, vous aurez besoin de 2 heures sur un site vitrine.

Pensez également lors de l’installation à désactiver vos plugins de cache pour faciliter votre travail.

Mettre au format AMP un contenu déjà existant.

Les pages et les articles que vous avez créez seront automatiquement convertis dans vos pages AMP avec ce plugin. Vous pourrez les personnaliser au cas par cas ou en utilisant la fonction « page builder » que nous verrons plus bas.

Prise en main de l’interface AMP for WordPress

L’interface utilisatrice est très ergonomique. Tout d’abord sur la barre admin droite de WordPress, vous trouverez les sous-menus du plugin. Ils sont repris dans le panneau général.

Par quel bout attaquer ce déploiement ?

Comme expliqué précédemment, ce plugin limitera les erreurs, mais il faut rester vigilant. A l’heure où j’écris ce tuto, je suis toujours en phase de test. Voici comment j’ai procédé pour mon site vitrine :

• Paramétrage (setting)
• Choix d’un template et personnalisation CSS
• Adaptation du contenu des mes pages et articles pour mobile
• Création d’un menu AMP dans « apparence > menu » de l’administration de WordPress
• Test, vérif, test, vérif et re re vérif avec search console…bien sûr !

Le menu « setting »

C’est dans ce menu que vous allez passer le plus de temps au début.

L’item Général

Vous allez choisir votre logo et l’intégrer à vos pages AMP en pouvant modifier la taille par défaut. Ensuite quel type de contenu vous souhaitez mettre en avant pour les mobinautes : Vos articles, pages, catégories, tags ou une page d’accueil spécifique ? C’est à vous de choisir.

Le page builder … pour pousser la customisation à l’extrême

Le builder peut être activé pour toutes les pages et articles par défaut via l’interface d’admin. Par la suite, nous les utiliserons au cas par cas. J’en parle plus bas.

Le page builder vous permet de créer un contenu spécifique avec des outils plus adaptés et intuitifs.

Advertissement

Non traité

Seo

Voir le paragraphe spécifique avec WordPress SEO by Yoast.

Performance

Personnellement, je ne l’active pas pour éviter la casse lors de la minification car j’utilise déjà un plugin de Cache. Si vous être plus courageux que moi…allez-y !

Google Analytics

C’est important, si vous voulez suivre le trafic « AMP » avec Google Analitycs. Le fait de renseigner vos identifiants ne vous permettra pas de suivre sur Analytics le trafic vers vos pages Amp. Il faut paramétrer Analytics ou Tag Manager pour avoir des statistiques exploitables ou acheter l’extention proposée par l’éditeur du plugin.

Seul la « Search consol » vous donnera une indication sur le nombre de pages AMP indexées, mais en aucun le trafic qu’elles reçoivent.

je vous donne quelques liens à la fin de ce tuto.

Je vais passer sur « structured data », « notice bar » et « push notification ».

Contact Form

Cet item vous permet d’utiliser le célèbre plugin pour la création de formulaires. Attention même si vous cochez le bouton « Contact Form 7 Support », il vous faudra acheter l’extension chez « AMP for WordPress » pour que cela fonctionne.

Comments

Dans mon exemple, je n’utilise pas le commentaire, C’est une fonction de WordPress que je déploie rarement. Sur mon site vitrine les commentaires ne sont pas activés.

Hide AMP Bulk Tool

C’est ce que l’on peut aussi appeler la Méta Box AMP. Moi je l’affiche par défaut, elle m’est très utile dans les articles et les pages que je veux retravailler et affiner pour le format AMP.

Advance settings

C’est ici que vous allez rajouter des Tag Html pour vos trackings Adwords, Analytics, Critéo…. Le code ajouté doit respecter la norme AMP. Si ce n’est pas le cas vous aurez des erreurs dans vos résultats de « search consol » et le déploiement ne sera pas pris en compte. Attention les javascript doivent utiliser l’API Google.

Translation Panel

Dans ce réglage, vive la traduction. Si votre site est multilingue, « Pot édit » est utilisable. Moi je ne l’ai pas encore testé.

Le sous menu « design »

Themes

Dans la version gratuite, 3 Templates vous sont proposés. A vous de choisir celui qui vous correspond le mieux.

Global

C’est item est sympa, car il vous permet de personnaliser votre template. L’ajout de CSS est possible ce qui décuple vos possibilités graphiques.

Header

Là aussi à vous de voir. Cela va dépendre de vos objectifs et de l’expérience utilisateur que vous proposerez.

Menu navigation :

En ce qui me concerne, j’ai laissé un menu que vous pourrez créer dans « apparence > menu » de WordPress.

Search

L’activation de ce bouton propose aux internautes de la recherche sur votre site. Dans mon exemple de site vitrine, je n’ai pas trouvé cela percutant. De plus, pour avoir testé ce paramètre, les résultats proposés ne sont pas que des résultats AMP.

Non-AMP Home Page

Je ne l’ai pas activé, car c’est dans l’item footer que j’ai décidé de rendre visibles et cliquables mes pages Non-AMP. (voir plus bas)

Home page

Dans mon cas, je ne suis pas en mode Blog, mais bien sur une page statique en home. J’ai donc personnalisé et adapté le contenu pour la version mobile. Donc la notion « Excerpt », taille et autres ne s’appliquent pas à mon site vitrine. Peut-être pour vous ?

Single

C’est ici où vous allez personnaliser vos articles. Le paramétrage sera en relation avec votre projet. C’est un réglage à soigner et à adapter selon vos besoins.

Footer

Affiche en pied de page des liens vers des versions Non AMP du site internet.

Social

Vous pouvez sélectionner les boutons des réseaux sociaux que vous voulez voir apparaître dans vos articles(post).

Date, Misc

Avec Amp For WordPress, vous réglez le format de date. Misc vous permettra d’activer le support RTL et les sous catégories.

AMP au cas par cas dans vos articles ou pages

Par défaut, si vous n’utilisez pas les métas box AMP (« page builder » et « Custom AMP editor »), c’est votre contenu principal qui s’affichera dans la version mobile. Mais pour améliorer l’expérience utilisateur du mobinaute qui n’a pas le même comportement qu’un utilisateur avec un micro-ordinateur, je vous conseille de personnaliser les articles et les pages au cas par cas.

Lorsque que vous éditez un article, le « builder » est préemptif sur le « Custom AMP editor » et sur le contenu initial déjà présent dans l’article ou la page. L’héritage se fait dans ce sens : page builder > Custom AMP editor > contenu initial. (Voir figure ci-dessous)

Pour être honnête, je n’ai pas bien compris cette redondance entre « page builder » et « Custom AMP editor », hormis le simple faite que le « page builder » est un peu plus poussé et plus intuitif.

Si vous avez défini une image à la une dans votre article initial, elle sera aussi visible dans la version AMP. Pensez-donc à les optimiser pour le web avec Tinypng par exemple.

Les Widgets AMP for WordPress

Les widgets que l’on peut insérer dans le footer ou le header de la version AMP de votre site web vont vous permettre d’affiner l’expérience utilisateur. On utilisera le paramétrage classique de WordPress dans apparence > Widgets.

Cependant lorsque que vous souhaitez faire afficher une catégorie d’article, cela ne fonction pas (version 0.9.74.1 du plugin à l’heure où j’écris cet article). La catégorie affichée génère un lien en 404.

Les menus de navigation en version AMP

Pour les menus vous utiliserez les fonctions natives de WordPress. Dans « apparence > menu » vous pouvez créer 2 menus. Le premier le menu principal et le deuxième un menu qui est positionné dans le footer.

SEO et Yoast avec Amp For WordPress

Contenu dupliqué ou pas ?

Les url que vous allez générer avec AMP seront formatées de la manière suivante : www.monsite.com/amp pour la page d’accueil par exemple. Nous allons nous retrouver avec 2 contenus identiques (dans le cas où vous ne personnalisez pas avec les métas box AMP comme évoqué plus haut) pour des Url différentes. Là vous me direz : « duplicate content ». Et bien non, car l’url canonique est là pour éviter ceci. Elle est gérée automatiquement par le plugin.

AMP for WordPress et Yoast

Même avec l’utilisation de la version gratuite du plugin, le paramétrage de Yoast pour vos pages Amp est possible.

Dans l’exemple qui suit, j’ai répété le réglage Yoast des pages standards pour ne pas indexer en version AMP les pages auteurs et archives par dates. La raison est que ce contenu n’a aucun n’intérêt pour l’internaute. Dans mon exemple, c’est un site vitrine qui n’a pas un rythme de publications conséquentes et un grand nombre d’auteur.

11 – Conclusion et ressenti

J’ai voulu afficher un lien de mes catégories dans le pied de page. Sur l’affichage des catégories en menu footer AMP, j’ai une erreur 404 de générée quand on clique sur une catégories. Je l’ai donc désactivé dans le réglage du plugin AMP for WordPress. Est-ce un bug du template, du plugin…je poursuis le test. Afin de ne pas avoir un lien AMP sur mes catégories comme : www.monsite.com/macategory/, dans le Setting > general, j’ai désactivé : « Archives [Category & Tags] »

Cependant les posts sont bien à la norme AMP mais pas relié au site en version AMP.

Le plugin AMP for WordPress en version gratuite donne des résultats plutôt satisfaisant. Il possède est bon support, ce qui est vraimement un plus.

12 – Voici quelques liens à fowarder

– Télécharger le plugin AMP for WordPress

– Découvrez le site ampproject.org en version française

– Pour vous aider avec Analytics, voici un lien vers le Blog de Julien Coquet, expert en digital Analytics : https://juliencoquet.com/2017/01/22/mesurez-vos-pages-amp-google-analytics-gtm/

– Voici également les explications pour le paramétrage de Google Tag Manager sur le site officiel AMP for WordPress : https://ampforwp.com/tutorials/article/gtm-in-amp/

L’article Plugin AMP for WordPress, comment ça marche ? est apparu en premier sur Web Easy 42.

Votre galerie d’image avec Envira

La version gratuite est en anglais, alors un petit effort avec la langue de Shakespeare. Comme pour toute création de galerie, il faut toujours sélectionner ses photos avant et les formater pour le web (dimensions et poids de l’image). En cliquant sur « Envira Gallery », vous accédez à la totalité des galeries créées.

Si déjà des galeries sont présentes, il suffit de cliquer sur le nom de galerie pour l’éditer. Vous pourrez supprimer ou modifier les images déjà insérées. Sinon, il n’y a plus qu’à en insérer.

Création de votre galerie

Vous devez cliquer sur « Add new ». Pour être efficace, je ne parlerai pas des options de configuration (voir fig ci-dessous.). Elles sont prévues pour la version pro payante. Lorsque vous avez cliqué sur « add new », vous arrivez sur cette fenêtre.

Insérer des photos dans votre galerie

Sélectionnez les photos depuis votre bibliothèque WordPress ou votre ordinateur. Répétez l’action autant de fois que vous souhaitez intégrer des images dans votre galerie. Vous obtenez l’écran suivant.

Attention les photos choisies ne sont pas totalement préparées surtout si vous avez une démarche d’optimisation SEO. En effet, il faut penser à renseigner l’attribut « Alt ». Pour cette opération, cliquez sur le crayon bleu.

Attribut Alt : Pour les moteurs de recherche et les lecteurs d’écran pour les personnes mal voyantes.

Attribut Title : Pour un titrage de la photo qui se verra dans le front office lors du survol de la photo par la souris.

Si vous souhaitez supprimer une photo cliquez sur la corbeille. Attention, l’image ne fait plus partie de la galerie, mais elle est toujours présente dans la bibliothèque média de WordPress. Elle pourra être réutilisée une autre fois.

Il faut tout de même bien penser à enregistrer tout ce que vous faites et à publier la galerie en fin de création.

Insérer une galerie dans un article ou une pages

Sélectionnez la page ou l’article dans lequel vous voulez insérer votre galerie. Dans le corps du texte choisissez l’endroit où elle devra apparaître. Cliquez sur le bouton « Add Gallery ».

Pour aller plus avec Envira gallery

Maintenant à vous d’essayer Envira Galerie

– Télécharger le plugin Envira Gallery

L’article Envira Gallery, Bootez vos galeries photos WordPress simplement ! est apparu en premier sur Web Easy 42.

Google Analytics a évolué ces derniers mois. De nouveaux outils comme « Google Tag Manager » sont apparus… et d’autres ont disparu. Depuis ces modifications, Analytics ne met plus à disposition des codes de suivi à insérer dans les pages d’un site pour visualiser les conversions. Aujourd’hui on fait de la virtualisation.

Je voulais créer un objectif de conversion sur l’envoi de formulaire Contact Form 7 pour une demande d’info (devis). Après avoir galéré, j’ai réussi à trouver la solution. Cependant, je n’ai pas complétement terminé. Pour arriver à suivre ma page de formulaire de contact dans Google Analytics, j’ai du désactiver mon plugin de cache : « W3 Total Cache. Ce tuto va donc évoluer dès que j’aurais terminé mes tests sur WordPress.

Commencer par WordPress et Contact Form 7

Votre formulaire Contact Form 7 est terminé et fonctionnel ! Pour suivre maintenant les conversions, « comme quoi le formulaire à été envoyé », nous allons créer une page spécifique de destination. Nous allons appeler « merci ».

Créer une page de destination avec WordPress

Dans le menu admin de WordPress faire : Page > Ajouter.

Le titre de la page sera « merci » et directement à la racine de votre site internet : http://www.monsite.com/merci/.

Profitez de cette page pour soigner son contenu et remercier l’internaute pour sa sollicitation. Car après validation du formulaire, il sera dirigé dessus et c’est toujours bon pour la GRC avec un potentiel client.

Cette page ne doit pas être indexée par Google car elle ne représente rien de véritablement d’intéressant. Si vous utilisez Yoast SEO, je vous conseille de la passer à « noindex » « follow » car elle n’a aucun intérêt dans point SEO et qualité du contenu, c’est de la courtoisie.

Paramètrer Contact Form 7

Une fois que votre page de destination est créée, il faut dire à Contact Form 7 : « Envoi l’internaute dessus après validation du formulaire ». Revenez sur Contact Form 7 et le formulaire que vous souhaitez suivre avec Analytics. Cliquez sur l’onglet « réglages additionnels » et entrez le code suivant : on_sent_ok: « location.replace (‘http://www.monsite.com/merci/’); » . Puis valider.Nous en avons terminer avec Contact Form 7.

Attention ça marche, mais depuis WordPress 4.9 et les dernières mises à jour de Contact Form 7, le code javascript est « déprécié ».

Créer et paramètrer un objectif avec Google Analytics

Ouvrez votre compte Google Analytics. Sélectionnez l’administration du compte sur lequel vous voulez définir un objectif.

Cliquez sur « nouvel objectif ». Donnez une nom à cette objectif. Le type sera « destination »

Maintenant, il faut détailler l’objectif, nommer la page de destination et terminer par la validation.

Pour aller plus avec Contact Form 7

Dans ce tuto, je n’ai pas abordé la création complète d’un formulaire avec Contact Form 7 pour WordPress. Je n’ai pas aussi pris trop de temps pour vous parler de cet excellent plugin « Contact Form 7 ». Si vous souhaitez aller plus loin voici le lien du concepteur de Contact Form 7 et celui d’un très bon tutoriel de WP Marmite pour utiliser le plugin.

– Site de Takayuki Miyoshi, le créateur de Contact Form 7

– Tuto complet pour l’utilisation de Contact Form 7 sur wpmarmite.com

L’article Suivre les conversions d’un formulaire Contact Form 7 avec Google Analytics est apparu en premier sur Web Easy 42.