A quoi sert le fichier theme .json dans WordPress
Le fichier theme.json de WordPress permet de définir un certain nombre de paramètres pour personnaliser un thème WordPress. Voici quelques exemples :
- Nom et description : vous pouvez définir le nom et la description de votre thème.
{ "name": "Nom de votre thème", "description": "Description de votre thème" }- Version : vous pouvez définir la version de votre thème.
jsonCopy code<code>{ "version": "1.0.0" }</code>- Auteur : vous pouvez définir le nom et l’URL de l’auteur de votre thème.
jsonCopy code<code>{ "author": { "name": "Votre nom", "url": "URL de votre site web"} }</code>- Couleurs : vous pouvez définir les couleurs de votre thème, y compris la couleur d’arrière-plan, la couleur du texte et la couleur des liens.
jsonCopy code<code>{ "color": { "background": "#ffffff", "text": "#333333", "link":"#0073aa" } }</code>- Options de blocs : vous pouvez définir les paramètres de blocs pour l’éditeur de blocs de WordPress. Par exemple, vous pouvez définir les styles de blocs par défaut, les polices, les tailles de texte et les couleurs.
jsonCopy code<code>{ "blocks": { "defaultStyles": { "color": "#333333","backgroundColor": "#f3f3f3", "fontSize": "16px", "padding":"20px" }, "defaultFont": { "size": "16px", "family": "Arial, sans-serif" } } }</code>- Options de personnalisation : vous pouvez définir les options de personnalisation pour le panneau de personnalisation de votre thème, par exemple, les options de logo, de bannière, de mise en page, etc.
jsonCopy code<code>{ "customizations": { "logo": { "default": "", "type": "image","label": "Logo", "description": "Ajoutez un logo personnalisé pour votre site web." }, "banner": { "default": "", "type": "image","label": "Bannière", "description": "Ajoutez une bannière personnalisée pour votre site web." }, "layout": { "default":"content-sidebar", "type": "radio", "label": "Mise en page","description": "Choisissez une mise en page pour votre site web.","choices": { "content-sidebar": "Contenu avec barre latérale","full-width": "Plein écran" } } } }</code>- Police de caractères : vous pouvez définir les polices de caractères pour les différents éléments de votre thème, tels que le corps du texte, les titres, les sous-titres, etc.
jsonCopy code<code>{ "typography": { "body": { "family": "Open Sans", "size": "16px","weight": 400 }, "heading": { "family": "Montserrat", "size":"36px", "weight": 700 }, "subheading": { "family": "Montserrat","size": "24px", "weight": 600 } } }</code>- Options de navigation : vous pouvez définir les options de navigation pour votre thème, telles que le menu principal et le menu mobile.
jsonCopy code<code>{ "navigation": { "mainMenu": { "label": "Menu principal","items": [ { "title": "Accueil", "url": "/" }, { "title": "À propos", "url": "/about" }, { "title": "Blog", "url": the "/blog" }, {"title": "Contact", "url": "/contact" } ] }, "mobileMenu": {"label": "Menu mobile", "items": [ { "title": "Accueil", "url":"/" }, { "title": "À propos", "url": "/about" }, { "title":"Blog", "url": "/blog" }, { "title": "Contact", "url": "/contact"} ] } } }</code>- Fonctions supplémentaires : vous pouvez ajouter des fonctions supplémentaires à votre thème, telles que la prise en charge des miniatures, des commentaires, des formulaires de contact, etc.
jsonCopy code<code>{ "supports": { "post-thumbnails": true, "custom-logo": true,"comments": true, "contact-form-7": true } }</code>- Options d’affichage : vous pouvez définir les options d’affichage pour votre thème, telles que le nombre d’articles affichés sur une page, la pagination, etc.
jsonCopy code<code>{ "display": { "postsPerPage": 10, "pagination": { "prev":"Précédent", "next": "Suivant" } } }</code>Ce ne sont que quelques exemples de paramètres que vous pouvez définir dans le fichier theme.json. En général, les possibilités de personnalisation de votre thème WordPress sont presque illimitées en utilisant ce fichier.
Utiliser plusieurs fichiers de configuration pour votre thème WordPress pour rendre la configuration plus lisible et exportable dans d’autres projets
Il est possible d’utiliser plusieurs fichiers pour rendre la configuration de votre thème WordPress plus lisible. Vous pouvez organiser les différents paramètres dans différents fichiers selon leur type ou leur fonction.
Par exemple, vous pouvez créer un fichier colors.json pour définir les couleurs de votre thème, un fichier typography.json pour définir les polices de caractères, un fichier navigation.json pour définir les options de navigation, etc. Vous pouvez ensuite inclure ces fichiers dans votre fichier theme.json à l’aide de la propriété "extends" :
jsonCopy code<code>{ "extends": [ "colors.json", "typography.json", "navigation.json"] }</code>Ainsi, lorsque vous modifiez un paramètre dans l’un des fichiers inclus, cela se répercutera automatiquement sur votre fichier theme.json principal.
Cette méthode d’inclusion de fichiers vous permet de diviser votre fichier de configuration en parties plus petites et plus gérables, ce qui facilite
la lecture, la compréhension et la maintenance de votre thème WordPress.
Créer un block cover full height avec un titre
{
"version": 1,
"settings": {
"cover": {
"allowedBlocks": ["core/cover"],
"defaultBlockName": "core/cover",
"styles": [
{
"name": "full-width",
"label": "Full Width",
"isDefault": true
}
]
}
},
"blockStyles": {
"core/cover": {
"full-width": {
"name": "full-width",
"label": "Full Width",
"isDefault": true
}
}
},
"blockSupports": {
"core/cover": {
"align": true,
"anchor": true,
"className": true,
"customClassName": true,
"html": false,
"inserter": true,
"layout": true,
"mode": true,
"multiple": true,
"reusable": true,
"typography": true
}
},
"blocks": {
"core/cover": {
"attributes": {
"url": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "src"
},
"id": {
"type": "number",
"source": "attribute",
"selector": "img",
"attribute": "data-id"
},
"height": {
"type": "string",
"default": "100vh"
},
"align": {
"type": "string"
},
"className": {
"type": "string"
}
},
"supports": {
"align": ["full"],
"anchor": true,
"html": false
},
"usesContext": ["cover"],
"title": "Cover",
"description": "Create a full-width cover with a title.",
"category": "common",
"icon": "cover-image",
"keywords": ["image", "cover"],
"styles": [
{
"name": "default",
"label": "Default",
"isDefault": true
}
],
"example": {
"attributes": {
"url": "https://example.com/wp-content/uploads/2023/04/cover-image.jpg"
},
"innerBlocks": [
{
"name": "core/heading",
"attributes": {
"content": "Post Title"
}
}
]
}
}
}
}