• доступно о веб-разработке
18.12.2014 Wordpress, Плагины , , ,

Разработка плагина для WordPress #1

wp-plug-dev

Самая популярная в мире система управления сайтами годами не уступает своё лидерство ни одной новой технологии. Говорят, что новое — это хорошо забытое старое. В этом ключе, вместо поиска новых решений иногда достаточно расширить функционал уже работающего сайта для того, чтобы привести его в соответствиями с требованиями дня сегодняшнего.

Функционал WordPress расширяется посредством плагинов (от англ. plug-in – включить).

Наверное, нет того пользователя этой системы, который бы не знал, как их устанавливать.

Помню ещё те незапамятные времена, когда плагины приходилось скачивать из официального каталога, после чего — загружать их через админку сайта для последующей установки. Казалось бы, так приходилось делать ещё несколько лет назад. Но всё меняется.

Сегодня базовый интерфейс свежеустановленного WordPress позволяет без каких-либо ухищрений установить любой плагин (из десятков тысяч) из официального каталога, как говорится, «не отходя от кассы», то есть не выходя из панели управления сайтом.

 

Плагинов для системы не просто много, а очень много — 35040 на текущий момент.

Причём многие из них повторяют друг друга. Однако, вы очень требовательны к качеству программных продуктов. И после тестирования дюжины однотипных плагинов вы так и не нашли нужного.

Тогда вы решаете создать свой плагин, который будет полностью соответствовать вашим требованиям, целям и задачам.

В этом случае вам и пригодится данный цикл публикаций на сайте ДвижКод.

Проектирование плагина для WordPress

Для многих это — самый сложный процесс. Потому как создание любого программного продукта у некоторых ассоциируется именно с непосредственным написанием кода. В реальности это не так.

Любая работа с кодом требует предварительного проектирования. На мысленном уровне, само собой, но почти всегда без ручки и бумаги просто не обойтись.

Давайте рассмотрим конкретную ситуацию.

Блог «ДвижКод», который вы в текущий момент читаете, посвящён главным образом веб-разработке. Конечно, любой подобный сайт должен показывать читателю процесс разработки изнутри. То есть демонстрировать программный код.

Сама по себе демонстрация программного кода — дело достаточно тривиальное. Для этого в HTML есть специальный тег <code></code>. Однако, выведенная в нём информация выглядит достаточно серо и уныло:

Думаю, что вы со мной согласитесь, что читать большую «простыню» черного текста на сером фоне — задача не из лёгких. Особенно, когда необходимо «выцепить» из контекста определённые блоки.

Это всё равно, что пользоваться «Блокнотом» для веб-разработки вместо специально созданных для этого дела программ с подсветкой кода.

Подобные программы носят название «Интегрированная среда разработки» (IDE – Integrated Development Enviroment). С работой одной из таких программ вы могли ознакомиться в одном из более ранних материалов блога.

Поэтому умные люди пользуются специальными плагинами, написанными на JavaScript, которые обеспечивают подсветку синтаксиса различных языков программирования.

Вот как преображается текст после применения подобного плагина:

Согласитесь, разница видна невооруженным взглядом.

Среди всех JavaScript-плагинов, которые занимаются подсветкой кода, наиболее интересным видится Prism.JS:

http://prismjs.com

Выбор пал именно на него в связи с тем, что он обладает следующими ключевыми особенностями:

  • Работает на jQuery (самая популярная JavaScript-библиотека, которая уже встроена в WordPress)
  • Супер-лёгкий: минимизированное ядро занимает всего 1.6Кб
  • Простой: отдельного вызова плагина не требуется. Надо только подключить скрипты и стили, а после указать у тега <code></code> нужный класс. Например, <code class="language-html"></code>
  • Расширяемый: поддерживается большое количество языков, можно написать свои правила для подсветки других языков программирования.
  • Очень быстрый. Исполнительного кода мало, работает аки стрела.

Вот, в принципе, и всё.

Тестирование различных плагинов в разные периоды жизни этого сайта показали, что все они недостаточно удобны.

Так, например, некоторые из них, предлагают использовать дополнительные поля для указания кода, а потом вставляют их через специальный BB-код. Когда кусочков кода много, такой способ превращается в настоящее мучение.

Другие срезают разметку в редакторе или каверкают вводимые символы после сохранения страницы.

Поэтому, когда автор материала утомился от различных огрехов используемых плагинов, было принято решение написать новый плагин, который бы удовлетворял следующим требованиям:

  • Использовал бы систему шорт-кодов WordPress.
    Намного удобнее просто [some_code]обернуть[/some_code]  большое количество кода в шорт-код по ходу печати материала, чем использовать дополнительные поля или какие-либо всплывающие окна.
  • Имел бы кнопку в панели Визуального редактора.
  • Позволял бы использовать сочетание клавиш (в данном случае Alt+C) для быстрой вставки шорт-кода.

Задумка достаточна простая. Поэтому она ни на что заранее не претендует.

Интересно другое — как воплотить идею от точки А, когда плагин только задуман, до точки Б — публикации его в официальном каталоге  и последующей установки на любую систему WordPress, на которой сегодня работают миллионы сайтов?

Об этом в последующих материалах.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Gulp — автоматизация процесса разработки

Значимую роль в технологиях веб-разработки приобрели система автоматизации процесса разработки. Наиболее известные из них — это старичок Grunt и более...

Закрыть