WordPress : récupérer la liste emails des membres et commentateurs photo

Résoudre les lightbox vides dans l’administration WordPress

Le problème : des iframes entièrement vides dans l’interface d’administration WordPress

Wordpress icon

Depuis mon passage à HTTPS, j’ai constaté que lorsqu’un plugin possédait une mise à jour et que l’on cliquait sur le lien “voir les détails de la version x.x”, j’avais droit à une jolie lightbox (ThickBox sous WordPress) toute vide.

C’était également le cas lors de la mise à jour des plugins, des thèmes ou de WordPress même : je n’obtenais jamais la ligne qui confirmait que le plugin avait bel et bien été réactivé.

Cette situation a duré des mois : j’ai d’abord soupçonné une mise à jour de WordPress qui aurait abimé un fichier donc j’ai ré-uploadé tous les fichiers, procédé à de multiples mises à jour mineures puis majeures.

J’ai ensuite jeté un œil aux plugins, en désactivant quelques uns pour essayer de trouver celui qui perturbait le système. Rien. Et visiblement, personne n’a jamais été confronté à ce problème sur la toile.

Et puis cette semaine, eurêka !

La solution : la configuration Apache du serveur

J’ai trouvé la solution un jour que je travaillais sur autre chose, en analysant les messages de l’inspecteur de code. Ce dernier me renvoyait de multiples avertissements lorsqu’un message a attiré mon attention :

[quote class=”center”]Load denied by X-Frame-Options…. X-Frame-Options does not permit framing.[/quote]

Et là, banco, j’ai immédiatement compris ce qui clochait. Lors de la bascule vers la version chiffrée du site, j’avais effectivement ajouté un nouvel entête X-Frame-Options comme ceci :

Header always set X-Frame-Options DENY

Cela est bien trop restrictif puisque la valeur DENY empêche l’affichage du site dans un cadre (frame).

Or le back-office de WordPress charge effectivement les messages relatifs aux mises à jour dans un cadre, sous la forme d’une lightbox: il faut donc utiliser la valeur SAMEORIGIN.

Lire la suite

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter photo

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter

Jusqu’à très récemment, il m’était tout à fait possible d’avoir des caractères accentués dans des blocs de texte sous WordPress en utilisant le plugin Crayon Syntax Highlighter pour coloriser le code.

crayon-syntax-highlighter

Or depuis quelques temps tous les blocs en lang="text" ne permettent plus d’afficher les accents : je me retrouve avec des mots tronqués comme si le texte n’était pas encodé en UTF-8.

Problème : des caractères non-Unicode

Voici ce que donne la phrase “j’ai mangé une tarte à la crème à Noël” avec une colorisation par défaut avec Crayon Syntax Highlighter :

J'ai mangé une tarte à la crème à Noël.

Gloups! C’est totalement illisible, les accents deviennent un caractère mal encodé et certaines lettres adjacentes sont littéralement supprimées. Pas glop.

Solution : créer un alias

La solution que je propose est plus une rustine d’appoint qu’une véritable solution.

Je pense que le problème réside dans l’expression régulière des langages du plugin : certains langages (shell par exemple) n’acceptent pas les accents alors que d’autres (HTML par exemple) oui.

Je me suis rendu compte en changeant la langue du bloc que le langage batch affichait correctement les accents.

Comme je n’allais pas éditer tous mes articles pour changer le langage des blocs texte que j’ai utilisé jusqu’à maintenant, j’ai opté pour la création d’un alias.

Lire la suite

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare photo

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare

Allez, je continue ma petite série sur la gestion de l’intégration oEmbed sous WordPress.

WordPress gère nativement plusieurs services : copiez-collez l’adresse d’une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide.

oembed-all-service

Je vous propose donc de valider le code généré par WordPress lorsqu’il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare.

Valider le code oEmbed de YouTube

Il suffit de lancer les quatre requêtes SQL suivantes :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");

Valider le code oEmbed de Dailymotion

Pour le code de Dailymotion, ces deux requêtes suffisent :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

WordPress : remplacer le vieux code Dailymotion de vos articles par une URL oEmbed photo 1

