Tag

themes

Browsing

Sous WordPress, il est très simple de traduire les thèmes et plugins grâce au logiciel PoEdit et à un fichier de langue au format .pot ou .po – mais qu’advient-il de vos traductions lorsque le plugin ou thème est mis à jour avec de nouvelles chaînes?

PoEdit : mettre à jour les fichiers de traduction de vos thèmes et plugins WordPress photo

Mettre à jour votre fichier de traduction avec PoEdit

Et bien, il suffit tout simplement de resynchroniser votre fichier de traduction avec le fichier de traduction modèle, généralement au format .pot pour ajouter à votre fichier les chaines manquantes.

1. Dans PoEdit, ouvrez votre fichier de traduction au format .po

2. Ouvrez le menu Catalog > Update from POT file et sélectionnez le fichier POT de votre thème ou plugin mis à jour.

Cela ajoute toutes les nouvelles chaines à traduire dans votre fichier de traduction et retire les chaines obsolètes.

3. Traduisez les nouvelles chaines qui viennent d’être ajoutées.

4. Sauvegardez votre fichier et pensez à exporter vos traductions en .mo également. Vous devriez toujours avoir vos traductions en .po et .mo

5. Pour ne pas que vos traductions soient écrasées à la prochaine mise à jour du thème ou plugin, elles sont à placer dans le dossier :

  • wp-content/languages/themes pour les thèmes
  • wp-content/languages/plugins pour les plugins

Voilà, les traductions de votre thème ou plugin sont maintenant à jour.

WordPress : récupérer la liste emails des membres et commentateurs photoLorsque vous installez WordPress en local sur votre machine, il est assez courant que les droits des fichiers et dossiers ne permettent pas d’entrée de jeu d’installer ou de mettre à jour des plugins ou des thèmes.

Voici comment résoudre ce problème en quelques minutes.

Passage au système de fichier direct

1. On commence par éditer notre fichier wp-config.php, qui contient pas mal de constantes primordiales pour WordPress:

nano wp-config.php

2. On y rajoute, vers le haut du fichier, une constante qui passe le système de fichier en mode direct:

define('FS_METHOD', 'direct');

Sauvegardez votre fichier wp-config.php. Les fichiers de thèmes et de plugins seront désormais directement installés sans que la popup demandant des informations FTP ou SSH ne s’affiche.

Vérification des droits des fichiers et répertoires

En local, par contre, ce sera un petit peu différent : l’utilisateur www-data (Apache) doit pouvoir gérer les fichiers mais si vous souhaitez éditer des fichiers, ce qui est quand même le but d’une installation en locale, il faut que votre utilisateur puisse aussi gérer et avoir le droit d’écriture sur les fichiers.

1. Tout d’abord, on donne les droits à Apache à tous les fichiers et dossiers de l’installation WordPress :

sudo chown www-data:www-data -R /home/matt/www/

2. J’ajoute ensuite mon utilisateur de session, matt, dans le groupe www-data (Apache):

sudo usermod -aG www-data matt

3. On vérifie que l’utilisateur matt fait bien partie du groupe www-data :

groups matt

Cela nous retourne la liste de tous les groupes auquel j’appartiens :

matt : matt adm lp dialout fax cdrom floppy tape audio dip www-data video plugdev fuse lpadmin netdev admin sambashare vboxusers usb bluetooth scanner

4. On stipule que l’utilisateur matt est propriétaire de ces fichiers :

sudo chown matt:www-data -R /home/matt/www/

5. On assigne les permissions standard de WordPress, chmod 755 pour les répertoires et chmod 664 pour les fichiers, le tout en mode récursif pour n’oublier personne :

cd /home/matt/www
sudo find . -type d -exec chmod -R 755 {} \;
sudo find . -type f -exec chmod -R 664 {} \;

6. Enfin, on assigne des permissions plus larges (chmod 775) pour le répertoire /wp-content de notre installation qui contient nos plugins et thèmes pour pouvoir les éditer :

 cd /home/matt/www/wp-content
sudo find . -type d -exec chmod -R 775 {} \;
sudo find . -type f -exec chmod -R 664 {} \;

Vous pouvez maintenant installer thèmes et plugins en local et être en mesure d’éditer vos fichiers avec votre utilisateur linux, sans problèmes de droits.

Ce week-end, pour fêter la nouvelle année et les 17 ans du site (et oui, déjà !), je me suis amusé à changer radicalement le thème graphique du site.

Nouvelle année, nouveau thème

Cela fait des années que je n’ai pas changé de thème : apparemment, mon thème précédent remonte à 2010, soit 6 ans. A l’échelle d’Internet, cela remonte quasiment à la préhistoire !

Il aura bien évolué : de XHTML transitional à strict, puis HTML5. D’abord basique puis responsive, avec microdata… on peut dire que je l’ai bien usé, sous toutes les coutures mais que j’ai envie maintenant de quelque chose d’autre.

La charte graphique convenait à une certaine époque mais il faut savoir faire table rase et se remettre en question pour essayer des choses différentes.

A titre de comparaison, voici à quoi ressemblait le site le 1er janvier au petit matin:

Changement de design : SkyMinds 2016 photo

et voici maintenant le nouveau thème, sobrement intitulé “SkyMinds 2016” :

Changement de design : SkyMinds 2016 photo 1

Les nouveautés

Pas mal de nouveautés sont apparues. Tout d’abord, le site est désormais entièrement responsive, ce qui n’était pas tout à fait le cas avant. J’avais – bonant malant – utilisé des responsive queries mais on ne peut pas dire que l’affichage était optimal sur toutes les tailles d’écran. Là, c’est bien mieux géré.

Ensuite, le thème utilise beaucoup moins d’images que le précédent : adieu l’image de fond pour le header, le dégradé en PNG de 1600 pixels de hauteur et les dégradés CSS pour les colonnes de contenus et le footer. Je n’ai gardé que le logo, le reste n’est composé que de couleurs unies. Mine de rien, cela influe énormément sur le rendu des pages.

En ce qui concerne la CSS, je n’ai gardé que quelques styles que j’affectionne mais le principal a changé. Ce changement graphique est pour moi l’occasion de donner un petit coup de peinture et surtout de faire le ménage dans ma feuille de style et les fichiers du thème de WordPress.

J’ai également désactivé certains plugins comme le plugin qui créait un menu responsive – maintenant géré nativement par le thème, ainsi que d’autres qui s’ajoutaient à la feuille de style principale.

Le rendu est donc plus moderne et devrait se charger plus rapidement, faisant appel à moins de ressources.

What’s next?

Pour l’instant, ce nouveau thème est clair et me convient plutôt bien. J’y apporte quelques petites touches çà et là afin d’harmoniser le tout mais je trouve que le résultat n’est pas trop mal.

Et vous, vos impressions?

Wordpress icon

Cela fait des années que j’utilise le même thème graphique pour mon site et je n’ai jamais vraiment pris le temps de traduire la date de publication ou de mise à jour des articles en français.

Le tutoriel qui suit ne s’adresse qu’à un cercle réduit de développeurs : il est évidemment bien plus aisé d’installer WordPress en français (avec le langage pack qui convient) ou d’utiliser la fonction PHP setlocale() comme je l’avais fait précédemment avec WP-Date FR.

Dans mon cas bien précis, je n’ai pas accès aux locales étant donné que le serveur est installé en anglais. Je ne souhaite pas non plus installer la locale française, qui serait alors ajoutée à tous mes paquets Debian. Et je ne souhaite pas non plus utiliser la traduction française de WordPress. It’s coding time !

La fonction sky_date_french()

Vous pouvez placer cette fonction dans le fichier functions.php de votre thème :

/*
|-----------------------------------------------------------------------
| Sky Date in French by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns or echoes the date in French format (dd/mm/YYYY) for WordPress themes.
|
*/
function sky_date_french($format, $timestamp = null, $echo = null) {
	$param_D = array('', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim');
	$param_l = array('', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche');
	$param_F = array('', 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
	$param_M = array('', 'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc');
	$return = '';
	if(is_null($timestamp)) { $timestamp = mktime(); }
	for($i = 0, $len = strlen($format); $i < $len; $i++) {
		switch($format[$i]) {
			case '\\' : // fix.slashes
				$i++;
				$return .= isset($format[$i]) ? $format[$i] : '';
				break;
			case 'D' :
				$return .= $param_D[date('N', $timestamp)];
				break;
			case 'l' :
				$return .= $param_l[date('N', $timestamp)];
				break;
			case 'F' :
				$return .= $param_F[date('n', $timestamp)];
				break;
			case 'M' :
				$return .= $param_M[date('n', $timestamp)];
				break;
			default :
				$return .= date($format[$i], $timestamp);
				break;
		}
	}
	if(is_null($echo)) { return $return;} else { echo $return;}
}

M’étant quelque peu arraché les cheveux pendant les vacances pour trouver comment afficher correctement un shortcode dans une template WordPress, voici comment afficher un shortcode dans un article, une page ou une modèle de page.

Cela me servira de référence ultérieure mais je suis certain que cela en aidera d’autres.

Créer un shortcode

Pour créer un shortcode, on crée une fonction puis le shortcode associé dans le fichier functions.php du thème WordPress :

/* Fonction */
function sky_hello_readers($content) {
return 'Hello readers !';
}

/* Création du shortcode avec add_shortcode() */
add_shortcode( 'hello', 'sky_hello_readers' );

Il y a eu assez peu de changement dans le design de SkyMinds.net en 10 ans : je dirai qu’il y a eu 5 ou 6 versions “majeures” en tout. Vous aurez sûrement remarqué que je m’attache facilement à un design particulier (que je finis par hacker jusqu’à l’os !). Hé bien pour ce dixième anniversaire, je voulais quelque chose qui résume le site, qui colle un peu plus au nom de domaine et qui soit un peu plus identifiable.

skyminds-palmtreeJe ne suis pas vraiment graphiste (mes élèves en témoignent chaque jour) et je n’ai jamais réussi à créer un logo potable. Et pourtant, j’ai essayé ! Finalement, j’ai opté pour une approche typographique, ayant remarqué que la plupart des grandes marques utilisent une police de caractères bien particulière. Et je suis assez satisfait du résultat ce coup-ci.

WordPress : optimiser le themeAprès avoir vu comment réduire les accès des plugins, voici comment réduire le nombre d’accès à la base de données en modifiant vos fichiers de thèmes.

Des URLs statiques

Il est possible de supprimer jusqu’à une bonne vingtaine d’appels à la base de données rien qu’en éditant les fichiers de votre thème. Les fichiers les plus gourmands sont header.php, sidebar.php et footer.php. Vous pouvez remplacer :

  • bloginfo('charset') par l’encodage de vos pages : UTF-8.
  • bloginfo('stylesheet_url') par l’URI statique de votre feuille de style.
  • bloginfo('rss2_url') par l’URI statique de votre flux RSS.
  • bloginfo('pingback_url') par l’URI statique de votre serveur XML-RPC.
  • bloginfo('url') par l’URI statique de votre blog (sans le slash final).

BleuetAllez, soyons fous, changeons un peu le design de ce site. Comme tout le monde j’aime bien changer de temps à autre et le gris commence à m’agacer un peu. Je vous présente donc le thème Bleuet qui, comme son nom l’indique (… roulements de tambour en fond…) est bleu, enfin, bleuté comme un bleuet. Bref, cela change pas mal et c’est une bonne chose. Cela m’a permis d’alléger un peu le menu à droite et de replacer plus d’options dans la barre de navigation en dessous du header.

Je ne sais pas encore si je vais renouveller l’expérience du header rotatif mis en place sur le thème LSD. Pour l’instant, je garde l’image de la baie méditerranéenne, on verra pour d’autres images plus tard. Peut-être même qu’on pourrait ouvrir un concours de header, certains ici touchent sûrement plus que moi en graphisme :-)

Au niveau des tests, tout semble fonctionner sous Firefox 1.5.x et IE 6.x, la page s’affiche sensiblement de la même manière dans les deux navigateurs et ce sur n’importe quel écran (testé avec succès sur le 15,4″ sur le portable et le 19″ sur le fixe). Tant mieux, autant que cela fonctionne bien dès le départ sans avoir à patcher de tous côtés.

Pour la petite histoire, le bleuet (aussi connu sous le nom de Centaurea cyanus en Latin ou Cornflower en anglais )est une plante bisannuelle de la famille des Astéracées, mesurant de 0,30 à 0,80 m et poussant en Europe. Sa période de floraison s’étale d’avril à août et la couleur de ses fleurs peut être bleu, blanc ou rose. Le bleuet vivace pousse naturellement en France entre 1300 et 2300 m d’altitude où il est d’ailleurs assez commun. Le bleuet est prescrit comme décongestionnant en cas de conjonctivite, orgelet ou soins de la peau. Etonnant, non ? ^_^

Edit : que pensez-vous du nouveau thème ? Idées, critiques, menaces de mort… j’attends vos commentaires !

Les évènements sont racontés au jour le jour mais j’ai attendu d’avoir passé toutes les épreuves avant de tout publier…

1er jour
Et hop sitôt le sujet retourné c’est un commentaire de civilisation (chapitre 18 de News from Nowhere) qui s’annonce. Le sujet juste pour rire : causes et conséquences de la révolution. Pour ceux qui ne sont pas familier avec l’histoire, il s’agit d’une utopie dans laquelle les classes laborieuses renversent le pouvoir pour y installer une société égalitaire et communautaire. Le ton est donné : si c’est civilisation en commentaire en anglais, ce sera littérature en dissertation en français le lendemain. Exactement l’inverse de ce que je souhaitais : ben oui, cela nous fait trois fois plus de choses à réviser (3 bouquins en littérature)…

2ème jour
Pif paf, on retourne le sujet : “la prophétie et l’imposture dans les nouvelles de Flannery O’Connor” – tout un programme… La bonne nouvelle, c’est que des 3 bouquins au programme c’était celui-là qui m’inspirait le plus. Maintenant, à relire le sujet, il aurait très bien pu – et même mieux quand on y réfléchit un peu – s’appliquer à Richard II. Enfin bon, j’ai réussi à sortir un plan en 3 parties.

3ème jour
Thème. Version.

LSDJ’en avais un peu marre de la présentation du blog en gris et rouge : j’ai donc travaillé sur un nouveau design le week-end dernier pour pouvoir le tester sous toutes les coutures cette semaine. Aujourd’hui marque donc la venue du nouveau look LSD. Il n’y a rien de psychédélique du tout, c’est juste le seul nom qui m’est venu à l’esprit lorsque j’ai eu fini de jouer avec ma feuille de style – l’histoire du LSD est cependant intéressante. J’ai repris le gris et abandonné le rouge qui commençait à me fatiguer les yeux : le thème est donc un peu plus bleuté et la rubrique “about” a enfin été ajoutée (remarquez, j’ai mis un an avant de me rendre compte qu’elle manquait à l’appel…), je l’étofferai lorsque je serai un peu plus inspiré ;-). Le petit plus : j’utilise maintenant un header qui change aléatoirement à chaque lancement d’une des pages du blog. C’est plutôt sympa, j’ai même ajouté des photos qui n’ont peu (ou même pas du tout) de rapport avec le blog, juste pour varier les plaisirs. La largeur du blog a également été réduite, ce qui améliorera la lecture sur les grands écrans. Lecture parfaite sur un 17″, okay sur un 15″ d’après mes tests.

Il y a juste quelque chose qui me chiffonne un peu : IE. Bah oui, évidemment cela fonctionne sans problèmes avec Firefox, Opera et même Netscape mais IE m’affiche une scrollbar horizontale pour moins de 3 d’une dizaine de pixels qui dépassent. J’ai cherché tant et plus, pas moyen de trouver la ligne qui produit ce phénomène sans tout casser dans les autres navigateurs. Je réitère donc mon (éternelle) requête : si vous lisez ce blog, faîtes-le avec un navigateur qui respecte les standards du Web. Sérieusement, c’est vraiment important pour tous ceux qui créent des designs. En plus, vous y gagnerez au change. Voilà. Ah oui, j’oubliais : vous pouvez toujours revenir au look précédent grâce au Theme Switcher qui se trouve tout en bas du menu.

Spelling error report

The following text will be sent to our editors: