Подсветка кода на сайте WordPress. Как вывести HTML код на странице

08 Апр 2017

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

Плейлист «Как создать сайт на WordPress»

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

Что я имею в виду под словосочетанием «чтобы код правильно отображался»? HTML коды обычно вставляют через текстовый редактор, и при переходе в визуальный редактор часть кода может пропасть. Так устроен визуальный редактор, он автоматически редактируют код, убирая, по его мнению, не нужные фрагменты.

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

 

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

Плагин Enlighter — Customizable Syntax Highlighter. Для установки плагина перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «Enlighter — Customizable Syntax Highlighter». Затем нажмите установить и активировать.

После этого в админке WordPress появится панель настроек плагина, но там, в принципе ничего настраивать не нужно.

На панели инструментов визуального редактора появилась специальная кнопка, нажав на которую, откроется окно для вставки кода:Чтобы вставить код, нужно выбрать «Language», который зависит от типа кода (HTML, CSS, Java и так далее). В поле «Sourcecode» вставить код и нажать «Ok»:Вот так код будет выглядеть на сайте:

<div class="row">
<span class="header"></span>
<nav class="horizontal-nav center-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Все статьи</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>
</div>

Я пользуюсь этим плагином. Возможно, отображение кода не такое красивое, как у других плагинов, но Enlighter обладает уникальными функциями, которых нет у других плагинов. Все дело в том, что на моем блоге запрещено копирование текста специальной командой, во избежание воровства контента. Естественно, если в статье есть код, но скопировать его нельзя, статья, по сути, бесполезна. Плагин Enlighter позволяет открыть код в новом окне, откуда без проблем можно его скопировать. Получается, копирование запрещено, но на код это не распространяется. Нажмите на плюсик в правом верхнем углу, в новом окне откроется страница с кодом:Плагин Auto SyntaxHighlighter. Для установки плагина перейдите в административную панель «WordPress» ⇒ «Плагины» ⇒ «Добавить новый» и в форме поиска вбейте «Auto SyntaxHighlighter». Затем нажмите установить и активировать.

Плагин не нужно настраивать. После установки на панели инструментов визуального редактора появится кнопка в виде карандаша, нажав на которую, откроется окно для вставки кода:Выбираем «The code language» в зависимости от типа кода, вставляем его в специальное поле и нажимаем «Ok»:Вот так код отображается на блоге:

<div class="row">
<span class="header"></span>
<nav class="horizontal-nav center-nav">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Все статьи</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>
</div>

Отображается намного лучше, чем через плагин Enlighter!

Какой плагин использовать, решать только вам. Я бы использовал Auto SyntaxHighlighter, если бы на сайте не было запрещено копирование. Но в моем случае использование плагина Enlighter более уместно.

Надеюсь, эта статья поможет вам корректно вывести HTML коды на страницах сайта. Есть вопросы, задавайте в комментариях под статьей. Всем удачи!

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
27 необходимых плагинов для WordPress
 Как сделать меню в html и css
 Как создать подвал (футер) WordPress в html и css
Фавикон для сайта как сделать и как установить
Плагин WP Super Cache. Ускоренная загрузка сайта

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Лучший
курс обмена
BestChange.ru – популярный сервис по подбору выгодных обменных пунктов электронных валют, который поможет вам производить свои обмены безопасно и с минимальными потерями на комиссиях.
Обменять
на

Последнее на YouTube

Популярное на YouTube
© 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете
Лучший обменник WM
 mmgp
Яндекс.Метрика
Рейтинг@Mail.ru