Как отобразить код в виде текста на сайте WordPress

Как отобразить код в виде текста на сайте WordPress

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

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

В этой статье мы покажем вам, как правильно отображать код на вашем сайте WordPress. Мы покажем вам разные методы, и вы сможете выбрать тот, который наилучшим образом соответствует вашим потребностям.

Как отобразить код в виде текста на сайте WordPress

Способ 1. Отображение кода с помощью редактора по умолчанию в WordPress

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

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

Добавить код программы в текст WordPress

После нажатия кнопки «Код» появится поле, в котором можно ввести фрагмент кода.

Добавить код программы в текст WordPress

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

Отображение фрагмента кода в записи WordPress

Способ 2. Отображение кода в WordPress с помощью плагина

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

Плагин дает вам следующие преимущества перед блоком кода  который есть в WordPress по умолчанию:

  • Позволяет легко отображать любой код на любом языке программирования;
  • Он отображает код с подсветкой синтаксиса и номерами строк;
  • Ваши пользователи могут легко изучить код и скопировать его.

Для начала установите и активируйте плагин SyntaxHighlighter Evolved.  Он доступен на Русском языке.

После активации, вы можете добавить код в нужное место вашей записи. На экране редактирования записи добавьте блок «SyntaxHighlighter Code».

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

После ввода кода в новый блок, вам нужно выбрать настройки блока в правом столбце.

Настройка плагина SyntaxHighlighter Evolved.jpg

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

После сохранения, вы можете посмотреть на результат.

Отображение фрагмента кода в записи WordPress2.jpg

 

Первый фрагмент кода был вставлен встренными функциями WordPress, второй был вставлен при помощи плагина SyntaxHighlighter Evolved.

В настройках плагина есть много цветовых схем. Чтобы изменить цветовую схему, вам нуно зайти на страницу Настройки > SyntaxHighlighte.

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


<php
echo "1", " 2", '<br>';
echo '1', " 2", "<br>";
?>

Точно так же, если вы хотите добавить HTML-код, вы оберните его вокруг HTML-кода следующим образом:

<a href="wp-notes.ru">Записки специалиста WordPress</a>