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.

Advanced Pack est un module Prestashop qui permet de créer des packs personnalisables. A partir de votre catalogue produit, vous pourrez choisir les produits et les déclinaisons qui feront partis de votre Advanced Pack.

Une fois votre bundle créé, vos paramètres pour vos actions commerciales seront très simples à mettre en places. Promotion globale sur le pack ou affinage de l’offre sur un produit se réalisera de manière intuitive.

Créer un pack pour booster votre offre commerciale

Comment démarrer

La philosophie de ce module est de créer un pack à partir d’un produit phare. Pour cela, sélectionnez un produit de votre catalogue et rendez-vous sur l’onglet « configurer le pack ».

Si le produit possède des déclinaisons, vous pourrez intégrer dans le pack une déclinaison ou pas. C’est à vous de choisir. D’un point de vue commercial, cela permet d’avoir une offre différente entre le pack et le produit seul.

Ex : Vous vendez un appareil photo avec une déclinaison de trois couleurs. Mais le modèle en noir est celui qui possède la meilleure marge. Vous pourrez paramétrer un pack avec l’appareil et sa déclinaison en noire en y ajoutant une remise personnalisée.

Méthode de création

• Donnez un nom à votre pack dans l’onglet « information »
• Complétez les références et l’EAN si nécessaire
• Complétez votre SEO
• Catégorisez le pack dans votre catalogue, onglet « association »
• Enfin, configurez le Pack avec l’onglet « configurer pack »

Maintenant, vous n’avez plus qu’à ajouter des produits avec la barre de recherche et appliquer des réductions. Elle fonctionne par auto complétion. Commencez à saisir le nom d’un produit pour voir ensuite s’afficher les résultats.

Mettre à jour un Advanced pack existant

Il accessible par la barre menu : Catalogue > Pack

Paramétrage et modification d’un Pack existant

• Sélectionnez le pack que vous souhaitez modifier
• L’interface est très proche de celle d’une fiche produit

5 – à suivre

Le site de l’éditeur d’Advanced Pack

L’article Comment créer un pack produit avec Avanced Pack pour Prestashop 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.