Article mis en avant (Sticky)

C’est un article mis en avant.

Il y a quelques trucs à vérifier :

  • L’article mis en avant doit être distinctement reconnaissable d’une façon ou d’une autre par rapport aux articles classiques. Vous pouvez personnaliser la classe .sticky si vous utilisez la function post_class() pour générer vos classes d’article, ce qui est d’ailleurs la meilleure façon de faire.
  • Il devrait s’afficher tout en haut de votre page d’index de blog, même si ce n’est pas votre dernier article chronologiquement
  • Il devrait aussi s’afficher dans la chronologie des articles mais alors sans indication de mise en avant
  • Si vous avez une extension ou un widget qui répertorie les articles populaires ou les commentaires, assurez-vous que cet article ne s’affiche pas toujours en haut de ces listes à moins qu’il soit vraiment populaire.

Carrousel de photos

C’est un test pour la galerie en mosaique de Jetpack.

Vous devez installer Jetpack ou Slim Jetpack si ce n’est pas déjà fait et activer le module « Carrousel ».

Juste une ligne de texte après la galerie pour vérifier que tout s’espace joliment.

Listes imbriquées et mixtes

Les listes imbriquées et mixtes sont toujours délicates. Il faut s’assurer que :

  • Les listes imbriquées ne cassent pas l’ordre des listes ordonnées.
  • Vos styles de liste couvrent tous les éléments.

Ordonné – Non ordonné – Ordonné

  1. élément ordonné
  2. élément ordonné
    • non ordonné
    • non ordonné
      1. élément ordonné
      2. élément ordonné
  3. élément ordonné
  4. élément ordonné

Ordonné – Non ordonné – Non ordonné

  1. élément ordonné
  2. élément ordonné
    • non ordonné
    • non ordonné
      • élément non ordonné
      • élément non ordonné
  3. élément ordonné
  4. élément ordonné

Non ordonné – Ordonné – Non ordonné

  • élément non ordonné
  • élément non ordonné
    1. ordonné
    2. ordonné
      • élément non ordonné
      • élément non ordonné
  • élément non ordonné
  • élément non ordonné

Non ordonné – Non ordonné – Ordonné

  • élément non ordonné
  • élément non ordonné
    • non ordonné
    • non ordonné
      1. élément ordonné
      2. élément ordonné
  • élément non ordonné
  • élément non ordonné

Balises et mise en forme

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
titre 6

Blocs de citation

Sur une ligne :

Plus on partage, plus on possède. Voilà le miracle.

Multi ligne avec une référence d’auteur :

C’est notre Charte. Stallman l’a appelé le Logiciel Libre. Le « libre » n’a rien à voir avec le prix, même si vous êtes toujours libre de faire payer pour votre logiciel, mais avec la liberté de créer. Ou comme nous geeks nous disons souvent : pas libre comme l’air, libre comme dans les paroles. Matt Mullenweg – Fondateur de WordPress ‘ extrait de l’article The Four Freedoms, 2014

Tableaux

Intervenant Salaire
Benjamin Lupu 1 € Parce que c’est ce que Steve Job avaient besoin comme salaire.
Remi Corson 100 m € Pour tout le taf qu’il fait.
Gregoire Noyelle 10 mns € Les images valent mille mots, non ? Alors avec un chapeau comme ça.
BoiteAWeb 10 mds € La sécurité n’a pas de prix !

Listes de définitions

Titre de la liste
Division de la liste.
CMS
Un système de gestion de contenu ou SGC (Content Management System ou CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d’applications multimédia. Vous pensez à quoi ?
#hashtag
Un marqueur de métadonnées couramment utilisé sur internet où il permet de marquer un contenu avec un mot-clef plus ou moins partagé sur les IRC et réseaux sociaux.
Rapper’s Delight
Laissons Brian Williams nous le dire personnellement.

Listes non ordonnées (Imbriquées)

  • Premier élément de la liste
    • Premier élément de la liste
      • Premier élément de la liste
      • Deuxième élément de la liste
      • Troisième élément de la liste
      • Quatrième élément de la liste
    • Deuxième élément de la liste
    • Troisième élément de la liste
    • Quatrième élément de la liste
  • Deuxième élément de la liste
  • Troisième élément de la liste
  • Quatrième élément de la liste

Listes ordonnées (Imbriquées)

  1. Premier élément de la liste
    1. Premier élément de la liste
      1. Premier élément de la liste
      2. Deuxième élément de la liste
      3. Troisième élément de la liste
      4. Quatrième élément de la liste
    2. Deuxième élément de la liste
    3. Troisième élément de la liste
    4. Quatrième élément de la liste
  2. Deuxième élément de la liste
  3. Troisième élément de la liste
  4. Quatrième élément de la liste

Balises HTML

Ces balises proviennent du code de WordPress.com FAQ.

Balises d’adresse

1 rue de la Boucle Infinie
Cupertino, CA 95014
United States

Balise d’ancre (alias Lien)

C’est un exemple de lien.

Balise d’abbréviation

L’abbréviation TSVP signifie ici « Testez S’il Vous Plaît ».

Acronyme

L’acronyme www signifie le « web ».

Balise big

C’est tests n’ont rien à voir avec lebigdil de Bigard, en plus cette balise n’est même plus supportée en HTML5.

Balise de citation

« If Code is poetry, Translation helps it spread the world » —Automattic + FxB

Balise de code

Vous verrez plus tard dans les tests que  word-wrap: break-word; sera votre meilleure amie.

Balise de suppression

Cette balise devrait barré ce texte, mais cette balise n’est même plus supportée en HTML5 (utilisez <strike> à la place).

Balise d’emphase

La balise d’emphase devrait mettre en italique le texte.

Balise d’insertion

Cette balise devrait indiquée un texte inséré.

Balise Keyboard

Cette balise très peu connue simule du texte clavier, et qui généralement utilise le même style que la balise <code>.

Balise de Preformatage

Cette balise permet de styliser de grands blocs de code.

.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
}

