Как легко отображать код на вашем сайте 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

Хотите узнать, как легко создавать собственные типы записей в WordPress? Пользовательские типы сообщений превращают сайт WordPress из платформы для ведения

Как добавить Google Optimize в WordPress (2 простых метода)

Вы хотите добавить Google Optimize на свой сайт WordPress? Google Optimize - это бесплатный инструмент от Google, который помогает владельцам веб-сайтов оптимизировать

Как правильно перейти с Weebly на WordPress (шаг за шагом)

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

Как отслеживать вовлеченность пользователей в WordPress с помощью Google Analytics

Правильно ли вы отслеживаете взаимодействие пользователей на своем сайте WordPress? Вовлеченность пользователей - один из самых важных показателей,