WordPress : mettre à jour le code Dailymotion

Cet article est le pendant de l’article pour remplacer le vieux code YouTube de vos articles WordPress par une URL oEmbed mais pour Dailymotion.

Voici donc les manipulations à effectuer pour transformer les vieux codes d’intégration avec les URL oEmbed de WordPress.

Nous utilisons toujours le plugin Search Regex pour WordPress avec la case regex activée et le signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer les liens swf/video de Dailymotion

J’appelle ces liens “swf/video” parce qu’on retrouve cela dans l’URL de l’intégration Flash. Il vaut mieux lancer cette substitution en premier.

On recherche :

#<object data="http://www.dailymotion.com/swf/video/(.*)" width="300" height="150">(.*)</object>#

Et on remplace par :

https://www.dailymotion.com/video/$2

Remplacer les liens swf de Dailymotion

On s’occupe maintenant des liens qui contiennent juste le terme “swf”.

On recherche :

#<object data="http://www.dailymotion.com/swf/(.*)" width="300" height="150">(.*)</object>#

Et on remplace par :

https://www.dailymotion.com/video/$2

Voilà, vous venez de nettoyer les anciens codes d’intégration Flash pour les remplacer par des URI oEmbed natives. Propre.

WordPress : remplacer le vieux code YouTube de vos articles par une URL oEmbed photo

WordPress : mettre à jour le code Youtube

Le code des plateformes – vidéos ou autre – évolue et il n’est pas rare de tomber sur de vieux articles qui embarquent un vieux code embed pour afficher des vidéos.

Si votre site a quelques années, il y a plusieurs méthodes d’intégration – plus ou moins optimisées – dont certaines ne s’afficheront pas (celles utilisant le plugin Flash par exemple) sur une tablette ou un smartphone.

youtube

Sur SkyMinds, je me suis dit que ce serait sympa d’avoir un système unifié : toutes les vidéos YouTube seront automatiquement insérées par WordPress en utilisant la méthode native, à savoir oEmbed.

Pour ce faire, j’utilise le plugin Search Regex qui permet d’intervenir facilement sur la base de données pour effectuer des changements en masse, tout en proposant la visualisation des changements avant que ces derniers ne soient appliqués.

Toutes les manipulations sont à effectuer avec Search Regex, en activant la case regex. Je me sers du signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer le vieux code d’intégration flash de YouTube

Avec Search Regex, on cherche :

<object [^>]*><param name="movie" value="https:\/\/www\.youtube\.com\/v\/([^"&?]+)">.*?<\/object>

Et on remplace par :

https://www.youtube.com/watch?v=$1

Lire la suite

Mise à jour du site du Centre de Kriya Yoga France : v4.0 photo

Mise à jour du site du Centre de Kriya Yoga France : v4.0

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits.

C’était juste un petit coup de plumeau mais comme j’ai oublié de vous en parler, voici une petite capture d’écran :

Mais cette semaine, j’ai retroussé mes manches et suis totalement passé à l’offensive :

  • redéfinition des couleurs
  • création du logo et des favicons
  • création de la boutique totalement intégrée à WordPress
  • mode responsive/adaptive pour smartphones et tablettes
  • conversion des pages de contenus en articles et classement des articles par catégories, en silos
  • modification des permaliens pour n’utiliser que le nom des articles
  • intégration des réseaux sociaux avec les comptes dédiés au CKYF
  • et de multiples essais en trial and error !

Note pour plus tard : si, lors de la prévisualisation d’un thème WordPress, rien ne s’affiche ou si la personnalisation (customizer) ne répond pas, c’est qu’un plugin met la zone au niveau du javascript. Dans mon cas, c’était pdf-js.

Without further ado, je suis assez content de vous présenter la version 4.0 :

Pas mal de changements mais je pense que cela en vaut vraiment le coup. Le site devenait vieillissant et n’était plus adapté aux smartphones et tablettes, et l’ancienne boutique (Cubecart) était une horreur à gérer.

Tout est beaucoup plus simple maintenant, avec de jolis graphiques pour les commandes, la gestion du stock… bref, c’est bien mieux pour moi à gérer et plus simple pour le CKYF.