Balise de citation

Développeurs, développeurs, développeurs… –Steve Ballmer

Balise strong

Cette balise affiche du texte en gras.

Balise subscript

Une petite dose de style pour notre H2O, qui devrait pousser le « 2 » vers le bas.

Balise superscript

Toujours s’en tenir à la science et au E = MC2 d’Albert Einstein, qui devrait voir son 2 sous forme de puissance.

Balise teletype

Cette balise rarement utilisée simule du texte teletype, et qui généralement utilise le même style que la balise <code>.

Balise de variables

Cela vous permet d’indiquer des variables.

Alignement d’image

Bienvenue dans l’alignement d’image ! La meilleure façon de démontrer le flux et le reflux des diverses options de positionnement des images est de les plonger dans un océan de mots. Alors hissez la gran’voile et en avant, c’est parti.

Concernant l’alignement, il est à noter que les utilisateurs peuvent choisir parmi les options aucun, à gauche, à droite et centré. De plus, les images peuvent avoir différentes dimensions : miniature, moyenne, grande & en plein écran.

Image Alignment 580x300

L’image au-dessus est centrée.

Image Alignment 150x150

Le reste de ce paragraphe est du simple remplissage pour voir le texte se disposer autour de l’image de 150 x 150, qui reste alignée à gauche.

Comme vous pouvez le voir il devrait y avoir de l’espace tout autour de l’image. Le texte ne devrait pas être collé à l’image. Les images ont aussi besoin d’air pour respirer. Laissez-les faire leur travail sans être gênées par le texte. Une phrase de plus, pour voir que le texte se positionne à la droite de l’image puis en dessous tout en douceur. Encore une fois, laissons faire les choses. Mission accomplie !

Et maintenant une image extrêmement grande. Et sans alignement.

Image Alignment 1200x400

L’image ci-dessus, malgré ses 1200 px de large, ne devrait pas sortir de la zone du contenu. Elle devrait restée contenu sans aucun problème dans le flow du contenu.

Image Alignment 300x200

Et maintenant tribord toute avec un alignement à droite. À nouveau il devrait y avoir suffisament d’espace au-dessus, en-dessous et à gauche de l’image. Ça semble tout bon tout ça. Et ne laissez personne vous dire le contraire.

Maintenant , vous devriez voir le texte commencé à glisser gentiment sous l’image alignée à droite. Il devrait toujours y avoir plein d’espace tout autour. Oui, juste comme ça… sinon appelez le dev !

Vous croyez en avoir terminé, et bien non, nous allons tout recommencer mais cette fois-ci avec les légendes !

Image Alignment 580x300
Cette image de 580×300 a une légende super originale.

L’image ci-dessus est centrée. La légende contient aussi un lien. Juste pour voir si cela ne produit rien de bizarre.

Image Alignment 150x150
tou’p’tite légende.

Le reste de ce paragraphe est du simple remplissage pour voir le texte se disposer autour de l’image de 150 x 150, qui reste alignée à gauche.

Comme vous pouvez le voir il devrait y avoir de l’espace tout autour de l’image. Le texte ne devrait pas être collé à l’image. Les images ont aussi besoin d’air pour respirer. Laissez-les faire leur travail sans être gênées par le texte. Une phrase de plus, pour voir que le texte se positionne à la droite de l’image puis en dessous tout en douceur. Encore une fois, laissons faire les choses. Mission accomplie !

Et maintenant une image extrêmement grande. Et sans alignement.

Image Alignment 1200x400
Une immense image pour le plaisir de vos yeux.

L’image ci-dessus, malgré ses 1200 px de large, ne devrait pas sortir de la zone du contenu. Elle devrait restée contenu sans aucun problème dans le flow du contenu.

Image Alignment 300x200
Trop bien vu, cet alignement à droite.

Et maintenant tribord toute avec un alignement à droite. À nouveau il devrait y avoir suffisament d’espace au-dessus, en-dessous et à gauche de l’image. Ça semble tout bon tout ça. Et ne laissez personne vous dire le contraire.

Maintenant , vous devriez voir le texte commencé à glisser gentiment sous l’image alignée à droite. Il devrait toujours y avoir plein d’espace tout autour. Oui, juste comme ça… sinon appelez le dev !

Et voilà jeune Jack Sparrow ! Vous avez survécu aux eaux tumultueuses de l’alignement. Vous pouvez passer au prochain test !