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

В этой статье из рубрики Плагины для WordPress я собираюсь рассказать вам о замечательном плагине SyntaxHighlighter Evolved, который позволяет удобно, красиво и наглядно реализовать вставку и подсветку синтаксиса разнообразного кода в текст статьи или комментарии, а так же мы рассмотрим вопрос повышения функциональности системы комментирования блога на WordPress. При этом будут рассмотрены таки плагины как Comment Form Quicktags в этой статье, а так же плагины @ Reply, Comment Toolbar и Qip Smiles в следующей статье этой серии. Эти плагины позволят нам расширить стандартные возможности комментариев и добавить в них следующие возможности:

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

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

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

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

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

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

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

Настройка плагина SyntaxHighlighter Evolved

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

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

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

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

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

В поле "Номер начальной строки" можно назначить номер первой строки по умолчанию, а в поле "Размер табуляции" - соответственно, размер знака табуляции. Не забудьте сохранить проведенные изменения настроек, нажав на кнопку "Сохранить изменения". Что примечательно, все внесенные изменения, после нажатия сохранения, тут же отобразятся в окне под названием "Предпросмотр". Как вы, наверное, уже поняли из приведенного выше примера использования плагина, его применение для подсветки нужного фрагмента кода весьма простое. Нужно всего лишь заключить код в специальные теги с квадратными скобками:

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

или так:

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

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

Плагин, добавляющий кнопки форматирования текста в комментарии WordPress - Comment Form Quicktags

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

Устанавливаем плагин Comment Form Quicktags:

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

Если при установке плагина возникли какие-либо затруднения, то можете обратиться к материалам этой статьи - Решение возможных проблем при установке плагинов. Теперь можно русифицировать плагин 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") если хотите добавить новый тег.
• Отредактируйте другие поля (в поле "Надпись (название)" вводите желаемое название вкладки)
• Нажмите кнопку "Правка/Добавить"
• Задайте порядок кнопок с тэгами простым их перетаскиванием прямо в окне настройки (очень удобная возможность)
• Нажмите кнопку "Обновить", чтобы сохранить проведенные настройки

Теперь давайте настроим вставку кода в комментарии с использование подсветки синтаксиса плагином SyntaxHighlighter Evolved. Для этого нужно будет внести изменение в настройку тега (вкладки) "Code". Щелкаете по вкладке "Code" на странице настроек и для начала переименовываете название вкладки, например, в "Вставка кода" (в поле "Надпись (название)"). А вот в полях "Открывающий тэг" и "Закрывающий тэг" прописываете теги плагина SyntaxHighlighter Evolved, например, [рhp] и [/рhp]. Теперь нужно нажать на кнопку "Правка/Добавить", при необходимости перетащить вкладку мышью на другое место и не забыть нажать на кнопку "Обновить" для окончательного сохранения настроек. Пример подсветки кода в комментариях вы можете посмотреть здесь.

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

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

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

Про плагины Comment Toolbar и Qip Smiles читайте в следующей статье этой серии (Плагины Comment Toolbar и Qip Smiles — добавляем в комментарии WordPress возможность ответа, цитирования, навигации и вставки смайлов).

Вы так же можете ознакомиться с другими материалами связанными с работой и настройкой блога на WordPress, а так же с материалами, посвященными плагинам для блога на WordPress.

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

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