Вступление: Если вы пишете статьи на 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