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

/

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

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

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

Как легко отображать код в записях WordPress

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

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

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

Добавьте блок кода в свои сообщения WordPress

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

Добавьте код в сообщение в блоге

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

Код PHP отображается в WordPress

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

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

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

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

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

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

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

Блок кода SyntaxHighlighter

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

Параметры блока кода SyntaxHighlighter

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

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

Код отображается с подсветкой синтаксиса

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

Настройки SyntaxHighlighter

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

Предварительный просмотр блока кода

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

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

Просто заключите код в квадратные скобки с названием языка. Например, если вы собираетесь добавить код PHP, вы добавите его так:

[php] <? частная функция php get_time_tags () {$ time = get_the_time ('d M, Y'); return $ time; }?> [/ php]

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

[html] Образец ссылки [/ html]

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

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

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

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

Now copy and paste your code in the text editor and wrap it around <pre> and <code> tags.

Добавление кода вручную в классическом редакторе

Ваш код будет выглядеть так:

<pre><code> <p><a href="/home.html">This is a sample link</a></p> </pre></code>

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

Отображение кода в WordPress вручную

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как заблокировать спам рефералов WordPress в Google Analytics

Получаете ли вы много спама-реферера в своей аналитике Google? Спам с реферерами - это способ передать на веб-сайты фальшивую информацию о реферере.

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

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

Как открыть всплывающую форму WordPress при нажатии на ссылку или изображение

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

Пользовательские поля WordPress 101: советы, хитрости и приемы

Настраиваемые поля - это удобная функция WordPress, которая позволяет вам добавлять различные дополнительные данные / информацию в ваши записи и страницы