Ajout d'un éditeur CSS personnalisé à votre thème à l'aide d'ACE

Chaque fois que quelqu'un télécharge votre thème et décide qu'une partie du CSS ne fonctionne pas pour lui, elle entre généralement dans style.css et modifier manuellement la feuille de style à leur convenance. Ce n'est pas si difficile à faire, mais cela pose un problème lorsque la prochaine version de votre thème est disponible et qu'ils décident de mettre à jour.

Toutes leurs modifications seront alors écrasées. Une bonne solution consiste à offrir un éditeur CSS personnalisé afin que toutes les modifications apportées soient stockées en toute sécurité dans la base de données et que la mise à jour à l'avenir ne soit plus un problème..

---

L'éditeur ACE

Toute personne familiarisée avec l'utilisation d'un IDE de bureau tel que Coda, Sublime et Kimodo sera tout à fait à l'aise dans l'interface de l'éditeur ACE. ACE est un éditeur de code basé sur le Web qui peut facilement être intégré à toute page Web ou application en ligne. Il comporte la coloration syntaxique de plus de 40 langues et comprend également un vérificateur de code en direct pour améliorer votre code au fur et à mesure de votre écriture..

Dans ce tutoriel, je compte vous guider tout au long des étapes nécessaires à l’installation d’ACE dans votre thème afin que vous puissiez proposer cette fonctionnalité intéressante à vos utilisateurs..

---

Étape 1: Installation d'ACE

L'éditeur ACE est hébergé sur GitHub, mais si vous regardez ce que vous obtenez lorsque vous téléchargez le projet, vous risquez d'être submergé par le nombre de fichiers. Nous n'avons besoin que de trois fichiers et vous pouvez les trouver dans le package de téléchargement que j'ai fourni via le lien de téléchargement ci-dessus..

• ace.js
• mode-css.js
• travailleur-css.js

Ces trois fichiers doivent être inclus dans un dossier nommé "ace". Placez ce dossier à la racine de votre thème.

---

Étape 2: le fichier d'assistance

Pour insérer ACE dans votre thème, vous devez créer un fichier JavaScript d'assistance qui définira tout le contenu de votre page pour que l'éditeur ACE fonctionne correctement. Créer un nouveau fichier appelé "custom-css.js"avec le code suivant et l'ajouter à la racine de votre thème aussi.

 (function (global, $) éditeur de var, syncCSS = function () $ ('#custom_css_textarea') .val (editor.getSession (). getValue ());, loadAce = function () editor = ace. edit ('custom_css'); global.safecss_editor = éditeur; editor.getSession (). setUseWrapMode (true); editor.setShowPrintMargin (false); editor.getSession (). setValue ($ ('#custom_css_textarea') .val () ); editor.getSession (). setMode ("ace / mode / css"); jQuery.fn.spin && $ ('#custom_css_container') .spin (false); $ ('#custom_css_form') .submit (syncCSS); ; if ($ .browser.msie && parseInt ($ .browser.version, 10) <= 7 )  $( '#custom_css_container' ).hide(); $( '#custom_css_textarea' ).show(); return false;  else  $( global ).load( loadAce );  global.aceSyncCSS = syncCSS;  )( this, jQuery );

Le code ci-dessus insère l'éditeur ACE dans la page et veille à ce que le code CSS saisi par vos utilisateurs soit également saisi dans le champ textarea afin qu'il puisse être stocké dans la base de données WordPress. Il y a aussi une vérification là-bas pour IE7, qui est incompatible avec ACE, il ne chargera donc que la base textarea..

---

Étape 3: Mise en file d'attente des fichiers

Avec tous les fichiers JavaScript appropriés ajoutés, vous devez vous connecter à admin_enqueue_scripts pour vous assurer que vos scripts apparaissent sur la page d'administration de votre éditeur CSS personnalisé.

 add_action ('admin_enqueue_scripts', 'custom_css_scripts'); function custom_css_scripts ($ hook) if ('apparence_page_custom_css_admin_page_content' == $ hook) wp_enqueue_script ('ace_code_highlighter_js', get_template_directory_uri (). ' 'ace_mode_js', get_template_directory_uri (). '/ace/mode-css.js', array ('ace_code_highlighter_js'), '1.0.0', true); wp_enqueue_script ('custom_css_js', get_template_directory .js ', array (' jquery ',' ace_code_highlighter_js '),' 1.0.0 ', true);

---

Étape 4: L'éditeur CSS personnalisé

Vous devez maintenant créer votre page d'option de thème dans wp-admin où l'éditeur CSS personnalisé sera affiché. Pour ajouter une page d’option de thème, vous devez vous connecter à la admin_menu action.

Ajouter ce qui suit à functions.php:

 add_action ('admin_menu', 'custom_css_admin_page'); function custom_css_admin_page () add_theme_page ('CSS personnalisé', __ ('CSS personnalisé'), 'edit_theme_options', 'custom_css_admin_page_content', 'custom_css_admin_page_content'); 

Vous devez également enregistrer un champ de paramètres CSS personnalisés pour pouvoir le stocker dans la base de données WordPress. Pour ce faire, vous devez vous accrocher au admin_init action et utiliser le register_settings () une fonction.

 add_action ('admin_init', 'register_custom_css_setting'); function register_custom_css_setting () register_setting ('custom_css', 'custom_css', 'custom_css_validation'); 

Puisque vous avez déjà ajouté la page d'option et enregistré les paramètres, vous pouvez maintenant créer le contenu de votre page:

 function custom_css_admin_page_content () // Le message par défaut qui apparaîtra $ custom_css_default = __ ('/ * Bienvenue dans l'éditeur de CSS personnalisé! Ajoutez tout votre CSS personnalisé ici et évitez de modifier les fichiers du thème principal, car cette mise à jour sera effectuée le thème du thème. Votre CSS personnalisé sera chargé après les feuilles de style du thème, ce qui signifie que vos règles seront prioritaires. Ajoutez simplement votre CSS ici pour ce que vous voulez changer, vous n’avez pas besoin de copier tout le thème \ 's style.css content. * /'); $ custom_css = get_option ('custom_css', $ custom_css_default); ?> 
 
 
 
'. __ ('CSS personnalisé mis à jour.'). '
'; ?> 
  
 
 
 <?php echo $custom_css; ?> 
 
 

 function custom_css_validation ($ input) if (! empty ($ input ['custom_css']))) $ input ['custom_css'] = trim ($ input ['custom_css']); return $ input; 

 add_action ('wp_head', 'display_custom_css'); fonction display_custom_css () ?>