Meetup du 17 juin 2016/CHILD THEME

Le par Maylis Lambertzdans Meetup

DEFINITION

Un thème enfant WordPress est un thème qui hérite des fonctionnalités d’un autre thème, appelé thème parent.
Le thème enfant est la méthode recommandée pour modifier un thème existant.

Toutefois, n’oubliez pas que vous pouvez modifier déjà beaucoup de choses dans
Apparence => Personnaliser
du thème parent

REFERENCES

le codex en français
je conseille le blog de ce site wpmudev en anglais
oui je sais, ils essayent de vendre leurs produits mais les tutos sont toujours très bien faits.

OPTION PLUGINS

Child Theme Configurator

Easy Child Theme

OPTION FAIT MAIN

deux fichiers importants : style.css et functions.php

COMMENT ?

Créez votre dossier twenty-fourteen-child par exemple et deux fichiers style.css et functions.php

- wp-admin
- wp-content
   - languages
   - plugins
   - themes
      - twentyfourteen
      - twentyfifteen
      - twentysixteen
      - twenty-fourteen-child
           - style.css
           - functions.php
   - uploads
-wp-includes
.......ici tous les fichiers php de wp- .........

 

 style.css

en-tête indispensable pour être reconnu par wp

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://mdemrs.com/twentyfourteen-child/
Description: My first child theme, based on Twenty Fourteen
Author: mdemrs
Author URI: http://mdemrs.com
Template: twentyfourteen
Version: 1.0.0
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated
Text Domain: twenty-fourteen-child
*/

/*a vous de vous amuser ....*/

body {
background-color:yellow;
}

le Theme Name donne le nom à votre theme enfant, c’est le nom qui apparaîtra dans les themes à choisir.
le Template indique à WordPress quel est le thème parent !
Attention à ne pas supprimer le thème parent dans l’avenir ….
le text domain sert pour les traductions, il soit être unique à votre theme.

Pour info :
Pour rendre une phrase traduisible dans un thème parent ou enfant, il faut l’encadrer de __() function

__( 'Hello, dear user!', 'twenty-fourteen-child' );

et pour afficher dans le navigateur, _e() function ：

_e( 'Your Ad here', 'twenty-fourteen-child' );

functions.php

AVANT VS AUJOURD HUI

on trouve encore des thèmes enfants avec importation du style du thème parent dans le fichier style.css du thème enfant

@import url("../twentyten/style.css");

Mais la bonne pratique veut que l’importation du style se fasse dans le fichier functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css'   );
  }
?>

si le style  parent dépend d’autres librairies, les ajouter :

wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','bootstrap_fix','font-awesome' ) );

info sur wp_enqueue_style

SURCHARGE OU PAS

Contrairement au fichier style.css , le fichier functions.php du thème enfant ne surcharge pas son homologue du parent.
Au lieu de cela, il est chargé en plus du fichier functions.php du parent. (Plus précisément, il est chargé avant celui du parent.)

ATTENTION :
get_template_directory_uri() VS get_stylesheet_directory_uri()

get_template_directory_uri() #parent
get_stylesheet_directory_uri() #child

Un grand merci à Jean-Jacques pour son regard technique sur cette présentation, j’ai donc fait des modifs depuis la première mise en ligne. 🙂

Le slack francophone

pour communiquer avec la communauté wp france ….

http://boiteaweb.fr/slack-invitation

OVH – SSL – Let’s Encrypt

OVH: your free SSL certificates via Let’s Encrypt

où en sont-ils pour ton site ?

comment faire 

Une réflexion sur “Meetup du 17 juin 2016/CHILD THEME”

  1. Hello,

    Merci pour ce tuto 🙂

    Je me permets quelques précisions :

    1) Concernant le fichier styles;css :
    Il serait préférable de dire que le fichier style.css enfant SURCHARGE plus tôt que ECRASE : par « écraser » on pourrait comprendre remplace alors qu’il est conservé (les styles définis dans le fichier styles.css parent sont appliqués).

    2) Concernant le fichier functions.php :
    La fonction function_exists() n’a pas d’intérêt dans le fichier functions.php enfant. Elle n’est utile que dans le fichier functions.php parent où elle évite de redéclarer une fonction déjà déclarée dans l’enfant : cela permet la redéfinition des fonctions parents.
    > « When this is done a child theme or other plugin can override that function with there own ».
    [ Cela sera utile de citer cette astuce dans un tuto au sujet du développement d’un thème 🙂 ]

    A bientôt !

    JJ

    J’aime

    Réponse

Laisser un commentaire