Catégories
Développement

Custom HTML vs blocks

<section> Gutenberg…

Si à première vue il semble intuitif d’utiliser la structure en blocs que proposera le nouvel éditeur Gutenberg, certaines choses ne me semblent pas encore possibles, comme par exemple placer dans un même élément <section> un ensemble de paragraphes correspondant à un titre donné.

Je suis tellement habitué à écrire directement mes pages en HTML, que la première solution qui s’impose à moi est d’utiliser

Le bloc HTML

Partons d’un cas concret, un article sur la manière d’organiser les photos.Voici ce que je suis tenté de faire:

<!-- wp:html --> <section> <h2>Les bases : nommer ses photos</h2> <p>Depuis toujours, pour faciliter le tri naturel de mes dossiers, je les nomme de la manière suivante: <var>YYYY_MM_DD</var></p> <ul> <li><var>YYYY</var>: l'année en quatre chiffres</li> <li><var>MM</var>: le mois en deux chiffres</li> <li><var>DD</var>: le jour en deux chiffres</li> </ul> <p>J'utilise le caractère de soulignement (_) pour séparer les groupes, mais j'aurais pu choisir le tiret, un autre caractère, ou rien du tout (mais alors on perd en lisibilité).</p> <p><q>Souvent, j'ajoute le contexte (par exemple le lieu) après la date, pour m'y retrouver encore plus facilement.</q></p> <p>Cette utilisation de la date sous le format <var>YYYY_MM_DD</var> fait que l'explorateur de fichier les affiche naturellement triés chronologiquement.</p> </section> <!-- /wp:html -->

Remarque : les parties <!-- wp:html --> et <!-- /wp:html --> ne sont visibles que en mode « éditeur de code ».

Si je décide d’utiliser les blocs prévus, voici ce que cela donne :

<!-- wp:group --> <div class="wp-block-group"><div class="wp-block-group__inner-container"> <!-- wp:heading --> <h2>Les bases : nommer ses photos</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Depuis toujours, pour faciliter le tri naturel de mes dossiers, je les nomme de la manière suivante: <var>YYYY_MM_DD</var></p> <!-- /wp:paragraph --> <!-- wp:list --> <ul><li><var>YYYY</var>: l'année en quatre chiffres</li><li><var>MM</var>: le mois en deux chiffres</li><li><var>DD</var>: le jour en deux chiffres</li></ul> <!-- /wp:list --> <!-- wp:paragraph --> <p>J'utilise le caractère de soulignement (_) pour séparer les groupes, mais j'aurais pu choisir le tiret, un autre caractère, ou rien du tout (mais alors on perd en lisibilité).</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><q>Souvent, j'ajoute le contexte (par exemple le lieu) après la date, pour m'y retrouver encore plus facilement.</q></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Cette utilisation de la date sous le format <var>YYYY_MM_DD</var> fait que l'explorateur de fichier les affiche naturellement triés chronologiquement.</p> <!-- /wp:paragraph --></div></div> <!-- /wp:group -->

Voilà qui me semble assez surchargé à priori…

Mais ce n’est que le code qui s trouve dans l’éditeur! En réalité, WordPress va transformer ces méta-données pour envoyer un code HTML adapté.

<div class="wp-block-group"><div class="wp-block-group__inner-container"> <h2>Les bases : nommer ses photos</h2> <p>Depuis toujours, pour faciliter le tri naturel de mes dossiers, je les nomme de la manière suivante: <var>YYYY_MM_DD</var></p> <ul><li><var>YYYY</var>: l’année en quatre chiffres</li><li><var>MM</var>: le mois en deux chiffres</li><li><var>DD</var>: le jour en deux chiffres</li></ul> <p>J’utilise le caractère de soulignement (_) pour séparer les groupes, mais j’aurais pu choisir le tiret, un autre caractère, ou rien du tout (mais alors on perd en lisibilité).</p> <p><q>Souvent, j’ajoute le contexte (par exemple le lieu) après la date, pour m’y retrouver encore plus facilement.</q></p> <p>Cette utilisation de la date sous le format <var>YYYY_MM_DD</var> fait que l’explorateur de fichier les affiche naturellement triés chronologiquement.</p> </div></div>

Il me faudra un peu de temps pour m’y habituer :-)

Pour essayer Gutenberg

Il devrait être disponible avec WordPress 5.0, mais les impatients peuvent ajouter le plugin pour le tester, en gardant l’opportunité de continuer à travailler avec le merveilleux TinyMCE.

Lien de téléchargement: https://fr.wordpress.org/plugins/gutenberg/

Catégories
Développement

WordPress – Convertir les émoticônes lors de l’affichage

Comment désactiver la conversion automatique en smiley sous WordPress?

- Photo sans description -

Wordpress proposait avant une option dans le tableau de bord, sous Réglages, Ecriture, Mise en forme, mais cette option a disparu. Nous pouvons tout de même faire ce réglage sans modifier de code.
  Lire la suite
(2 minutes)
« WordPress – Convertir les émoticônes lors de l’affichage »
Catégories
Développement

Personnaliser sa page 404 sous WordPress

Lorsque le visiteur tente d’accéder à une page que WordPress ne peut trouver, une page spéciale est affichée. Il s’agit de la page 404, du nom de l’erreur HTTP provoquée par une page inexistante.
Nous verrons dans cet article comment profiter de cette page 404.
Le visiteur peut se trouver désorienté lorsque la page 404 ne fournit pas assez d’informations. De plus, vous pouvez profiter de cette page pour vous prévenir par mail que les visiteurs cherchent une page spécifique. L’erreur peut provenir d’un lien qui n’a pas été adapté lors d’une modification ou suppression d’un contenu (article, page, fichier media).

Les marqueurs conditionnels peuvent vous aider, en ajoutant quelques tests sur la page 404. Lire la suite
(2 minutes)
« Personnaliser sa page 404 sous WordPress »

Catégories
Développement

WordPress, ajouter un fil d’Ariane (breadcrumb)

Afin d’améliorer la navigation et de permettre au visiteur de ne pas trop se perdre dans votre blog Worpress, vous pouvez ajouter un fil d’Ariane (en anglais, breadcrumb). Lire la suite
(2 minutes)
« WordPress, ajouter un fil d’Ariane (breadcrumb) »

Catégories
Développement

Ajouter une sitemap dans un WordPress

Procédure
Créer une page (par exemple brol-basic-sitemap.php
dans repertoire_du_blog/wp-content/themes/nom_du_thème

Ensuite, aller éditer la page sitemap comme indiqué ci-dessous.

Enfin, dans la partie « Attributs de la page » (généralement à droite), sélectionner « Sitemap » dans la combobox « Modèle »
–le nom « Sitemap » provient de * Template Name: Sitemap

Voilà, la page est visible sur : https://www.gaudry.be/photo/sitemap/ Lire la suite
(moins de 1 minute)
« Ajouter une sitemap dans un WordPress »