Как вывести HTML и другой код в статье

Данная статья научит, как правильно, без нарушения целостности кода, вставить HTML, Javascript, PHP и другие коды в виде текста в статью на сайте в визуальном редакторе WordPress с помощью плагина Wp-Syntax.

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

Если ввести код в статью просто как вставку в визуальном редакторе, то WordPress забросает его “мусором” в виде тегов и значков, после чего код становится изменившимся и не работоспособным. Это необходимо для защиты сайта от вредоносного кода.

Если ввести код в редакторе HTML, то в тексте статьи увидим не код, а результат его работы в виде баннера, счетчика и т.п. Чтобы решить эту проблему на помощь приходят плагины.

Плагины – это программные модули, которые подключаются к основной программе, в данном случае к WordPress, и расширяют её возможности.

Для решения данной задачи лучше всего подходит плагин Wp-Syntax, выполняющий вывод и подсветку кода в статье.

Для удобства в работе используется ещё один плагин WP-Syntax Button, выводящий на панель инструментов визуального редактора кнопку ”code”, с помощью которой выполняется вставка HTML или другого кода в статью.

Как вывести html код
Установим данные плагины на нашем сайте. В админпанели находим ПЛАГИНЫ=>ДОБАВИТЬ ПЛАГИН и в окне поиска задаём название плагина Wp-Syntax. Находим его в предложенном списке, нажимаем УСТАНОВИТЬ и АКТИВИРОВАТЬ. Подробнее здесь.

Аналогично выполняем поиск, установку и активацию плагина WP-Syntax Button. Настроек у этих плагинов нет.

Переходим к нашей статье и в визуальном редакторе ставим курсор в начало строки, где расположится код. Вставляем, заранее скопированный HTML или другой код, отмечаем его от начала и до конца и нажимаем на кнопку ”Code”. В появившемся окне выбираем нужный код и нажимаем кнопку “Insert”.

Как вывести html код

Теперь вставленный код защищён плагином Wp-Syntax от ненужного вмешательства редактора WordPress. Запускаем предпросмотр статьи, наш код имеет прокрутку окна, его можно скопировать и выглядит следующим образом:

Как вывести html код

Еще статьи о плагинах:

 

 



Буду благодарна, если поделитесь с друзьями информацией:

Подпишись и получай новые статьи на почту:

7 комментариев

  1. Установил плагин Wp-Syntax – работает, но только если редактор перевести в HTML и вставить ” тут ваш код ” в нужное место и вместо тут ваш код, вставить нужный, а вместо “LANGUAGE” нужный язык программирования. А второй плагин уже несколько лет не обновлялся и у меня не работает. Метод немного напрягает, может кто знает более легкий способ?!

Оставить комментарий

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

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>