Share
WordPress contient deux éditeurs intégrés qui vous permettent d’éditer des fichiers de thèmes directement à partir du navigateur, l’éditeur de thèmes et l’éditeur de plugins. Par défaut, l'éditeur semble très simple et difficile à modifier car les couleurs sont totalement noires et grises. Dans ce tutoriel, je vais vous montrer comment intégrer CodeMirror.js dans les éditeurs pour rendre l’apparence plus jolie. Nos extraits de code seront mis en évidence avec plus de couleur, les éditeurs auront même des numéros de ligne, et plus.
Tout d'abord, vous devez télécharger la bibliothèque CodeMirror. C'est une bibliothèque puissante, qui prend en charge de nombreux langages de programmation et fonctionnalités. Après le téléchargement et l'extraction, plaçons ce répertoire dans le répertoire de votre thème (j'utilise Twenty Eleven comme démo) et nommez-le. codemirror.
Ensuite, nous créons un fichier appelé codemirror.php à l'intérieur de ce répertoire et inclure ce fichier dans le functions.php fichier de votre thème.
Accentsconagua
// functions.php include ("codemirror / codemirror.php"); Ouvrez notre codemirror.php et passer à l'étape suivante.
"CodeMirror est un composant JavaScript qui fournit un éditeur de code dans le navigateur. Lorsqu'un mode est disponible pour la langue que vous codez, il colorise votre code et, éventuellement, aide à l'indentation."
add_action ('load-theme-editor.php', 'codemirror_register'); add_action ('load-plugin-editor.php', 'codemirror_register'); function codemirror_register () wp_register_script ('codemirror', get_template_directory_uri (). "/ codemirror / lib / codemirror.js"); wp_register_style ('codemirror', get_template_directory_uri (). "/ codemirror / lib / codemirror.css"); wp_register_style ('cm_blackboard', get_template_directory_uri (). "/ codemirror / theme / blackboard.css"); wp_register_script ('cm_xml', get_template_directory_uri (). "/ codemirror / xml / xml.js"); wp_register_script ('cm_javascript', get_template_directory_uri (). "/ codemirror / javascript / javascript.js"); wp_register_script ('cm_css', get_template_directory_uri (). "/ codemirror / css / css.js"); wp_register_script ('cm_php', get_template_directory_uri (). "/ codemirror / php / php.js"); wp_register_script ('cm_clike', get_template_directory_uri (). "/ codemirror / clike / clike.js"); add_action ('admin_enqueue_scripts', 'codemirror_enqueue_scripts'); add_action ('admin_head', 'codemirror_control_js'); Les extraits ci-dessus accrochent le codemirror_register fonction en deux crochets, load-theme-editor.php et load-plugin-editor.php. Cela signifie que lorsque l'éditeur de thème ou l'éditeur de plug-in est demandé, ils appellent notre codemirror_register une fonction.
Dans cette fonction, nous enregistrons tous les fichiers de script et de style nécessaires. codemirror.js et codemirror.css sont les deux composants principaux de la bibliothèque CodeMirror, ils sont dans le lib annuaire.
blackboard.css est un fichier de thème, le thème Le répertoire de la bibliothèque CodeMirror contient également de nombreux autres fichiers de thème que vous pouvez modifier en fonction de vos préférences. Il y a plus de thèmes disponibles, voyez-les ici:
Modes sont des programmes JavaScript qui aident à colorer (et éventuellement à mettre en retrait) un texte écrit dans une langue donnée. Leur valeur est une valeur de type MIME, elles dépendent de la langue avec laquelle nous travaillons. Vous pouvez voir tous les modes dans le mode répertoire dans la bibliothèque CodeMirror. Parce que l'éditeur intégré de WordPress peut éditer HTML, PHP, CSS (plus ici), j'enregistre ces scripts sur les lignes suivantes de codemirror_register une fonction. La raison pour laquelle j'ai enregistré les scripts XML et Clike sera expliquée plus tard.
Après avoir enregistré tous les fichiers de script, nous devons les mettre en file d'attente à chaque chargement de notre section admin. Alors j'ajoute le codemirror_enqueue_scripts fonction à la admin_enqueue_scripts crochet. Ensuite, nous intégrons également un fichier javascript de contrôle (nous pouvons modifier, ajouter ou supprimer un script d'options) de CodeMirror à admin head.
fonction codemirror_enqueue_scripts () wp_enqueue_script ('codemirror'); wp_enqueue_style ('codemirror'); wp_enqueue_style ('cm_blackboard'); wp_enqueue_script ('cm_xml'); wp_enqueue_script ('cm_javascript'); wp_enqueue_script ('cm_css'); wp_enqueue_script ('cm_php'); wp_enqueue_script ('cm_clike'); La fonction ci-dessus n'a pas de gros problème à expliquer, elle met juste en file d'attente tous les scripts que nous avons enregistrés précédemment. Ouvrez l'éditeur de thème et affichez la source. Vous verrez que ces scripts ont été intégrés dans l'en-tête..
Fondamentalement, notre script est:
fonction codemirror_enqueue_scripts () ?>Cette fonction sera intégrée à la section de l’administrateur, CodeMirror affectera tout élément contenant le
Nouveau contenuID, parce que notrezone de texteL'élément qui contient nos extraits de code a cet ID.
Si vous utilisez CodeMirror sans aucune option, CodeMirror utilisera ses propres options par défaut. Pour plus en utilisant plus d'options, nous pouvons le faire comme ceci:
fonction codemirror_enqueue_scripts () ?>Ces options supplémentaires donneront à notre éditeur le numéro de ligne et le thème du tableau. Avis dans le
modeoption, cette option déterminera ce que mode CodeMirror devrait utiliser (à l'étape 2, nous avons mentionné ce que mode est). Chaque type de fichier ayant son propre mode, nous devons définir cette option pour que CodeMirror fonctionne correctement et s’affiche plus précisément. Voici quelques valeurs de type MIME:
"text / javascript" pour le mode JavaScript"text / css" pour le mode CSS"application / x-httpd-php" pour le mode PHP, ce mode nécessite les modes XML, JavasScript, CSS et C-Like. C’est la raison pour laquelle nous devons enregistrer les scripts XML et C-Like ci-dessus.Mode HTML / PHP simple basé sur le mode C-like. Dépend des modes PHP, XML, JavaScript, CSS et C-like. (vois ici)
Pour une utilisation optimale, nous devons définir le type de fichier que nous modifions pour utiliser le mode correct. Notre objectif est de faire en sorte que le script utilise automatiquement le bon mode. Voici une solution:
fonction codemirror_control_js () if (isset ($ _GET ['fichier'])) // $ _GET ['fichier'] contient le chemin du fichier que nous éditons $ nom_fichier_to_edit = fin (explode ("/", $ _GET [' ']); // Nous devons obtenir le nom du fichier $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Récupère l'extension de fichier ($ fichier) // Et affecte la valeur de type MIME appropriée à la variable de fichier $ "php": $ file = "application / x-httpd-php"; Pause; case "js": $ file = "text / javascript"; Pause; case "css": $ file = "text / css"; Pause; else $ file_script = $ _SERVER ['SCRIPT_NAME']; $ file_script = end (explode ('/', $ file_script)); if ($ file_script == 'theme-editor.php') $ file = "text / css"; else $ file = "application / x-httpd-php"; ?> Chaque fois que nous cliquons sur un fichier pour le modifier, le $ _GET ['fichier] variable tiendra le chemin d'accès à ce fichier. Par exemple:
Et ces extraits de code nous aideront à définir les extensions de fichier que nous modifions:
$ filename_to_edit = end (explode ("/", $ _GET ['fichier'])); // Nous devons obtenir le nom du fichier $ file = substr ($ filename_to_edit, stripos ($ filename_to_edit, '.') + 1); // Obtenir l'extension du fichier Ensuite, en fonction de chaque extension, nous affectons une valeur de type MIME différente pour cette correspondance..
Excepté la première fois que nous ouvrons l’éditeur de thèmes ou de plugins, nous ne cliquons sur aucun fichier à éditer. $ _GET ['fichier'] la variable n'existe pas. WordPress ouvrira un fichier par défaut à éditer automatiquement. Pour l’éditeur de thèmes, le fichier par défaut est le style.css fichier et un autre fichier PHP dans l'éditeur de plug-in. Nous devons donc définir la valeur de type MIME comme "text / css" dans l'éditeur de thème et "application / x-httpd-php" dans l'éditeur de plugin.
Tout est fait, mais l'éditeur semble en désordre. Nous devons modifier un peu le fichier CSS. dans le lib répertoire, nous ouvrons le codemirror.css fichier, trouvez ci-dessous des extraits de code:
.CodeMirror-scroll overflow-x: auto; débordement-y: caché; hauteur: 300px; / * Ceci est nécessaire pour éviter un bug dans IE [67] où le contenu défilant est visible en dehors de la boîte de défilement. * / position: relative; contour: aucun;
Remplacer par:
.CodeMirror, .CodeMirror div margin-right: 0! Important; .CodeMirror-scroll overflow-x: auto; débordement-y: caché; hauteur: 450px; / * Ceci est nécessaire pour éviter un bug dans IE [67] où le contenu défilant est visible en dehors de la boîte de défilement. * / position: relative; contour: aucun;
CodeMirror possède de nombreuses fonctionnalités, c'est une bibliothèque javascript très puissante. Lisez le manuel de CodeMirror pour être pleinement informé des fonctionnalités disponibles. Vous pouvez découvrir les autres fonctionnalités ou comment les personnaliser et les ajouter vous-même à votre code WordPress. C'est assez facile: registre, mettre en file d'attente et brancher le script, comme je l'ai fait ci-dessus.
Dans ce tutoriel, je ne me concentre pas trop sur CodeMirror et ses fonctionnalités, je viens de montrer la manière de l'intégrer dans l'éditeur WordPress afin de rendre notre éditeur plus joli ou plus facile à utiliser. J'espère que ce tutoriel a été utile pour tout le monde.
Si vous pensez que mon tutoriel a un problème, ou si vous avez de meilleures idées, ou quelque chose à ajouter, laissez vos commentaires ci-dessous! Nous l'apprécierions beaucoup.
