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

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

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

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

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

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

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

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

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

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

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

показываем исходные коды на WordPress — Пример использования

Теги 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 позволяют очень просто, без плагинов показать демонстрационный код пользователям и не вводить в заблуждение браузеры и поисковики.