Personnaliser son blog WordPress ? FACILE ! Créez facilement votre « thème enfant » pas à pas…

hème enfant pour personnaliser blog WordPressA ce jour, WordPress compte 2592 thèmes gratuits téléchargeables depuis le CMS. Largement de quoi trouver son bonheur ! Ou presque… Car il y a toujours un petit détail qui vous chatouille : Ne serait-ce que la couleur des titres, ou la taille des textes… Vous serez donc très vite tenté de modifier légèrement quelques paramètres, pour adapter le thème choisi complètement à vos attentes. Comment faire ? Facile !

2 solutions s’offrent à vous pour effectuer vos modifications, et personnaliser votre thème WordPress.

1° solution :

La première solution, la moins propre, consiste à modifier directement les fichiers du thème, et modifier les portions de code des articles, des commentaires, ou simplement de l’en-tête de votre document ou du fichier functions.php pour ajouter quelques morceaux de code trouvés sur la toile. Sachez qu’en faisant cela, il ne vous sera plus possible de mettre à jour votre thème. En effet, comme les plugins, les thèmes peuvent subir des mises à jour pour améliorer des fonctionnalités, mettre à jour de sécurité, etc. S’il vous validez la mie à jour d’un thème que vous avez modifié, vos modifications seraient tout simplement écrasées. Autant vous dire que ce n’est pas la meilleure des solutions !

2° solution : « Créer un thème enfant »

La deuxième solution, la meilleure, consiste à créer un thème enfant.
La création d’un thème enfant n’est pas très complexe et permet de bénéficier du thème parent tout en autorisant la modification de certains fichiers à partir du thème enfant.

Voyons cela plus en détail avec un exemple concret.

Dans notre exemple, nous allons créer un thème enfant à partir du thème Twentyfourteen, nous l’appellerons Radius-enfant

1)    Création du dossier de thème

Créez un dossier nommé radius-enfant.  

2) Création du fichier style.css

Dans le dossier que vous venez de créer, créez un fichier style.css avec comme contenu de base :

/*
Theme Name:     Radius-blog-concept
Theme URI:     http://blog-concept.com/
Description:   Thème enfant pour le thème Radius
Author:         Hansen
Author URI:     http://blog-concept.com/
Template:       Radius                
Version:       0.1.0
*/

Toutes ces lignes de code servent à décrire le thème enfant. Ce descriptif s’affichera dans l’espace d’administration de votre blog WordPress (Apparence > Thèmes). Vous êtes relativement libres sur le contenu, sauf pour la ligne 7 (Template) qui est le « slug » (identifiant) du thème de référence, le thème parent. Ce slug correspond au nom du dossier du thème que l’on souhaite modifier, ici Radius, qui porte comme nom de dossier « Radius ».

Copier le contenu de style.css de Radius pour le coller dans votre CSS du thème radius-enfant

Téléchargez maintenant le dossier que vous venez de créer à l’aide de FileZila dans le dossier wp-content/themes de votre blog WordPress.

Votre thème enfant apparaît maintenant dans Apparance > Thèmes de l’espace d’admin de WordPress.

3. Activer votre thème enfant

Vous pouvez maintenant activer votre thème enfant. Celui-ci va simplement adopter le comportement de son thème parent, puisque nous n’avons encore aucun fichier « template » (par exemple header.php) dans notre dossier de thème.
3) Modification des templates

Il est désormais possible d’éditer les portions du templates parent comme bon vous semble. Comment ? Simplement en copiant le fichier à modifier depuis le thème parent, et en le collant dans votre thème enfant. Les modifications à apporter se feront sur les fichiers que vous avez copié depuis le thème parent dans votre thème enfant.
Prenons un exemple :

Copiez le fichier header.php du thème parent (Radius, pour rappel), puis collez-le dans votre thème enfant.
Vous avez maintenant dans votre dossier la feuille de style, et ce fichier header.php.
Ouvrez le fichier header.php pour édition et remplacez

  1. <h2 id= »site-description »><?php bloginfo( ‘description’ ); ?></h2>  

par

  1. <p id= »site-description »><?php bloginfo( ‘description’ ); ?></p>  

Le remplacement de h2 par p n’aura aucune incidence visuelle, par contre vous constaterez que le code a bel et bien changé.

Cet article vous a plu ? Offrez-nous un Like sur Facebook !

Like bisous
[efb_likebox fanpage_url= »blog-concept.like » box_width= »250″ box_height= » » colorscheme= »light » locale= »fr_FR » responsive= »0″ show_faces= »1″ show_header= »1″ show_stream= »0″ show_border= »1″ ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.