Не пропусти
Главная » Интернет новичку » Подсветка кода и кнопки форматирования комментариев в WordPress

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

>

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

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

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

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

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

  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» (если не русифицировали плагин) или «Подсветка синтаксиса» (если русифицировали).

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

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

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



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



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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

Подборки по теме:

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

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

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

доброго времени суток, у меня такая проблема возникла, установил плагин на вордпресс, вроде все норм, но вдруг вылезла ошибка 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: буду очень признателен, если отпишитесь. Кому-нибудь обязательно пригодиться.

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

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

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

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

Киньте кто-нить файлом локализации для SyntaxHighlighter Evolved мне на мыло [email protected] плиз.

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

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

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

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

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

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

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



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

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

* Нажимая на кнопку «Добавить комментарий» или «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

О admin

x

Check Also

Что такое фиаско, а также что означает фраза

> Что такое фиаско, а также что означает фраза — это фиаско братан Здравствуйте, уважаемые читатели блога Хочу продолжить тему пояснения ярких слов и выражений, которые не всегда могут быть ...

Что такое респект и что значит это слово при общении в интернете, создание, продвижение и заработок на сайте

> Что такое респект и что значит это слово при общении в интернете Здравствуйте, уважаемые читатели блога Давайте продолжим разбирать наиболее часто употребляемые интернет-мемы (специфические, присущие в основном только этой ...

Что такое рерайт (рерайтинг) и с чем его едят, создание, продвижение и заработок на сайте

> Что такое рерайт (рерайтинг) и с чем его едят? Здравствуйте, уважаемые читатели блога Если у вас есть сайт, либо вы планируете им обзавестись, то, конечно же, вы слышали слово ...

Что такое репост и как делать репосты во ВКонтакте, создание, продвижение и заработок на сайте

> Что такое репост и как делать репосты во ВКонтакте? Здравствуйте, уважаемые читатели блога Согласно официальному определению, репост – это возможность мгновенно поделиться информационной заметкой, размещённой в соцсетях, при этом ...

Что такое кэш

> Что такое кэш — как очистить кеш в Опере, Мозиле, Хроме и других браузерах Здравствуйте, уважаемые читатели блога Что такое кэш? Это на самом деле довольно простое и в ...

Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть, создание, продвижение и заработок на сайте

> Что такое интернет, кто создал всемирную паутину World Wide Web и как работает глобальная сеть Здравствуйте, уважаемые читатели блога Все мы с вами живем в эпоху глобального интернета и ...

Что такое Емайл (E-mail) и почему это называют электронной почтой, создание, продвижение и заработок на сайте

> Что такое Емайл (E-mail) и почему это называют электронной почтой Здравствуйте, уважаемые читатели блога Все когда-то начинают, поэтому вопрос о том, что такое Емейл и какое он имеет отношение ...

Что такое дроп, дропнутый или освобождающийся домен, создание, продвижение и заработок на сайте

> Что такое дроп, дропнутый или освобождающийся домен Здравствуйте, уважаемые читатели блога Термин Дроп происходит от английского слова Drop, которое, если верить автоматическому переводчику Google, имеет довольно большое количество значений ...

Что такое домены, хостинг, DNS сервера и IP адреса, создание, продвижение и заработок на сайте

> Что такое домены, хостинг, DNS сервера и IP адреса Домены, Ip адреса и связывающие их DNS сервера Что такое доменные имена и какие бывают домены Покупка и продление доменов ...

Что такое девайс и чем он отличается от гаджета, создание, продвижение и заработок на сайте

> Что такое девайс и чем он отличается от гаджета Здравствуйте, уважаемые читатели блога В том кругу где я общаюсь очень часто употребляются термины девайс и гаджет, но при этом ...

Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике, создание, продвижение и заработок на сайте

> Что такое блог и как его создать на бесплатном движке WordPress, оптимизация и заработок на своем интернет-дневнике Здравствуйте, уважаемые читатели Сегодня статья начнется с того, что мы попробуем дать ...

Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты, создание, продвижение и заработок на сайте

> Что такое анонимайзеры (Хамелеон, Spools) или как скрыть IP адрес для входа в ВКонтакте, Одноклассники, Ютуб и другие сайты Здравствуйте, уважаемые читатели блога Прежде чем рассматривать случаи использования анонимайзеров, ...

Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта, создание, продвижение и заработок на сайте

> Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта Здравствуйте, уважаемые читатели блога Сегодня хочу затронуть тему формирования уникальных URL адресов в интернете и рассказать про ...

Что такое RSS, где скачать иконки и какая читалка самая лучшая, создание, продвижение и заработок на сайте

> Что такое RSS, где скачать иконки и какая читалка самая лучшая Здравствуйте, уважаемые читатели блога Эта статья будет посвящена вопросу — что такое RSS и почему его в обязательном ...

Что такое Rookee и как продвигать сайт в этой системе, создание, продвижение и заработок на сайте

> Что такое Rookee и как продвигать сайт в этой системе? Здравствуйте, уважаемые читатели блога Я уже писал про некоторые сервисы помогающие продвигать сайты в автоматическом режиме — Сеопульт, SeoWisard, ...

Что такое Joomla, создание, продвижение и заработок на сайте

> Что такое Joomla Свое изучение сайтостроения я начал именно с выяснения вопроса: Что такое Joomla и как она может помочь мне в создании сайтов). Если не считать небольшого опыта ...

Что такое ICQ, как его установить и пользоваться, создание, продвижение и заработок на сайте

> Что такое ICQ, как его установить и пользоваться? Здравствуйте, уважаемые читатели блога Не будем расписывать историю возникновения ICQ еще с начала времен его разработки — это не представляет особого ...

Что такое DNS и как ДНС-сервера обеспечивают работу интернета, создание, продвижение и заработок на сайте

> Что такое DNS и как ДНС-сервера обеспечивают работу интернета Здравствуйте, уважаемые читатели блога О том, что такое интернет и когда он появился, мы с вам уже говорили. Говорили и ...

Что такое cookie и как почистить куки в современных браузерах, создание, продвижение и заработок на сайте

> Что такое cookie и как почистить куки в современных браузерах Здравствуйте, уважаемые читатели блога Практически сразу любой начинающий интернетчик сталкивается с таким понятием как cookie. Что означает это загадочное ...

Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP, создание, продвижение и заработок на сайте

> Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP Сегодня я хотел бы поговорить о правах доступа к файлам ...

Что мешает SEO-продвижению вашего сайта и как это исправить

> Что мешает SEO-продвижению вашего сайта и как это исправить — 10 основных ошибок и 5 базовых рекомендаций Здравствуйте, уважаемые читатели блога Сегодня хочу выступить в роли адвоката Сео методов ...

Рейтинг@Mail.ru