Теги code на сайте WordPress: зачем нужны, как настроить

Вступление: Если вы пишете статьи на WordPress как программист, разработчик или просто делитесь программными кодами с пользователями, вам необходимо использовать теги code на сайте WordPress. Зачем? Читаем дальше.

теги code на сайте WordPress.org

Теги code на сайте

Создавая материалы на сайте мы постоянно должны спрашивать себя три вещи:

• Как браузер покажет эту информацию;
• Что пользователи увидят её;
• Как поисковая система её обработает.

Все пункты имеют отношение к теме этой статьи.

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

Еще пример, вы хотите рассказать о значении html тега h1. Для этого в статье пишите открывающий и закрывающий тег h1. Поисковики считают, что в тексте есть важный заголовок, а это нехорошо.

Чтобы этого не происходило, используются либо специальные символы для тегов, либо фразовые теги code.

Для специальных символов нужно пользоваться HTML ENCODER/DECODER, что неудобно.

Использовать теги code на сайте WordPress проще. Они сообщают браузерам, что всё что помещено в теги code нужно отображать, как текст и не считать командами.

Пример использования

Теги code на сайте WordPress

В классическом редакторе WordPress для оборачивания демонстрационных кодов в теги code есть специальная кнопка. Искать её нужно в текстовом режиме редактора. ENCODER/DECODER встроен в редактор. Читать: Показываем исходные коды в статьях WordPress

В новом редакторе блоков есть специальный блок в разделе «Форматирование». С его помощью вы можете обернуть демонстрационный код во фразовые теги code.

Как визуально выделить демонстрационный код на сайте

Чаще для демонстрации кодов, хочется выделить их от другого текста статьи. Я делаю это так:

Отдельные функции, названия файлов и т.п. я оборачиваю в теги code, для которых задаю свой стиль в «Дополнительном стиле» настройках рабочей темы. Вот пример:

Сейчас я использую такой стиль:

 code {  padding: 2px 4px;  font-size: 90%;  color: #FB7906;  background-color: #FDEDBD;  border-radius: 4px;  }

Для демонстрации кусков кодов, я ставлю плагин Enlighter – Customizable Syntax Highlighter (совместим до 5.4. и работает в редакторе блоков) или в классическом редакторе использую скрипт highlightjs.org.

Что ещё нужно знать про фразовые теги

Во-первых, теги code используемые внутри тегов pre, сохранят исходное форматирование (пробелы и переносы).

Во-вторых, браузеры текст в code делают моноширинным (Consolas, Monaco, Courier New, Courier, monospace), если нет других инструкций в таблице стилей.

Заключение

Теги code на сайте WordPress позволяют очень просто, без плагинов показать демонстрационный код пользователям и не вводить в заблуждение браузеры и поисковики.

Источник: www.wordpress-abc.ru