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

Рад приветствовать читателей моего блога!

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

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

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

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

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

Ищешь заработок в Интернете? Записывайся на бесплатный онлайн курс «СПЕЦИАЛИСТ ПО ИНТЕРНЕТ-РЕКЛАМЕ» и получи удаленную профессию рекламщика в Яндекс Директ за 10 дней!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот такая статья! Нашли ли вы ответ на свой вопрос в ней? Пишите об этом в комментариях, буду рад услышать отзывы.

На этом все, подписывайтесь на обновления моего блога!

До скорых встреч. С уважением, Владимир Денисов!

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

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Простой способ изменить фон для WordPress сайта!... Всем привет! Сегодняшняя статья будет наиболее интересна новичкам, которые...хотят изменить или установить фон для своего сайта/блога на WordPress, ведь в...ней я расскажу об одном быстром и простом способе сделать фон для своего...интернет-ресурса.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.

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

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

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