Comment ajouter des modèles et un design personnalisés aux formats de publication de blog de Divi (partie 1 sur 3)

Bienvenue au jour 1 sur 3 de notre série sur Comment ajouter des styles personnalisés aux formats de publication de blog de Divi. Par défaut, Divi est livré avec six formats de publication de blog : Standard, Vidéo, Audio, Citation, Galerie et Lien. Dans cette série, nous vous apprenons à les personnaliser avec php et css.

Au cours des 3 prochains jours, je vous expliquerai comment personnaliser tous les formats de publication de blog de Divi : Standard, Citation, Lien, Vidéo, Audio et Galerie. L'édition de tous ces éléments (pour les conceptions que j'ai en tête) nécessite l'édition du fichier modèle single.php. Pour ce faire correctement, nous devons créer un thème enfant Divi qui contiendra notre fichier modèle Single.php modifié. Et avant de faire cela, nous devons également créer une installation locale de WordPress à l'aide de Desktopserver. Cela nous fournira un espace de développement sûr pour jouer sans risquer quoi que ce soit sur un site Web en direct.

Comme le suggère le titre de cet article, nous aurons besoin de trois jours pour tout couvrir du début à la fin. Aujourd'hui, je vais vous montrer comment créer une installation locale de WordPress à l'aide de Desktopserver et créer le thème enfant que nous utiliserons pour héberger nos formats de publication de blog modifiés.

Je considérerais cette série comme plus "avancée" que la majorité des tutoriels publiés ici. Mais, si vous êtes un débutant, cette série est en fait une excellente occasion pour vous d'améliorer vos compétences en développement et de vous lancer dans quelque chose de nouveau dans une série de publications sécurisées, gratuites et guidées.

Commençons!

Un aperçu de ce qui vous attend

Voici un bref aperçu des conceptions que nous réaliserons dans cette série. Après avoir jeté les bases pour eux dans l'article d'aujourd'hui, je vais vous montrer comment modifier le fichier single.php (le modèle pour tous nos formats d'articles de blog), puis comment styliser davantage ce modèle pour chaque format avec CSS. Ce sera tout un voyage !

Préparer vos actifs de développement

Voici ce que vous devrez suivre avec le tutoriel d'aujourd'hui et les tutoriels que j'ai créés pour les 2 prochains jours :

• Un éditeur de code tel que Atom, Sublime, Brackets ou Notepad++ (ce que vous préférez)
• Une installation WordPress locale à l'aide de DesktopServer (sauf si vous en avez déjà un)
• Un thème Divi Child, que nous allons créer !

Je vous recommande fortement de suivre cette série sur une installation WordPress configurée uniquement pour les tests et le développement. La dernière chose que je veux, c'est que les gens expérimentent leur site Web en direct et gâchent quelque chose.

Si vous ne savez pas comment configurer une installation de développement local de WordPress, je vous recommande d'utiliser la version gratuite de desktopserver. Il devrait vous permettre d'être opérationnel avec une installation WordPress locale en quelques minutes (sans exagération).

Configuration de DesktopServer sur votre ordinateur

Voici quelques étapes pour démarrer avec DesktopServer.

Visitez leur site Web et téléchargez la version gratuite en cliquant sur le bouton "Gratuit - Ajouter au panier" dans la colonne de droite.

Sur la page de paiement, remplissez vos informations personnelles, acceptez leurs conditions et cliquez sur acheter.

Sur la page de confirmation d'achat, sélectionnez le bon téléchargement pour votre système d'exploitation. Je suggère d'installer la dernière version de Mac ou Windows.

Décompressez votre téléchargement et lancez l'installation de l'application sur votre ordinateur.

Vous pouvez maintenant trouver l'application DesktopServer dans un dossier appelé "xampplite", à la racine de votre disque local (C:).

Une fois que vous avez installé Desktopserver, lisez leurs instructions pour vous aider à démarrer avec la configuration de votre installation wordpress locale.

Créer votre thème Divi Child pour cette série

Pour créer un thème enfant Divi, vous devez accéder à vos fichiers de thème WordPress. Si vous avez suivi les valeurs par défaut lors de l'installation de DesktopServer, vos fichiers de thème doivent être situés dans votre dossier de documents à l'intérieur d'un dossier intitulé « Sites Web ».

Localisez le dossier des thèmes et ajoutez un nouveau dossier appelé « enfant ».

Vous allez maintenant ajouter votre fichier style.css à votre dossier de thème enfant. C'est le premier des 3 fichiers qui composeront votre thème enfant.

Ouvrez votre éditeur de texte et créez un nouveau fichier avec l'en-tête CSS suivant tout en haut du document.

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

Vous pouvez ajouter le reste des informations pour l'en-tête CSS du thème enfant pour l'adapter à votre site selon vos besoins.

Enregistrez votre nouveau fichier avec le nom et l'extension "style.css". Et ajoutez-le au dossier du thème enfant :

Le fichier suivant que vous devez ajouter à votre dossier de thème enfant est le fichier functions.php.

Revenez à votre éditeur de texte et créez un autre nouveau fichier et ajoutez le code php suivant tout en haut du document :

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Enregistrez le fichier avec le nom et l'extension exacts « functions.php » et ajoutez-le à votre dossier enfant :

Le fichier final dont vous avez besoin pour votre thème enfant est le fichier single.php de Divi. En plus d'ajouter un nouveau CSS à votre fichier style.css de thème enfant, nous utiliserons une copie du fichier single.php de Divi pour modifier la mise en page des différents types de publication.

Pour trouver le fichier single.php, rendez-vous dans le dossier du thème Divi (parent).

Copiez le fichier single.php et collez-le dans le dossier de votre thème enfant :

Nous sommes maintenant prêts à personnaliser le fichier single.php de votre thème enfant.

Activez votre nouveau thème enfant

Avant de commencer à personnaliser le fichier modèle single.php, allez-y et activez votre nouveau thème enfant.

Depuis le tableau de bord wordpress, allez dans Apparence → Thèmes et sélectionnez le bouton Activer sur votre nouveau thème enfant appelé Divi Child.

C'est tout pour le moment!

Je sais que ce n'est pas encore trop excitant mais j'espère que vous resterez avec moi. Il est important de poser les bonnes bases pour vos projets et cet article est un excellent point de départ.

Qu'est-ce qui vient demain ?

Maintenant que votre installation locale de WordPress et votre thème enfant sont activés, vous êtes prêt pour la prochaine partie de cette série. Demain, je vais vous montrer comment éditer le fichier single.php de Divi pour créer une mise en page complètement unique pour les formats de vos articles de blog.

J'ai hâte de lire vos commentaires ci-dessous. La configuration d'un thème enfant sur un serveur local peut entraîner des problèmes pour les débutants, je vais donc essayer de répondre à toutes les questions que je peux. Cependant, si vous rencontrez des problèmes plus techniques, notre équipe d'assistance est également prête à vous aider. Sans parler des gens de Desktop Server !

À votre santé!