Как вставлять куски кода в посты WordPress

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

По умолчанию WordPress фильтрует любой необработанный код, добавленный в посты, страницы, виджеты или комментарии. Это делается в целях безопасности, чтобы программный код не был исполняемым. Если вы, например, пишете пост сначала в пакете Word или любом текстовом редакторе, а потом вставляете этот текст в поле редактирования поста в консоли WordPress, движок автоматически конвертирует некоторые символы. Например, символ < в режиме просмотра Текст будет преобразован в <. Т.е., если вы вставляете в Визуальном режиме, например, фрагмент кода, который начинается с <?php, — в режиме исходного кода (вкладка Текст) это будет оформлено в виде <?php. Поскольку «опасные» символы автоматические преобразовываются в «безопасные» HTML-сущности.

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

Попробуйте, например, написать в режиме Текст:

<?php echo "Hello, World!"; ?>

При переключении в Визуальный режим (или же после публикации поста) вы не увидите желаемого текста Hello, World! поскольку система его скрыла, чтобы он не был исполняемым. Вот тут мы и подошли к проблеме: а как же отображать программный код в постах ВордПресс?

 

 

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

Самый простой способ добавить код в свои посты – делать обертку программного кода в режиме Текст HTML-тегом <pre>. Этот тег предназначен для отображения кода в том виде, в котором он был напечатан, т.е., со всеми пробелами, спецсимволами и тому подобное. Можно было бы, конечно, не использовать этот тег, а писать весь программный код сразу с использованием HTML-сущностей, но это очень сложный подход. Гораздо проще писать нужный код в Визуальном режиме редактирования публикации, а потом переключаться в режим Текст и обрамлять нужный фрагмент тегами <pre>........</pre>, и при этом все «опасные» символы программирования автоматически преобразуются в HTML-сущности.

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

<pre>&lt;?php echo "Hello, World!" ?&gt;</pre>

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

 

Тег <pre> — это идеальный элемент для больших блоков кода, поскольку он позволяет сохранять все пробелы, табуляции и тому подобное.

Для небольших блоков кода можно использовать тег HTML5 специально предназначенный для кода — <code>. В режиме редактирования Текст в ВордПресс для этого есть даже специальный шорткод. При редактировании поста выделите нужный фрагмент и нажмите кнопку code на панели инструментов, и этот фрагмент будет обрамлен тегами <code>........</code>.

Тег <pre> — блочный, а тег <code> — инлайновый, т.е., большинство браузеров отображает его как display: inline; и его можно показывать прямо в абзаце, а не с новой строки.

 

 

Сложный способ отображения кода в WordPress

К сложному способу отображения программного кода я отношу специальные плагины для этого (например, Crayon Syntax Highlighter, Syntax Highlighter Evolved и подобные). Кто-то может возразить, что это наоборот простой способ, но я считаю, что всякие навороченные плагины только все усложняют. Очень часто можно встретить на сайтах ситуацию, когда ранее оформленный код с использованием шорткодов плагина по истечению времени так и отображается в браузере, например:

[php]
<?php echo "Hello, World!" ?>
[/php]

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

Да, такие плагины очень красиво делают подсветку синтаксиса на лету с помощью JavaScript и CSS, но они в основном довольно «тяжелые» для системы, а элементарную подсветку синтаксиса можно сделать без плагинов, с помощью нескольких классов для тегов div, span, code и pre, а также нескольких строк CSS-стилей.

Выбирать вам!

 

И еще к сложному способу вставки кода в страницы WordPress хочу отнести использование сторонних сервисов. Есть довольно много сайтов, на которых можно писать практически любой код и он будет отображаться так, как и должен. Примеры таких сервисов: CodePen, GitHub Gists и JSFiddle.

Они делают очень красивую подсветку синтаксиса и даже демо-просмотр результата исполнения кода, но сложность их заключается в необходимости использования вставки iframe’ами или же внешними JavaScript-библиотеками. К данному методу я прибегаю только для показа демо результата выполнения кода.

 

 

Вывод

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

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