J’ai donné quelques astuces pour personnaliser le thème Mystique 2.4.3 mais en répondant aux commentaires, je me suis aperçu que de nombreux blogueurs souhaiter personnaliser Mystique 3.3.2 la dernière version du thème !

Au départ, je n’avais pas prévu de me pencher sur cette version ni d’écrire un article sur le sujet ne voulant pas trop sortir de la thématique de mon blog, lol.

Mais bon, Mystique faisant parti de mon petit monde -bah oui, j’ai quand même bossé un certain temps dessus, il a mérité le droit de figurer au sein de ma petite famille !- un article sur cette version permettra peut-être d’en aider plus d’un ;)

Et puis, afin de partir sur de bonnes bases, et quelque soit le thème utilisé, je vais commencé par vous parler du thème enfant …

 

Personnaliser Mystique 3.3.2

 

Thème enfant Mystique : Mystique-Extend

Théoriquement avec la version 3.3.2, lorsque vous activez Mystique, un nouveau thème : « Mystique-Extend » est créé automatiquement.
C’est le fameux thème enfant de Mystique que vous pourrez découvrir/activer en allant dans « Thèmes » depuis le tableau de bord de votre blogue WordPress.

J’ai dit théoriquement car, parfois ça bug et l’on ne trouve nulle part la trace de ce thème !
Si vous êtes dans ce cas précis, je vais vous expliquer comment l’ajouter manuellement

Mais avant d’aller plus loin, faut que je vous avoue quelque chose.

Il n’y a pas si longtemps, je croyais naïvement que le « CSS de l’utilisateur » de Mystique faisait office de thème enfant. Permettant en toute quiétude de pouvoir personnaliser le thème sans trifouiller l’original et prise de tête inutile en cas de bourde monstrueuse.

Grave erreur de ma part !!!

Car si il permet bien de modifier le CSS et donc l’aspect visuel de votre blogue tout comme le véritable thème enfant, en cas d’actualisation vers une version récente, il ne protège nullement vos changements. Ceux-ci seront tout bonnement effacés par la nouvelle version que vous aurez installée.

Pour éviter ce genre d’inconvénient, surtout si vous avez ou souhaité apporté énormément de modifications au thème, le plus prudent et le PLUS sûr reste le thème enfant.

Mais qu’est-ce donc un thème enfant ?

Mon intention n’est pas de vous en faire une explication détaillée. Il existe sur la toile de très nombreux articles fort bien rédigés et explicites sur ce sujet. Je pense, néanmoins, qu’un petit résumé ne fera de mal à personne …

Un thème enfant hérite des fonctionnalités d’un thème, appelé parent, et permet de modifier et/ou d’ajouter des fonctionnalités au thème parent sans intervenir directement dessus tout en continuant à bénéficier de ses mises à jour.

En d’autre terme et au risque de me répéter, si vous voulez modifier/ajouter ne serait-ce qu’un petit bout de code à votre thème, ayez le réflexe « thème enfant » !

Seuls les fichiers ajoutés au thème enfant surpasseront ceux du thème parent.

Surtout que c’est très simple à mettre en place, pour peu que l’on respecte quelques points importants ! Et cela vous évitera peut-être, des nuits blanches et autres tracasseries …

Comment créer facilement un thème enfant

Quand on a compris le principe, la conception d’un thème enfant est très rapide voir même élémentaire.

Vous n’avez besoin de créer que 2 choses :

  • Un dossier/répertoire que vous nommerez comme bon vous semblera, mais facilement identifiable.
  • Une feuille de style CSS, le seul fichier obligatoire qui devra s’appeler style.css à inclure dans le répertoire.

C’est DANS ce fichier qu’il faudra apporter toute votre attention ! C’est ce fichier qui fera le lien entre votre thème -le parent- et celui que vous venez de créer -l’enfant-.

Suivez donc scrupuleusement les indications suivantes, à mettre dans la nouvelle feuille de style :

  • Donner un nom au thème enfant (Theme Name)
  • Renseigner le nom du répertoire du thème parent (Template)
  • Ne pas oublier d’ouvrir et fermer les balises au bon endroit.
  • Importer la feuille de style du parent. Sauf si bien sûr vous avez tout modifié …
  • Et optionnel, éviter de mettre des accents dans le fichier…

Voici un exemple basique que vous pourriez utiliser pour Mystique 2.4.3 :

/*
Theme Name: Mystique Child
Template: mystique
*/

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

Dans cette exemple, je n’ai mis que les informations OBLIGATOIRES et importantes ! Vous remarquerez la balise ouvrante : /* et fermante : */ qu’il ne faut surtout pas oublier.

Vous pouvez aussi ajouter, à l’intérieur de ces balises, une description et un nom d’auteur pour le nouveau thème.

Le code qui suit : @import url permet d’importer la feuille de style du parent et c’est seulement APRÈS cette ligne que vous pourrez ajouter tous les codes CSS que vous souhaitez modifier/personnaliser …

