Archives mensuelles : avril 2019

Déplacer les fichiers de la bibliothèque de médias de WordPress

Publié le par
Répondre

Si pour une raison ou une autre vous voulez déplacer les fichiers médias dans les dossiers de votre site WordPress, je vais vous expliquer comment faire.

Dans mon cas, j’ai eu ce besoin quand j’ai voulu désactiver l’organisation en dossier annuels et mensuels par défaut, et déplacer tous mes médias à la racine du dossier des médias (wp-content/uploads).

Procédure en plusieurs étapes

Pour déplacer les fichiers médias de votre site WordPress, il faut procéder en plusieurs étapes :

  1. déplacer les fichiers
  2. modifications en base de données
  3. modification des articles et pages

1 – Déplacer les fichiers

Pour cette étape, rien de plus simple, il suffit d’utiliser votre client FTP pour déplacer vos fichiers.

2 – Modifications en base de données

Le déplacement des fichiers ne suffit pas, car le chemin vers le fichier est enregistré en base de données.

Mon premier réflexe a été d’aller voir en base le contenu de la table servant à stocker les informations concernant les médias : wp_posts. Et dans cette table, BINGO !, une colonne (« guid ») contient l’adresse complète vers mon fichier. Je m’empresse de modifier ce champ pour tous mes médias, et retourne sur la page de bibliothèque médias de mon blog, et là… rien…

En effet, ce champ « guid » n’est pas utilisé pour retrouver nos fichiers médias, mais utilisé dans la génération des flux (RSS ou autres) de votre site WordPress. Il est donc fortement déconseillé de changer cette colone, ce qui est trop tard pour moi (voir l’article sur le codex WordPress).

Le chemin vers le fichier d’un média est enregistré dans la table wp_postmeta. Dans cette table, chaque média a deux enregistrements qui lui correspondent : « _wp_attached_file » et « _wp_attachment_metadata » (ces noms correspondent à la valeur de la colonne « meta_key »).

La ligne « _wp_attached_file » est une simple chaîne de caractère qu’il est très facile de modifier.

Quant à la ligne « _wp_attachment_metadata », il s’agit d’un array sérialisé (pour en savoir plus sur la sérialisation, lisez cet article sur OpenClassrooms). Le chemin est contenu dans la 6e « section » (entre point-virgules) de chaque tableau sérialisé. Quand vous modifiez le chemin, pensez bien à également changer le nombre de caractères ([...];s:21:"2019/04/logo_bleu.jpg;[...]" de l’entrée sérialisée.

3 – Modifications des articles et pages

Il reste maintenant à modifier en HTML les pages et articles qui incluent des médias de notre bibliothèque.

Créer un thème enfant pour WordPress

Publié le par
Répondre

Un thème enfant est un thème reprenant toutes les fonctionnalités d’un thème existant, qu’on appelera « thème parent ».

Pourquoi créer un thème enfant ?

Les thèmes WordPress disponibles offrent déjà un large choix d’options pour les personnaliser. Mais, par exemple, disons que vous voulez modifier la couleur d’un ou plusieurs éléments, ou encore, rajouter une web font.

Afin d’effectuer ces modifications, le premier réflexe est de modifier le fichier style.css du thème. Mais cette solution présente un problème, toute mise à jour du thème modifié écrasera nos ajustements… On pourrait se dire qu’il n’y a qu’à ne pas faire cette mise à jour. Mais là encore, c’est un soucis, car certains thèmes complexes peuvent présenter des failles de sécurité.

En utilisant un thème enfant, on est donc assuré de disposer de la dernière version de notre thème, tout en gardant nos propres modifications.

Continuer la lecture →

Retour sur ma première carte interactive

Publié le par
Répondre

Dans mon dernier article (voir), j’ai indiqué que la première solution de carte interactive que j’avais présentée dans une série de deux articles (1 et 2) ne fonctionnait pas sous Chrome.

Récemment, en consultant le code d’une page de reserves-naturelles.org, je me suis aperçu que la carte des régions de ce site fonctionnait sur le même principe que ma première solution et fonctionnait sous Chrome.

En comparant les deux codes je me suis aperçu de la différence : la map utilisée avait un attribut id au lieu d’un attribut name, ce qui fait que Chrome était incapable de la charger.

La démo originale a été corrigée, mais j’ai également fait une nouvelle version utilisant uniquement du JavaScript natif.

Le code HTML reste le même. Le code JavaScript est le suivant :

var areas = document.getElementsByTagName("area"); // array de toutes les areas
var target = document.getElementById("hovered"); // image dont on va changer la source

for (var i=0; i < areas.length; i++) { // pour chaque area de la page
	areas[i].addEventListener("mouseenter", function(evt) { // attachement à l'entrée de la souris
		// on récupère l'attribut "id" de l'élément déclencheur avec evt.target.getAttribute("id")
		target.src = "/assets/files/images/" + evt.target.getAttribute("id") + ".png"; // on change la source de l'image de couverture
	});
	areas[i].addEventListener("mouseleave", function(evt) { // attachement à la sortie de la souris
		target.src = "/assets/files/images/map.gif"; // on rétablit l'image transparente
	});
}

Comme quoi, même après plusieurs années on apprend toujours.

Remake de ma carte interactive avec OpenLayers

Publié le par
Répondre

Il n’y a pas très longtemps, en faisant la maintenance de mon site (oui, même si le contenu n’évolue quasiment pas, le site n’est pas à l’abandon) je suis retombé sur la carte interactive que j’avais réalisées plusieurs années auparavant.

Cette carte reposait sur l’utilisation d’une image comme fond de carte, et d’une map HTML plus un script jQuery.

J’avais résumé le processus de création dans deux articles :

  1. Création de la carte et du mappage
  2. Ajout interactivité avec jQuery

L’inconvénient de cette solution est quelle ne fonctionne pas sur Chrome. Et Chrome étant le navigateur avec la plus grosse part de marché cela est problématique.

Dernièrement, lors de ma mission chez Orange, j’ai été amené à travailler sur une partie de cartographie. Pour des raisons de confidentialité, il avait été décidé de ne pas utiliser de solution commerciale (celle de big G dans ce cas), mais une solution open-source.

Le choix final c’est arrêté sur la librairie OpenLayers, avec un fond OpenStreetMap.

Or cette librairie (compatible avec tous les navigateurs modernes) permet l’utilisation d’une image statique comme fond de carte (voir cet exemple). C’est donc pourquoi j’ai décidé de refaire une carte interactive à l’aide de cette librairie.

Création de la carte

Préparatifs

Comme avec toute librairie, il faut d’abord l’intégrer à votre page (via un CDN ou en local), ainsi que sa feuille de style.

Ensuite, il faut créer dans le corps de la page une div qui sera utilisée par OpenLayers pour créer la carte. De plus, cette div doit être préalablement dimensionnée, si vous ne souhaitez pas qu’elle occupe toute la largeur disponible.

Le script de création de la carte, quant à lui, doit être placé à la fin du body de la page.

Bon, tout est près ? Il est temps de passer à la création de notre carte.

Continuer la lecture →
Pages : 1 2 3