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

В одной из моих недавних статей мне понадобилось вставить код в запись 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
Увидимся на страницах моего сайта!

Также стоит прочитать:

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

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

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

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

Adblock detector