Как вставить код в запись Вордпресс

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

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

Как вставить код в запись WordPress?

Как вам? По-моему довольно приятный внешний вид.

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

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

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

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

Сейчас я вам помогу.

Как вставить код на страницу WordPress?

Разберем подробно.

На самом деле решается данная проблема очень легко. Для начала устанавливаем плагин WordPress под названием WP-Syntax:

Как вставить код в запись WordPress?

Активируем его:

Как вставить код в запись WordPress?

Плагин готов к работе, никаких дополнительных настроек не требуется.

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

Для того, чтобы плагин WP-Syntax понял, что мы хотим отображать определенный отрывок кода именно как код, существует конструкция:

<pre lang=»xxx» line=»1″>код</pre>

Все действия по редактированию статей со вставкой кода производить нужно в режиме текстового редактора WordPress, в противном случае (при использовании визуального редактора) возникнут проблемы с интерпретацией тега pre.

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

Расшифрую содержимое данной конструкции:

  • <pre></pre> — открывающий и закрывающий теги, определяющие предварительно отформатированный в исходном коде текст;
  • lang — (сокращение от language) язык программирования, на котором составлен код, вставляемый вами в запись;
  • xxx — нужно вписать язык программирования, на котором составлен код. В этом случае встречающиеся в коде операторы указанного языка программирования будут выделены визуально (подсвечены цветом, жирным текстом и т.д.). Наиболее распространенные языки: html4strict, php, css, xml. Полный список поддерживаемых языков можете посмотреть здесь;
  • line=»1″ — атрибут, отвечающий за отображение нумерации строк в области вывода кода на странице вашего сайта. Цифра означает номер первой строчки кода, если нумерация не нужна — просто удалите данную конструкцию.

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

1
Увидимся на страницах моего сайта!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector