Meetup du 17 juin 2016/CHILD THEME

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