jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne photo 1

jQuery : script utilisant la fonction toggle pour afficher ou cacher un bloc HTML

jquery

Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.

Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

Lire la suite

PHP : solution pour l'erreur

PHP : résoudre l’erreur “function eregi() is deprecated”

php logo

Il vous est peut-être déjà arrivé de tomber sur ce message d’avertissement :

Function eregi() is deprecated.

En fait, “deprecated” signifie que les versions récentes de PHP considèrent cette fonction comme obsolète, c’est un peu comme si la fonction ereg() n’existait plus.

Par conséquent, mieux vaut dorénavant utiliser la fonction preg_match qui a pris sa place.

La fonction ereg() ou eregi() est donc remplacée par la fonction preg_match() depuis PHP 5.3 :

$is_image = eregi( "jpg|gif",$file_type );

devient donc :

$is_image = preg_match( “~jpg|gif~i”,$file_type );

Voici la liste des fonctions devenues obsolètes sous PHP 5.3 :

call_user_method() (use call_user_func() instead)
call_user_method_array() (use call_user_func_array() instead)
define_syslog_variables()
dl()
ereg() (use preg_match() instead)
ereg_replace() (use preg_replace() instead)
eregi() (use preg_match() with the ‘i’ modifier instead)
eregi_replace() (use preg_replace() with the ‘i’ modifier instead)
set_magic_quotes_runtime() and its alias, magic_quotes_runtime()
session_register() (use the $_SESSION superglobal instead)
session_unregister() (use the $_SESSION superglobal instead)
session_is_registered() (use the $_SESSION superglobal instead)
set_socket_blocking() (use stream_set_blocking() instead)
split() (use preg_split() instead)
spliti() (use preg_split() with the ‘i’ modifier instead)
sql_regcase()
mysql_db_query() (use mysql_select_db() and mysql_query() instead)
mysql_escape_string() (use mysql_real_escape_string() instead)
Passing locale category names as strings is now deprecated. Use the LC_* family of constants instead.
The is_dst parameter to mktime(). Use the new timezone handling functions instead.
HTML5 : corriger l'erreur

WordPress : valider le code oEmbed Youtube en HTML5

Le problème : le code des vidéos n’est pas valide en HTML5

Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

<iframe src="https://www.youtube.com/embed/Gvh2Zo7UL6E?fs=1&feature=oembed" width="660" height="371" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Résultat:

Or le petit problème, c’est que tout cela n’est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

HTML5 logo

Voici donc la solution que j’ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n’a rien à faire là et à supprimer l’attribut frameborder, que je remplace par un style="border: none".

Editez le fichier functions.php de votre thème et ajoutez-y cette fonction:

<?php
/*
|-----------------------------------------------------------------------
| Sky oEmbed Filter by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| The sky_oembed_filter() function attempts to validate WordPress 
| video oEmbeds for HTML5.
| $return is the normal HTML that the oEmbed process would return. 
| $data is the data received from the oEmbed call, in an object format. 
| $url is the original URL being queried for oEmbed info. 
|
*/
add_filter('oembed_dataparse', 'sky_oembed_filter', 90, 3 );
function sky_oembed_filter( $return, $data, $url ) {
 	$return = str_replace('frameborder="0" allowfullscreen', 'style="border: none"', $return);
	return $return;
}

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maitenant être valides.

HTML5 : corriger l'erreur

HTML5 : résoudre l’erreur “keyword publisher is not registered” (validateur W3C)

HTML5 logo

Sur votre site ou blog, vous avez peut-être ajouté le widget ou bouton +1 de Google+, le réseau social de Google. Or le petit problème, c’est que le code fourni empêche la bonne validation du document.

Voici le code fourni par Google :

<a title="Google+" href="https://plus.google.com/114535411372700844744" rel="publisher nofollow">Google+</a>

et voici l’erreur renvoyée par le validateur W3C :

Keyword publisher is not registered

HTML5 étant toujours en cours de réalisation, les valeurs de la balise rel sont assez restreintes et on ne peut pas mettre tout ce que l’on veut sans déclencher l’erreur.

La solution est toute simple : il faut ajouter la valeur du rel en argument dans le lien, comme ceci :

<a title="Google+" href="https://plus.google.com/114535411372700844744?rel=publisher" rel="nofollow">Google+</a>

Et voilà, plus d’erreur lors de la validation.

PHP: résoudre l'erreur

PHP : résoudre l’erreur “assigning the return value of new by reference is deprecated”

