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?

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

WordPress: thème français? Traduire un thème wordpress avec Codestyling Localization

Il y a longtemps que je voulais changer le thème de mon blog WordPress. Eh voilà c’est fait! J’ai fait l’achat d’un thème chez WooThemes, il s’agit du thème Canvas.

Thème WordPress Canvas de WoothemesTous les thèmes chez Woothemes utilisent les fonctionnalités GNU gettext (qui est la technologie de « localization » de WordPress) qui permettent de traduire les thèmes dans la langue de notre choix. Chaque thème comprend son fichier (en_GB.PO) qui contient tous les termes anglais à traduire. L’avantage de cette méthode est que la traduction n’affecte pas les fichiers modèles (templates) donc si on doit mettre le thème à jour nos traductions ne sont pas exposées aux mises à jour (en fait nous n’avons pas à  refaire la traduction lorsque WooThemes publie une version actualisée du thème) .

Plugins Codestyling Localization

Tel que proposé par WooThemes, j’ai utilisé le plugin Codestyling Localization pour faire la traduction du thème Canvas.

Une fois, le thème installé et activé le plugin, il suffit d’aller dans le menu OUTILS > LOCALISATION

Codestyling Localization-menu

 

Ensuite, on clique sur le menu THÈMES (ici je veux traduire mon thème Canvas, mais on peut aussi l’utiliser pour traduire autre chose comme un plugin).Codestyling Localization-menu-themes

 

On ajoute la langue de notre choix en cliquant sur le menu AJOUTER UNE NOUVELLE LANGUE. Codestyling Localization-menu-langue

Dans la boîte de dialogue, j’ai choisi fr_CA car je n’ai pas trouvé fr_FR. J’ai donc créé le fichier fr_CA.PO mais je suis allée modifier le nom du fichier par la suite pour fr_FR.PO. Car j’utilise la version de WordPress en français et le code dans mon fichier de configuration est fr_FR.

Une fois le fichier fr_CA.PO créé je suis allée le renommer pour fr_FR.PO en uilisant FileZilla. (NOTE le fichier PO se trouve dans le répertoire /wp-content/themes/canvas/lang/

Une fois le fichier renommé on voit que la langue est maintenant Français /France. Il suffit de cliquer sur RESCANNER pour que Codestyling Localization « scan » le thème Canvas.

Codestyling Localization-scan

Une fois le scan terminé, il faut cliquer sur MODIFIER (juste à gauche de Rescanner) pour arriver sur l’interface qui permet de traduire tous les termes anglais.

Codestyling Localization interface de traduction

 

Pour chaque terme anglais qu’on veut traduire en français, il faut cliquer sur MODIFIER (juste sous la colonne ACTIONS)

Codestyling Localization-traduction-editionOn répète cette action pour tous les termes qu’on veut traduire.

Dernière étape :

Une fois qu’on a terminé, il faut générer un fichier .mo en cliquant sur le bouton générer le fichier .mo.

Codestyling Localization générer le fichier .mo

 

Vous pouvez vérifier votre site web afin de vous assurer que la traduction a bien fonctionné.

Mise-à-jour février 2013 :

Plusieurs ont demandé le fichier de traduction (traduction partielle) : télécharger les fichiers fr_FR.po et fr_FR.mo