Une fois le répertoire et le fichier créés, il ne vous reste plus qu’à envoyer le tout dans wp-content/themes via votre logiciel FTP favori. Ensuite, depuis votre Tableau de bord WordPress => « Thèmes » activer votre nouveau thème.

Pour vous aider à mieux comprendre -possible que mes explications ne soit pas très claires- voici une vidéo de l’excellent blog WordPress-channel :

NOTE : Dans cette vidéo, vous avez pu constater qu’il utilise son client FTP pour créer son répertoire et son fichier. Si vous ne savez pas comment faire, le plus simple reste la création depuis votre bureau et l’envoie du dossier via FTP ;)

Créer manuellement Mystique-Extend

Vous faites parti de ceux qui n’ont pas trouvé Mystique-Extend dans les thèmes depuis le « Tableau de bord » WordPress ?

Pas de souci !

Après avoir créé le dossier/répertoire portant ce nom : mystique-extend, copier/coller le code qui suit dans le nouveau fichier style.css :

/*
Theme Name: Mystique - Extend
Theme URI: http://digitalnature.eu/themes/mystique/
Description: Auto-generated child theme of Mystique. Please leave this one activated for proper customizations to Mystique.
Version: 1.0
Author: <a href="http://digitalnature.eu/" title="Aller sur la page de l&rsquo;auteur">digitalnature</a>
Author URI: http://digitalnature.eu/
Template: mystique
*/

/* You can safely edit this file, but keep the Template tag above unchanged! */

Enregistrez le fichier, envoyez le tout par FTP dans wp-content => themes et activez le depuis le Tableau de bord WordPress de votre blogue …

Au secours ! Mon menu a disparu …

À ça, c’est le risque de mésaventure qui risque de vous arriver si vous aviez déjà paramétré un menu personnalisé dans le thème parent !

Cela peut vous avoir mis KO sur le coup, après avoir actualisé votre blog et découvert cette espace vide.
Le thème enfant ne l’a pas pris en compte et celui-ci semble s’être volatilisé, ne laissant parfois qu’un affreux Empty menu () rouge dans votre menu.

Pas de panique !

Rien n’est perdu et vous n’aurez pas besoin de tout refaire ;)
Juste réactiver votre menu depuis le Tableau de bord => Apparence => Menus, sélectionner votre menu personnalisé et l’enregistrer …

Nous allons maintenant remplir un peu votre nouvelle feuille de style récemment créée par 2 astuces qui vont vous permettre de personnaliser Mystique 3.3.2 :

Astuce 1 : Changer la couleur de la Sidebar

Le code donné pour personnaliser la sidebar de Mystique 2.4.3 ne fonctionne pas pour la version 3.3.2.

Enfin si, elle fonctionne mais pas très bien car elle ne couvre pas tout, s’arrêtant jute après le dernier widget ! Autant dire que ce n’est pas du plus bel effet …

Le code suivant va vous permettre de faire une séparation plus au moins nuancée. Et, avantage ou inconvénient, à vous de voir, pas besoin d’avoir recours à une image, elle ne s’affichera pas.

/* Custom sidebar */
.c2right #mask-1,
.c2left #mask-3,
.c3 #mask-2,
.c3left #mask-3,
.c3right #mask-1
{background: #fff;} /* < - modifie la couleur de la page */ .c2left #mask-1, .c2right #mask-3, .c3 #mask-1, .c3 #mask-3, .c3left #mask-2, .c3right #mask-3 {background: #ccc;} /* <- modifie la couleur de la sidebar */

Changer les codes couleur fff : blanc et ccc : gris, en fonction de vos propres choix …

Cette première astuce peut être mise également dans le CSS de l’utisateur si vous ne souhaitez pas utiliser le thème enfant.

Édit : Si vous voulez faire une séparation avec une image la solution se trouve sur le blogue Bret Actu

Astuce 2 : Mettre la barre de recherche dans un menu

Pour la deuxième et dernière astuce du jour, il va falloir créer une fonction PHP !
C’est grâce à elle que la barre de recherche s’affichera et … Fonctionnera.

Il est possible que depuis les Paramètres de Mystique vous n’ayez pas accès au paramètre « Avancé » : Code défini par l’utilisateur.

Cette fonction est désactivée par défaut !

Pour l’activer, la solution consiste à modifier un élément dans le fichier functions.php du thème parent.

Cherchez cette ligne dans « functions.php » :
defined('ATOM_EXTEND') or define('ATOM_EXTEND', false);

À la place de false, mettez true et enregistrez le fichier.

Si ce « bidouillage » vous fait peur, la deuxième solution va vous permettre de créer manuellement le fichier « functions » du thème enfant.

Pour cela vous devrez créer un nouveau fichier appelé : functions-user.php

Dans ce nouveau fichier ou directement dans Code défini par l’utilisateur Paramètres de Mystique => onglet Avancé, copier/coller ce code :

< ?php // for custom menus add_filter('wp_nav_menu_items', 'add_search_to_menus'); // for the default page menu add_filter('wp_list_pages', 'add_search_to_menus'); function add_search_to_menus($items){ // capture the search template ob_start(); atom()->template('searchform');
$search = ob_get_clean();

// append it to the nav menu
return $items.'<li class="nav-search">'.$search.'</li>';
}
?>

