WordPress коды или как вставить код в WordPress с помощью плагина SyntaxHighlighter Evolved?

Автор: | Дата: 01.01.2017

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

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

<script type=»text/javascript» src=»http://resurs.ru/simplebox_util.js»></script><script type=»text/javascript»>//

Как вам такой код? Разве сможет ваш читатель хоть что-нибудь разобрать в нем? Обычный текст без выделения, без нумерации, очень неудобен. И это только пример, короткий код, а может быть намного длиннее и вот тогда начнутся проблемы со вставкой кода.

Да, WordPress это не идеал, хороший движок, но не идеал и как вы должны были заметить он не поддерживает различный коды (html, php , java, css) и отображает их так же как и обычный текст.

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

1).  <script type=»text/javascript» src=»http://resurs.ru/simplebox_util.js»>;

2).  </script><script type=»text/javascript»>;

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

Иногда WordPress отображает код искаженно и делает его корявым(с ошибками), а это может повлечь за собой беду на автора и в глазах читателей, автор потеряет свой профессионализм. Так же при вставке кода через редактор «Текст(HTML)» при сохранении или даже публикации поста код вообще пропадает.

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

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

SyntaxHighlighter Evolved

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

Хорошо, все установлено и активировано, теперь перейдем к настройкам этого чудесного дополнения для WordPress.

Перед вами откроется широкие настройки, которые позволяют сделать вывод кода, так как нужно вам и вашему шаблону WordPress. Рассмотрим каждую из них:

Чуть ниже доступен пример кода(Пред просмотр).

Итак:

1) Highlighter Version — тут конечно лучше всего использовать третью версию, с ее помощью ваши пользователи смогут скопировать только код, а вот во второй версии могут так же копироваться в буфер обмена и нумерация, что будет очень неудобно для посетителей.

2) Color Theme — именно про эту функцию я упоминал выше, здесь можно настроить внешний вид, точнее фон под ваш шаблон.

3) Load All Brushes — что бы в дальнейшем при вставке кода не указывать какой текущий язык программирования, для этого включите эту опцию.

4) Defaults — это строчка говорит о том что ниже расположены настройки по умолчанию, и вы можете настроить их под свои потребности.

5) Miscellaneous — здесь есть настройки которые могут вам понадобиться:

1. Включить/отключить вывод строчной нумерации

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

3. Поставив галочку на этой функции, плагин будет автоматически подчеркивать присутствующие ссылки в кодах.

4. Здесь на ваш выбор. Данная функция закрывает весь код в спойлер, а при нажатии спойлер открывается и код будет виден.

5. Это режим замера дисплея(экспериментируйте, кому-то эта функция может пригодиться).

6. Эта опция выравнивает весь код по левому краю.

7. Если код будет слишком длинным, то плагин автоматически перенесет его на другую строку, если же включена вторая версия(См. пункт 1) появиться полоса прокрутки и код не будет перемещен.

6) Additional CSS Class (es) — здесь подключаются стили для плагина.

7) Starting Line Number — с какой строки начинается нумерация.

8) Line Number Padding — можете поиграться в данном пункте настройками(добавление нулей перед нумерацией).

9) Tab Size — так же можете поиграться с настойками, здесь можно задать размеры.

10) Title — Здесь задается название, например можно вписать «Код». Думаю пользователям и так будет понятно что это какой — либо код. Название оставляем пустым.

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

Как вставить код в WordPress

Плагин дает свои готовые теги для вставки кода в WordPress в самом конце страницы настроек. Можно указать язык кода, добавлять дополнительные классы для вывода, сворачивать и разворачивать код, менять фон — все это делается при помощи тегов.

Но все таки как вставить код в WordPress по простому? Нужно всего лишь в режиме «Текст/HTML» или «Визуально» заключить свой код в такие тэги [phр]Ваш код[/php] и код отобразиться красиво, нормально и без искажений. Как видите все достаточно просто.