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

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


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

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

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

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

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

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

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

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

Добавьте код в ваш блог

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

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

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

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

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

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

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

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

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

SyntaxHighlighter кодовый блок

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

Настройки блока кода SyntaxHighlighter

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

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

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

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

Настройки SyntaxHighlighter

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

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

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

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

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

[PHP]
<?PHP
приватная функция get_time_tags () {
$ time = get_the_time (‘d M, Y’);
вернуть время $;
}
?>
[/ PHP]

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

[HTML]
Пример ссылки
[/ HTML]

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

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

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

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

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

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

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

Это образец ссылки

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map