Catégories
Site web - général Thème WordPress

WordPress thème – Comment traduire un thème WordPress en français

Wordpress theme Comment traduire un thème WordPress

Vous avez trouvé un thème WordPress que vous aimez, mais il est en anglais. Voici une façon simple de faire la traduction d’un thème WordPress qui est déjà prêt pour « l’internationalisation » I18n (I18n qui est l’abréviation pour l’internationalisation)

Comme par exemple les thèmes qu’on trouve chez Woo Themes. Ces thèmes ont déjà un fichier .PO qu’on peut utiliser pour la traduction dans la langue de notre choix.

Je vais faire un exemple ici en utilisant un thème gratuit de Woo Themes qui s’appelle Bueno

J’ai d’abord téléchargé le thème WordPress et je l’ai installé sur un wordpress version 3.1 en français. Comme on peut le voir il y a certains textes en anglais :
texte du site bueno qui est en anglais

Éditer le fichier .po avec Poedit

Pour que ces textes s’affichent en français j’édite  le fichier bueno.po, du thème WordPress. Ce fichier est dans le répertoire LANG (wp-content/themes/bueno/lang) et je modifie le fichier avec le logiciel Poedit (disponible pour Windows, Mac et linux) que vous pouvez télécharger gratuitement.

fichier Bueno.po du thème wordpress woothemes

Fichier bueno.po dans poedit

Faire la traduction de chacun des éléments

Cliquez sur le premier élément de la liste, ensuite allez dans le bas de l’écran puis cliquez dans la case vide et entrez le texte en français. Exemple : % Comments devient % Commentaires (s’il y a des signes comme % ou autre ne faut pas oublier de le inscrire).

Traduction dans Poedit

Traduction avec Poedit

IMPORTANT : Lorsqu’on traduit en français il faut tenir compte des accents. Généralement les sites web WordPress utilisent l’encodage UTF-8 par défaut. Il faut donc remplacer les caractères accentués par leur équivalent UTF-8.

Les principaux accents hmtl utf-8  c’était mal formulé (merci à Jef) ==> Les accents et caractères spéciaux en ASCII sont :

  • é => é
  • è => è
  • ê => ê
  • à => à
  • ù => ù
  • un espace vide =>  

Vous trouverez une liste plus longue sur le site scriptol.fr. M.A.J. mai 2012 : 2e référence proposée par Jef  www.w3schools.com/tags/ref_charactersets.asp

Enregistrement du fichier qui a été traduit

Une fois qu’on a terminé la liste de tous les éléments à traduire, il s’agit d’enregistrer le fichier sous le nom fr_FR (pour une traduction en français). Le nom de fichier est important car c’est un standard. Si vous voulez voir les noms de fichiers pour d’autres langues que le français, vérifiez sur le site de WordPress.

Poedit va enregistrer deux fichiers : fr_FR.po et fr_FR.mo. et il faut les copier dans le répertoire wp-content/themes/bueno/lang/ (soit au même endroit que le fichier bueno.po). Si vous désirez utiliser mes fichiers de traduction ils sont à vous : fr_FR.rar

Note : J’utilise Filezilla pour transférer les fichiers via FTP.

Télécharger le fichier dans le répertoire lang

Si vous utilisez déjà WordPress en version française vous devriez maintenant voir les textes en français. Facile hein? 🙂

Traduction terminée

Si vous n’utilisez pas WordPress en version française

Si vous ne voyez toujours pas le texte en français, vous pouvez télécharger les 4  fichiers fr-FR (fr_FR.mo, fr_FR.po, ms-fr_FR.mo, ms-fr_FR.po) pour convertir votre version de WordPress en français.

  1. Ensuite il faut copier les 4 fichiers dans le répertoire wp-content/languages/
  2. Éditer le fichier wp-config.php et recherchez : define (‘WPLANG’,  »);
  3. Remplacer par : define (‘WPLANG’, ‘fr_FR’);

Note : le fichier wp_config.php est directement dans le répertoire racine souvent nommé public_html.

MISE-À-JOUR 17 août 2012

Merci à Mikel Aralar pour son commentaire. J’ajoute cette information importante

Juste un truc. La modification des fichiers .po ne suffit pas à traduire un site. Ce sont des fichiers texte. La magie de Poedit consiste à compiler à l’instant le fichier .mo concerné.

Mais voilà, pour que cela se produise il faut que Poedit soit correctement configuré. Donc, si vous modifiez le fichier .po et ça ne marche pas :

Ouvrir dans Poedir « Fichier/Préférences ». Dans la nouvelle fenêtre, choisir « Éditeur ». Cocher la première option « Compiler automatiquement les fichiers .mo lors de l’enregistrement ». Et voilà !

Je me permets de faire cette remarque parce que j’ai suivi les explications de Annie Bergeron, sans obtenir de résultat. Après je me suis aperçu que Poedit, tout fraichement chargé dans mon ordinateur, n’avait pas la case « Compiler automatiquement… » cochée. Peut-être que quelqu’un d’autre trouvera le même problème.

Ressources :

  • Thèmes Bueno – thème WordPress gratuit – Les thèmes Woothemes sont des thèmes WordPress qui sont très bien fait et qui sont peu cher, je vous les recommande.
  • Mes fichiers de traduction du thème : fr_FR.rar
  • Poedit
  • FileZilla
<a title= »Wordpress theme – Woo themes » href= »http://www.woothemes.com/ » target= »_blank »>

67 réponses sur « WordPress thème – Comment traduire un thème WordPress en français »

Toutes ces explications sont très claires. Cependant, je préfère utiliser le plugin « CodeStyling Localization ». Il est parfaitement bien intégré à wordpress, et permet de corriger les traductions au fur et à mesure qu’on trouve des erreurs ou des oublis de traduction.

[…] Puisqu’on cause de médias sociaux et de référencement, Daniel nous sort un billet très pointu, un vrai dossier même, pour expliquer comment optimiser la pagination de votre blog WordPress pour les visiteurs et les moteurs de recherche. Moi qui ai déjà eu, encore une fois, toutes les peines du monde à mettre à jour mon blog, même en suivant ma propre procédure… Ca ne m’empêche pas de réfléchir à une nouvelle version de Choblab. L’article d’Imnet tombe à point nommé et donne quelques astuces pour traduire un thème WordPress. […]

Bonjour,

Ceci est un bon article. Mais je rencontre un problème avec mon thème.
Je n’ai pas de fichier po ni de dossier lang ou langage, et j’ai entendu dire qu’il y avait possibilité de créer un dossier lang avec ses fichiers de traduction. Mais je n’arrive pas à trouver sur google cette astuce.

Cordialement,
Bruno