Qu’en pensez-vous ?

WordPress : récupérer la liste emails des membres et commentateurs photo

WordPress : récupérer la liste emails des membres et commentateurs

Wordpress icon

Voici deux requêtes SQL pour récupérer la liste des adresses email de tous les utilisateurs d’un site tournant sous WordPress.

Emails des membres

En supposant que le préfixe WordPress est ‘wp_’, cette requête extrait l’adresse email de chaque membre du site :

/* Query name : get members' emails
/* Author : Matt
/* Author URI : https://www.skyminds.net/
*/
SELECT DISTINCT user_email FROM wp_users GROUP BY user_email

Emails des commentateurs

Et cette requête extrait l’adresse email de chaque personne ayant commenté sur le site :

/* Query name : get commenter' emails
/* Author : Matt
/* Author URI : https://www.skyminds.net/
*/
SELECT DISTINCT comment_author_email FROM wp_comments WHERE comment_approved<>'spam' GROUP BY comment_author_email

Astuce SQL : la clause DISTINCT permet d’éviter d’avoir des doublons dans la liste.

Serveur dédié : passer WordPress en HTTPS (TLS/SSL) photo

Serveur dédié : passer WordPress en HTTPS (TLS/SSL)

Vous avez sauté le pas et avez validé votre nom de domaine avec un certificat TLS/SSL. Très bien ! Voyons comment passer WordPress sur la version sécurisée de votre site.

Il existe des plugins WordPress entièrement dédiés à SSL pour rediriger vers les pages sécurisées mais on peut très bien faire sans, avec un peu d’huile de coude.

Le tutoriel est pour Debian et WordPress tourne sous Apache chez moi. Cela prend moins d’une heure pour configurer l’essentiel mais il est probable que vous ayez des petites corrections (thèmes, plugins) pour que tout soit servi en https.

Le but est de tout (oui, absolument tout!) servir via la connexion sécurisée.

Étape 1 : configurer Apache

On édite notre fichier de configuration :

nano /etc/apache2/sites-available/www.skyminds.net

et voici ce que garde pour VirtualHost *:80 :

ServerName www.skyminds.net
ServerAlias skyminds.net
DocumentRoot /home/skyminds/public_html/
Redirect 301 / https://www.skyminds.net/

La directive ServerName est nécessaire. Ensuite, une simple redirection renvoie toutes les requêtes du port 80 vers le port 443, sécurisé. Même pas besoin de mod_rewrite!

Lire la suite

WordPress : héberger les images sur un sous-domaine photo 1

WordPress : héberger les images sur un sous-domaine

Cela fait des années que je parle d’héberger les images du site sur un sous-domaine mais j’ai toujours remis cela à plus tard.

Je pensais que la configuration me prendrait un temps infini mais au final cela ne m’aura pris qu’un peu de réflexion et quelques minutes pour tout finaliser.

Le plus long aura été d’écrire ce tutoriel!

Aujourd’hui, c’est chose faite : les images des articles du site sont donc placées sur un sous-domaine pour des raisons de performances.

subdomains

Voici donc un petit tutoriel qui détaille toutes les étapes. Cela prend environ 20 minutes.

Principe de fonctionnement

Les fichiers du site sont présentement servis par Apache. Le domaine est skyminds.net et nous allons créer un sous-domaine, qui est en fait un répertoire au niveau de l’arborescence du site, qui contiendra toutes les images de nos articles.

Par défaut, WordPress place tous les fichiers uploadés via l’interface d’administration dans /wp-content/uploads.

Nous allons donc créer un sous-domaine (static.skyminds.net) qui pointera vers le répertoire /wp-content/uploads.

L’intérêt est que nous n’avons pas à copier ou à déplacer de fichiers. Cela permet aussi de revenir à une installation plus classique à tout moment, sans intervention majeure.

Une fois ce VirtualHost créé, il ne reste plus qu’à modifier les options de WordPress pour les futurs articles et changer les anciennes URI des images dans les anciens articles. P

our finir, nous redirigerons les anciennes URI vers les nouvelles via .htaccess.

