Як вставляти шматки коду в пости 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-бібліотеками. Даний метод я використовую лише для показу демо результату виконання коду.