Bonjour Annieb,

Merci pour ta réponse. J’ai trouvé des explication sur la toile.
Mais j’ai un coté qui me reste un peut obscure. Pour traduire dans des array comme si dessous je ne vois pas comment écrire avec les fameux mots clé sans mettre la pagaille. lol

array( « name » => « Enable Custom fonts? »,
« id » => $shortname. »_cufon »,
« type » => « select »,
« options » => array(‘Yes’, ‘No’),
« std » => « Yes »),

Et par exemple encore ceci :

if ($username ==  ») {
if ($list) echo  »;
echo ‘RSS not configured’;
if ($list) echo  »;

Puis-je l’écrire comme ceci :

if ($username ==  ») {
if ($list) echo  »;
echo  »;
if ($list) echo  »;

Ou comme ceci

if ($username ==  ») {
if ($list) echo  »;
echo (__’RSS not configured’);
if ($list) echo  »;

Merci pour tous les renseignements.

Bruno

Bonjour,

J’ai trouvé les solutions mais il me reste encore une question
Pour que le dossier lang ou language fonctionne il faut qu’il soit déclaré dans le thème.
Mais quel ligne inscrire et dans quel fichier le header.php, functions.php.

Merci
Bruno

Bonjour Bruno,

Je réalise que j’ai trop délaissé mon site… Je vais m’y remettre.

Je suis heureuse de voir que vous vous débrouillez bien 🙂

Au plaisir de partager encore avec vous

Annie

J’ai fait un peut de PHP énormément HTML et CSS, ce qui m’a bien aidé dans cette quête à la traduction pour internationaliser un thème et je pense que pour les plugin ça doit être un peut plus rapide que pour un thème (plus de modif à faire dans les fichiers).

Bruno

P.S un blog comme le tiens ne le néglige pas il a plus de valeur que tu le crois.

En effet, il y a généralement moins de texte dans les plugins que dans les thèmes.

Merci Bruno, je vais suivre ton conseil, je ne négligerai plus mon blog.

Bonjour,

Je reviens à la charge !

J’ai besoin d’un petit coup de main sur une internationalisation d’un thème wordpress et plus particulièrement dans les tableaux.

Voici ci-dessous le code d’origine.

array( « name » => « Advertizement »,
« type » => « title »,
« desc » => « Setup the ad banner on posts. »,
),

Et voici le code modifié pour la traduction

array( ‘name’ => __(‘Advertizement’),
‘type’ => ‘title’,
‘desc’ => __(‘Setup the ad banner on posts.’),
),

Mais j’ai un souci ici ma traduction ne prend pas et garde la version d’origine.

Pourtant je le retrouve bien dans mon fichier de langage. J’utilise pour tout ce qui
est HTML une balise PHP comme : toutes
celles-ci fonctionnent bien. J’ai essayé d’autres mots clés dans les tableaux comme celui que j’utilise dans les balises PHP _e remettre à jour mon fichier fr_FR.po et j’ai même réussi à faire disparaitre le mot du tableau.

Et j’ai remarqué qu’il ne me traduisait pas non plus tout ceux de ce style :

Pourtant ils ont bien été généré dans le fichier fr_FR.po

Si une âme charitable pouvait me dire pourquoi j’ai ce souci, car là je suis en train de coincer.

Merci
Bruno

Bonjour,

Je me réponds à moi même (c’est ce que ça fait à force de lire du code)
Bon trêve de plaisanterie. J’ai peut-être trouvé un bout de mon erreur je dis bien un bout car la traduction dans les tableaux ne ce change toujours pas un bout de mon erreur devrait être ceci.

array( ‘name’ => __(‘Advertizement’, ‘mondomaine’),
‘type’ => ‘title’,
‘desc’ => __(‘Setup the ad banner on posts.’, ‘mondomaine’),
),

Ce qui fait que normalement comme ‘mondomaine’ est inscrit que je l’ai déclaré dans le fichier function il devrait me le trouvé. Mais que nini nada rien.

Il se le trouve quand je crais le fichier .po donc avec poedit. Mais une foit traduit toujours en anglais sauf dans la balise php pour traduire des les balises html exemple : _e(‘Posted by’, ‘balena’); et bien entendu ceci est entre les balises PHP, ca fonctionne très bien.

Si quelqu’un pouvais me dépatouiller de çà.

Bonjour Bruno,
Si je comprends bien la traduction fonctionne bien partout SAUF dans les tableaux? Est-ce que tu as un lien (URL) où je peux voir ton thème? Ceci m’aiderait à mieux saisir le problème.

Annie

Voici mon wp de test
http://bonplaninternet.com/wp

Par exemple tu verra que le premier post commentaire à 0 mais il est en anglais hors que dans mon second article de test il y a 2 commentaires et bien en fr. voici ma ligne pour la traduction.
comments_popup_link( __(‘0 Comment’,’balena’), __(‘1 Comment’,’balena’), __(‘% Comments’,’balena’));

Le tableau que je parle est dans mon admin mais voici toute la partie qui me cause problème :

$options = array (

array( « name » => __(‘Featured posts’,’balena’),
« type » => « title »,
« desc » => __(‘This section customizes the featured post list.’,’balena’),
),

array( « type » => « open »),

array( « name » => __(‘Featured post Category’,’balena’),
« desc » => __(‘Select the category to be featured.’,’balena’),
« id » => $shortname. »_gldcat »,
« std » => __(‘Select a category:’,’balena’),
« type » => « select »,
« options » => $zm_categories),

array( « type » => « close »),

array( « name » => __(‘Twitter settings’,’balena’),
« type » => « title »,
« desc » => __(‘This section customizes the social network buttons.’,’balena’),
),

array( « type » => « open »),

array( « name » => __(‘Twitter ID’,’balena’),
« desc » => __(‘Give your twitter id.’,’balena’),
« id » => $shortname. »_twit »,
« std » => « twitter »,
« type » => « text »),

array( « name » => __(‘Facebook page url’,’balena’),
« desc » => __(‘Give your Facebook page url.’,’balena’),
« id » => $shortname. »_face »,
« std » => «  »,
« type » => « text »),

array( « type » => « close »),

array( « name » => __(‘125 x 125 banner Settings’,’balena’),
« type » => « title »,
« desc » => __(‘You can setup four 125 x 125 banners on your sidebar from here’,’balena’),
),

array(« type » => « open »),

array(« name » => __(‘Banner-1 Image’,’balena’),
« desc » => __(‘Enter your 125 x 125 banner image url here.’,’balena’),
« id » => $shortname. »_banner1″,
« std » => « http://web2feel.com/images/webhostinghub.png »,
« type » => « text »),

array(« name » => __(‘Banner-1 Image alt tag’,’balena’),
« desc » => __(‘Enter your banner alt tag.’,’balena’),
« id » => $shortname. »_alt1″,
« std » => __(‘Cheap reliable web hosting from WebHostingHub.com.’,’balena’),
« type » => « text »),

array(« name » => __(‘Banner-1 Url’,’balena’),
« desc » => __(‘Enter the banner-1 url here.’,’balena’),
« id » => $shortname. »_url1″,
« std » => « http://www.webhostinghub.com/ »,
« type » => « text »),

array(« name » => __(‘Banner-1 link title’,’balena’),
« desc » => __(‘Enter the banner-1 title here.’,’balena’),
« id » => $shortname. »_lab1″,
« std » => __(‘Web Hosting Hub – Cheap reliable web hosting.’,’balena’),
« type » => « text »),

array(« type » => « break »),

array(« name » => __(‘Banner-2 Image’,’balena’),
« desc » => __(‘Enter your 125 x 125 banner image url here.’,’balena’),
« id » => $shortname. »_banner2″,
« std » => « http://web2feel.com/images/pcnames.png »,
« type » => « text »),

array(« name » => __(‘Banner-2 Image alt tag’,’balena’),
« desc » => __(‘Enter your banner alt tag.’,’balena’),
« id » => $shortname. »_alt2″,
« std » => __(‘Domain name search and availability check by PCNames.com.’,’balena’),
« type » => « text »),

array(« name » => __(‘Banner-2 Url’,’balena’),
« desc » => __(‘Enter the banner-2 url here.’,’balena’),
« id » => $shortname. »_url2″,
« std » => « http://www.pcnames.com/ »,
« type » => « text »),

array(« name » => __(‘Banner-2 link title’,’balena’),
« desc » => __(‘Enter the banner-2 title here.’,’balena’),
« id » => $shortname. »_lab2″,
« std » => __(‘PC Names – Domain name search and availability check’,’balena’),
« type » => « text »),

array(« type » => « break »),

array(« name » => __(‘Banner-3 Image’,’balena’),
« desc » => __(‘Enter your 125 x 125 banner image url here.’,’balena’),
« id » => $shortname. »_banner3″,
« std » => « http://web2feel.com/images/designcontest.png »,
« type » => « text »),

array(« name » => __(‘Banner-3 Image alt tag’,’balena’),
« desc » => __(‘Enter your banner alt tag.’,’balena’),
« id » => $shortname. »_alt3″,
« std » => __(‘Website and logo design contests at DesignContest.com.’,’balena’),
« type » => « text »),

array(« name » => __(‘Banner-3 Url’,’balena’),
« desc » => __(‘Enter the banner-3 url here.’,’balena’),
« id » => $shortname. »_url3″,
« std » => « http://www.designcontest.com/ »,
« type » => « text »),

array(« name » => __(‘Banner-3 link title’,’balena’),
« desc » => __(‘Enter the banner-3 title here.’,’balena’),
« id » => $shortname. »_lab3″,
« std » => __(‘Design Contest – Logo and website design contests’,’balena’),
« type » => « text »),

array(« type » => « break »),

array( « name » => __(‘Banner-4 Image’,’balena’),
« desc » => __(‘Enter your 125 x 125 banner image url here.’,’balena’),
« id » => $shortname. »_banner4″,
« std » => « http://web2feel.com/images/webhostingrating.png »,
« type » => « text »),

array( « name » => __(‘Banner-4 Image alt tag’,’balena’),
« desc » => __(‘Enter your banner alt tag.’,’balena’),
« id » => $shortname. »_alt4″,
« std » => __(‘Reviews of the best cheap web hosting providers at WebHostingRating.com.’,’balena’),
« type » => « text »),

array( ‘name’ => __(‘Banner-4 Url’, ‘balena’),
‘desc’ => __(‘Enter the banner-4 url here.’,’balena’),
« id » => $shortname. »_url4″,
« std » => « http://webhostingrating.com »,
« type » => « text »),

array( « name » => __(‘Banner-4 link title’,’balena’),
« desc » => __(‘Enter the banner-4 title here.’,’balena’),
« id » => $shortname. »_lab4″,
« std » => __(‘Web Hosting Rating – Customer reviews of the best web hosts’,’balena’),
« type » => »text »),

array(« type » => « close »),

array( ‘name’ => __(‘Advertizement’,’balena’),
‘type’ => ‘title’,
‘desc’ => __(‘Setup the ad banner on posts.’,’balena’),
),

array(« type » => « open »),

array(« name » => __(‘Ads on posts ‘,’balena’),
« desc » => __(‘adsense or other ad scripts .’,’balena’),
« id » => $shortname. »_ad1″,
« std » => «  »,
« type » => « textarea »),

array(« type » => « close »),

);

Bonjour à tous,

Bien j’ai relu mon code du fichier qui me posait problème c’était le fichier theme-options.php. Dans cette relecture je me suis aperçu d’une chose c’est qu’il ne faisait pas appelle au fichier function.php là ou j’ai mes lignes qui font appelle au dossier /languages/. Je les ai incéré dans le fichier theme-options.php et rouler jeunesse tout fonctionne à merveille et voilà mon bon français qui est apparu et en plus mon formulaire de configuration marche impeccable.

merci Annie

@+
Bruno

Salut, tout d’abord merci pour ce tuto tres utile a tous, puisque on fait souvent face au problème des templates anglais, pour les traduire.

Moi j’ai une question, si vous voudrez bien avoir l’amabilité de me répondre svp, et merci d’avance.

Ma question est : tu dis que t as traduis un thème qui contient le fichier : .PO, mais pour les thèmes qui ne contiennent pas ce fichiers, car j’ai souvent téléchargé des thèmes anglais, mais j’ai jamais vu ce fichier dedans, est ce qu’on suit la même procédure ? ça veut dire on traduit le fichier de langue avec ce logiciel ou quoi ?

Merci de bien m’expliquer svp si tu as une solution pour a, et merci bcp d’avance.

Cordialement.

Merci pour les bons mots Voynich.
Il est possible de créer un fichier po avec POEDIT.
Voici une courte marche à suivre (en attendant un tuto plus détaillé) :
Codex

      Ouvrir POEDIT
      Cliquer sur FILE > New Catalog
      Entrer un nom de projet (exemple le nom du thème)
      Cliquer sur l’onglet PATHS (dans le haut de la fenêtre)
      Cliquer sur l’icône NEW ITEM (l’icône ressemble à un petit carré)
      Enter le chemin du répertoire contenant tous les fichiers de votre thème WordPress (Le point « . » donne l’instruction à POEDIT de « scanner » le répertoire où le fichier POT sera enregistré
      Appuyer sur la touche ENTER de votre clavier
      Cliquer sur l’onglet KEYWORDS
      Cliquer sur l’icône NEW ITEM
      Entrer __ (la barre de soulignement « underscore » 2 fois), appuyer sur la touche ENTER de votre clavier
      Cliquer sur l’icône NEW ITEM
      Entrer _e (soulignement e), appuyer sur la touche ENTER de votre clavier
      Cliquer sur OK
      Choisir un nom pour votre fichier .po (suggestion le nom de votre thème)

Si le thème est bien fait et respecte les techniques de WordPress pour la traduction , cela devrait bien fonctionner.

Annie

Merci bcp pour ta précieuse aide et merci encore de ton explication bien détaillé, ça m’aide bcp.

Cordialement.

Merci grandement! J’utilise le thème Thesis et quand j’ai vu le travail de traduction à faire, je me suis dit que quelqu’un devait bien avoir fait le travail déjà alors merci!

[…] Vous êtes ici : Accueil > Comment traduire un thème WordPress anglais wp-club Comment traduire un thème WordPress anglais wp-club 25 avril 2012 Traductions Herve Une sélection de site vous proposant des tutoriaux pour traduire votre thème :http://www.emmanuelgeorjon.com/wordpress-traduire-un-theme-45/http://esiteweb.net/wordpress-theme-comment-traduire-theme-wordpress-francais/http://www.wordpress-theme-template.com/traduire-votre-blog-dans-votre-languehttp://wp-themes-pro.com/traduction-theme-wordpress/&nbsp; ← Traduction thèmes WordPress ElegantThemes WooThemes Pas encore de commentaires.Laisser un commentaire Cliquez ici pour annuler.Nom (Requis)Adresse de contact (Requis)Site webCommentaire […]

Bravo pour l’article.

Juste une petite remarque : les « accents hmtl utf-8 » n’existent pas !
C’est soit de l’utf-8 donc on écrit les accents comme on le ferait sous Word, soit les « entités HTML » et on écrit é à la place de é.
La première méthode ne peut fonctionner que si les fichiers sont encodés en utf8 (paramètres de l’éditeur de texte).
Pour la deuxième méthode, il faut encoder en ASCII. C’est cet encodage qui est interprété par défaut par les navigateurs.
http://www.w3schools.com/tags/ref_charactersets.asp

Merci Jef, vous avez parfaitement raison c’était très mal formulé. Merci encore d’avoir apporté cette précision importante, je viens de modifier mon article.
Annie

Bonjour Mathieu,

Il arrive parfois que certains termes ne sont pas traduits. Est-ce que c’est tout le site qui s’affiche en anglais ou seulement quelques termes?

Annie

Votre WordPress, le tableau de bord est-il en français?
Quel est le thème que vous utilisez?
Si vous pouvez me donner le URL de votre site, je peux peut-être jeter un coup d’oeil pour mieux vous aider.

Il semble que ce thème supporte bien la traduction. Il est possible que les fichiers fr_FR.PO et fr_FR.MO soient corrompus et que WordPress ne soit pas en mesure de les ouvrir. Votre fichier configuration a bien cette ligne écrite exactement comme ceci :

define (‘WPLANG’, ‘fr_FR’);

Vous pouvez peut-être tenter de faire la traduction avec ce plugin : Codstyling Localization. Voici le tuto sur mon site : http://esiteweb.net/wordpress-theme-francais-traduire-avec-codestyling-localization/

merci pour le lien !
Oui le fichier config est bien OK (d’ailleurs les autres themes que jai teste marchent tous en francais)

ce qui est bizarre c’est qu’apres avoir installe le plugin, il me dit bien que la langue est FR alors je sais pas d’ou vient le prob!

Eh bien je suis d’accord c’est bizzare. Je manque de suggestion pour vous aider. Je vais y réfléchir. Si je trouve d’autres idées je vous tiens au courant.

Si jamais vous trouvez la solution, j’aimerais bien la connaître cela m’intéresse.

bonjour et merci pour l’article,
moi j’ai tjrs le probleme de traduction avec classipress. j’ai essayer d’appliquer ts les astuces en vain. j’ai installer classipress 3.1.8 sur wordpress 3.4.1
le probleme c’est que malgre les fichiers .po et .mo present dans le dossier du theme celui-ci reste tjrs en anglais, du coup j’ai pense a ce que vs avez dit plus haut que le theme doit supporter la traduction et j’aimerais savoir par quoi le reconnaitre, merci d’avance

Bonjour.

Excellent papier. On comprend tout d’un trait. C’est très bien expliqué.

Juste un truc. La modification des fichiers .po ne suffit pas à traduire un site. Ce sont des fichiers texte. La magie de Poedit consiste à compiler à l’instant le fichier .mo concerné.

Mais voilà, pour que cela se produise il faut que Poedit soit correctement configuré. Donc, si vous modifiez le fichier .po et ça ne marche pas :

Ouvrir dans Poedir « Fichier/Préférences ». Dans la nouvelle fenêtre, choisir « Éditeur ». Cocher la première option « Compiler automatiquement les fichiers .mo lors de l’enregistrement ». Et voilà !

Je me permets de faire cette remarque parce que j’ai suivi les explications de Annie Bergeron, sans obtenir de résultat. Après je me suis aperçu que Poedit, tout fraichement chargé dans mon ordinateur, n’avait pas la case « Compiler automatiquement… » cochée. Peut-être que quelqu’un d’autre trouvera le même problème.

Merci beaucoup Mikel,

Je viens tout juste d’ajouter vos précisions dans mon article. Ce qui va grandement améliorer la marche à suivre.

Encore merci pour votre contribution.

Annie

Bonjour Annie,

Je me tourne vers toi, car je galère vraiment.
J’ai acheté le thème « pure vision » et essaye de le traduire en français depuis des semaines.

Je n’ai pas « lang » dans son contenu et j’essaye d’installer poedit.

Mon hic: je n’arrive pas à associer poedit à mon thème pour le traduire.

J’ai l’air d’avoir un thème fabuleux et je n’arrive pas à l’utiliser.

Franchement si tu peux m’aider, ça serait volontiers

Merci

Bonjour Gaillard,

Dernièrement Mikel Aralar m’a fait remarqué qu’il y avait un oubli dans ma démarche. J’ai fait une mise à jour de mon article le 17 août 2012. Voici ce que Mikel mentionne (peut-être que c’est ce qui manque pour traduire votre thème « pure vision ») :

Mikel Aralar _ « Juste un truc. La modification des fichiers .po ne suffit pas à traduire un site. Ce sont des fichiers texte. La magie de Poedit consiste à compiler à l’instant le fichier .mo concerné.

Mais voilà, pour que cela se produise il faut que Poedit soit correctement configuré. Donc, si vous modifiez le fichier .po et ça ne marche pas :

Ouvrir dans Poedir « Fichier/Préférences ». Dans la nouvelle fenêtre, choisir « Éditeur ». Cocher la première option « Compiler automatiquement les fichiers .mo lors de l’enregistrement ». Et voilà !

Je me permets de faire cette remarque parce que j’ai suivi les explications de Annie Bergeron, sans obtenir de résultat. Après je me suis aperçu que Poedit, tout fraichement chargé dans mon ordinateur, n’avait pas la case « Compiler automatiquement… » cochée. Peut-être que quelqu’un d’autre trouvera le même problème. »

Tenez-moi au courant.

Merci pour toutes c’est explication claire est précise.
Beaucoup de tutoriels ne fond pas mention des accents est des préférences.

Jais l’intention de prendre un thème Woothemes ,donc cet article est commentaire vont bien me servir .

Bonjour,

Tout d’abord merci pour ce tuto très clair.

Cependant, après avoir suivi à la lettre les différentes étapes pour la traduction de mon thème, celui reste toujours en anglais.

Fichiers .po et .mo bien présents dans le répertoire.

Config.php présente la mention fr_FR etc

Mais toujours rien… les textes ne changent pas…

Help svp 🙂

Quel est le thème que vous avez choisi? Normalement cela fonctionne bien. Je manque de détail pour voir où est le problème.
Si vous avez un URL à me fournir pour que je puisse voir de quel thème il s’agit peut-être que je pourrai trouver une solution.

Annie

bonjour

le tutot est super clair et je pense (même moi) avoir bien compris.

pourtant, comme Kevin, cela reste en anglais, pire, même l’admin wp est en anglais alors que j’ai installé la 3,5 en français.
j’ai vérifié:
– fichiers po et mo sont à leur place
– fichier wp-config.php contient bien
define(‘WPLANG’, ‘fr_FR’);

mais rien ne se passe, (voir le site http://www.Astroetik.fr)

help car c’est insupportable, je tourne en rond et rien n’y fait….

Bonjour Nicolas,

Je suis allé voir le site www. astroetik.fr. D’après ce que j’ai vu c’est les termes gérés par WordPress qui sont en anglais et non pas ceux du thème.
Pour que WordPress soit en français il faut 2 choses :

Téléchargez la dernière version du fichier de traduction sur la page des téléchargements puis la déposer dans le répertoire wp-content/languages de votre installation.
ajouter define (‘WPLANG’, ‘fr_FR’); dans le fichier wp_config.php

Si vous avez WordPress 3.5, vérifiez dans le répertoire wp-content/languages si les 4 fichiers (fr_FR.mo, admin-fr_FR.mo, admin-netword-fr_FR,mo, contineants-cities-fr_FR.mo) sont bien là

Référence : http://www.wordpress-fr.net/telechargements/

Fichiers compilés .mo pour WordPress 3.5 (obligatoires) :

fr_FR.mo : traduction générale
admin-fr_FR.mo : traduction de l’administration
admin-network-fr_FR.mo : traduction de l’administration du réseau/multisite
continents-cities-fr_FR.mo : traduction géographique pour le sélecteur de fuseau horaire.

Tenez-moi au courant si cela a fonctionné!

bonjour Annie et merci pour ces éléments de réponse.
j’ai suivi vos indications… et rien n’y fait.
le blog continue à contenir des éléments qui sont en langue anglais (comments, reply…..)

cela devient désespérant…

Re-bonjour Nicolas,

Est-ce que vous avez fait la traduction de tous les termes du fichier PO. Pour être certain vous pouvez aussi faire une recherche avec POEDIT. Une fois le fichier PO ouvert dans POEDIT vous allez dans le menu Editer > Rechercher… Fais une recherche sur les mots qui sont toujours en anglais (exemple Reply). Reply peut être à plusieurs endroit dans le fichier PO alors faire SUIVANT jusqu’à la fin du fichier.

Est-il conçevable de traduire tout à la main pour diminuer les requêtes PHP liées à la recherche des traductions? Je cherche à remplacer les requêtes _e et __. Ca vaut le coup en terme de vitesse de chargement/économie de requêtes?

Bonjour Nicolas,
C’est possible de traduire tout à la main, mais cela n’est pas recommandé. De plus, si jamais vous faites une mise à jour du thème, toutes vos modifications seront écrasées par cette mise à jour.

Mais c’est tout de même conçevable 🙂

Annie

Bon, si j’avais vu ça plus tôt, je n’aurais pas traduit les fichiers de mon blog un à un…
Mais c’est bon à savoir pour un éventuel prochain blog. Merci
Et bonne année à tous !

Bonjour,

Merci pour ces explications pour générer le fichier de traduction, elles sont claires et faciles à suivre. Cependant, j’ai un problème : je suis en train de développer un module sous wordpress, le but de ce module étant d’être distribué, je souhaite avoir un second fichier de traductions supplémentaire et non pas intégrer les traductions au fichier de traduction global. Donc comme j’ai expliqué, générer le fichier ne pose pas de problème, par contre il n’est pas pris en compte et je ne comprend pas pourquoi. Votre article est un peu trop générique a wordpress au global, y a t il des éléments auxquels il faut faire attention si on souhaite mettre en place la traduction pour un plugin ?
Merci d’avance

Bonjour,

Si vous êtes intéressés de traduire logiciels pour Internet, pour PC, pour mobiles ou tout autre type de logiciels, je vous recommandons chaleureusement le nouvel instrument numérique ”l10n” que mon équipe a récemment créé – et qui a toutes les chances de rendre vos activités de bureau bien plus faciles et rapides.

http://poeditor.com/

POEditor est intuitif, basé sur travail en collaboration. Il comprend de nombreuses fonctions qui puissent vous soutenir lors du processus de gestion de traductions, que vous pourriez découvrir sur notre page Internet.
Vous pouvez importer depuis multiples types de fichiers de localisation (traduction) (pot, po, xls, xlsx, strings, xml, resx, properties) ou se servir directement de notre REST API.
N’hésitez pas de l’essayer et/ou le proposer aux développeurs ou, en général, a ceux qui en seraient intéressés.

Merci beaucoup pour le tutoriel.
Néanmoins je rencontre un problème pour traduire mon thème.
C’est le suivant : http://wordpress.org/themes/oxygen
Je modifie bien le fichier .po je le renomme de la même manière que d’origine avec fr_FR mais aucun changement en vue lorsque je place le fichier dans le répertoire grâce à Filezilla…

Merci de votre aide

Bonjour,
J’ai téléchargé le thème oxygen et j’ai vu que les fichiers, dans le répertoire languages sont nommées de cette façon : oxygen-fr_FR…

Donc pour que ça fonctionne pour le thème Oxygene vous devez nommer vos fichiers ainsi : oxygen-fr_FR.po et oxygen-fr_FR.mo

J’espère que cela pourra vous aider.

Merci annieb,

Mais j’ai bien les fichiers renommés comme il faut.
La traduction fonctionne mais pas sur toute les expressions…
J’ai réussis à traduire « Home » en Accueil et « Edit » en « Modifier », mais impossible de traduire par exemple « Leave a reply » ou « Recent article » etc…

C’est très louche…

Si vous activez le thème par défaut WordPress soit twenty twelve ou twenty eleven. Est-ce que le thème est en français? Car il peut y avoir une partie de l’information qui est traduite par WordPress et une autre par le thème lui-même.

Selon ce que je vois, dans le thème Oxygen, « Leave a reply » est dans le fichier functions.php et il semble être codé correctement pour la traduction.

Dans le cas de « Recent article » il ne semble pas être dans le fichier hybrid-core-en_EN.po

« Recent article » est dans le fichier oxygen-fr_FR.po, il y a 2 fichiers pour traduire.

Quand je met le thème par défaut, il semble bien en français.

C’est super! Je suis un peu maladroite en ce qui concerne l’anglais. C’est donc une grande aide pour moi, cette traduction. Mais si c’est un autre site qu’on veut traduire, c’est-à-dire pas mon site, mais celui d’une autre personne, comment on fait?

Catégories
Site web - Tutoriels Site Web WordPress Thème WordPress

Comment personnaliser un thème WordPress : Thème enfant WordPress

Vous ne trouvez pas de thème qui correspond à vos goûts et à vos besoins?  Avec une certaine habileté en CSS, HTML et une base en PHP, il est possible de tenter l’aventure de la conception de son propre thème.

L’anatomie d’un thème WordPress

Joost de Valk de yoast.com a très bien représenté sa notion d’anatomie d’un thème WordPress en images (référence : http://yoast.com/wordpress-theme-anatomy/)

Alors, avant de commencer à concevoir un thème, il est pertinent d’examiner son fonctionnement sur WordPress. D’abord, il faut faire la différence entre thèmes et modèles templates. Un thème WordPress est composé de répertoires de fichiers modèles templates qui contrôlent une partie spécifique du thème. Il représente également la collection de fichiers modèles précisant l’apparence de la page au navigateur.

En résumé, un thème peut se composer des fichiers suivants, mais on peut aussi utiliser uniquement les fichiers style.css et index.php pour créer un thème :

  • sytle.css
  • index.php
  • single.php
  • page.php
  • archive.php
  • category.php
  • tag.php
  • comments.php
  • functions.php

Une façon simple de personnaliser l’aspect d’un site : le thème enfant « child-theme »

WordPress.org définit le thème enfant comme

« un thème qui hérite des fonctionnalités d’un autre thème, appelé parent et qui vous permet de modifier et/ou d’ajouter des nouvelles fonctionnalités au thème parent.»

L’utilisation d’un thème enfant peut vraiment accélérer le processus de développement, car on démarre avec la base d’un thème existant. Par exemple,  Twenty Eleven, le thème de base qui vient d’office avec WordPress peut faire une excellente base pour un thème enfant. Avec un autre thème, il faut s’assurer que le code est bien construit, il est préférable de partir d’une bonne base.

NOTE : Notons en outre que pour chaque personnalisation d’un thème WordPress, il vaut mieux partir d’un thème enfant et ne jamais éditer le code du thème lui-même. De cette façon, lors d’une mise à jour du thème original les modifications ne seront pas effacées.

La façon la plus rapide, pour commencer la conception de votre thème enfant, est d’utiliser un plugin One-Click Child Theme (http://wordpress.org/extend/plugins/one-click-child-theme/). En activant d’abord le thème parent choisi, il sera ensuite permis d’installer et d’activer le plugin, puis de cliquer sur CHILD THEME sous le menu APPARENCE du tableau de bord WordPress.

Évidemment, il est également possible de partir de zéro et d’éditer le code soi-même. Il faut alors ouvrir votre éditeur de codes habituel et y entrer les informations suivantes (le thème Twenty Eleven sert ici de thème parent) :

/*
Theme Name:     Nom de votre thème enfant
Description:    La description de votre thème.
Author:         Votre nom
Author URI:      http://www.votresiteweb.com/
Template:       twentyeleven
*/
@import url("../twentyeleven/style.css");

La personnalisation de base des CSS

Éditer le fichier style.css peut se fairedirectement dans l’éditeur de WordPress ou en installant un meilleur éditeur de code comme Advanced Code Editor (http://wordpress.org/extend/plugins/advanced-code-editor/). Il s’agit d’un plugin qui affiche les fichiers .php et .css avec un code de couleurs, ce qui simplifie la modification du code. Bien entendu, un éditeur de codes (comme NotePad++) peut aussi être utilisé.

Toutefois, il importe de laisser le code @import url (« ../twentyelevent/style.css)  dans le haut du fichier css, sinon l’importation des styles du thème parent ne seront pas utilisés.

Une fois l’éditeur choisi,  certains éléments de base, comme la couleur de fond,  le menu principal, la typographie et d’autres éléments qui donneront un nouveau look au thème enfant, pourront être définis.

Il pourrait être utile d’installer un plugin comme Firebug (http://getfirebug.com/) pour Firefox ou l’inspecteur Web inclus dans Google Chrome, en vue de bien identifier les parties du thème à changer. Cela permet de cliquer sur une partie de la page et afficher le div et les CSS qui définissent le style. Les modifications du CSS directement dans Firebog et la visualisation des résultats instantanément dans votre navigateur deviennent ainsi possibles. Lorsque le résultat convient, un copier-coller de votre code dans le fichier sytle.css peut être exécuté.
Thème enfant WordPress

Couleur de fond du contenu principale

À titre d’exemple, ce CSS qui modifie la couleur de fond du contenu principale qui utilise un drop shadow (http://www.css3.info/preview/box-shadow/)  :

#page {
    background: #ffffff;
    -moz-box-shadow: 0 0 10px #67949c;
    -webkit-box-shadow: 0 0 10px #67949c;
    box-shadow: 0 0 10px #67949c;
}

Typographie

Une touche de créativité peut être apportée simplement en ajoutant une typographie différente de ce qu’on est habitué de voir. Un grand choix de typographies gratuites et optimisées pour le Web se trouve chez Google Web fonts (http://www.google.com/webfonts).

Pour ce faire, il suffit de trouver le lien de la Google font (par exemple : http://fonts.googleapis.com/css?family=Mako);) et de l’ajouter comme une importation de CSS dans le fichier style.css

Cet exemple avec deux Google font choisies (Mako et Great Vibes) le démontre bien:

@import url(http://fonts.googleapis.com/css?family=Mako|Great+Vibes);

Le  fichier style.css devrait maintenant ressembler à cela :

/*
Theme Name:     bleu
Description:    child-theme modifier par Annie
Author:         admin
Template:       twentyeleven

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../twentyeleven/style.css");
@import url(http://fonts.googleapis.com/css?family=Mako|Great+Vibes);

#page {
    background: #ffffff;
    -moz-box-shadow: 0 0 10px #42565C;
    -webkit-box-shadow: 0 0 10px #42565C;
    box-shadow: 0 0 10px #42565C;
}
body, input, textarea, p {
    color: #000000;
    font-family: 'Mako', arial, serif;
}
p {
    font-size: 14px;
    line-height: 24px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Great Vibes', arial, serif;
}

Déplacer le menu de navigation principale

Une autre personnalisation intéressante est de déplacer le menu de sa position originale, sous l’image, vers le haut à droite, près du titre du blogue.  Ce code doit alors être ajouté :

#access {
    clear: both;
    display: block;
    float: right;
    margin: 0 auto 6px;
    position: relative;
    top: -410px;
    width: 600px;
    background: none;
    box-shadow: none;
}
#access a {
    font-family: 'Great Vibes', 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 30px;
    line-height: 40px;
    padding: 12px 18px 10px;
    color:#D1DC00;
}

#access li {
 background-color: #283E42;
    margin-right: 10px;
}
#access li:hover > a, #access a:focus {
    background: #D1DC00;
    color: #65BC46;
    -moz-box-shadow: 0 0 3px 3px #42565C;
    -webkit-box-shadow: 0 0 3px 3px #42565C;
    box-shadow: 0 0 3px 3px #42565C;
}

Par la suite, pour suivre la stylique (design graphique) du menu, il est opportun de changer la typographie de la sidebar  et d’ajouter une couleur de fond avec les coins arrondis,  ce qui pourrait ressembler à :

#secondary {
    background-color: #283E42;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-right: 4%;
    padding: 22px;
    width: 17.5%;
}
.widget a {
    font-weight: 400;
    font-family: 'Mako', sans-serif !important;
    color:#D1DC00;
}
.widget-title {
    color: #ffffff;
    line-height: 1.5em;
    text-transform: none;
    font-size:28px;
}
.widget ul li {
    color: #c7c7c7;
}

Il apparaît essentiel de souligner que l’ajout du code !important à la fin d’une déclaration CSS, donne plus de poids à cette valeur. La raison pour laquelle, il est utilisé vient du fait qu’un CSS attribue un poids à chacun des styles en fonction de l’endroit où il apparaît dans le fichier .css. Donc, !important indique que la propriété de ce style deviendra la valeur la plus important, surclassant toutes les autres valeurs du fichier .css

La création d’un thème enfant s’avère beaucoup plus simple que celle d’un original. En effet, il suffit que de quelques notions de CSS pour créer le  thème désiré. De plus,  cette façon évite la traduction, car le thème Twenty Eleven possède déjà ses fichiers fr_FR.po et fr_FR.mo.

Un bon thème WordPress c’est rarement un thème gratuit

En bout de ligne, il  n’est pas si simple de trouver le thème idéal dans la langue de son choix et avec des fonctionnalités qui répondent aux besoins. Pour ceux qui ne veulent pas investir de leur temps pour créer leur propre thème enfant, il peut être avantageux de payer pour un thème de qualité. Mais, comme le dit si bien le site de WordPress.org :  « Pourquoi devriez-vous construire votre propre thème WordPress? C’est la vraie question.

  • C’est une occasion pour en apprendre davantage sur les CSS,HTML et PHP.
  • C’est une occasion de mettre votre expertise avec CSS, HTML,PHP et de travailler.
  • C’est créatif.
  • C’est amusant (la plupart du temps).
  • Si vous décidez de le distribuer gratuitement au public, vous aurez le sentiment de partager et de donner quelque chose en retour à la Communauté WordPress (ok, et le droit de se vanter un peu) »

Ressources :

4 réponses sur « Comment personnaliser un thème WordPress : Thème enfant WordPress »

Bonjour,
Tout d’abord merci pour vos articles !
Je suis novice sur WordPress 😉 et je m’essaye à tripatouiller le CSS et HTML …
J’ai pris un thème gratuit que je souhaite modifier via un thème enfant, tout se passe bien jusqu’à l’activation du thème enfant : j’ai du remettre en place le menu, remettre le fond que j’avais !
Le souci est que le thème d’origine a en page d’accueil des slides, qui, après l’activation du thème enfant, ne changent plus, l’image reste bloquée, de même pour le diaporama d’une galerie (extension ajoutée) qui ne fonctionne plus du tout correctement !
Sauriez-vous me dire pourquoi ?
Merci.

Bonjour Nathalie,
Désolée pour le délai de ma réponse. difficile de répondre sans savoir de quel thème il s’agit. Est-ce que vous avez un lien où je peux voir votre le site en question?

Annie

Catégories
Plugin WordPress Site Web WordPress

WordPress: faire un diaporama avec le plugin Nivo Slider sans conflit ou incompatibilité

Dans un site Web, il est de plus en plus courant de publier un diaporama web dans l’en-tête. Il m’arrive régulièrement d’installer un plugin qui permet d’afficher un diaporama présentant des images mettant en valeur des produits et services. Mais dans le projet sur lequel je travaille actuellement, je me suis butée à un problème d’incompatibilité entre 2 plugins « extensions » WordPress.

Dans ce projet, j’avais besoin d’un plugin diaporama (exemple ici) et un plugin qui présente du contenu HTML  dans une fenêtre de type « Lightbox » (exemple ici). Lorsque je faisais l’installation et la configuration de ces plugins, il y avait toujours un  des deux qui ne fonctionnait pas.

Voici les plugins Diaporama WordPress dont j’ai fais l’essai :

Les plugins permettant d’afficher du contenue HTML (pour présenter des extraits de livre)

La seule combinaison qui réussit à fonctionner pour moi est celle-ci :

Nivo Slider for WordPress et Shadowbox JS

Nivo Slider permet en plus de mettre une légende (caption) sur l’image, (ce qui je trouvais intéressant pour mon client) et il est très simple d’utilisation.

Wordpress diaporama plugin - nivo slider exemple

nivo-slider-plugin-diaporama

Shadowbox JS me permet d’afficher des extraits de livre dans une fenêtre de type « Lightbox » en insérant un code très simple dans la page.

extrait-contenu-html

La méthode utilisée ici est de mettre des fichiers HTML simple dans un répertoire créé exprès pour ces fichiers. Chaque extrait est un fichier .html. Dans la page où on veut présenter les extraits il suffit de mettre un lien href qui ressemble à ceci :

<a title= »Extrait 1″ href= »http://URL/wp-content/extraits/extrait1.html » rel= »lightbox[Extraits];width=600;height=400″>Extrait 1</a>

J’espère que ce tout petit article pourra peut-être aider quelqu’un, qui comme moi n’avait pas le goût de modifier le code des plugins pour corriger le problème.

Une réponse sur « WordPress: faire un diaporama avec le plugin Nivo Slider sans conflit ou incompatibilité »

Catégories
Plugin WordPress Site web - général Site Web WordPress Thème WordPress

Utilisez les polices Google sur votre blog WordPress – Google Fonts Web

polices habituellement utilisées sur le WebGoogle Fonts Web permet d’utiliser des polices différentes et moins restrictives que : Verdana, Arial, Georgia et la non moindre Comic. Les polices Google peuvent être utilisées gratuitement alors pourquoi s’en priver.

Il y a deux façons d’installer et utiliser les polices Google sur votre blog WordPress. Personnellement je préfère le faire manuellement.

  1. Manuellement en copiant le code indiqué par Google
  2. Vous pouvez aussi installer ce plugin – WP Google Fonts 

 

Voici une marche à suivre pour installer les polices Google – Google fonts Web manuellement

Choisir votre police sur le site de Google Fonts Web

Google fonts Web Bouton Quick useGoogle fonts - sélection par NomMoi j’aime bien choisir en mettant le nom des polices en sélectionnant FONT NAME dans la boîte « Preview text ».

Lorsque j’ai fait mon choix de police, je clique sur Quick use pour obtenir les codes à insérer sur mon blog WordPress. Dans mon exemple j’ai choisi la police Raleway ultra-light 100.

Information sur la police « Google Fonts Web » qu’on a choisie

Google Fonts impact du temps de chargement de la pageOn peut avoir une idée temps de chargement de la page lorsqu’on utilise cette police. Dans le cas de Raleway, il n’y a pas un impact majeur sur le temps de chargement. Je vous conseille de ne pas mettre plus que 2 polices diffiérentes afin de ne pas nuire en temps de chargement de la page. De toute façon la modération à toujours meilleur goût, trop de polices différentes ne seraient pas très esthétiques.

Insérer le code dans votre thème WordPress

Il y a deux façons d’insérer le code dans votre thème WordPress :

  1. Soit en copiant le code HTML (onglet STANDARD dans l’interface Google Fonts Web) dans votre fichier header.php. Trouvez le tag <header> et coller le code tout de suite après le tag.
    Code google fonts Web - HTML
  2. Copier le code dans votre feuille de style CSS (onglet @IMPORT dans l’interface Google Fonts Web) juste après les informations du modèle « template » (généralement dans le fichier styles.css)
    Google fonts Web - IMPORT css

Appliquer la police Google à une balise de votre page

Voici un exemple sur perspective-jardins.com j’ai appliqué la police Raleway au menu, j’ai donc collé le code dans me fichier css pour la balise #nav a :

Code Google fonts Web appliqué à la balise #nav a
Vérifier l’affichage

Perspective-jardin AVANT

Perspective-jardin avant Google fonts Web

Perspective-jardin  APRÈS

 

Perspective-jardin après Google fonts Web

 

Dites-moi si vous avez essayé les polices Google déjà où si vous allez l’utiliser dans un site web futur.
Peut-être avez-vous utilisé Typekit ou autres services semblables?

2 réponses sur « Utilisez les polices Google sur votre blog WordPress – Google Fonts Web »

À noter que Google et Adobe vont main dans la main sur ce chemin :
http://html.adobe.com/fr/edge/webfonts/

En plus des polices Google (déjà nombreuses) on retrouve de vieux truc d’Adobe (comme la police « Hobo »).

Je n’aime guère la nouvelle méthode d’intégration fournie par Adobe(celle de Google, toujours valide a ma préférence), mais pour 200 polices de plus… 😉

Catégories
Site web - général Site web - Tutoriels Site Web WordPress

Comment améliorer la lisibilité sur WordPress – offrez une expérience de lecture confortable

J’ai découvert une façon vraiment confortable de lire des articles Web sur le blog de Jeffrey Zeldman. Il utilise le service Readability qui permet, entre autres de lire les articles dans une mise en page simple qui élimine tous les éléments de la page sauf le texte et les photos.

Site web Readability - améliore la lisibilité

J’ai donc cherché à trouver une solution similaire pour mon blog WordPress et je l’ai trouvée chez labnol.org. Donc dans le but d’offrir une expérience de lecture améliorée j’ai suivi la marche à suivre, pour un blog WordPress, offerte par Amirt Agarwal. Voici la traduction (libre) :
Étape 1 : Ajouter une nouvelle Page via le tableau de bord WordPress : PAGE > AJOUTER
Le titre de cette page : lecture conviviale

ajouter une page dans le tableau de bord WordPress

Étape 2 : Il faut modifier le PERMALIEN et mettre /read/ et cliquer sur le bouton PUBLIER
NOTE : Ne mettez aucun texte pour cette page.

Étape 3 : Ouvrir le fichier .htaccess et ajouter cette ligne de code (au début du fichier) :

RewriteRule ^read/([0-9]+)/?$ /read/?u=$1 [QSA,L]

Étape 4 : Téléchargez le fichier page-read.php.txt (ma version en français) ou la version originale (anglais) dans le répertoire du thème que vous utilisez. Dans mon cas j’ai copié le fichier dans le répertoire /wp-content/themes/canvas2/
Ensuite il faut renommer le fichier page-read.php

Image de Filezila - fichier page-read.php

Étape 5 : La dernière étape consiste à insérer un lien pour permettre à l’internaute de voir notre version « reader-friendly« . Il faut bien connaître votre thème pour savoir à quel endroit il faut mettre ce fameux lien. Généralement c’est dans le fichier single.php où il faut insérer le code suivant :
ma version en français :

<a href="/read/<?php the_ID(); ?>/">
Lire cet article en mode confort "Reader-Friendly" </a>

version originale :

<a href="/read/<?php the_ID(); ?>/">Read story without the clutter</a>

Est-ce que vous voulez implémenter cette solution? ou peut-être utiliser Readability?