Etape 1 : on crée le sous-domaine sur le serveur Apache

Commençons par créer un nouveau VirtualHost pour notre sous-domaine:

nano /etc/apache2/sites-available/static.skyminds.net

et ajoutons-y ceci :

ServerAdmin webmaster@localhost
DocumentRoot /home/skyminds/public_html/wp-content/uploads
ServerName static.skyminds.net
ErrorLog /var/log/apache2/www-error.log

        
          AllowOverride None
          RequestHeader unset Cookie
          Header unset Set-Cookie
          Options FollowSymLinks
          Order allow,deny
          Allow from all

Plusieurs choses sont importantes à noter dans ce fichier de configuration Apache:

  • DocumentRoot pointe vers le répertoire /home/skyminds/public_html/wp-content/uploads
  • on retire tous les cookies servis par static.skyminds.net

Pas de cookies, pas de soucis et un site qui gagne en rapidité !

Lire la suite

WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod photo 2

WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod

Il est primordial d’accorder les bonnes permissions aux fichiers et dossiers d’un site sur un serveur web. Si ces permissions sont trop permissives, l’administrateur du site s’expose à la compromission du site, voire du serveur.

Sous WordPress, c’est la même chose : les fichiers et dossiers du site doivent avoir les bonnes permissions.

Le problème : des permissions trop larges

chmod-007-permis-executer-300

Sur le site, j’ai eu pendant trop longtemps un problème avec les fichiers et répertoires de thèmes ou de plugins.

Je m’explique : à chaque fois qu’un plugin voulait créer des fichiers (dans un répertoire /cache par exemple), la seule solution était de mettre les permissions de ce répertoire à 777, le mal absolu puisque cela permet au monde entier de lire, écrire et exécuter des fichiers dans ce dossier.

Pour les fichiers de thèmes éditables par WordPress, il fallait que leurs permissions soient à 666, ce qui là aussi posait un gros souci de sécurité.

Voici donc un tuto pour apprendre comment mettre les bonnes permissions à vos fichiers et dossiers pour votre site, qu’il tourne sous WordPress ou non.

Étape 1 : définir le bon propriétaire et groupe pour les fichiers

Les fichiers du site doivent appartenir au propriétaire et au groupe qui les fait tourner.

En règle générale; les serveurs de fichiers (comme Apache ou NginX) ont comme propriétaire www-data et comme groupe groupe www-data.

Dans mon cas, ayant installé les fichiers via SSH, les fichiers étaient détenus par l’utilisateur root. Je crée donc un nouvel utilisateur pour mon site:

adduser caddy www-data

Je vais donc assigner à l’utilisateur caddyet au groupe www-data la permission d’être propriétaire de mes fichiers, avec la commande chown.

Pensez à changer caddypour le nom de votre utilisateur web ou FTP.

Lire la suite

403-error

Des images qui renvoient une erreur 403

Aujourd’hui, j’édite un ancien article et le prévisualise pour voir les changements : je m’aperçois alors que l’image de l’article ne s’affiche plus.

Ni une ni deux, je sors mon terminal et tente de récupérer l’image avec wget. Erreur 403. Je vérifie la configuration Apache et Varnish, rien à signaler (et surtout rien n’avait été modifié).

Je vérifie alors le fichier via FTP : il se trouve qu’il ne possédait pas les bons droits!

Evidemment, avec un chmod 600, cela ne risque pas de s’afficher… Les autres images, celles qui s’affichaient bien et renvoyaient un code 200, étaient bien chmodées en 644.

Solution : CHMOD

Il faut donc chmoder l’ensemble des fichiers du répertoires, 640 pour les images ce sera parfait :

find /home/public_html/wp-content/uploads -type f -exec chmod 640 {} \;

et pour les répertoires, 750 c’est correct :

find /home/public_html/wp-content/uploads -type d -exec chmod 750 {} \;

Notez la différence de syntaxe : on utilise f pour les fichiers (files) et d pour les répertoires (directory).

WordPress : récupérer la liste emails des membres et commentateurs photo

WordPress : afficher la date en français dans le thème (sans utiliser le pack de langue ou setlocale())

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;}
}

Lire la suite