Не знаю, сколько ещё людей, кроме меня, среди WordPress-блогеров, которые пользуются только вкладкой «HTML» в визуальном редакторе. Но уверен, что многим из блоговодов, уделяющим внимание оформлению текста, этот трюк поможет сэкономить время и свести всю рутину прописывания CSS-классов для тегов к простым кликам мышью по кнопкам.

Лично у меня, привычка следить за HTML появилась из-за того, что TinyMCE часто грешит вставкой лишних переносов <br /> и из-за того, что люблю смотреть живой код. Поэтому вкладкой «Визуально» в редакторе WordPress я пользуюсь очень редко.

А вот с накоплением проектов, получается так, что на каждом принимаются за правила оформления какие-то особые подходы, например, в этом блоге есть first-letter в начальном параграфе каждой статьи, в другом проекте нужно разбивать текст на колонки из админки, в третьем красить и увеличивать текст через <span> с определёнными классами. Поэтому понадобился способ расширить возможности визуального редактора.

Дальше примемся за настройку визуального редактора для WordPress под себя.

По адресу /wp-includes/js/ находим файлы quicktags.dev.js и quicktags.js, создаём их копии (обязательно!).

В quicktags.dev.js видим, что каждая кнопка описывается так (пример для кнопки «b» (strong), пояснения параметров в коде):

edButtons[edButtons.length] =
new edButton('ed_note'
,'b' //имя кнопки (для админки)
,'<strong>' //открывающий тег
,'</strong>' //закрывающий тег
,'b' //внутренне имя для кнопки (для функций)
);

Покажу на примере, как можно добавить свою кнопку, например, для особого параграфа <p class="my-style">…</p>:

edButtons[edButtons.length] =
new edButton('ed_note'
,'мой стиль' // чем короче имя кнопки, тем лучше
,'<p class="my-style">'
,'</p>'
,'myStyle'
);

Дальше, копируем этот код в quicktags.dev.js, расположив между остальными кнопками в нужном порядке, и сохраняем его (файл) под именем quicktags.js с заменой старого файла. (Можно сразу вставить в «старый» quicktags.js, но, как можно увидеть, он не совсем читабелен.)

Если всё сделано правильно, то в табе «HTML» появится ваша кнопка. При одиночном нажатии будет вставляться открывающий/закрывающий тег, а если обвести кусок текста и кликнуть — выделенный текст будет помещён между вашими тегами.

Естественно, стили для <p class="my-style">…</p> следует предварительно прописать в ваш style.css.

Таким образом, можно добавить нужные кнопки для всех особых случаев: других тегов, колонок, параграфов и даже смайлов :)

Ещё один момент, если забить в параметры кнопки инлайновые стили для тегов, то все изменения можно будет видеть в админке на вкладке «Визуально». Случайный пример:

edButtons[edButtons.length] =
new edButton('ed_note'
,'левая колонка' 
,'<div style="float: left; width: 300px;">'
,'</div>'
,'leftCol'
);

Пусть это и вынужденное зло, но таким образом мне удалось научить одного клиента разбивать текст на колонки в своих статьях, не обременяя его знанием HTML/CSS. Когда ему нужно, он просто переключается на «HTML», разбивает кнопками текст на колонки, затем переключается обратно в «Визуально» и правит уже там, видя текст в колонках.

Да, мой источник знаний с описанием, как это можно было сделать (добавить кнопки).

Не забудьте, что при обновлении версии WordPress, вам придётся проделать все эти действия заново, либо просто заменить файлы quicktags.dev.js и quicktags.js на свои, заранее сохранённые.

Для желающих потренироваться на расширении вкладки «Визуально» могу посоветовать эту ссылку. Я с TinyMCE не разбирался, поэтому можете сообщить в комментариях об удачных результатах ;)

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Как добавить разные иконки к пунктам меню, используя только CSS

Иногда буду выкладывать в блог ссылки на полезные и интересные вещи найденные в сети. Для того, чтобы всё это не только пылилось в закладках, но и пригодилось кому-то на практике. Вы ведь не против?

В этот раз поделюсь новостью о том, что обновился один из самых популярных плагинов для WordPress — WP-Cumulus (v. 1.20), который создаёт анимированное 3D-облако тегов.

В новой версии можно выделить цветом самые «весомые» теги и самые неиспользуемые. Остальные теги автоматически раскрасятся градиентным переходом в порядке своей значимости от первого цвета ко второму.

Кроме того, анимированное облако тегов теперь можно вывести не только, как виджет в боковой колонке, но и на любой странице блога с помощью шорткодов. Полный список параметров шорткодов можно найти на странице разработчика плагина Роя Танка (Roy Tank) здесь.

Русифицированный плагин WP-Cumulus, а также инструкцию по установке и настройке качайте на Блоговоде.

* * *

Кстати, у того же Роя Танка можно получить не менее интересный сниппет на сайт в виде 3D-облака своих (или чужих) фотографий с flickr.com или Picasa. Пример можно увидеть там же в боковой колонке. Просто вставьте нужный вам RSS-фид аккаунта с одного из этих сайтов, подкорректируйте настройки и получите нужный код для установки. Всё просто :)

* * *

Сканер блогов:

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

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Нет похожих статей.