Улучшаем вид редактора кода WordPress с помощью CodeMirror
Опубликовано: 01.09.2018
WordPress содержит два , позволяющих редактировать код прямо через браузер — это Редактор Темы и Редактор Плагина . По умолчанию, редактор выглядит очень просто и с его помощью трудно редактировать, потому как цвета все черные и серые. В этом руководстве я покажу вам, как интегрировать CodeMirror.js в редакторы, чтобы сделать их симпатичнее. Наши фрагменты кода будут выделены большим количеством цветов, у редакторов даже будут номера строк, и много чего еще.
Как добавить редактор кода в Contact Form 7? Делаем редактирование шаблона формы и письма удобнее
| Скачать исходники |
Шаг 1. Подготовка
Для начала надо скачать библиотеку CodeMirror . Это мощная библиотека с поддержкой многих языков программирования и параметров. После загрузки и извлечения давайте поместим эту папку в папку с вашей темой (для примера я использую тему оформления Twenty Eleven) и назовем ее codemirror .
Затем мы создадим файл под названием codemirror.php внутри этой папки и включим этот файл в файл functions.php вашей темы.
// functions.php include("codemirror/codemirror.php");Откройте ваш codemirror.php и перейдите на следующий шаг.
CodeMirror — это компонент, который улучшает редактор кода в браузере. Когда для языка, на котором вы программируете, доступен мод, он будет подсвечивать ваш код, а по желанию поможет форматировать с выравниванием.
Шаг 2. Регистрация скриптов и стилей
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'); }Код выше зацепит функцию codemirror_register за две зацепки: load-theme-editor.php и load-plugin-editor.php . Это значит, что когда вызывается Theme Editor или Plugin Editor, они вызовут нашу функцию codemirror_register .
Библиотека ядра
Внутри этой функции мы зарегистрируем все нужные файлы скриптов и стилей. codemirror.js и codemirror.css — два основных компонента библиотеки, они находятся в папке lib .
Тема
blackboard.css — это файл темы, папка theme в библиотеке CodeMirror также содержит много других файлов темы, вы можете изменить это в зависимости от ваших настроек. Есть много доступных тем, вы можете увидеть их здесь :
Моды
Моды — это JavaScript программы, которые помогают добавлять цвет (по желанию — выравнивание) текста, написанного на данном языке. Их значение — значение MIME типа, оно зависит от языка, с которым мы работаем. Вы можете увидеть все моды в папке внутри библиотеки. Поскольку встроенный редактор WordPress может редактировать HTML , PHP , CSS (больше — здесь ), то я зарегистрирую эти скрипты на следующих строках функции codemirror_register . Причину, по которой я зарегистрировал скрипты XML и Clike , я объясню позже.
После регистрации всех файлов скриптов нам нужно поставить их в очередь каждый раз, когда загружается наш блок администратора. Так что я добавлю функцию codemirror_enqueue_scripts к зацепке admin_enqueue_scripts . Затем мы также вставляем управляющий файл javascript (мы можем изменять, добавлять или удалять скрипт настроек) CodeMirror в шапку зоны администратора.
Шаг 3. Добавление скриптов в очередь
function 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'); }Функцию выше особо объяснять не надо, она просто добавляет в очередь все скрипты, которые мы зарегистрировали ранее. Откройте Редактор Темы и посмотрите исходный код, вы увидите, что эти скрипты встроены в шапку.
Шаг 4. Зацепка скрипта
Пример использования
Наш скрипт:
function codemirror_enqueue_scripts() { ?> <script type="text/javascript"> jQuery(document).ready(function() { var editor = CodeMirror.fromTextArea(document.getElementById("newcontent")); }) </script> <?php }Эта функция будет встроена в шапку блока администратора, CodeMirror будет влиять на любой элемент, содержащий ID newcontent , потому что у нашего элемента textarea , который содержит наш код, этот ID .
При использовании CodeMirror без опций , CodeMirror будет использовать свои настройки по умолчанию. Для того, чтобы использовать другие опции, мы можем сделать, например, так:
function codemirror_enqueue_scripts() { ?> <script type="text/javascript"> jQuery(document).ready(function() { var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), { lineNumbers: true, mode: "text/javascipt", theme: "blackboard" }); }) </script> <?php }Эти дополнительные опции добавят номера строк в наш редактор и в тему blackboard . Обратите внимание на опцию mode , эта опция определит, какой мод CodeMirror должен использовать (в шаге 2 мы упоминали, что такое мод). Поскольку у каждого типа файла свой мод, нам нужно определить эту опцию, чтобы заставить CodeMirror работать хорошо и показывать все точно. Вот другие значения типов MIME:
" text/javascript " для мода JavaScript " text/css " для мода CSS " application/x-httpd-php " для мода PHP , этот мод требует моды XML, JavasScript, CSS и C-Like. По этой причине нам нужно зарегистрировать скрипты XML и C-Like заранее.Простой HTML/PHP мод основан на моде C-like. Зависит от модов PHP, XML, JavaScript, CSS и C-like (см. здесь )
Расширенное использование
Для лучшего использования, нам нужно определить, какие типы файлов мы редактируем, чтобы использовать правильный мод. Наша цель — заставить скрипт использовать правильный мод автоматически. Вот решение:
function codemirror_control_js() { if (isset($_GET['file'])) { // $_GET['file'] holds path of file we edit $filename_to_edit = end(explode("/", $_GET['file'])); // We need to get file name $file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1); // Get file extension switch ($file) { // And assign appropriate MIME type value to $file variable case "php": $file = "application/x-httpd-php"; break; case "js" : $file = "text/javascript"; break; case "css": $file = "text/css"; break; } } 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"; } ?> <script type="text/javascript"> jQuery(document).ready(function() { var editor = CodeMirror.fromTextArea(document.getElementById("newcontent"), { lineNumbers: true, mode: "<?php echo $file ;?>", theme: "blackboard" }); }) </script> <?php }Каждый раз, когда мы щелкаем по файлу для редактирования, переменная $_GET['file] будет содержать путь к этому файлу. Например:
wp-admin/theme-editor.php?file=header.php wp-admin/theme-editor.php?file=style.css wp-admin/plugin-editor.php?file=akismet.phpИ этот код позволит нам определить расширение файла, который мы редактируем:
$filename_to_edit = end(explode("/", $_GET['file'])); // We need to get file name $file = substr($filename_to_edit, stripos($filename_to_edit, '.')+1); // Get file extensionЗатем, в зависимости от расширения, мы прикрепляем подходящее значение типа MIME .
Если при первом открытии редактора темы или плагина мы не щелкаем по какому-то файлу, переменной $_GET['file'] не существует. WordPress откроет файл по умолчанию для редактирования автоматически. Для редактора темы файл по умолчанию — style.css , в редакторе плагинов это другой PHP файл. Так что нам нужно определить значение MIME типа " text/css " для редактора темы и " application/x-httpd-php " для редактора плагинов.
Стилизация
Все готово, но редактор выглядит странно. Нам нужно немного отредактировать CSS файл. В папке lib мы открываем файл codemirror.css , находим следующий код:
.CodeMirror-scroll { overflow-x: auto; overflow-y: hidden; height: 300px; /* This is needed to prevent an IE[67] bug where the scrolled content is visible outside of the scrolling box. */ position: relative; outline: none; }И заменяем его этим:
.CodeMirror, .CodeMirror div { margin-right: 0!important; } .CodeMirror-scroll { overflow-x: auto; overflow-y: hidden; height: 450px; /* This is needed to prevent an IE[67] bug where the scrolled content is visible outside of the scrolling box. */ position: relative; outline: none; }Дело за вами
У CodeMirror есть много возможностей, это действительно мощная библиотека. Прочтите руководство по CodeMirror для того, чтобы знать о всех возможностях. Вы можете найти другие возможности или варианты их настройки и самостоятельно добавить их в код вашего WordPress. Это достаточно просто: зарегистрируйте, добавьте в очередь и зацепите скрипт, как мы сделали это выше.
Заключение
В этом руководстве я не сильно фокусировался на CodeMirror и его возможностях, я только продемонстрировал способ его интеграции в редактор , чтобы сделать наш редактор симпатичнее и удобнее в работе. Надеюсь, что это руководство будет полезно всем.
Если вы считаете, что с этим руководством есть какие-то проблемы, или у вас есть идеи по-лучше, или есть что добавить — напишите об этом в комментариях. Мы будем очень благодарны.
Источник:
