{"id":73771,"date":"2023-10-16T19:14:06","date_gmt":"2023-10-16T18:14:06","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=73771&preview=true&preview_id=73771"},"modified":"2023-10-19T12:39:18","modified_gmt":"2023-10-19T11:39:18","slug":"theme-twenty-twenty-four","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-four\/","title":{"rendered":"Twenty Twenty-Four : Le nouveau th\u00e8me WordPress minimal et polyvalent par d\u00e9faut"},"content":{"rendered":"

Twenty Twenty-Four<\/strong> est le tout nouveau th\u00e8me WordPress<\/a> par d\u00e9faut qui sera livr\u00e9 avec la prochaine version de WordPress 6.4.<\/p>\n

L’id\u00e9e derri\u00e8re Twenty Twenty-Four<\/a> est celle d’un th\u00e8me par d\u00e9faut adapt\u00e9 \u00e0 tout type de site, quel que soit le sujet du site. Le th\u00e8me est con\u00e7u pour trois cas d’utilisation : les propri\u00e9taires de petites entreprises, les photographes<\/a> et les artistes<\/a>, ainsi que les \u00e9crivains et les blogueurs<\/a>.<\/p>\n

Plus qu’un th\u00e8me, Twenty Twenty-Four est une collection de mod\u00e8les et de sch\u00e9mas<\/a> qui, combin\u00e9s ensemble, vous permettent de cr\u00e9er une grande vari\u00e9t\u00e9 de sites web. En tant que tel, vous pouvez consid\u00e9rer Twenty Twenty-Four comme un th\u00e8me polyvalent, bien qu’il s’agisse d’un th\u00e8me absolument minimal.<\/p>\n

Comme vous pouvez vous y attendre, Twenty Twenty-Four est un th\u00e8me bas\u00e9 sur des blocs enti\u00e8rement compatible avec toutes les nouveaut\u00e9s de WordPress 6.4, y compris le bloc de d\u00e9tails et le texte vertical.<\/p>\n

Apr\u00e8s cette rapide pr\u00e9sentation du nouveau th\u00e8me par d\u00e9faut de WordPress, nous allons explorer dans cet article les nombreux mod\u00e8les, compositions et styles pour vous montrer comment construire un site web attractif, responsive, utilisable et accessible avec Twenty Twenty-Four.<\/p>\n

Lancez l’\u00c9diteur de site, appuyez sur Cmd + k<\/strong>, et saisissez Mod\u00e8les<\/strong>.<\/p>\n

\"Lancement
Lancement des mod\u00e8les dans WordPress 6.4<\/figcaption><\/figure>
\n
<\/div><\/kinsta-auto-toc><\/p>\n

Le th\u00e8me WordPress Twenty Twenty-Four<\/h2>\n

Twenty Twenty-Four nous donne un exemple parfait de th\u00e8me WordPress bas\u00e9 sur des blocs. Lorsque vous acc\u00e9dez au dossier theme de votre installation WordPress<\/a>, vous trouverez un fichier functions.php<\/strong><\/a> extr\u00eamement simple, dont le seul but est de mettre en file d’attente une poign\u00e9e de feuilles de style pour des blocs sp\u00e9cifiques.<\/p>\n

Le fichier functions de Twenty Twenty-Four est un bon exemple de la mani\u00e8re d’optimiser un th\u00e8me en s’assurant que des ressources sp\u00e9cifiques ne sont int\u00e9gr\u00e9es que lorsqu’elles sont n\u00e9cessaires. Le code suivant n’active la feuille de style button-outline.css<\/strong> que lorsqu’un bouton se trouve sur la page :<\/p>\n

if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :\n\t\/**\n\t * Register custom block styles\n\t *\n\t * @return void\n\t * @since Twenty Twenty-Four 1.0\n\t *\n\t *\/\n\tfunction twentytwentyfour_block_styles() {\n\t\t\/**\n\t\t * The wp_enqueue_block_style() function allows us to enqueue a stylesheet\n\t\t * for a specific block. These will only get loaded when the block is rendered\n\t\t * (both in the editor and on the front end), improving performance\n\t\t * and reducing the amount of data requested by visitors.\n\t\t *\n\t\t * See https:\/\/make.wordpress.org\/core\/2021\/12\/15\/using-multiple-stylesheets-per-block\/ for more info.\n\t\t *\/\n\t\twp_enqueue_block_style(\n\t\t\t'core\/button',\n\t\t\tarray(\n\t\t\t\t'handle' => 'twentytwentyfour-button-style-outline',\n\t\t\t\t'src'    => get_template_directory_uri() . '\/assets\/css\/button-outline.css',\n\t\t\t\t'ver'    => wp_get_theme()->get( 'Version' ),\n\t\t\t)\n\t\t);\n\t}\n\t...\nendif;<\/code><\/pre>\n
Le th\u00e8me ne fournit aucune fonctionnalit\u00e9 \u00e0 votre site web WordPress, et vous vous en remettrez enti\u00e8rement aux extensions pour ajouter du comportement \u00e0 vos pages. Le fichier functions.php<\/strong> de Twenty Twenty-Four ne s’occupe donc que de l’activation de feuilles de style sp\u00e9cifiques pour des blocs sp\u00e9cifiques.<\/p>\n
En continuant notre exploration du dossier du th\u00e8me Twenty Twenty-Four, vous remarquerez que le fichier style.css<\/strong> ne comprend qu’un en-t\u00eate avec les d\u00e9tails n\u00e9cessaires au bon fonctionnement du th\u00e8me et ne contient aucun bloc CSS :<\/p>\n
\/*\nTheme Name: Twenty Twenty-Four\nTheme URI: https:\/\/wordpress.org\/themes\/twentytwentyfour\nAuthor: the WordPress team\nAuthor URI: https:\/\/wordpress.org\nDescription: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.\nRequires at least: 6.2\nTested up to: 6.4\nRequires PHP: 7.0\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: twentytwentyfour\nTags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news\n*\/<\/code><\/pre>\n
Vous trouverez \u00e9galement un dossier assets<\/strong>, qui contient un dossier de polices<\/strong>, un ensemble d’images<\/strong> et un dossier css<\/strong>, qui comprend la feuille de style button-outline.css<\/strong>.<\/p>\n
Le style par d\u00e9faut de Twenty Twenty-Four utilise deux polices : Cardo<\/a> pour les titres et Inter<\/a> pour les autres \u00e9l\u00e9ments de texte.<\/p>\n
\"Aper\u00e7u
Aper\u00e7u de la police Cardo sur Google Fonts<\/figcaption><\/figure>
\nLes familles de polices Jost<\/a> et Instrument Sans<\/a> sont \u00e9galement disponibles et sont utilis\u00e9es dans quelques variations de style.<\/p>\n
Vous trouverez ensuite quatre dossiers contenant le vrai jus du th\u00e8me par d\u00e9faut Twenty Twenty-Four :<\/p>\n