Enregistrez le fichier et envoyez le via FTP dans votre thème enfant Mystique-Extend si vous l’avez créé manuellement.
Notez que le fait de passer par le Code défini par l’utilisateur créera le fichier pour vous dans le thème enfant.

Une phrase, tout en bas, vous en indiquera le chemin :
Les données sont sauvegardées dans .../wp-content/themes/mystique-extend/functions-user.php

Maintenant si vous allez voir votre blogue, vous vous apercevrez que la barre de recherche est visible sur TOUT vos menus et apparait n’importe comment !!!

Il va falloir faire un choix et une mise en forme :

- Seulement dans le menu du haut

Vous la voulez uniquement tout en haut de votre blogue ?

Personnaliser Mystique 3.3.2

Pas de problème si vous avez activé le menu qui se trouve à ce niveau. Copiez/collez ce code dans la feuille de style Mystique-Extend :

/* Mettre la recherche dans le menu du haut */

/* Position et largeur de la forme : en haut a droite */
.nav-top li.nav-search{
position:absolute;
background: none;
border: 0;
width: 250px; /* < -largeur du formulaire peut etre change */ height: 30px; right:1px; top:1px; } /* Pas de padding dans le menu de navigation */ .nav-top li.nav-search a{ padding: 0; } .nav-top li.nav-search li:hover a{ background-color: transparent; } /* cacher Rechercher dans le menu principal et le pied de page */ .nav-main li.nav-search { /* <- enleve recherche du menu principal */ display: none; } .nav-footer li.nav-search { /* <- enleve recherche du pied de page */ display: none; }

Enregistrez les modifications et courrez vérifier le résultat …

- Juste dans le menu principal

Personnaliser Mystique 3.3.2

On reprend les mêmes codes avec quelques modifications pour que la barre de recherche apparaisse bien dans le menu principal et toujours la même chose, ces codes sont à copier/coller dans le fichier style.css de Mystique-Extend :

/* Mettre la recherche dans le menu principal */

/* Position et largeur de la forme : a droite */
.nav-main li.nav-search{
position:absolute;
background: none;
border: 0;
width: 250px; /* < -largeur du formulaire peut etre change */ height: 30px; right:0px; top:2px; } /* Pas de padding dans le menu de navigation */ .nav-main li.nav-search a{ padding: 0; } .nav-main li.nav-search li:hover a{ background-color: transparent; } /* cacher Rechercher dans le menu du haut et le pied de page */ .nav-top li.nav-search { /* <- enleve recherche menu haut */ display: none; } .nav-footer li.nav-search { /* <- enleve recherche pied de page */ display: none; }

Enregistrez les modifications, actualisez votre blogue et admirez le résultat …

Et voilà, c’est tout pour aujourd’hui !
Si vous avez des questions, des précisions supplémentaires à apporter ou n’importe quoi d’autre -j’suis pas douée avec « l’ortografe »-, vous savez où me trouver :)

Édit : Depuis la nouvelle version WordPress 3.5, Mystique 3.3.2 rencontre des problèmes !
L’affichage des commentaires est soit tronqué ou absent, le widget « Catégories/Tags/Archives/etc. » se trouvant dans la sidebar ne fonctionne plus ainsi que les icônes de média sociaux et peut-être d’autres trucs …

Le souci viendrait de « jQuery » inclut dans Mystique et également dans WordPress 3.5 !
J’ai trouvé quelques pistes sur le forum Mystique (en anglais) dont voici un résumé :

  • 1 Dans Apparence => Éditeur => mystique => atom-hooks.php, changer la ligne :
if(!ATOM_DEV_MODE && $app->options('optimize')){

Par celle-ci :

if(!ATOM_DEV_MODE OR $app->options('optimize')){
  • 2 Si ça ne fonctionne pas, le dernier recours consiste à désactiver « jQuery » dans les Paramètres de Mystique, onglet « Avancé » => décocher « Utiliser jQuery ».

Avec cette « manip » vous récupèrerez vos commentaires mais pas le widget, ni les icônes qui resteront fixes.

  • 3 Attendre patiemment une nouvelle version ou actualisation du thème.
  • 4 Changer de thème ou de version ! Mystique 2.4.3, que j’utilise, ne rencontre pas ce problème …

₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪₪

Rendez-vous sur Hellocoton !

Vous avez aimé cet article ? Mais qu'attendez-vous pour nous le dire ?
♞ Répondez à ma question, cliquez !
En cliquant ici vous allez être propulsé à destination sans vous fatiguer à parcourir les kilomètres de com's ! La classe, hein ?
Rien à dire ? Faites simple, partagez-le sur vos réseaux sociaux favoris ♡

Sont venus ici en cherchant cela :
samaujardin fr