Не пропусти
Главная » Интернет новичку » Подсветка кода и кнопки форматирования комментариев в 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

Презентация обновленной партнерской программы МегаКонкурс, создание, продвижение и заработок на сайте

> Презентация обновленной партнерской программы Binpartner.com + МегаКонкурс Здравствуйте, уважаемые читатели блога Хочу предложить вашему вниманию пресс-релиз обновленной партнерки Binpartner.com. Но, прежде всего, остановлюсь на МЕГАКОНКУРСЕ, который стартовал параллельно с ...

Предновогодняя акция от Профит Партнера, создание, продвижение и заработок на сайте

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

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

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

Почта (новый Hotmail), создание, продвижение и заработок на сайте

> Почта Outlook.com (новый Hotmail) Здравствуйте, уважаемые читатели блога У компании Майкрософт имеет место быть привычка смены названия их онлайн-сервисов. Поисковик Бинг не раз менял свое имя, да и облачное ...

Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить через, создание, продвижение и заработок на сайте

> Почему так важна быстрая индексация страниц сайта в Яндексе и как ее можно ускорить через GetBot.guru Здравствуйте, уважаемые читатели блога Сегодня речь пойдет про онлайн-сервис, позволяющий быстро отправлять в ...

Почему не загружается и не работает социальная сеть — Одноклассники, а так же как ее открыть, если она заблокирована

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

Почему не загружается ВК и браузер не заходит во Вконтакте, создание, продвижение и заработок на сайте

> Почему не загружается ВК и браузер не заходит во Вконтакте Здравствуйте, уважаемые читатели блога Практически каждый житель отечественных стран в возрасте от 14 до 45 лет имеет свой аккаунт ...

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

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

Послушай Платона и сделай правильно, создание, продвижение и заработок на сайте

> Послушай Платона и сделай правильно §1 Платон всегда прав §2 Если Платон не прав, смотри §1 Здравствуйте, уважаемые читатели блога Сегодня поговорим о новой страшилке Яндекса — Минусинске, и ...

Пользовательское соглашение, создание, продвижение и заработок на сайте

> Пользовательское соглашение KtoNaNovenkogo.ru Пользовательское соглашение сайта KtoNaNovenkogo.ru Итак, Уважаемые посетители, давайте с вами договоримся об условиях пользования ресурсом Использование материалов данного сайта регулируется положением законодательства РФ (и международными нормами) ...

Получение бэклинков с профилей трастовых сайтов и со страниц сервисов для проведения SEO анализа, создание, продвижение и заработок на сайте

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

Политика конфиденциальности, создание, продвижение и заработок на сайте

> Политика конфиденциальности Политика конфиденциальности сайта KtoNaNovenkogo.ru Для показа объявлений на блоге KtoNaNovenkogo.ru используются услуги сторонних рекламных компаний. Эти компании могут использовать информацию о Ваших посещениях этого блога и других ...

Покупка домена (доменного имени) на примере регистратора Reghouse, создание, продвижение и заработок на сайте

> Покупка домена (доменного имени) на примере регистратора Reghouse Здравствуйте, уважаемые читатели блога Это уже третья статья из серии, посвященной выбору хостинга и регистрации доменного имени для вашего будущего сайта ...

Пока другие требуют у вас денег

> Пока другие требуют у вас денег, Wizard.Sape — дарят их вам! Здравствуйте, уважаемые читатели блога Сервис автоматического продвижения сайтов Wizard.Sape делает очень выгодное предложение своим клиентам: Пополните баланс на ...

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

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

Поисковая система от Майла

> Поисковая система от Майла — история развития и особенности продвижения сайта под поисковик майл.ру Здравствуйте, уважаемые читатели блога Продолжаем обзор поисковых систем рунета, который мы начали, естественно, с Google. ...

Поисковая система Webalta, которую ненавидит весь рунет

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

Поисковая система Bing и почта Outlook (бывший Hotmail), создание, продвижение и заработок на сайте

> Поисковая система Bing и почта Outlook (бывший Hotmail) Здравствуйте, уважаемые читатели блога Сегодня я хочу поговорить про не очень популярные в рунете поисковую систему Bing и почтовый сервис Хотмайл. ...

Поиск по сайту и интернет-магазину от Яндекса, создание, продвижение и заработок на сайте

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

Поиск по картинке, фото или любому загруженному изображению в Гугле и Яндексе

> Поиск по картинке, фото или любому загруженному изображению в Гугле и Яндексе — как это работает Здравствуйте, уважаемые читатели блога Еще совсем недавно поисковики могли искать только по словам. ...

Поиск по картинке, фото или любому загруженному изображению в бесплатном сервисе

> Поиск по картинке, фото или любому загруженному изображению в бесплатном сервисе picid.club — как это работает? Здравствуйте, уважаемые читатели блога Эта статья посвящена пользователям фотобанков. Фотобанки (они же микростоки) ...

Рейтинг@Mail.ru