Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 05.07.2022)
36350
осіб
217
літаків
187
гелікоптерів
1594
танків
3772
ББМ
806
артилерія
105
ППО
247
РСЗВ
2634
машин
15
кораблі і катери
Як вставляти шматки коду в пости WordPress

Як вставляти шматки коду в пости WordPress

Якщо вам потрібно вставляти шматки коду в пости або сторінки на сайті на ВордПрес, тоді вам стане в нагоді наш сьогоднішній пост. Це може бути корисним, наприклад, коли ви публікуєте уроки з програмування і в якості зразка вам потрібно вставляти в свої пости невеликі фрагменти коду. Адже дуже часто буває необхідним показати своїм читачам зразки вихідного коду на мові PHP, JavaScript, CSS або будь-якій іншій мові програмування.

За замовчуванням WordPress фільтрує будь-який необроблений код, який вставляється в пости, сторінки, віджети або коментарі. Це робиться з метою безпеки, щоб програмний код не був виконуваним. Якщо ви, наприклад, пишете пост спочатку в пакеті Word або будь-якому текстовому редакторі, а потім вставляєте цей текст в поле редагування поста в консолі WordPress, двигун автоматично конвертує деякі символи. Наприклад, символ < в режимі перегляду Текст буде перетворений в &lt;. Тобто, якщо ви вставляєте в візуальному режимі, наприклад, фрагмент коду, який починається з <?php, – в режимі вихідного коду (вкладка Текст) це буде оформлено у вигляді &lt;?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, дайте нам знати в коментарях нижче.

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.