Ajouter comme source préférée sur Google
Avec la sortie de WordPress 7.2 prévue en décembre, un nouveau thème par défaut est en préparation. Rompant avec la tradition, il abandonne le système habituel de dénomination basé sur l’année civile au profit d’un nom plus évocateur.
Baptisé Ipsum, ce nouveau thème est minimaliste, léger et modulaire ; il a été conçu pour la fonctionnalité « Full Site Editing » (FSE) et respecte scrupuleusement les normes modernes de l’éditeur de blocs.
Comme son nom l’indique, Ipsum simplifie l’expérience de blogging et est opérationnel dès que vous commencez à rédiger. Son design est sobre dans les moindres détails, des subtils soulignements pointillés à la typographie intégrée, en passant par un ensemble soigneusement sélectionné de variations de style, axé sur l’accessibilité et la lisibilité.
Ne vous laissez toutefois pas tromper par son caractère minimaliste. Ipsum offre la toile vierge idéale pour donner vie à votre vision créative en tant que blogueur. Plongeons-nous dans ce tout nouveau thème par défaut et découvrons comment en tirer le meilleur parti à l’aide des fonctionnalités natives de WordPress.
Ipsum : un thème minimaliste axé sur l’accessibilité
Ipsum se caractérise par un design minimaliste accordant une grande importance à la lisibilité.
Le nouveau thème par défaut définit six nuances de gris avec des combinaisons à fort contraste, ainsi qu’une seule couleur d’accent. L’arrière-plan par défaut (#fcfcfc) et le corps du texte (#000000bf) offrent un rapport de contraste (CR) de 10,26:1, ce qui leur permet d’obtenir sans difficulté la certification WCAG AAA.
Ipsum prend en charge la navigation au clavier native de WordPress, en affichant un lien « Passer au contenu » sur chaque page. Cela permet aux utilisateurs naviguant à l’aide de la touche Tab de passer directement au contenu principal sans avoir à parcourir les liens de navigation de l’en-tête.
Le thème met également en évidence les liens actifs grâce à sa couleur d’accentuation, ce qui permet aux utilisateurs du clavier d’identifier rapidement l’élément actif.
La typographie joue un rôle majeur dans le confort visuel d’Ipsum, en proposant cinq tailles de police prédéfinies et en prenant en charge la typographie fluide.
Les liens se distinguent uniquement par un subtil soulignement en pointillés. Bien que cela s’inscrive dans l’esthétique minimaliste du thème, cela peut les rendre difficiles à repérer selon les conditions de couleur de la page.
Cela dit, les liens restent faciles à identifier lors de la navigation au clavier grâce au contour de sélection de couleur contrastée.
Examinons maintenant de plus près les fonctionnalités spécifiques d’Ipsum.
Modèles et compositions
Ipsum intègre un ensemble de modèles qui confient la mise en page à des schémas internes. À titre d’exemple, voici le code du modèle page.html :
<!-- wp:pattern {"slug":"ipsum/hidden-page"} /-->
Cette seule ligne de code appelle le modèle caché hidden-page.php, qui contrôle la mise en page et définit les métadonnées nécessaires :
/**
* Title: Pages
* Slug: ipsum/hidden-page
* Template Types: page
* Inserter: no
*
* @package Ipsum
* @since Ipsum 1.0
*/Le thème enregistre des variantes de modèles personnalisées, telles que index-sidebar et archive-sidebar, directement via PHP afin que vous puissiez les sélectionner dans l’éditeur de site.
À l’heure actuelle, une soixantaine de compositions sont disponibles pour vous aider à créer et à mettre en forme votre contenu.
Bien que certaines de ces compositions soient réservées (masquées) aux modèles principaux du thème, la majorité d’entre elles sont entièrement accessibles et vous pouvez les utiliser dans vos pages.
Contenu dynamique avec l’API Block Bindings
Un détail technique intéressant pour les développeurs concerne la manière dont les compositions implémentent l’API Block Bindings. Par exemple, la composition archive-full.php utilise les liaisons comme ceci :
<!-- wp:paragraph
{
"metadata":{
"bindings":{
"content":{
"source":"ipsum/comments-cta"
}
},
"name":"<?php echo esc_html_x( 'Comments CTA', 'Name of the comments call to action paragraph', 'ipsum' ); ?>"
},
"style":{
"typography":{
"fontStyle":"normal","fontWeight":"600"
}
},
"fontSize":"small","fontFamily":"manrope"
}
-->
<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>
<!-- /wp:paragraph -->
La source de liaison sous-jacente est enregistrée dans le fichier functions.php du thème :
if ( ! function_exists( 'ipsum_comments_cta_binding' ) ) :
/**
* Returns the comments call to action for the current post.
*
* @since Ipsum 1.0
* @param array $source_args Block binding source arguments.
* @param WP_Block $block_instance The block instance.
* @return string The call to action text.
*/
function ipsum_comments_cta_binding( $source_args, $block_instance ) {
$post_id = $block_instance->context['postId'] ?? get_the_ID();
if ( get_comments_number( $post_id ) > 0 ) {
$text = __( 'Join the conversation', 'ipsum' );
} else {
$text = __( 'Be the first to comment', 'ipsum' );
}
return '<a href="' . esc_url( get_comments_link( $post_id ) ) . '">' . esc_html( $text ) . '</a>';
}
endif;
if ( ! function_exists( 'ipsum_register_block_bindings' ) ) :
/**
* Registers the comments call-to-action block binding source.
*
* @since Ipsum 1.0
* @return void
*/
function ipsum_register_block_bindings() {
register_block_bindings_source(
'ipsum/comments-cta',
array(
'label' => __( 'Comments call to action', 'ipsum' ),
'get_value_callback' => 'ipsum_comments_cta_binding',
'uses_context' => array( 'postId' ),
)
);
}
endif;
add_action( 'init', 'ipsum_register_block_bindings' );En résumé, la source de liaison ipsum/comments-cta renvoie dynamiquement soit « Rejoignez la conversation », soit « Soyez le premier à commenter », selon que l’article actuel comporte déjà des commentaires ou non.
Typographie fluide et préréglages typographiques
Le fichier theme.json d’Ipsum enregistre plusieurs familles de polices fournies sous forme de polices variables au format .woff2. Celles-ci couvrent les polices sans empattement (Manrope, Inter, Archivo, Archivo Condensed), avec empattement (Besley, STIX Two Text) et à espacement fixe (JetBrains Mono), Inter servant de police de corps par défaut.
Les polices sont hébergées localement, ce qui élimine les dépendances vis-à-vis de tiers telles que Google Fonts et offre aux propriétaires de sites un meilleur contrôle sur le chargement des polices.
Le fichier theme.json définit à la fois des tailles de police fixes et fluides, automatiquement converties en fonctions CSS dynamiques clamp() :
"fontSizes": [
...
{
"fluid": {
"max": "1.75rem",
"min": "1.5rem"
},
"name": "X-Large",
"size": "1.75rem",
"slug": "x-large"
},
{
"fluid": {
"max": "2.1875rem",
"min": "1.625rem"
},
"name": "2X-Large",
"size": "2.1875rem",
"slug": "2-x-large"
}
],Ipsum inclut également cinq préréglages typographiques que vous pouvez sélectionner directement depuis le panneau « Styles globaux » de l’éditeur de site.
Chaque préréglage remplace le tableau fontFamilies afin de changer les combinaisons de polices sans affecter la palette de couleurs active du site.
Variantes de style
7 variations de styles globaux offrent différentes combinaisons de palette de couleurs, de filtre bichromique par défaut et de typographie.
Pour voir comment une variation de style est définie, le code ci-dessous enregistre la variation « Golden Hour ». Il définit le filtre bichromique « Peach on maroon », introduit une nouvelle palette de couleurs et définit la famille de polices Manrope pour la typographie générale du site.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Golden Hour",
"settings": {
"color": {
"duotone": [
{
"colors": [
"#7a1000",
"#ffd9bd"
],
"name": "Peach on maroon",
"slug": "duotone-1"
}
],
"palette": [
{
"color": "#7a1000",
"name": "Color 1",
"slug": "theme-1"
},
{
"color": "#ffd9bd",
"name": "Color 2",
"slug": "theme-2"
},
{
"color": "#ff8c52",
"name": "Color 3",
"slug": "theme-3"
},
{
"color": "#ffd9bd40",
"name": "Color 4",
"slug": "theme-4"
},
{
"color": "#ffd9bd1a",
"name": "Color 5",
"slug": "theme-5"
},
{
"color": "#fff1e8",
"name": "Color 6",
"slug": "theme-6"
}
]
},
"custom": {
"controlScheme": "dark"
}
},
"styles": {
"blocks": {
"core/post-featured-image": {
"filter": {
"duotone": "var:preset|duotone|duotone-1"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--manrope)",
"fontStyle": "normal",
"fontWeight": "500"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--manrope)",
"fontStyle": "normal",
"fontWeight": "400"
}
}
}Les autres variantes de style global suivent la même structure, avec différentes combinaisons de couleurs et de familles de polices.
Variantes de style des blocs
Ipsum inclut également des variantes de style pour quelques blocs. Certaines de ces variantes sont enregistrées via des fichiers JSON stockés dans le répertoire styles/blocks/ du thème. D’autres variantes sont enregistrées dans le fichier « functions ».
Vous pouvez consulter et personnaliser les variantes de style des blocs dans le panneau « Styles globaux » de l’éditeur de site, sous la section « Blocs et éléments ».
Les variantes sont disponibles dans la colonne latérale « Réglages du bloc » de l’éditeur d’articles, ce qui vous permet de les appliquer à des blocs individuels d’un simple clic.
Personnalisation d’Ipsum à l’aide d’un thème enfant
La meilleure façon d’étendre un thème WordPress consiste à créer un thème enfant. Dans l’exemple suivant, vous apprendrez comment procéder en ajoutant une mise en page d’archives en grille Bento asymétrique au thème Ipsum.
Voici les étapes à suivre :
- Étape 1 : Configurer le thème enfant
- Étape 2 : Créer le modèle d’archives Bento
- Étape 3 : Créer le modèle de grille Bento
- Étape 4 : Créer la feuille de style Bento
- Étape 5 : Enregistrer le modèle personnalisé
Étape 1 : Configurer le thème enfant
Commencez par créer un nouveau dossier pour votre thème enfant dans le répertoire wp-content/themes/, et nommez-le ipsum-child ou un nom similaire. À l’intérieur de ce dossier, ajoutez deux fichiers : style.css et functions.php.
Le fichier style.css contient les métadonnées que WordPress utilise pour identifier et gérer le thème. Commencez par ajouter le code suivant :
/*
Theme Name: Ipsum Child
Theme URI: https://example.com/
Description: A custom child theme for the Ipsum default theme
Author: Your Name
Author URI: https://example.com
Template: ipsum
Version: 1.0.0
Text Domain: ipsum-child
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/Ipsum utilise la fonction get_stylesheet_directory_uri() pour enregistrer la feuille de style du thème dans le fichier functions.php. Lorsqu’un thème enfant est actif, cette fonction pointe vers le répertoire du thème enfant, ce qui fait que WordPress ne charge pas la feuille de style du thème parent.
Dans le cas particulier d’Ipsum, pour éviter de perdre la mise en forme du thème parent, vous devez l’ajouter correctement à la file d’attente dans le fichier functions de votre thème enfant.
Cela étant, ajoutez le code suivant au fichier functions de votre thème enfant :
<?php
/**
* Ipsum Child functions and definitions.
*
* @package Ipsum_Child
* @since Ipsum Child 1.0.0
*/
if ( ! function_exists( 'ipsum_child_styles' ) ) :
function ipsum_child_styles() {
wp_deregister_style( 'ipsum-style' );
wp_register_style(
'ipsum-style',
get_template_directory_uri() . '/style.css',
array(),
wp_get_theme( get_template() )->get( 'Version' )
);
wp_enqueue_style(
'ipsum-child-style',
get_stylesheet_uri(),
array( 'ipsum-style' ),
wp_get_theme()->get( 'Version' )
);
}
endif;
add_action( 'wp_enqueue_scripts', 'ipsum_child_styles', 20 );Le fragment de code ci-dessus réenregistre le handle ipsum-style à l’aide de get_template_directory_uri() afin de restaurer la feuille de style du thème parent. Ensuite, il met en file d’attente la feuille de style du thème enfant juste après celle-ci.
Une fois le thème enfant configuré, l’étape suivante consiste à créer le modèle d’archive de grille Bento.
Étape 2 : Créer la composition d’archives Bento
Pour afficher une archive mise en forme sous forme de grille Bento, nous allons réutiliser du code déjà disponible dans le thème parent.
Pour la structure de la composition, nous utiliserons quelques compositions intégrées à Ipsum :
archive-photographic.phppour la requête de grille.archive-columns.phppour le titre, la date, le message « Aucun résultat » et la pagination.hidden-archive.phppour la mise en page du conteneur de modèle.
Dans le répertoire de votre thème enfant, créez les dossiers patterns/ et templates/, puis ajoutez-y les fichiers suivants :
patterns/archive-bento.phppatterns/hidden-archive-bento.phptemplates/archive.html
La structure de votre thème enfant devrait désormais se présenter comme ceci :
ipsum-child/
├── style.css
├── functions.php
├── patterns/
│ ├── archive-bento.php
│ └── hidden-archive-bento.php
└── templates/
└── archive.htmlEnsuite, copiez le code du modèle hidden-archive.php du thème parent et collez-le dans le fichier hidden-archive-bento.php de votre thème enfant. Mettez ensuite à jour les métadonnées d’en-tête, le domaine de texte et l’appel du slug du modèle comme suit :
<?php
/**
* Title: All Archives Bento
* Slug: ipsum-child/hidden-archive-bento
* Template Types: archive, category, tag
* Inserter: no
*
* @package Ipsum_Child
* @since Ipsum Child 1.0.0
*/
?>
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","metadata":{"name":"<?php echo esc_html_x( 'Body', 'Group block defining the main content area', 'ipsum-child' ); ?>"},"layout":{"type":"default"}} -->
<main class="wp-block-group"><!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Section Title', 'Group containing the archive title', 'ipsum-child' ); ?>"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:query-title {"type":"archive"} /--></div>
<!-- /wp:group -->
<!-- wp:pattern {"slug":"ipsum-child/archive-bento"} /--></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->
<!-- wp:template-part {"slug":"search-bar","className":"sticky-bottom"} /-->En substance, nous avons adapté la composition hidden-archive.php du thème parent pour en faire notre composition ipsum-child/hidden-archive-bento.
Étape 3 : Créer le modèle Bento
Nous devons à présent créer le modèle Bento proprement dit dans le fichier patterns/archive-bento.php. Là encore, nous allons exploiter le code déjà disponible dans Ipsum.
Vous trouverez ci-dessous le code complet du modèle archive-bento.php, annoté avec l’origine de chaque extrait de code :
<?php
/**
* Title: Archive Bento Grid
* Slug: ipsum-child/archive-bento
* Categories: posts
* Block Types: core/query
* Viewport width: 1280
* Description: A bento grid of posts: one large card, wide and tall cards, and small cards, repeating every ten posts.
*
* @package Ipsum_Child
* @since Ipsum Child 1.0.0
*/
?>
<?php
/**
* Query Loop
* Origin: archive-columns.php.
* Changed: perPage, name, text domain.
*/
?>
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"excludeCurrent":null},"metadata":{"categories":["posts"],"name":"<?php echo esc_html_x( 'Archive Bento Grid', 'Name of the Archive Bento Grid query', 'ipsum-child' ); ?>"},"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-query alignwide"><!-- wp:post-template {"className":"bento-grid","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":4}} -->
<?php
/**
* Post Template
* Origin: archive-photographic.php.
* Changed: gap, columns.
* New: class bento-grid.
*/
/** Card
* Origin: hero-colophon.php, cta-membership.php.
* New: name, justifyContent stretch.
*/
?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Bento Card', 'Name of the group holding a bento card', 'ipsum-child' ); ?>"},"className":"is-style-crop-contents","style":{"border":{"radius":{"topLeft":"10px","topRight":"10px","bottomLeft":"10px","bottomRight":"10px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"theme-5","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group is-style-crop-contents has-theme-5-background-color has-background" style="border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:post-featured-image {"isLink":true,"sizeSlug":"large"} /-->
<?php
/** Featured image
* Origin: archive-standard.php
* Changed: removed padding.
*/
?>
<?php
/** Title and Meta
* Origin: archive-columns.php.
* Changed: removed selfStretch, gap.
*/ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Title and Meta', 'Name of the group holding the post title and meta', 'ipsum-child' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
<?php
/**
* Post Title and Post Date
* Origin: archive-columns.php.
*/ ?>
<!-- wp:post-date {"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->
<?php
/** No results
* Origin: archive-columns.php.
* Changed: text domain only.
*/ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'No Results Wrapper', 'Name of the group shown when a query has no results', 'ipsum-child' ); ?>"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p><?php esc_html_e( 'No posts have been published in this section yet.', 'ipsum-child' ); ?></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:group -->
<?php
/**
* Pagination
* Origin: archive-columns.php.
* Changed: text domain only.
*/ ?>
<!-- wp:group {"metadata":{"name":"<?php echo esc_html_x( 'Pagination Wrapper', 'Name of the group wrapping the pagination', 'ipsum-child' ); ?>"},"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:group --></div>
<!-- /wp:query -->Dans le code ci-dessus, nous avons réutilisé et recombiné les éléments de base intégrés fournis par Ipsum.
Voici les principales modifications :
-
Bloc de requête : dans la boucle de requête, nous avons mis à jour le paramètre
perPagepour le définir sur10. Ceci est essentiel pour le rendu visuel de la grille Bento, car les règles CSS de l’étape suivante ciblent un cycle répétitif de 10 éléments (10n) et répètent dynamiquement une séquence alternée de cartes grandes, larges, hautes et compactes. -
Bloc Post Template : nous avons ajouté la classe CSS personnalisée
bento-gridafin de cibler la grille via le CSS et d’appliquer la mise en page asymétrique. -
Bloc Groupe : le bloc « Groupe » utilise une mise en page flex verticale, tandis que le CSS configure chaque carte pour qu’elle occupe toute sa zone de grille et permet à l’image mise en avant de s’étendre dans l’espace disponible.
-
Domaine de texte : toutes les chaînes de caractères ont été mises à jour pour utiliser le domaine de texte
ipsum-child.
Grâce à ces modifications, la structure en blocs de la composition est désormais complète. Il ne reste plus qu’à définir les propriétés CSS qui détermineront sa mise en page visuelle.
Étape 4 : Créer la feuille de style Bento
Ouvrez le fichier style.css du thème enfant et collez le code suivant :
.bento-grid {
grid-auto-flow: dense;
grid-auto-rows: minmax(18rem, auto);
}
.bento-grid > li:nth-child(10n + 1) {
grid-column: span 2;
grid-row: span 2;
}
.bento-grid > li:nth-child(10n + 6) {
grid-column: span 2;
}
.bento-grid > li:nth-child(10n + 7),
.bento-grid > li:nth-child(10n + 8) {
grid-row: span 2;
}
.bento-grid > li > .wp-block-group {
height: 100%;
}
.bento-grid .wp-block-post-featured-image {
position: relative;
flex: 1 1 0;
min-height: 8rem;
margin: 0;
}
.bento-grid .wp-block-post-featured-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 781px) {
.bento-grid.is-layout-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento-grid > li:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
.bento-grid > li:nth-child(10n + 1),
.bento-grid > li:nth-child(10n + 6) {
grid-column: span 2;
}
}
@media (max-width: 480px) {
.bento-grid.is-layout-grid {
grid-template-columns: minmax(0, 1fr);
}
.bento-grid > li:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
}Voici une explication détaillée de cette feuille de style :
grid-auto-flow: dense: active l’agencement dense dans CSS Grid. Chaque ligne de la grille a une hauteur minimale de18rem..bento-grid > li:nth-child(10n+1): le modèle de grille cible un cycle de 10 articles (10n). Le premier élément de la boucle (10n+1) devient la carte principale, s’étendant sur 2 colonnes et 2 lignes.li:nth-child(10n+6): Le sixième article s’étend sur deux colonnes. Les septième et huitième articles s’étendent chacun sur deux lignes..wp-block-post-featured-image img: L’image mise en avant est positionnée de manière absolue à l’intérieur d’un conteneur flex dont la base est à zéro (flex: 1 1 0) avec la propriétéobject-fit: cover. Cela garantit que l’image s’adapte parfaitement à la ligne de la grille.
Les requêtes média redéfinissent le nombre de colonnes de la grille pour les écrans plus petits.
Étape 5 : Enregistrer le modèle personnalisé
Ensuite, ouvrez le fichier templates/archive.html et ajoutez le code suivant :
<!-- wp:pattern {"slug":"ipsum-child/hidden-archive-bento"} /-->
Le nom du fichier templates/archive.html respecte la hiérarchie standard des modèles WordPress et remplace le modèle d’archive par défaut du thème parent lorsqu’aucun modèle plus spécifique n’a la priorité.
Si vous souhaitez également remplacer la mise en page de la page d’accueil, il vous suffit de copier le même code dans un fichier templates/index.html.
Le code qu’il contient appelle simplement le modèle de conteneur hidden-archive-bento, ce qui permet de conserver une structure de modèle épurée et modulaire.
Il est temps de procéder aux tests. Téléchargez votre thème enfant et activez-le. Passez ensuite à la section suivante.
Le résultat
Vos modèles sont désormais prêts à être utilisés dans toutes les archives de votre site. Vous pouvez également ajouter le modèle Bento à des pages statiques, en définissant inherit sur false et en configurant les paramètres de requête requis, si nécessaire.
Comme indiqué précédemment, pour appliquer la même mise en page à la page d’accueil du site, vous devrez également créer un fichier templates/index.html avec la même référence de modèle.
L’image finale montre la page d’accueil de notre site de test, qui présente une belle mise en page de type « Bento Grid ».
Un thème léger et accessible
Ipsum réunit des fonctionnalités d’édition WordPress modernes, des compositions réutilisables et des options de mise en forme flexibles au sein d’un design délibérément minimaliste. Une fois que vous aurez compris comment ses modèles s’articulent entre eux, vous pourrez étendre le thème bien au-delà de ses mises en page de blog par défaut. La grille Bento présentée dans ce guide n’est qu’un exemple parmi d’autres de ce que vous pouvez créer à l’aide d’un thème enfant basé sur Ipsum.
Si la vitesse et les performances sont vos priorités absolues, n’oubliez pas que le code ne représente que la moitié de l’équation. La rapidité des sites web dépend également de la mise en cache, des optimisations, de la configuration du site et de l’infrastructure d’hébergement. Consultez nos plans et trouvez celui qui correspond le mieux aux besoins de votre site.
Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.
