• Главная
  • Карта сайта
Не найдено

Улучшаем вид редактора кода 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 и его возможностях, я только продемонстрировал способ его интеграции в редактор , чтобы сделать наш редактор симпатичнее и удобнее в работе. Надеюсь, что это руководство будет полезно всем.

Если вы считаете, что с этим руководством есть какие-то проблемы, или у вас есть идеи по-лучше, или есть что добавить — напишите об этом в комментариях. Мы будем очень благодарны.

Источник:  
Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss