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 »>
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 :

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.

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?

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?