Публикация HTML-кода на сайте WordPress

[Всего голосов: 3    Средний: 5/5]


В этой статье рассмотрим вопрос размещения исходного HTML-кода на странице сайта WordPressЯ как-то затрагивал эту тему на одном из своих сайтов. Но там было рассмотрено несколько приёмов размещения кода на страницах ресурса индивидуальной разработки. А как это сделать на WordPress? Оказывается, проще простого!

Прежде всего, нужно отметить, что у этой задачи есть два варианта решения:

  1. Применение функциональных возможностей движка, а именно, встроенного редактора TinyMCE;
  2. Использование дополнительных программных модулей (плагинов).

Вставка HTML-кода при помощи редактора

Для расширения возможностей встроенного редактора WordPress необходимо обязательно установить плагин TinyMCE Advanced. После его установки Вы заметите практически тотальное преображение редактора. Плагин устанавливается из админки (Плагины → Добавить новый). На открывшейся странице нужно ввести поисковый запрос, установить и активировать обнаруженный плагин:

Установка плагина TinyMCE Advanced

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

Теперь в редакторе TinyMCE реализовано два варианта публикации кода:

  1. Для выделения участка кода используется тег CODE (<code>...</code>);
  2. Участок кода, подготовленный для демонстрации, обрамляется тегами PRE (<pre>...</pre>).

Вариант №1

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

Публикация и показ кода при помощи тега CODE

Альтернативный вариант: пройти по пути Форматы → Строки → Код:

Публикация и показ кода при помощи тега CODE

В результате произведенных действий исходный код принимает другой формат текста (на содержание кода не обращайте внимание, он взят для образца) :

<meta name="Robots" content="index, follow">

Вариант №2

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

Демонстрация кода в поле тега 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 Syntax Highlighter. Он имеет большое количество настроек и режимов отображения, различные цветовые схемы и много удобных и полезных свойств. Это практически единственный плагин, который начинает работать сразу после его установки без каких-либо дополнительных заморочек, что выгодно отличает его от своих «собратьев».

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

На этом позвольте закончить обсуждение темы о выводе демонстрационного HTML-кода. Успехов Вам в применении полученных знаний на практике и развитии ваших сайтов.
До новых встреч. Пока. Ваш Л. М.

 

Поделиться в соц. сетях

Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Яндекс

Добавить комментарий

Ваш e-mail не будет опубликован.