Want to make creations as awesome as this one?

Ressources Chapitre 2

Transcript

LES RESSOURCES

CHAPITRE 2 : CRÉER UN THEME ENFANT

MODULE 10

CRÉER UN THÈME ENFANT

Comment créer un thème enfant pour votre site Web Divi ?

Si vous personnalisez votre site Divi avec du code, vous risquez de vos personnalisations lors de la mise à jour de Divi.

Que diriez-vous de modifier votre design et ensuite d’être sur de garder vos modifications ?

Eh bien, la solution à tous ces problèmes est d'utiliser un thème enfant. Nous allons vous apprendre comment créer un thème enfant pour votre site Divi à partir de zéro, ou d’un simple clic....



Qu'est-ce qu'un thème pour enfant et pourquoi en avez- vous besoin ?

Un thème enfant est une extension d'un thème parent et peut avoir ses propres fonctions, styles et designs indépendamment du thème parent.

Utilisez le générateur de Divi Page et utilisez n'importe quel module pour créer le raccourci.


Vous pouvez modifier le style du module comme d'habitude. Une fois terminé, cliquez sur le bouton Créer et vous avez terminé.

Copiez maintenant le code de raccourci et placez-le dans des modules comme Toggle ou Tabs, ou CTA ou tout autre module qui a un éditeur.


En fait, il fonctionnera également dans les éditeurs de WooCommerce.


https://ayanize.com/product/ac-shortcodes/




Quels sont les fichiers dont vous avez besoin pour créer un thème enfant ?

Chaque thème d'enfant a besoin de trois fichiers pour fonctionner correctement :


style. css functions. php
screenshot. png (1200px X 900px enregistré au format PNG)


Nous allons créer chacun de ces fichiers et examiner leurs objectifs. Je vous recommande fortement de suivre ce tutoriel pas à pas afin que vous puissiez comprendre ce qu'il y a dans un thème enfant et comment en créer un, mais si vous voulez juste gagner du temps, il existe une option de téléchargement avec un générateur de thème.

Nous vous adresserons des liens pour pouvoir créer le votre très simplement.



style. css

La première étape dans la création d'un thème enfant Divi est de créer le fichier "style. css". Ce fichier a deux objectifs principaux :


Il contient les informations sur le thème de votre enfant comme le nom, l'auteur, la description, le numéro de version, et plus encore.

Le second objectif est de conserver les styles CSS utilisés pour personnaliser l'apparence de votre site Web. Nous parlerons de la personnalisation du thème de votre enfant plus tard dans ce tutoriel. Lorsque vous créez votre fichier "style. css", collez-le dans ce code :

/*-------------------------------------------------------

Nom du thème: Divi Child Theme Thème URI: https://domaine.com ou .fr /

Description: Un modèle de thème enfant pour Divi Auteur: Divi

Auteur URI: https://domaine.com/ Gabarit: Divi

Version: 1.0

CSS SUPPLÉMENTAIRE ICI

----------------------------------------------------------------------*/


Vous devez modifier toutes les informations pour qu'elles correspondent aux vôtres. Le nom du thème s'affichera dans votre répertoire thématique. Assurez-vous d'inclure tout ce qui précède et assurez-vous d'utiliser Divi ou Extra pour la valeur'Thème:'. Si l'une de ces informations est incorrecte, le thème de votre enfant ne fonctionnera pas.


Functions. php

Le fichier "functions. php" est simplement un modèle utilisé par presque tous les thèmes de WordPress.

Il se comporte comme un plugin et s'exécute automatiquement dans le tableau de bord d'administration et les pages frontales de votre site WordPress.

  • Typiquement, ce fichier contient du code PHP personnalisé à utiliser pour diverses fonctionnalités supplémentaires dans le thème enfant.

    Lorsque vous créez votre fichier "functions. php", copiez et collez le code suivant en utilisant votre éditeur de texte préféré.

    <? php


    /*-------------------------------------------------------


    Divi Thème Enfant Fonctions. php


    -------------------------- AJOUTEZ VOTRE PHP ICI----------------------------------- */


    fonction divichild_enqueue_styles () {


    $parent_style =' parent style';


    wp_enqueue_style ($parent_style, get_template_directory_uri (). ' /style. css')); wp_enqueue_style ("style enfant"),

    get_stylesheet_directory_uri (). "/style. css", tableau ($parent_style),

    wp_get_theme ()->get (' Version')

    );

    }

    add_action (' wp_enqueue_scripts',' divichild_enqueue_styles');

    ?>


Capture d'écran. png

La capture d'écran est l'image qui s'affichera dans votre répertoire de thèmes . WordPress recommande un fichier PNG de 1200 x 900 pixels.

Le style dépend de vous. Elegant Thèmes utilise un arrière-plan avec le logo du thème tandis que les thèmes WordPress standard utilisent une capture d'écran de la mise en page.

Pour le téléchargement manuel vous pouvez utiliser votre application FTP favorite.

Naviguez jusqu' à votre dossier thématique sur votre serveur et créez un nouveau répertoire.

Donnez-lui un nom qui a du sens pour vous.
Cliquez avec le bouton droit de la souris sur le répertoire pour créer un nouveau fichier. Nommez-le functions. php et créez ensuite un nouveau fichier nommé style. css.

Création manuelle du répertoire

  • Les fichiers sont automatiquement créés avec les extensions appropriées. Maintenant ouvrez les fichiers et collez le code dont que nous vous avons présenté dans la page précédente. Faites glisser et déposez le fichier de capture d'écran dans le répertoire.

    Dans votre tableau de bord WordPress, allez dans Apparence, Thèmes et le thème de votre enfant sera disponible.

    En cadeau - Téléchargez un modèle de thème enfant Divi !


Ressources supplémentaires pour les thèmes enfants

1. Le plugin de thème enfant en un clic

2. Le Codex WordPress

3. Le générateur de thème en cliquant sur le lien ci-dessous.
https://elegantmarketplace.com/child-theme-maker/


  • Le plugin de thème enfant en un clic - Si vous avez des difficultés à créer un dossier de thème enfant, alors ce plugin en créera un pour vous avec un simple clic !


  • Le Codex WordPress - Il y a toutes sortes de documentation dans le codex WordPress . S'il y a quelque chose dont vous avez besoin de clarification dans ce post, alors cela devrait être votre premier arrêt.


  • Enfin, vous pouvez créer votre thème enfant avec le générateur de thème en cliquant sur le lien ci-dessous. https://elegantmarketplace.com/child-theme-maker/


MERCI