Schéma de couleurs personnalisé – ajouter en Customizr

Customizr est un très beau, extrêmement flexible et puissant thème WordPress, qui permet la mise en place d’un site web en un rien de temps. Un panneau de configuration bien fourni donne l’accès pour personnaliser chaque section de vore site. Et pourtant… chacun souhaite que son site soit unique et qu’il ne soit jamais confondu avec un autre.

Un pas vers un site unique est de mettre en place un schéma de couleurs personnalisé, identique au (ou basé sur le) logo.

Comment ajouter un schéma de couleurs personnalisé à la palette predéfinie de Customizr

On peut trouver sur Internet plusieurs tutoriels, expliquant comment réaliser cela, mais tous le font en modifiant un schéma de couleurs (ou skin) pré-existant de Customizr.

Nous allons expliquer comment le faire proprement, en rajoutant votre propre schéma de couleurs aux ceux pré-existants. Nous avons déjà fait ceci pour un de nos clients, en rajoutant un schéma de couleurs nommé purple3 à la liste de skins de Customizr.

 


Voici les étapes à suivre:


 

Pas 1 – Créer un thème dérivé (child theme), si vous n’en avez pas un déjà

Tutoriel rapide:

Dans le répertoire wp-content/themes de votre site, créez un nouveau répertoire, avec un nom de votre choix. Pour ce tutoriel, allons le nommer customizr-child.

A l’aide du Bloc-Notes, notepad++ ou tout autre processeur de texte, créez un fichier et sauvegardez-le comme create a file and save it as texte brut, sous le nom de style.css et ayant le contenu suivant:

/*
Theme Name: Customizr Child
Theme URI: [... votre url ...]
Description: Un thème dérivé pour le thème WordPress Customizr.
Author: [... votre nom ...]
Author URI: [... votre url ...]
Template: customizr
Version: 1.0
*/
/* Ajoutez votre css après ligne ci-dessous
-------------------------------------------------------------- */

De la même manière, créez un fichier nommé functions.php et sauvegardez-le comme texte brut. Son contenu doit être comme suit:

<?php
/**
* Ajoutez votre fonctions après ce commentaire
*/

Vous pouvez ajouter dans le répertoire une image de 880x660px, nommée screenshot.png ou screenshot.jpg.

N’oubliez pas d’activer votre thème dérivé dans le panneau Apparence/ Thèmes, sinon vos configurations ne seront pas visibles. 🙂

Pas 2 – Créer la structures de répertoires nécessaires dans le thème dérivé

Gardant à l’esprit que le thème dérivé doit refléter la structure des répertoires du thèmes parent, allons créer dans le répertoire wp-content/themes/customizr-child les sous-répertoires suivants: inc/assets/css.

La structure des répertoires du thème dérivé Customizr pour insérer un schéma de couleurs personnalisé

La structure des répertoires du thème dérivé

Pas 3 – Ajouter les fichiers necessaires au thème dérivé

Pour rappel, tous les fichiers du thème dérivé portant un nom identique aux fichiers du thème parent remplacent ces derniers. A deux exceptions près, cependant: les fichiers style.css et functions.php, dont le contenu est ajouté à celui de leurs homonymes du thème parent.

Allons donc copier les fichiers suivants du thème parent et les coller dans le thème dérivé, oà nous allons les modifier pour répondre à nos besoins:
wp-content/themes/customizr/inc/class-fire-init.php -> wp-content/themes/customizr-child/inc/class-fire-init.php
wp-content/themes/customizr/inc/assets/css/purple2.css -> wp-content/themes/customizr-child/inc/assets/css/purple2.css
wp-content/themes/customizr/inc/assets/css/purple2.min.css -> wp-content/themes/customizr-child/inc/assets/css/purple2.min.css

Et desormais nous ne toucherons plus aux fichiers du thème parent, toutes les actions suivantes se feront uniquement dans le thème dérivé.

Pas 4 – Ajouter votre schéma de couleurs personnalisé dans la liste du panneau de configuration

