Tout savoir sur WordPress

Visual Subtitle : Ajouter des sous-titres à vos articles

Subtitle 360 est un plugin WordPress qui permet d’ajouter une option pour mettre un sous-titre pour les pages et les articles.

Les sous-titres peuvent être pratique pour révéler un contenu supplémentaire à vos lecteurs. L’extension Visual Subtitle est une solution rapide pour ajouter des sous-titres à vos articles.

Visual Subtitle vous permet d’inclure un texte qui sera une partie du titre de l’article, sauf qu’il est enveloppé dans une balise span, comme ceci:

<h1>Le titre de mon article <span class="subtitle">Mon sous-titre</span></h1>

Cela vous donne la liberté de personnaliser les sous-titre de votre thème. Assurez-vous d’ajouter la propriété {display: block;} à votre feuille de style pour séparer le sous-titre de votre titre principal.

Personnaliser votre sous-titre
Personnaliser votre sous-titre

Au niveau de la page d’ajout et d’édition d’un article, l’extension ajoute un encart « Visual Subtitle » pour vous permette d’ajouter votre sous-titre.

Encart pour ajouter votre sous-titre
Encart pour ajouter votre sous-titre

Enfin, dans l’administration des articles, le sous-titre est séparé par un pipe (|) et se distingue facilement du titre principal.

Les sous-titres sont précédés dans pipe (|)
Les sous-titres sont précédés dans pipe (|)
Cet article a été mis à jour il y a 2447 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

16 Commentaires

  1. Une toute petite ligne de code php qui appelle un champ personnalisée fait exactement la même chose sans aucun plugin

  2. Euh… niveau SEO l’ami Gougueule prend parfois le contenu de la balise H1 en lieu et place de la balise Title
    On peut donc avoir dans les SERP « Another book … subtitle » c’est un peu moyen non ?

  3. @BENOIST : Ce plugin est destiné aux personnes qui n’ont pas de notions en programmation :)

    @ Fabien : Comme je l’ai précisé, c’est un plugin destiné aux personnes qui ne peuvent pas aller dans le code et faire des modifications eux-mêmes.

    Pour le problème de la balise title et H1, c’est la première que j’entends parlé de cas de remplacement.

  4. Bonjour,
    Je trouve ça pas tiptop non plus : je suis d’accord, ce genre de plugin s’adresse à des personnes qui n’ont pas de notion de programmation et justement, ces personnes vont penser que cela ajoute un sous-titre donc un élément bien distinct du titre, mais en fait non, c’est juste une partie du titre qui peut prendre un style différent.
    On va donc se retrouver avec des titres qui ne voudront plus rien dire, autrement que visuellement.

  5. Bien vu les amis programmeurs … ! Cela porte à confusion surtout que quelqu’un qui ne s’y connais pas pensera bien faire et se retrouvera avec un titre incompréhensible ou presque sur google !

    Sinon plugin très sympathique. cela part d’une bonne intention et écrire à l’auteur pour lui faire part de ce problème serais judicieux non ?

  6. Bonjour ! Après lecture des commentaires !
    « Alors quel est la petite ligne de code à écrire ? »
    Je suis curieux d’apprendre !

    Merci beaucoup
    Laurent

  7. bon sang pas moyen de poster des balises !!!! même en les encadrant par code
    donc (dernier essai)
    balise hgroup contenant h1 et h2

  8. Contrairement à ce qui a été dit plus haut, je trouve que dans plus de 80% des cas, le fait « d’avoir dans les SERP « Another book … subtitle » » peut être une très bonne chose.

    Après, l’idéal serait d’utiliser une balise adaptée à ce sous-titre : soit un h2 précédent le h1 au sein d’un hgroup ; ou bien la nouvelle balise subline ( cf http://css.4design.tl/html5-element-subline-pour-remplacer-hgroup ) qui semble taillée sur mesure pour cela.

  9. Bonjour,

    Le sous titre ne se sépare du titre, j’ai pourtant bien mis display:block dans mon css :/

    D’ou vient l’erreur svp (je suis vraiment nul dsl)

    .visual-subtitle-wrap {

    padding: 0 0 10px;
    font-size: 1.7em;
    }
    .visual-subtitle-wrap label {

    color: #000;
    cursor: text;
    position: absolute;
    /*font-size: 1.7em;*/
    padding: 8px 10px;
    }
    .visual-subtitle-wrap input {

    width: 100%;
    }
    .column-visual-subtitle {

    display: block;
    }

  10. bonsoir,
    j’ai apprécié ce tuto.
    je souhaite maintenant savoir s’il est possible (et comment?) d’afficher ce sous-titre de page dans la barre de navigation du site
    au niveau design, que le titre soit afficher au dessus du sous titre:
    TITRE1 TITRE2 TITRE3
    sous-titre sous-titre sous-titre

    merci

  11. Super cool, j’ai souvent lu qu’il fallait un sous titre j’ai donc chercher sur google en français comment faire et je tombe sur cet article mais avec des commentaires qui diffère. Bon je vais quand même essayer.
    Merci

vulputate, venenatis, at efficitur. id, amet, sit