В этой статье рассмотрим вопрос размещения исходного HTML-кода на странице сайта WordPress. Я как-то затрагивал эту тему на одном из своих сайтов. Но там было рассмотрено несколько приёмов размещения кода на страницах ресурса индивидуальной разработки. А как это сделать на WordPress? Оказывается, проще простого!
Прежде всего, нужно отметить, что у этой задачи есть два варианта решения:
- Применение функциональных возможностей движка, а именно, встроенного редактора TinyMCE;
- Использование дополнительных программных модулей (плагинов).
Вставка HTML-кода при помощи редактора
Для расширения возможностей встроенного редактора WordPress необходимо обязательно установить плагин TinyMCE Advanced. После его установки Вы заметите практически тотальное преображение редактора. Плагин устанавливается из админки (Плагины → Добавить новый). На открывшейся странице нужно ввести поисковый запрос, установить и активировать обнаруженный плагин:
После этого в редакторе WordPress TinyMCE появится несколько вариантов вставки кода, которые мы сейчас рассмотрим. Именно этот плагин расширяет функциональные возможности редактора и, помимо всего прочего, добавляет возможность вставки кода.
Теперь в редакторе TinyMCE реализовано два варианта публикации кода:
- Для выделения участка кода используется тег CODE (
<code>...</code>); - Участок кода, подготовленный для демонстрации, обрамляется тегами PRE (
<pre>...</pre>).
Вариант №1
Для публикации и показа кода при помощи тега CODE, необходимо вставить нужный участок кода в редактор на вкладке Визуально. Ничего в коде изменять не следует. Выделить код мышкой и в редакторе нажать на значок КОД:
Альтернативный вариант: пройти по пути Форматы → Строки → Код:
В результате произведенных действий исходный код принимает другой формат текста (на содержание кода не обращайте внимание, он взят для образца) :
<meta name="Robots" content="index, follow">
Вариант №2
Как мы уже знаем, редактор позволяет демонстрацию кода в поле тега PRE. Для этого так же вставляем участок кода без изменений, выделяем его мышью и в редакторе проходим по пути: Форматы → Блоки → Отформатированный:
В результате код выделяется примерно таким образом:
<meta name="Robots" content="index, follow">
И в первом и во втором варианте представление кода корректное, визуально он выделяется заметно. При обрамлении тегами CODE и PRE, исходный код будет автоматически закодирован для отображения и не воспринимается браузером в изначальном, первозданном виде. Код легко копируется и применяется в дальнейшем по назначению.
Плагины для демонстрации исходного HTML-кода
Во многих публикациях в Интернете для вставки кода рекомендуют установку плагинов, например, Crayon Syntax Highlighter, WP Syntax, CodeColorer, Code Snippet Library, WordPress Rainbow Hilite и др. Не могу оспаривать полезность и практичность этих плагинов, но все-таки их применение влечет за собой использование дополнительных ресурсов и увеличение нагрузки на сервер. Кто-то является сторонником установки большого количества плагинов, а кто-то напротив, предпочитает их, по возможности, избегать.
Согласен, у плагинов много достоинств. Это и гибкие настройки и подсветка и удобство копирования кода и возможность открывать его в отдельном окне. Плагины дают возможность разнообразить стили отображения кода.
По всеобщему мнению, лучшим из этого ряда является Crayon Syntax Highlighter. Он имеет большое количество настроек и режимов отображения, различные цветовые схемы и много удобных и полезных свойств. Это практически единственный плагин, который начинает работать сразу после его установки без каких-либо дополнительных заморочек, что выгодно отличает его от своих «собратьев».
Единственный его недостаток — заимствует много ресурсов, что приводит к медленной загрузке страницы. Но наличие многих преимуществ с лихвой затмевает этот недостаток и многие пользователи жалуют Crayon и успешно применяют его на своих ресурсах.