Si, lors d’une journée de débuggage PHP, vous tombez sur l’erreur suivante :

Deprecated: Assigning the return value of new by reference is deprecated in  on line 12 

pas de panique, c’est extrêmement simple à résoudre. Vous avez probablement une ligne dans ce goût-là :

$data =& new Structured_Info();

Or, depuis PHP5, le passage par réference est systématique sur new, donc il suffit d’enlever le ‘&’ et d’écrire :

$data = new Structured_Info();

Tout simplement.

PHP: résoudre l'erreur

PHP : les bons en-têtes pour permettre la mise en cache d’une page

Je me suis rendu compte qu’un des fichiers javascript d’un plugin WordPress est appelé sur chaque article du site et qu’il n’est pas mis en cache par défaut…

C’est très moyen au niveau opimisation étant donné que c’est typiquement le genre de fichier statique qui n’est pas prêt d’être modifié.

Voici donc les en-têtes (headers) qui vont nous permettre de mettre un fichier en cache en PHP :

<?php
/*
|--------------------------------------------------------------------------
| Enable Caching with PHP headers by Matt - www.skyminds.net
|--------------------------------------------------------------------------
|
| Let's set it to 90 days caching.
| seconds, minutes, hours, days 
|
*/
$expires = 60*60*24*90;

header('Pragma: public');
header('Cache-Control: maxage='.$expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');

Et voilà, page mise en cache. Cela fait moins de requêtes sur le serveur puisque le navigateur n’a pas besoin de redemander la page à chaque visite.

Linux : vider un fichier de son contenu avec la commande truncate photo

Linux : vider un fichier avec truncate

truncate

De temps en temps, il peut être utile de pouvoir effacer le contenu d’un fichier qui prend de l’embonpoint, comme un fichier de log par exemple.

Dans ce cas, vous pouvez lancer la commande truncate sous linux dans un terminal :

truncate -s 0 /home/skyminds/error.log

L’argument -s 0 signifie que l’on réduit sa taille (size) à zéro. Simple et efficace !

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

Nouveau plugin WordPress : Sky Login Redirect

Le problème : redirection durant le login WordPress

wordpress_icon_blueIl y a quelques jours, Monty m’a envoyé un petit mail en me disant qu’elle avait du mal à s’identifier sur le site. Comme je suis loggué en permanence avec Firefox, je croyais que c’était un bug du navigateur.

Or, après avoir changé de navigateur deux fois (Chromium et Opéra), je me suis vite rendu compte que quelque chose clochait : une fois que l’on cliquait sur le bouton login, il y avait comme une redirection qui ne se faisait pas bien. Le navigateur moulinait et finissait par cracher un bout de page avec seulement quelques éléments HTML.

La solution : un plugin WordPress maison

Du coup, je me suis dit que l’on pouvait peut-être arranger les choses, c’est ainsi que j’ai écrit un nouveau plugin WordPress : Sky Login Redirect.

Lire la suite

FireFox : récupérer les onglets ouverts d'une session corrompue photo

FireFox : récupérer les onglets ouverts d’une session corrompue

Celles et ceux qui sont déjà venu(e)s chez moi savent que j’ai une utilisation de FireFox peu conventionnelle : quasiment 70+ onglets toujours ouverts en permanence et une liste de bookmarks qui rappelerait presque ce que Google indexe quotidiennement.

A chaque fois que je ferme le navigateur, il ferme les 70 onglets. Et les rouvre au démarrage suivant. Et aujourd’hui, au redémarrage : plus aucun onglet, juste la page de démarrage.

Bref, mon Firefox s’est planté et a perdu toute ma liste d’onglets ouverts. Et il est impossible de restaurer l’ancienne session.

firefox session error custom

Suivez le guide, tout n’est pas perdu.

Lire la suite

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

WordPress : afficher un shortcode dans un article, une page ou une template

wordpress_icon_blue

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' );

Lire la suite

Webdesign : le site du collège Pablo Picasso photo

Webdesign : le site du collège Pablo Picasso

Il y a quelques mois, je vous avais dit que j’étais en charge du site du collège Pablo Picasso, où j’ai passé quelques années, mais je ne vous avais jamais dévoilé le design – le voici donc :

design college pablo picasso montfermeil

J’ai laissé la main à une collègue depuis que je suis parti – d’ailleurs on peut voir qu’il y a beaucoup moins d’images et de contenu depuis – mais je garde toujours un oeil dessus. C’est dur de se détacher de ses créations!

Lire la suite