Dans le thème dérivé, modifiez le fichier class-fire-init.php comme suit:

//Default skins array

Trouvez la ligne « //Default skins array » (ce devrait être la ligne 82 à peu près). Dans la liste sur la ligne suivante, insérez une ligne pour indiquer le nom du schéma de couleurs personnalisé que vous souhaitez ajouter.

Dans notre exemple, nous avons ajouté un skin nommé « purple3 »:
'purple3.css' => __( 'Dark purple' , 'customizr' ),

Customizr - Insertion du nom du schéma de couleurs personnalisé dans la liste default skin array

Default skins array

//Main skin color array : array( link color, link hover color )

Trouvez la ligne « //Main skin color array : array( link color, link hover color ) » juste en dessous de ça (elle devrait être la ligne 104 à peu près). Dans la liste sur la ligne suivante, insérez une ligne pour votre schéma de couleurs personnalisé. Remarquez la description des éléments du tableau: la première couleur est la couleur du lienet la deuxième est la couleur du survol du lien. Pour notre exemple, nous rajouterons:

'purple3.css' => array( '#4d006c', '#0E0010' ),

Customizr - Inserting custom color scheme in the main skin color array

Main skin color array

Sauvegardez le fichier class-fire-init.php.

Si à ce point vous allez dans la consore d’administration de votre site WordPress, sur Appearance/Customize/Global Settings/Skin vous povez voir que votre schéma de couleurs personnalisé à été rajouté dans la liste de skins disponibles – mais IL N’EST PAS ENCORE FONCTIONNEL.

The custom color schemes listed in the Customizr skin panel

Le schéma de couleurs personnalisé listé dans le panneau de skins de Customizr

Allons donc passer à la dernière étape

Pas 5 – Définir votre schéma de couleurs personnalisé

Au pas 3 nous avons copié les fichiers inc/assets/css/purple2.css et purple2.min.css du thème parent au thème dérivé (ça aurait pu être n’importe quelle autre paire de fichier skin, nous avons choisi purple2 au hasard). Maintenant nous allons les personnaliser et les renommer, de sorte que les schémas d’origine de Customizr restent inchangés.

Il faut créer à la fois un skin css normal et un autre minifié par précaution, parce que Customizr permet d’opter pour n’importe lequel des deux dans le panneau d’options.

Il faut d’abord identifier les couleurs du fichier skin initial et d’en dresser la liste. Pour chacune de ces couleurs, il faut noter la couleur correspondante de votre schéma de couleurs personnalisé. Quand la liste est prête, faites un Rechercher & Remplacer TOUT pour chaque paire de couleurs, aussi bien dans purple2.css que dans purple2.min.css.

Quand vous en avez fini, sauvegardez les deux fichiers et renommez-les pour correspondre au nom du schéma de douleurs personnalisé que vous avez ajouté dans le Pas 4. Dans notre exemple, nous avons renommé purple2.css dans purple3.css et purple2.min.css dans purple3.min.css.

C’est tout.

A ce point vous avez les schémas de couleurs pre-définies de Customizr et aussi votre skin personnalisé.

Observation: l’article qui nous a inspiré cette méthode a été celui-ci.

3 Commentaires

  1. Rétrolien: Changer le nombre des pages mises en avant en CustomizrCI Media

  2. 07 Sep 2017 à 12:31 · Répondre

    Bonjour, je suis dans l’incapacité de choisir un skin.
    Cela est-il réservé à la version PRO ?

    Merci !

    • Manuela Kherouf
      07 Sep 2017 à 1:06 · Répondre

      Bonjour, merci de poser votre question sur le site de l’auteur de Customizr: https://presscustomizr.com/customizr/.

      Nous avons, à un certain moment, testé ce thème pour voir s’il se prêtait pour un de nos projets et avons partagé quelques remarques et astuces sur notre blog. Un autre thème s’est avéré plus adapté et depuis nous avons abandonné Customizr.

Laisser un Commentaire

Plan du site

ouvrir