Подсветка кода и кнопки форматирования комментариев в WordPress — SyntaxHighlighter и Comment Form

2 Декабрь, 2009

В этой статье я собираюсь рассказать вам о замечательном WP плагине SyntaxHighlighter Evolved, который позволяет удобно, красиво и наглядно реализовать вставку и подсветку кода в текст статьи, а так же мы рассмотрим вопрос повышения функциональности системы комментирования блога на Вордпресс, кроме включения отображения граватаров комментаторов.

При этом будут рассмотрены такие плагины, как Comment Form Quicktags, в этой статье, а так же Comment Toolbar и Qip Smiles в следующей статье этой серии.

Эти плагины позволят нам расширить стандартные возможности комментариев и добавить в них следующие возможности:

  1. одним кликом вставлять цитаты в форму для их написания
  2. одним кликом вставлять имя человека, оставившего комментарий для того, чтобы ответить на его вопрос или задать ему свой
  3. перемещаться по комментам последовательно или сразу же переходить к первому, либо к последнему из них
  4. посетители вашего WP блога смогут использовать выделение жирным, курсивом и т.п.
  5. удобно вставлять ссылки в комменты
  6. вставлять в них код без потерь и в точно таком же виде как и в статьях, т.е. с использованием оформления и подсветки
  7. оживлять их смайликами

Вставка кода в WordPress с помощью SyntaxHighlighter Evolved


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

Плагин устанавливается в Вордпресс стандартным способом, а именно:

  1. распакуйте архив с плагином, используя ftp-менеджер подключитесь к вашему хосту и загрузите папку syntaxhighlighter в папку с WP плагинами wp-content/plugins/ на сервере вашего хостинга
  2. войдите в админку WordPress и выберете из левого меню вкладку «Плагины», а на ней «Inactive»
  3. найдите строку с SyntaxHighlighter Evolved и активируйте его

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

Ну вот, WP плагин установлен, теперь можно зайти в админку блога и ознакомиться с его настройками. Для этого выбираем из левого меню «Параметры» -> «SyntaxHighlighter» (если не русифицировали плагин) или «Подсветка синтаксиса» (если русифицировали).

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

[рhp]здесь Ваш фрагмент, который требуется подсветить[/рhp]

Но с помощью этой страницы настроек можно много чего поменять и переделать под себя. В поле «Цвета» можно выбрать одну из семи цветовых палитр, которую будет в итоге использовать SyntaxHighlighter для подсветки синтаксиса языков программирования и разметки.

В поле «Разное» можно настроить:

  1. «Показывать номера строк» — ставьте галочку, если хотите, чтобы слева от строк подсвеченного кода показывалась их нумерация
  2. «Показывать панель инструментов» — ставьте галочку, если хотите, чтобы при наведении на окно кодом, появлялась панелька с тремя кнопками, позволяющими, во-первых, скопировать чистый фрагмент из всплывающего окна, во-вторых, скопировать его в буфер обмена и, в-третьих, вывести его на печать
  3. «Автоматически делать URL «кликабельными»» — при установленной галочке можно будет перейти по всем ссылкам, включенным в область с кодом, просто щелкнув по ним мышью. Это будет работать и в комментариях, и в статьях.
  4. «Сворачивать окно» — при установленной галочке в окне подсвечиваемого кода будет показана только его часть, а для просмотра полного варианта нужно будет щелкнуть по специальной ссылке. Можно активировать эту опцию, если вы планируете вставлять в статьи своего блога большие фрагменты
  5. "Использовать легкий режим — лучший выбор для однострочного фрагмента — при установленной здесь галочке не будут отображаться номера строк и всплывающая панелька с тремя кнопками.
  6. «Wrap long lines (disabling this will make a scrollbar show instead)» — если галочка установлена, то длинная строка будет переноситься на следующую строку с показом иконки переноса. В противном случае, в окне с подсветкой кода появится горизонтальная прокрутка

В поле «Номер начальной строки» можно назначить номер первой строки по умолчанию, а в поле «Размер табуляции», соответственно, размер знака табуляции в окне с подсветкой кода. Не забудьте сохранить проведенные изменения настроек плагина SyntaxHighlighter, нажав на кнопку «Сохранить изменения».

Что примечательно, все внесенные изменения после нажатия сохранения тут же отобразятся в админке (в окне под названием «Предпросмотр»). Как вы, наверное, уже поняли из приведенного выше примера использования данного расширения, его применение весьма простое.

Нужно всего лишь заключить код в статье или комментариях WP в специальные теги с квадратными скобками:

[рhp]здесь Ваш фрагмент[/рhp]

или так:

[сode lang="js"]здесь Ваш фрагмент[/сode]

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

Какие именно языки поддерживает плагин SyntaxHighlighter вы можете увидеть на этой странице.

Comment Form Quicktags — расширение функционала комментариев в WordPress


Данный WP плагин позволяет добавить кнопки для оформления текста комментария такие как: выделение жирным, курсивом или зачеркиванием, добавление ссылки, выделение кода, вставка цитаты и т.п. Он достаточно легок и прост в настройках. Скачать Comment Form Quicktags можно отсюда.

