Emmet + WordPress

История проекта

Уверен, большинство профессиональных верстальщиков знакомы с набором плагинов для основных текстовых редакторов – «Zen Coding» – zen-coding.ru. Если нет, цитата из Wikipedia поможет понять идею и некоторую историю проекта:

Zen Coding — это набор плагинов для текстовых редакторов, которые в некоторой степени ускоряют написание HTML, XML, XSL кода, а также кода на некоторых других языках. Проект был начат Вадимом Макеевым в 2008 году и активно разрабатывается Сергеем Чикуенком начиная с 2009 года, а также сообществом пользователей Zen Coding. Инструменты Zen Coding были вложены в популярные текстовые редакторы, а некоторые плагины, разработанные командой Zen Coding и другими, сделаны независимыми друг от друга. Zen Coding написан на JavaScript и поэтому хорошо переносим между платформами. – ru.wikipedia.org/wiki/Zen_Coding

Первоначальная концепция была предложена Вадимом Макеевым в статье Zen Coding 2.0 Концепт в апреле 2009 года. Затем Сергей Чикуёнок, занимался развитием этого проекта.

Видео-ролик демонстрирует основные возможности плагина Zen Coding.

Оценить работу можно по ссылке – zen-coding.ru/demo.

Emmet

В августе этого года (2012) проект получил свое продолжение в форме модификации плагина под названием «Emmet». Заметка об этом промелькнула на habrahabr.ru/sandbox/47691, приведу вольную цитату автора заметки:

В чем, собственно, отличие от ZC?

  1. Можно писать значения для свойств CSS прямо за аббревиатурами: p10 > padding: 10px, m0.5-10--15 > margin: 0.5em 10px -15px, w100p > width: 100%. Для целых значений автоматически подставляется px, а для значений с плавающей запятой — em.
  2. Минус перед аббревиатурой раскроет свойство с добавлением браузерных префиксов. Например: bdrs создаст свойство border-radius, но -bdrs создаст список свойств с webkit, moz, ms и o префиксами.
  3. Генератор градиентов: определите градиент (linear-gradient(...) или проще lg(...)) в качестве значения для любого CSS-свойства, нажмите Tab и получите список с определениями градиентов с учетом браузерных префиксов и особенностей реализации в более ранних версиях браузеров.
  4. Неизвестные аббревиатуры раскрываются в HTML-тэги (например, foo > <foo></foo>).
  5. В Emmet присутствует генератор «рыбы» Lorem Ipsum. Для генерации можно использовать слова lorem и lipsum. Если текста мало, вы можете вручную задать количество слов в «рыбе», написав loremNN, где NN — число от 8 до ваших потребностей. Не думаю, что может понадобиться «рыба» более 1000 слов.
  6. Неявные теги: вам больше не придется писать все теги для каких-то довольно стандартных конструкций, плагин определит их самостоятельно, полагаясь на тег-родитель. Попробуйте раскрыть эти конструкции: .header>.nav^.logo, .header>.wrap>.nav^^.logo и сразу всё поймете.

Приведенный перечень не полный, подробнее в статье и на официальном сайте проекта «Emmet» emmet.io.

Emmet + WordPress

Отлично, плагин шикарно работает в поддерживаемых текстовых редакторах. Однако, его возможности более чем идеально подходят и для консоли WordPress. Создавать код записи блога или страницы сайта гораздо удобнее зная и используя синтаксис Emmet. Разработчики позаботились о том, чтобы их разработку можно было использовать на любом сайте и в любом текстовом поле <textarea>. Огромное спасибо!

Теперь, все, что требуется от нас это подключить плагин к нашему сайту на WordPress. Так как плагин написан на java-script, то и подключать его необходимо аналогично любому подключаемому JS-скрипту. О корректном способе подключения скриптов я писал в своих заметках Корректное подключение jQuery в теме WordPress и jQuery + WordPress.

  1. Скачиваем скрипт – «Zen Coding for <textarea>» github.com/sergeche/zen-coding/downloads
  2. Размещаем один из его вариантов, думаю, что стоит использовать минимизированный, в директории js используемой темы.
  3. В файл functions.php добавляем нижеследующий код:
function zen_textarea() {
	wp_enqueue_script(
		'zen_textarea',
		get_template_directory_uri() . '/js/zen_textarea.min.js'
	);
}
add_action('admin_enqueue_scripts', 'zen_textarea');

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

Дополнение от 25.02.2013
Реализовал добавление Emmet в консоль WordPress в виде крохотного плагина, скачать и обсудить можно здесь — Emmet WordPress плагин.

Готово! Теперь все возможности и преимущества Emmet доступны при написании кода страниц в консоли сайта!

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

Источники:
codex.wordpress.org/Function_Reference/wp_enqueue_script
habrahabr.ru/sandbox/47691

Опубликовано

Обратите внимание на предыдущие записи: