{"id":85279,"date":"2026-11-09T08:26:05","date_gmt":"2026-11-09T07:26:05","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=85279&preview=true&preview_id=85279"},"modified":"2026-11-09T12:08:33","modified_gmt":"2026-11-09T11:08:33","slug":"theme-wordpress-ipsum","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-ipsum\/","title":{"rendered":"D\u00e9couvrez le th\u00e8me WordPress Ipsum et comment le personnaliser"},"content":{"rendered":"

Avec la sortie de WordPress 7.2 pr\u00e9vue en d\u00e9cembre, un nouveau th\u00e8me par d\u00e9faut est en pr\u00e9paration. Rompant avec la tradition, il abandonne le syst\u00e8me habituel de d\u00e9nomination bas\u00e9 sur l’ann\u00e9e civile au profit d’un nom plus \u00e9vocateur.<\/p>\n

Baptis\u00e9 Ipsum<\/a>, ce nouveau th\u00e8me est minimaliste, l\u00e9ger et modulaire ; il a \u00e9t\u00e9 con\u00e7u pour la fonctionnalit\u00e9 \u00ab Full Site Editing \u00bb<\/a> (FSE) et respecte scrupuleusement les normes modernes de l\u2019\u00e9diteur de blocs.<\/p>\n

Comme son nom l\u2019indique, Ipsum<\/strong> simplifie l\u2019exp\u00e9rience de blogging et est op\u00e9rationnel d\u00e8s que vous commencez \u00e0 r\u00e9diger. Son design est sobre dans les moindres d\u00e9tails, des subtils soulignements pointill\u00e9s \u00e0 la typographie int\u00e9gr\u00e9e, en passant par un ensemble soigneusement s\u00e9lectionn\u00e9 de variations de style<\/a>, ax\u00e9 sur l\u2019accessibilit\u00e9 et la lisibilit\u00e9.<\/p>\n

Ne vous laissez toutefois pas tromper par son caract\u00e8re minimaliste. Ipsum offre la toile vierge id\u00e9ale pour donner vie \u00e0 votre vision cr\u00e9ative en tant que blogueur. Plongeons-nous dans ce tout nouveau th\u00e8me par d\u00e9faut et d\u00e9couvrons comment en tirer le meilleur parti \u00e0 l\u2019aide des fonctionnalit\u00e9s natives de WordPress.

<\/div><\/kinsta-auto-toc><\/p>\n

Ipsum : un th\u00e8me minimaliste ax\u00e9 sur l\u2019accessibilit\u00e9<\/h2>\n

Ipsum<\/a> se caract\u00e9rise par un design minimaliste accordant une grande importance \u00e0 la lisibilit\u00e9.<\/p>\n

\"Aper\u00e7u
Aper\u00e7u d\u2019un article unique cr\u00e9\u00e9 avec le th\u00e8me Ipsum.<\/figcaption><\/figure>\n

Le nouveau th\u00e8me par d\u00e9faut d\u00e9finit six nuances de gris avec des combinaisons \u00e0 fort contraste, ainsi qu\u2019une seule couleur d\u2019accent. L\u2019arri\u00e8re-plan par d\u00e9faut (#fcfcfc<\/code>) et le corps du texte (#000000bf<\/code>) offrent un rapport de contraste<\/a> (CR) de 10,26:1, ce qui leur permet d\u2019obtenir sans difficult\u00e9 la certification WCAG AAA.<\/p>\n

\"Titres,
Titres, citations et blocs de tableaux dans le th\u00e8me Ipsum.<\/figcaption><\/figure>\n

Ipsum prend en charge la navigation au clavier native de WordPress, en affichant un lien \u00ab Passer au contenu \u00bb sur chaque page. Cela permet aux utilisateurs naviguant \u00e0 l\u2019aide de la touche Tab de passer directement au contenu principal sans avoir \u00e0 parcourir les liens de navigation de l\u2019en-t\u00eate.<\/p>\n

\"Lien
Lien \u00ab Passer au contenu \u00bb dans le th\u00e8me Ipsum.<\/figcaption><\/figure>\n

Le th\u00e8me met \u00e9galement en \u00e9vidence les liens actifs gr\u00e2ce \u00e0 sa couleur d\u2019accentuation, ce qui permet aux utilisateurs du clavier d\u2019identifier rapidement l\u2019\u00e9l\u00e9ment actif.<\/p>\n

\"Un
Un titre en accord\u00e9on mis en \u00e9vidence lors de la navigation au clavier.<\/figcaption><\/figure>\n

La typographie joue un r\u00f4le majeur dans le confort visuel d\u2019Ipsum, en proposant cinq tailles de police pr\u00e9d\u00e9finies et en prenant en charge la typographie fluide<\/a>.<\/p>\n

\"Un
Un aper\u00e7u des familles de polices d\u2019Ipsum dans WordPress 7.2.<\/figcaption><\/figure>\n

Les liens se distinguent uniquement par un subtil soulignement en pointill\u00e9s. Bien que cela s\u2019inscrive dans l\u2019esth\u00e9tique minimaliste du th\u00e8me, cela peut les rendre difficiles \u00e0 rep\u00e9rer selon les conditions de couleur de la page.<\/p>\n

Cela dit, les liens restent faciles \u00e0 identifier lors de la navigation au clavier gr\u00e2ce au contour de s\u00e9lection de couleur contrast\u00e9e.<\/p>\n

\"Liens
Liens clairement mis en \u00e9vidence lors de la navigation au clavier dans le th\u00e8me Ipsum.<\/figcaption><\/figure>\n

Examinons maintenant de plus pr\u00e8s les fonctionnalit\u00e9s sp\u00e9cifiques d\u2019Ipsum.<\/p>\n

Mod\u00e8les et compositions<\/h2>\n

Ipsum int\u00e8gre un ensemble de mod\u00e8les<\/a> qui confient la mise en page \u00e0 des sch\u00e9mas internes. \u00c0 titre d\u2019exemple, voici le code du mod\u00e8le page.html<\/code> :<\/p>\n

<!-- wp:pattern {\"slug\":\"ipsum\/hidden-page\"} \/-->\n<\/code><\/pre>\n
Cette seule ligne de code appelle le mod\u00e8le cach\u00e9 hidden-page.php<\/code>, qui contr\u00f4le la mise en page et d\u00e9finit les m\u00e9tadonn\u00e9es n\u00e9cessaires :<\/p>\n
\/**\n * Title: Pages\n * Slug: ipsum\/hidden-page\n * Template Types: page\n * Inserter: no\n *\n * @package Ipsum\n * @since Ipsum 1.0\n *\/<\/code><\/pre>\n
Le th\u00e8me enregistre des variantes de mod\u00e8les personnalis\u00e9es, telles que index-sidebar<\/code> et archive-sidebar<\/code>, directement via PHP afin que vous puissiez les s\u00e9lectionner dans l\u2019\u00e9diteur de site.<\/p>\n
\"Vous
Vous pouvez d\u00e9finir le mod\u00e8le de page dans l\u2019\u00e9diteur d\u2019articles.<\/figcaption><\/figure>\n
\u00c0 l\u2019heure actuelle, une soixantaine de compositions sont disponibles pour vous aider \u00e0 cr\u00e9er et \u00e0 mettre en forme votre contenu.<\/p>\n
\"Parcourir
Parcourir les compositions dans l\u2019\u00e9diteur de site.<\/figcaption><\/figure>\n
Bien que certaines de ces compositions soient r\u00e9serv\u00e9es (masqu\u00e9es) aux mod\u00e8les principaux du th\u00e8me, la majorit\u00e9 d\u2019entre elles sont enti\u00e8rement accessibles et vous pouvez les utiliser dans vos pages.<\/p>\n
Contenu dynamique avec l\u2019API Block Bindings<\/h3>\n
Un d\u00e9tail technique int\u00e9ressant pour les d\u00e9veloppeurs concerne la mani\u00e8re dont les compositions impl\u00e9mentent l\u2019API Block Bindings<\/a>. Par exemple, la composition archive-full.php<\/code> utilise les liaisons comme ceci :<\/p>\n
<!-- wp:paragraph \n{\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"ipsum\/comments-cta\"\n\t\t\t}\n\t\t},\n\t\t\"name\":\"<?php echo esc_html_x( 'Comments CTA', 'Name of the comments call to action paragraph', 'ipsum' ); ?>\"\n\t},\n\t\"style\":{\n\t\t\"typography\":{\n\t\t\t\"fontStyle\":\"normal\",\"fontWeight\":\"600\"\n\t\t}\n\t},\n\t\"fontSize\":\"small\",\"fontFamily\":\"manrope\"\n} \n-->\n<p class=\"has-manrope-font-family has-small-font-size\" style=\"font-style:normal;font-weight:600\"><?php esc_html_e( 'Join the conversation', 'ipsum' ); ?><\/p>\n<!-- \/wp:paragraph -->\n<\/code><\/pre>\n
 La source de liaison sous-jacente est enregistr\u00e9e dans le fichier functions.php<\/code>\u00a0du th\u00e8me :<\/p>\n
if ( ! function_exists( 'ipsum_comments_cta_binding' ) ) :\n\t\/**\n\t * Returns the comments call to action for the current post.\n\t *\n\t * @since Ipsum 1.0\n\t * @param array    $source_args    Block binding source arguments.\n\t * @param WP_Block $block_instance The block instance.\n\t * @return string The call to action text.\n\t *\/\n\tfunction ipsum_comments_cta_binding( $source_args, $block_instance ) {\n\t\t$post_id = $block_instance->context['postId'] ?? get_the_ID();\n\n\t\tif ( get_comments_number( $post_id ) > 0 ) {\n\t\t\t$text = __( 'Join the conversation', 'ipsum' );\n\t\t} else {\n\t\t\t$text = __( 'Be the first to comment', 'ipsum' );\n\t\t}\n\n\t\treturn '<a href=\"' . esc_url( get_comments_link( $post_id ) ) . '\">' . esc_html( $text ) . '<\/a>';\n\t}\nendif;\n\nif ( ! function_exists( 'ipsum_register_block_bindings' ) ) :\n\t\/**\n\t * Registers the comments call-to-action block binding source.\n\t *\n\t * @since Ipsum 1.0\n\t * @return void\n\t *\/\n\tfunction ipsum_register_block_bindings() {\n\t\tregister_block_bindings_source(\n\t\t\t'ipsum\/comments-cta',\n\t\t\tarray(\n\t\t\t\t'label'              => __( 'Comments call to action', 'ipsum' ),\n\t\t\t\t'get_value_callback' => 'ipsum_comments_cta_binding',\n\t\t\t\t'uses_context'       => array( 'postId' ),\n\t\t\t)\n\t\t);\n\t}\nendif;\nadd_action( 'init', 'ipsum_register_block_bindings' );<\/code><\/pre>\n
En r\u00e9sum\u00e9, la source de liaison ipsum\/comments-cta<\/code> renvoie dynamiquement soit \u00ab Rejoignez la conversation \u00bb, soit \u00ab Soyez le premier \u00e0 commenter \u00bb, selon que l\u2019article actuel comporte d\u00e9j\u00e0 des commentaires ou non.<\/p>\n
Typographie fluide et pr\u00e9r\u00e9glages typographiques<\/h2>\n
Le fichier theme.json<\/code> d\u2019Ipsum enregistre plusieurs familles de polices fournies sous forme de polices variables<\/a> au format .woff2<\/code>. Celles-ci couvrent les polices sans empattement (Manrope, Inter, Archivo, Archivo Condensed), avec empattement (Besley, STIX Two Text) et \u00e0 espacement fixe (JetBrains Mono), Inter servant de police de corps par d\u00e9faut.<\/p>\n
\"Ipsum
Ipsum utilise JetBrains Mono pour la mise en forme du code.<\/figcaption><\/figure>\n
Les polices sont h\u00e9berg\u00e9es localement, ce qui \u00e9limine les d\u00e9pendances vis-\u00e0-vis de tiers telles que Google Fonts<\/a> et offre aux propri\u00e9taires de sites un meilleur contr\u00f4le sur le chargement des polices.<\/p>\n
Le fichier theme.json<\/code> d\u00e9finit \u00e0 la fois des tailles de police fixes et fluides, automatiquement converties en fonctions CSS dynamiques clamp()<\/code><\/a> :<\/p>\n
\"fontSizes\": [\n\t...\n\t{\n\t\t\"fluid\": {\n\t\t\t\"max\": \"1.75rem\",\n\t\t\t\"min\": \"1.5rem\"\n\t\t},\n\t\t\"name\": \"X-Large\",\n\t\t\"size\": \"1.75rem\",\n\t\t\"slug\": \"x-large\"\n\t},\n\t{\n\t\t\"fluid\": {\n\t\t\t\"max\": \"2.1875rem\",\n\t\t\t\"min\": \"1.625rem\"\n\t\t},\n\t\t\"name\": \"2X-Large\",\n\t\t\"size\": \"2.1875rem\",\n\t\t\"slug\": \"2-x-large\"\n\t}\n],<\/code><\/pre>\n
Ipsum inclut \u00e9galement cinq pr\u00e9r\u00e9glages typographiques que vous pouvez s\u00e9lectionner directement depuis le panneau \u00ab Styles globaux \u00bb de l\u2019\u00e9diteur de site.<\/p>\n
Chaque pr\u00e9r\u00e9glage remplace le tableau fontFamilies<\/code> afin de changer les combinaisons de polices sans affecter la palette de couleurs active du site.<\/p>\n
\"Pr\u00e9r\u00e9glages
Pr\u00e9r\u00e9glages typographiques d\u2019Ipsum dans l\u2019\u00e9diteur de site.<\/figcaption><\/figure>\n
Variantes de style<\/h2>\n
7 variations de styles globaux<\/a> offrent diff\u00e9rentes combinaisons de palette de couleurs, de filtre bichromique par d\u00e9faut et de typographie.<\/p>\n
\"Panneau
Panneau \u00ab Styles globaux \u00bb d\u2019Ipsum dans l\u2019\u00e9diteur de site WordPress.<\/figcaption><\/figure>\n
Pour voir comment une variation de style est d\u00e9finie, le code ci-dessous enregistre la variation \u00ab Golden Hour<\/strong> \u00bb. Il d\u00e9finit le filtre bichromique \u00ab Peach on maroon<\/strong> \u00bb, introduit une nouvelle palette de couleurs et d\u00e9finit la famille de polices Manrope<\/strong> pour la typographie g\u00e9n\u00e9rale du site.<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"title\": \"Golden Hour\",\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [\n\t\t\t\t\t\t\"#7a1000\",\n\t\t\t\t\t\t\"#ffd9bd\"\n\t\t\t\t\t],\n\t\t\t\t\t\"name\": \"Peach on maroon\",\n\t\t\t\t\t\"slug\": \"duotone-1\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#7a1000\",\n\t\t\t\t\t\"name\": \"Color 1\",\n\t\t\t\t\t\"slug\": \"theme-1\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd\",\n\t\t\t\t\t\"name\": \"Color 2\",\n\t\t\t\t\t\"slug\": \"theme-2\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ff8c52\",\n\t\t\t\t\t\"name\": \"Color 3\",\n\t\t\t\t\t\"slug\": \"theme-3\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd40\",\n\t\t\t\t\t\"name\": \"Color 4\",\n\t\t\t\t\t\"slug\": \"theme-4\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#ffd9bd1a\",\n\t\t\t\t\t\"name\": \"Color 5\",\n\t\t\t\t\t\"slug\": \"theme-5\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"color\": \"#fff1e8\",\n\t\t\t\t\t\"name\": \"Color 6\",\n\t\t\t\t\t\"slug\": \"theme-6\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t\"custom\": {\n\t\t\t\"controlScheme\": \"dark\"\n\t\t}\n\t},\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/post-featured-image\": {\n\t\t\t\t\"filter\": {\n\t\t\t\t\t\"duotone\": \"var:preset|duotone|duotone-1\"\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t\"elements\": {\n\t\t\t\"heading\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontFamily\": \"var(--wp--preset--font-family--manrope)\",\n\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\"fontWeight\": \"500\"\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamily\": \"var(--wp--preset--font-family--manrope)\",\n\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\"fontWeight\": \"400\"\n\t\t}\n\t}\n}<\/code><\/pre>\n
Les autres variantes de style global suivent la m\u00eame structure, avec diff\u00e9rentes combinaisons de couleurs et de familles de polices.<\/p>\n
Variantes de style des blocs<\/h3>\n
Ipsum inclut \u00e9galement des variantes de style pour quelques blocs. Certaines de ces variantes sont enregistr\u00e9es via des fichiers JSON stock\u00e9s dans le r\u00e9pertoire styles\/blocks\/<\/code> du th\u00e8me. D\u2019autres variantes sont enregistr\u00e9es dans le fichier \u00ab functions \u00bb.<\/p>\n
Vous pouvez consulter et personnaliser les variantes de style des blocs dans le panneau \u00ab Styles globaux \u00bb de l\u2019\u00e9diteur de site, sous la section \u00ab Blocs et \u00e9l\u00e9ments<\/strong> \u00bb.<\/p>\n
\"Variantes
Variantes de style du bloc \u00ab Paragraphe \u00bb dans le panneau \u00ab Styles globaux \u00bb de l\u2019\u00e9diteur de site.<\/figcaption><\/figure>\n
Les variantes sont disponibles dans la colonne lat\u00e9rale \u00ab R\u00e9glages du bloc \u00bb de l\u2019\u00e9diteur d\u2019articles, ce qui vous permet de les appliquer \u00e0 des blocs individuels d\u2019un simple clic.<\/p>\n
\"Application
Application des variantes de style des blocs \u00e0 partir de la colonne lat\u00e9rale R\u00e9glages du bloc.<\/figcaption><\/figure>\n
Personnalisation d\u2019Ipsum \u00e0 l\u2019aide d\u2019un th\u00e8me enfant<\/h2>\n
La meilleure fa\u00e7on d\u2019\u00e9tendre un th\u00e8me WordPress consiste \u00e0 cr\u00e9er un th\u00e8me enfant<\/a>. Dans l\u2019exemple suivant, vous apprendrez comment proc\u00e9der en ajoutant une mise en page d\u2019archives en grille Bento asym\u00e9trique au th\u00e8me Ipsum.<\/p>\n
Voici les \u00e9tapes \u00e0 suivre :<\/p>\n