Установка:

  1. распакуйте архив с плагином для Вордпресс comment-form-quicktags.1.2.1.zip, используя ftp клиент подключитесь к вашему сайту и загрузите папку comment-form-quicktags в папку с плагинами для WordPress wp-content/plugins/
  2. войдите в админку wordpress и выберете вкладку «Плагины»- «Inactive»
  3. найдите строку с Comment Form Quicktags и активируйте его

Теперь заходим в админку и выбираем из левого меню «Параметры» -> Comment Form Quicktags. На этой странице вы можете настроить, какие именно возможности форматирования текста комментариев будут доступны посетителям вашего блога.

На странице настроек приведено очень доступное описание алгоритма работы с мастером настройки:

  1. Выберите тэг (вкладку, например, «Вставка кода», как на приведенной выше картинке), чтобы его отредактировать или введите ID (в соответствующее поле «ID»), если хотите добавить новый тег
  2. Отредактируйте другие поля (в поле «Надпись (название)» вводите желаемое название вкладки)
  3. Нажмите кнопку «Правка/Добавить»
  4. Задайте порядок кнопок с тэгами в форме добавления комментария простым их перетаскиванием прямо в окне настройки (очень удобная возможность)
  5. Нажмите кнопку «Обновить», чтобы сохранить проведенные настройки

Теперь давайте настроим подсветку кода в комментариях WordPress средствами плагина SyntaxHighlighter Evolved. Для этого нужно будет внести изменение в настройку тега (вкладки) «Code».

Щелкаете по вкладке «Code» на странице настроек Comment Form и для начала переименовываете название вкладки, например, в «Вставка» (в поле «Надпись (название)»).

А вот в полях «Открывающий тэг» и «Закрывающий тэг» прописываете, например, [рhp] и [/рhp]. Теперь нужно нажать на кнопку «Правка/Добавить», при необходимости перетащить вкладку мышью на другое место в форме комментария и не забыть нажать на кнопку «Обновить» для окончательного сохранения настроек.

Как написано на странице настроек, данное расширение поддерживает следующие тэги:

<a href="" title=""> <abbr title=""> <acronym title="">  <blockquote cite=""> <cite> <code> <del datetime="">  <i> <q cite=""> <strike> <strong>

На их основе можно создавать новые вкладки над полем для ввода текста комментариев в WordPress. Пример использования этого WP плагина вы можете увидеть у меня в комментариях.

Про Comment Toolbar и Qip Smiles читайте в этой статье.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Плагины для WordPress

Комментарии и отзывы

Ярослав

Спасибо! Я так давно хотел разобраться с усовершенствованием возможностей комментариев на своем вордпресс блоге. С нетерпением жду следующих постов.

Дмитрий

Ярослав: постараюсь не затягивать, возможно, даже в следующей статье продолжу начатую тему облагораживания и обустройства комментариев.

alexgr

доброго времени суток, у меня такая проблема возникла, установил плагин на вордпресс, вроде все норм, но вдруг вылезла ошибка Warning: array_keys () [function.array-keys]: The first argument should be an array in /usr/home/vipusers/mc.ezar.ru/www/wp-content/plugins/comment-form-quicktags/comment-form-quicktags.php on line 148 и полетела кодировка. Ладно, я отключаю плагин Comment Form, все норм с кодировкой, НО у меня теперь не заходит в редактирование темы WordPress либо редактор плагинов пишет «Извините, этот файл не может быть отредактирован.»

помогите плииз... заранее благодарен

Дмитрий

alexgr: здравствуйте, к сожалению я не знаю в чем может быть причина сбоя. Могу только посоветовать поискать ответ на официальном русскоязычном mywordpress.ru/support/

alexgr

Дмитрий: хорошо Дмитрий, все же спасибо. если необходимо после решения проблемы могу отписаться у вас какие действия помогли...

Дмитрий

alexgr: буду очень признателен, если отпишитесь. Кому-нибудь обязательно пригодиться.

Сергей

А у меня не захотел устанавливаться этот плагин... Пришлось установить quoter. Скажите, пожалуйста, есть ли подобный плагин, чтобы можно было с легкостью цитировать выдержки из статей вордпресс?..

Сергей

Есть ли аналог этого плагина для подсветки кода? Уж очень мне он нравится, но не хочет активироваться в WordPress MU 2.9.1

Григорий

Спасибо, поставил, работает, только вот значки где-то сбоку и внизу и окошко хотелось бы поширше, полезу в код плагина, может найду чего

Dudenok.ru

Нет файла по ссылке http://www.wp-ru.ru/files/syntaxhighlighter-ru_RU.zip ...

Киньте кто-нить файлом локализации для SyntaxHighlighter Evolved мне на мыло adudenok@gmail.com плиз.

DS

http://ds.empower-servers.ru/1.JPG — как избавится от этой ерунды?

sidash

спасибо!давно искал такой плагин!

SEO-Саня

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

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

Dima

Spasibo

Максим

Дмитрий подскажите как вы сделали плавающие кнопки соц.сетей???

Уж очень понравились ваши кнопки и можно будет изменить вид кнопок под свой сайт????

Дмитрий

Максим: это скрипт Шаре42

Андрей88

SEO-Саня, у меня такая же беда. Код стал мелким и никоких признаков подсветки.

Дмитрий, подскажите решение!

Роман

Та же беда, код просто становится мелким. Помогите решить пожалуйста!

Подписаться не комментируя