{"id":56054,"date":"2023-10-16T20:16:48","date_gmt":"2023-10-16T18:16:48","guid":{"rendered":"https:\/\/kinqsta.com\/nl\/?p=56054&preview=true&preview_id=56054"},"modified":"2023-10-25T15:08:03","modified_gmt":"2023-10-25T13:08:03","slug":"twenty-twenty-four-thema","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/nl\/blog\/twenty-twenty-four-thema\/","title":{"rendered":"Twenty Twenty-Four: Het nieuwe minimale multifunctionele standaardthema van WordPress"},"content":{"rendered":"

Twenty Twenty-Four<\/strong> is het gloednieuwe standaard WordPress thema<\/a> dat wordt meegeleverd met de volgende WordPress 6.4 release.<\/p>\n

Het idee achter Twenty Twenty-Four<\/a> is dat van een standaardthema dat geschikt is voor elk soort site, ongeacht het onderwerp van de site. Het thema is afgestemd op drie gebruikssituaties: eigenaren van kleine bedrijven, fotografen<\/a> en kunstenaars<\/a>, en schrijvers en bloggers<\/a>.<\/p>\n

Twenty Twenty-Four is meer dan een thema: het is een verzameling templates en patterns<\/a> waarmee je, gecombineerd, een grote verscheidenheid aan websites kunt bouwen. Als zodanig kun je Twenty Twenty-Four beschouwen als een multifunctioneel thema, hoewel het een absoluut minimaal thema is.<\/p>\n

Zoals je kunt verwachten, is Twenty Twenty-Four een blokthema dat volledig compatibel is met alle geweldige dingen die met WordPress 6.4 komen, inclusief het Details blok en verticale tekst.<\/p>\n

Na deze korte intro van het nieuwe WordPress standaardthema zullen we in dit artikel de vele templates, patterns en stijlen verkennen om je te laten zien hoe je een aantrekkelijke, responsieve, bruikbare en toegankelijke website kunt bouwen met Twenty Twenty-Four.<\/p>\n

Start nu de Site Editor, cijfer Cmd + k<\/strong> en voer Templates <\/b>in.<\/p>\n

\"Templates
Templates starten in WordPress 6.4<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Het Twenty Twenty-Four WordPress thema<\/h2>\n

Twenty Twenty-Four geeft ons een perfect voorbeeld van een WordPress blokthema. Als je de themamap in je WordPress installatie<\/a> opent, vind je een uiterst eenvoudig functions.php<\/strong> bestand<\/a>, dat als enige doel heeft om een handvol stylesheets voor specifieke blokken te laden.<\/p>\n

Het Twenty Twenty-Four function bestand is een goed voorbeeld van hoe je een thema kunt optimaliseren door ervoor te zorgen dat specifieke bronnen alleen worden ingesloten als ze nodig zijn. De volgende code roept het stylesheet button-outline.css<\/strong> alleen op als er een knop op de pagina staat:<\/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
Het thema biedt geen functionaliteit aan je WordPress website en je bent volledig afhankelijk van plugins om gedrag aan je pagina’s toe te voegen. Dus het functions.php<\/strong> bestand van Twenty-Four zorgt alleen voor het oproepen van specifieke stylesheets voor specifieke blokken.<\/p>\n
Als we verder gaan met onze verkenning van de Twenty Twenty-Four themamap, zie je dat het style.css<\/strong> bestand alleen een header bevat met de details die nodig zijn om het thema goed te laten werken en geen CSS blokken bevat:<\/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
Je vindt er ook een map met de naam assets<\/strong>, die een map met fonts <\/b>bevat, een set images <\/b>en een map css<\/strong>, die de stylesheet button-outline.css<\/strong> bevat.<\/p>\n
De standaardstijl van Twenty Twenty-Four gebruikt twee lettertypen: Cardo<\/a> voor koppen en Inter<\/a> voor andere tekstelementen.<\/p>\n
\"Cardo
Cardo lettertypevoorbeeld op Google Fonts<\/figcaption><\/figure>\n
De lettertypefamilies Jost<\/a> en Instrument Sans<\/a> zijn ook beschikbaar en worden gebruikt in een paar stijlvariaties.<\/p>\n
Hieronder vind je vier mappen met waar het Twenty Twenty-Four standaardthema om draait:<\/p>\n