БЛОГ 2410

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

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

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

Поделиться статьей

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

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

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

Как легко отображать код в записях WordPress
Как легко отображать код в записях WordPress Изображение с сайта wpbeginner.com

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

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

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

Добавьте блок кода в свои сообщения WordPress
Добавьте блок кода в свои сообщения WordPress Изображение с сайта wpbeginner.com

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

Добавьте код в сообщение в блоге
Добавьте код в сообщение в блоге Изображение с сайта wpbeginner.com

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

Код PHP отображается в WordPress
Код PHP отображается в WordPress Изображение с сайта wpbeginner.com

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

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

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

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

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

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

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

Блок кода SyntaxHighlighter
Блок кода SyntaxHighlighter Изображение с сайта wpbeginner.com

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

Параметры блока кода SyntaxHighlighter
Параметры блока кода SyntaxHighlighter Изображение с сайта wpbeginner.com

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

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

Код отображается с подсветкой синтаксиса
Код отображается с подсветкой синтаксиса Изображение с сайта wpbeginner.com

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

Настройки SyntaxHighlighter
Настройки SyntaxHighlighter Изображение с сайта wpbeginner.com

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

Предварительный просмотр блока кода
Предварительный просмотр блока кода Изображение с сайта wpbeginner.com

Использование 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.

Добавление кода вручную в классическом редакторе
Добавление кода вручную в классическом редакторе Изображение с сайта wpbeginner.com

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

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

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

Отображение кода в WordPress вручную
Отображение кода в WordPress вручную Изображение с сайта wpbeginner.com

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

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

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее