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

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

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

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

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

Подсветка кода в WordPress — плагин SyntaxHighlighter Evolved

Как я уже говорил, для WordPress имеется замечательный плагин для подсветки кода. Вы можете посетить сайт автора плагина SyntaxHighlighter Evolved или же скачать его сразу на официальном сайте плагинов WordPress. Для этого WP плагина существует русификация, которую вы можете скачать по этой ссылке — русификация SyntaxHighlighter Evolved. Правда, это русификация для версии плагина 2.2.1, но она у меня прекрасно работала на версии SyntaxHighlighter Evolved 2.3.3.

Установка плагина SyntaxHighlighter Evolved на WordPress

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

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

Если при установке на WordPress плагина SyntaxHighlighter возникли какие-либо затруднения, то можете обратиться к материалам этой статьи — Решение возможных проблем при установке плагинов в WordPress. Теперь можно русифицировать плагин SyntaxHighlighter Evolved.

Для этого распаковываем скачанный раннее по ссылке архивс русификацией SyntaxHighlighter Evolved. Находите внутри папку syntaxhighlighter и копируете ее на сервер вашего хостинга с Вордпресс блогом в папку с WP плагинами wp-content/plugins/. Можно вместо этого скопировать только те два файла, что лежат в папке localization, но только уже в папку wp-content/plugins/syntaxhighlighter/localization.

Настройка плагина SyntaxHighlighter Evolved в админке WordPress

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

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

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

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

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

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

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

[рhp]здесь Ваш код[/рhp]

или так:

[сode lang="js"]здесь Ваш код[/сode]

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

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

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

Установка в WordPress плагина Comment Form Quicktags:

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

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

Теперь можно русифицировать плагин Comment Form Quicktags. Для этого распаковываем скачанный раннее по ссылке архивс русификацией Comment Form Quicktags. Находите внутри два файла ru_RU.po и ru_RU.mo. Их нужно скопировать на сервер вашего хостинга в папку wp-content/plugins/comment-form-quicktags/languages.

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

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

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

Теперь давайте настроим подсветку кода в комментариях WordPress средствами плагина SyntaxHighlighter Evolved. Для этого нужно будет внести изменение в настройку тега (вкладки) «Code». Щелкаете по вкладке «Code» на странице настроек WP плагина Comment Form и для начала переименовываете название вкладки, например, в «Вставка кода» (в поле «Надпись (название)»).

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

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

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

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

У Евгения Попова имеется видекурс по WordPress, который стоит того, чтобы с ним ознакомиться.

Вы так же можете ознакомиться с другими материалами по WordPress:

• Уроки WordPress
  • Что такое интернет и WWW (всемирная паутина)
  • Что такое блог и как его создать бесплатно
  • CMS - движок для сайта
  • ЧПУ в Вордпресс
  • Страница ошибки 404
  • Настройки WordPress
  • Снижаем нагрузку на сервер
  • Темы и шаблоны для WordPress
  • Работа в WordPress
• Плагины WordPress на моем блоге
  • Установка плагинов
  • Карта сайта для WordPress
  • Hyper Cache - кэширование в Вордпресс
  • All in One SEO Pack - поисковая оптимизация блога
  • Искореняем спам в комментариях
  • Подписка на новые комментарии
  • WP-PageNavi - постраничная навигация
  • Хлебные крошки для блога
  • Внутренняя перелинковка и создание списка похожих материалов

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

Очень обяжете, если воспользуетесь этим блоком кнопок:

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

Наверх