Як легко відображати код на вашому сайті WordPress

Ви хочете відобразити код у своїх публікаціях у блозі WordPress? Якщо ви спробували додати код, як звичайний текст, то WordPress не відобразить його правильно.


WordPress запускає ваш вміст через кілька фільтрів очищення кожного разу, коли ви зберігаєте публікацію. Ці фільтри є там, щоб переконатися, що хтось не вводить код через поштовий редактор, щоб зламати ваш веб-сайт.

У цій статті ми покажемо вам правильні способи легкого відображення коду на вашому сайті WordPress. Ми покажемо вам різні методи, і ви можете вибрати той, який найкраще відповідає вашим потребам.

Як легко відображати код у публікаціях WordPress

Спосіб 1. Відображення коду за допомогою редактора за замовчуванням у WordPress

Цей метод рекомендується для початківців та користувачів, яким не потрібно відображати код дуже часто.

Просто відредагуйте публікацію або сторінку блогу, де ви хочете відобразити код. На екрані редагування публікації додайте новий блок коду до своєї публікації.

Додайте блок коду до своїх публікацій WordPress

Тепер ви можете ввести фрагмент коду в текстову область блоку.

Додайте код до своєї публікації в блозі

Після цього ви можете зберегти свій запис у блозі та переглянути його, щоб побачити блок коду в дії.

PHP-код, відображений у WordPress

Залежно від теми WordPress, код коду може виглядати по-різному на вашому веб-сайті.

Метод 2. Відображення коду в WordPress за допомогою плагіна

Для цього методу ми будемо використовувати плагін WordPress для відображення коду у публікаціях вашого блогу. Цей метод рекомендується користувачам, які часто відображають код у своїх статтях.

Це дає вам наступні переваги перед блоком коду за замовчуванням:

  • Це дозволяє легко відображати будь-який код будь-якою мовою програмування
  • Він відображає код із підсвічуванням синтаксису та номерами рядків
  • Ваші користувачі можуть легко вивчити код і скопіювати його

Спочатку потрібно встановити та активувати плагін SyntaxHighlighter Evolved. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

Після активації ви можете продовжувати редагувати публікацію в блозі, де ви хочете відобразити код. На екрані редагування допису додайте до свого блоку блок “Синтаксичний підкреслювач”.

Блок коду SyntaxHighlighter

Тепер ви побачите новий блок коду в поштовому редакторі, де ви можете ввести свій код. Після додавання коду потрібно вибрати правильний стовпець налаштування блоку.

Налаштування блоку коду SyntaxHighlighter

Спочатку вам потрібно вибрати мову для свого коду. Після цього ви можете вимкнути номери рядків, надати номер першого рядка, виділити будь-який потрібний рядок і вимкнути функцію, щоб зробити посилання доступними.

Після завершення збережіть свою публікацію та натисніть кнопку попереднього перегляду, щоб побачити її в дії.

Код відображається з підсвічуванням синтаксису

Плагін постачається з низкою кольорових схем і тем. Щоб змінити кольорову тему, потрібно відвідати Налаштування »SyntaxHighlighter сторінки.

Налаштування SyntaxHighlighter

На сторінці налаштувань ви можете вибрати тему кольору та змінити параметри SyntaxHighlighter. Ви можете зберегти свої налаштування, щоб побачити попередній перегляд блоку коду внизу сторінки.

Попередній перегляд блоку коду

Використання SyntaxHighlighter з класичним редактором

Якщо ви все ще використовуєте старий класичний редактор WordPress, то ось як би ви використовували плагін SyntaxHighlighter для додавання коду до своїх публікацій у блозі WordPress.

Просто обгорніть свій код навколо квадратних дужок з мовою. Наприклад, якщо ви збираєтеся додати PHP-код, тоді ви додасте його так:

[php]
<?php
приватна функція get_time_tags () {
$ time = get_the_time (‘d M, Y’);
повернути $ час;
}
?>
[/ php]

Аналогічно, якщо ви хочете додати HTML-код, то обгорніть його навколо короткого коду HTML так:

[html]
Зразок посилання
[/ html]

Спосіб 3. Код відображення в WordPress вручну (без плагіна або блоку)

Цей метод призначений для досвідчених користувачів, оскільки він вимагає більше роботи і не завжди працює за призначенням.

Він підходить для користувачів, які ще використовують старий класичний редактор і хочуть відображати код, не використовуючи плагін.

По-перше, вам потрібно передати свій код через онлайн-інструмент кодування HTML-сутностей. Це змінить розмітку коду на сутності HTML, що дозволить вам додати код і обійти фільтри очищення WordPress.

Тепер скопіюйте та вставте свій код у текстовий редактор та оберніть його навколо та тегами.

Додавання коду вручну в класичний редактор

Ваш код виглядатиме так:

Це зразок посилання

Тепер ви можете зберегти свою публікацію та переглянути код у дії. Ваш веб-переглядач перетворить HTML-сутності та користувачі зможуть побачити та скопіювати правильний код.

Вручну відображення коду в WordPress

Ми сподіваємося, що ця стаття допомогла вам дізнатися, як легко відображати код на вашому сайті WordPress. Ви також можете побачити наш остаточний список найпопулярніших порад, хитрощів та хак для WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me