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

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

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

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

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

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

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

Теперь вы можете ввести фрагмент кода в текстовую область блока.

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

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

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

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

Это дает вам следующие преимущества перед блоком кода по умолчанию:

Позволяет легко отображать любой код на любом языке программирования.
Он отображает код с подсветкой синтаксиса и номерами строк
Ваши пользователи могут легко изучить код и скопировать его
Во-первых, вам нужно установить и активировать плагин SyntaxHighlighter Evolved. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

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

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

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

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

Плагин поставляется с рядом цветовых схем и тем. Чтобы изменить цветовую тему, вам необходимо зайти на страницу «Настройки» SyntaxHighlighter.

На странице настроек вы можете выбрать цветовую тему и изменить настройки SyntaxHighlighter. Вы можете сохранить свои настройки, чтобы увидеть предварительный просмотр блока кода в нижней части страницы.

Использование SyntaxHighlighter с классическим редактором

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

Просто оберните ваш код в квадратные скобки с названием языка.

Точно так же, если вы хотите добавить HTML-код.

Способ 3. Отображение кода в WordPress вручную (без плагина или блока)

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

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

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

Теперь скопируйте и вставьте свой код в текстовый редактор и оберните его вокруг тегов <pre> и <code>.

Теперь вы можете сохранить свой пост и просмотреть код в действии. Ваш браузер преобразует объекты HTML, и пользователи смогут видеть и копировать правильный код.

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