В одной из моих недавних статей мне понадобилось вставить код в запись WordPress, что вначале вызвало у меня определенные затруднения, но потом я разобрался как это реализуется и теперь делюсь с вами полученным опытом.
Речь идет о статье про создание карты сайта WordPress, в которой я приводил в пример фрагменты кода, и этот код можно было свободно копировать для последующей вставки. Скриншот одного из таких фрагментов выглядит следующим образом:
Как вам? По-моему довольно приятный внешний вид.
Так вот, когда я писал вышеупомянутую статью, то у меня, как и у многих начинающих вебмастеров, создающих собственный сайт на движке WordPress, возникла проблема со вставкой кода в статью.
Если вы в рамках своего интернет-ресурса затрагиваете тонкости создания сайтов, то вам довольно часто придется вставлять в статьи разнообразные фрагменты кода.
Просто так вставить код в текст вашей статьи нельзя, ведь в этом случае он будет исполняться, а не отображаться.
Если вы сейчас читаете данную статью, то с высокой долей вероятности решение данной проблемы стоит у вас на повестке дня.
Сейчас я вам помогу.
Как вставить код на страницу WordPress?
Разберем подробно.
На самом деле решается данная проблема очень легко. Для начала устанавливаем плагин WordPress под названием WP-Syntax:
Активируем его:
Плагин готов к работе, никаких дополнительных настроек не требуется.
Теперь осталось разобраться, как же использовать данный плагин, чтобы наш код отображался как надо.
Для того, чтобы плагин WP-Syntax понял, что мы хотим отображать определенный отрывок кода именно как код, существует конструкция:
<pre lang=»xxx» line=»1″>код</pre>
Все действия по редактированию статей со вставкой кода производить нужно в режиме текстового редактора WordPress, в противном случае (при использовании визуального редактора) возникнут проблемы с интерпретацией тега pre.
Все, что заключено внутри конструкции (обозначено словом код), будет отображаться на странице вашего ресурса именно в том виде, в каком вы его туда вставите, и не будет интерпретироваться в качестве операторов какого-либо языка программирования.
Расшифрую содержимое данной конструкции:
- <pre></pre> — открывающий и закрывающий теги, определяющие предварительно отформатированный в исходном коде текст;
- lang — (сокращение от language) язык программирования, на котором составлен код, вставляемый вами в запись;
- xxx — нужно вписать язык программирования, на котором составлен код. В этом случае встречающиеся в коде операторы указанного языка программирования будут выделены визуально (подсвечены цветом, жирным текстом и т.д.). Наиболее распространенные языки: html4strict, php, css, xml. Полный список поддерживаемых языков можете посмотреть здесь;
- line=»1″ — атрибут, отвечающий за отображение нумерации строк в области вывода кода на странице вашего сайта. Цифра означает номер первой строчки кода, если нумерация не нужна — просто удалите данную конструкцию.
Таким образом, применяя данный плагин и данную конструкцию в режиме текстового редактора и заключая внутрь нее какой-либо код на поддерживаемом языке программирования, вы можете вставить код в запись WordPress.
1 | Увидимся на страницах моего сайта! |