WordPress вывести html код

.

Тег

В отличие от тега тег

в своём контейнере 
…
 
 выведет код (текст) без форматирования, но с пробелами и переносами. Используется для показа программного кода, сообщений электронных почт и т.п.
 
Для показа исходного HTML кода лучше использовать контейнер вложенный в элементы . При этом символы , и “: нужно заменить соответствующими им объектами HTML. Сделать это можно тут (https://www.freeformatter.com/html-escape.html)
 
По умолчанию pre использует такой стиль:
 
По умолчанию code использует такой стиль.
 
Важно что для этих тегов доступны универсальные атрибуты и события HTML.
 
Всё, что вы прочитали выше относится к теории HTML и работает везде. Однако на WordPress всё работает несколько иначе.
 
В теории вы можете в визуальном редакторе вставить любой программный код и попробовать показать его вашим читателям.
 
Однако система WordPress, в таком виде, может посчитать код потенциально опасным и удалить его их текста при сохранении. Кроме этого браузеры и боты тоже не будут понимать, что это программный код.
 
Чтобы все всё понимали нужно окружить код тегами code и/или pre. Однако вы не сможете, например, взять код ссылки и вставить её в текстовом редакторе сайта, чтобы показать её код читателю. Перейдя из текстового редактора в визуальный он сделает этот код простой ссылкой.
 
Чтобы показать код, для примера ссылки, своему читателю вы должны:
 
Вариант №1
 
Заменить в коде все символы на объекты HTML. Сделать это лучше на онлайн сервисе, freeformatter.com , ссылка выше. И вставить подготовленный код в текстовом редакторе в свой текст. На фото это строка (1).
 
 
Вариант №2
 
Обойтись без онлайн сервиса по замене символов на объекты. Вставьте свой код в визуальном редакторе сайта. Далее перейдите в текстовой редактор. Система автозаменой заменит все символы кода на нужные объекты. Вам останется окружить код тегами 
 
…
 
 . на фото строка (4), пока не окружённая тегами.
 
Вариант №3
 
В текстовом редакторе сайта WordPress (показываю на старом редакторе используя плагин Classic Editor) вставить код ссылки.
 
Далее используя кнопку code текстового редактора окружить все символы , и “: этим кодом. Просто выделяете символ и жмёте на кнопку code. На фото это строка (2).
 
Строка 3 на фото, в визуальном редакторе превратится в текстовую ссылку.
 
 
Обратите внимание, что строка в варианте №2 получилась очень длинной. В этом варианте я окружал ссылку парным тегом . Если окружить код только тегом строка придёт в нормальную ширину.
 
 
Можно оставить парный тег , но использовать символ переноса строки в html (тег br или абзац p ).
 
Вариант №4
 
Установить один из следующих плагинов для вставки программного кода с подсветкой.
 
Примечание: Используя классы, которые работают для тегов code, можно «раскрасить» код и без плагинов, но это долго. Плагины упрощают работу, хотя могут стать нерабочими и все показываемые коды сайта в статьях придётся оборачивать заново.
 
Плагины показать исходные коды в статьях WordPress
 
Есть плагины подсветки синтаксиса для WordPress – это специальные плагины, которые помогают показывать коды, которые вы добавляете в свои статьи и виде пригодном для копирования и изучения.
 
Ниже приведён список десяти лучших плагинов для подсветки синтаксиса администратора WordPress, которые вы можете использовать.
 
SyntaxHighlighter Evolved
 
Плагин работает с поддержкой нового редактора Gutenberg на WordPress 5.0. Данный плагин позволит вам легко размещать выделенный синтаксисом код на вашем сайте, не теряя его форматирование и не внося никаких изменений вручную. Список поддерживаемых языков наиболее широк. Используется библиотека Java Алексея Горбачева (?).
 
Enlighter – Customizable Syntax Highlighter
 
Enlighter – это бесплатный, простой в использовании инструмент подсветки синтаксиса для WordPress. Подсветка поддерживается библиотекой javas cript «EnlighterJS», чтобы обеспечить красивую подсветку.
 
My Syntax Highlighter
 
Простой в использовании плагин, с интуитивно понятным интерфейсом, даст вам возможность встроить выделенный синтаксисом исходный код в ваши статьи и страницы без потери форматирования.
 
Этот плагин поддерживает 13 языков, 16 шорткодов и 36 тем. Подсветка синтаксиса реализована с использованием библиотеки CodeMirror.
 
WP-GeSHi-Highlight
 
Плагин поддерживает 257 языков программирования, на мобильной версии не работает JavaScript, что экономит трафик и батарею. Автор заявляет, что плагин практически не оказывает нагрузку на бэкэнд и при использовании кэширования не влияет на время загрузки страницы. На редакторе Gutenberg не тестировался.
 
Code Syntax Block
 
Данный плагин создан на основе известного скрипта подсветки синтаксиса Prism. Масса вариантов подсветки, простая вставка через кнопку в редакторе. Библиотека Prism тут: prismjs.com.
 
Библиотеки prism.js и highlight.js (185 языков и 29 стилей) вы можете внедрить на свой сайт самостоятельно. Работу highlight.js вы видите на этом сайте.
 
HTML Editor Syntax Highlighter
 
Плагин обеспечит подсветку синтаксиса в текстовом редакторе статей и страниц. Работает в редакторе кода Gutenberg. Используется библиотека CodeMirror.js.
 
Итак, 6 плагинов для вставки и подсветки синтаксиса программных кодов. Найти больше плагинов вы можете на сайте wordpress.org в разделе plugins по ключу «Syntax».
 
Вывод
 
В статье я рассказал, как показать исходные коды в статьях WordPress. Любые вопросы по теме в комментариях.
 
Еще статьи
 
Похожие посты:
 
Добавить комментарий
 
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
 
Источник
 
Как добавить код в WordPress: все доступные методы
 
 
Необходимость добавить код на сайт возникает часто. Это может быть код статистики, скрипта какого-либо сервиса, новой функции сайта, нового стиля и многое другое.
 
Для того, чтобы добавить код в WordPress существует несколько удобных, правильных и неудобных, неправильных способов. В этой статье я расскажу вам про все эти способы. И все они могут пригодиться на практике.
 
 
 
Добавление кода в виджет
 
Виджеты в WordPress можно использовать для того, что добавить код на сайт. Для этого подходят виджеты «HTML-код» и «Текст». Благодаря такому способу можно установить какой-либо HTML код в любой области виджетов, предусмотренной активированной темой. И если этот код предусматривает вывод какого-либо элемента, то он будет виден.
 
Для тех, кто не знает: виджеты находятся в пункте «Внешний вид», подпункте «Виджеты». Нужно лишь переместить мышкой виджет «HTML-код» или «Текст» из области «Доступные виджеты» (слева страницы), в какую либо область справа страницы. Затем в него можно вставить текст и сохранить с помощью соответствующей кнопки.
 
Если используется виджет «Текст», то код нужно добавлять во вкладку «Текст», а не «Визульно».
 
 
 
Но удобнее, всё-таки, использовать виджет «HTML-код», который специально для этого и предназначен. В нём всего одна вкладка, а также есть подсветка синтаксиса.
 
 
 
Иногда возникает необходимость добавить в виджет PHP код и сделать так, чтобы он работал. В этом случае придётся пользоваться дополнительным плагином, который создаст новый виджет «PHP-код».
 
Плагин называется PHP Code Widget и ссылка на него ниже.
 
Добавление кода в настройки темы
 
Ещё один способ добавить код в WordPress — это внедрить его в настройки дизайна. Подойдёт для добавления своих CSS стилей, а в не которых случаях (в зависимости от темы) и других видов кодов.
 
Для интеграции перейдите в пункт «Внешний вид», подпункт «Настроить». Вы увидите секции с опциями слева. Откройте «Дополнительные стили».
 
 
 
И вставьте CSS код в поле. Не забудьте сохранить всё кнопкой «Опубликовать».
 
 
 
А если нажать на кнопку с иконку в виде шестерёнки, то можно будет ещё и просто сохранить изменения, без публикации, и даже запланировать их публикацию на указный день и время.
 
 
 
Некоторые темы в своих настройках позволяют добавлять и другие типы кодов в разные области сайта. Например, тема Frontier, которая используется на моём сайте, имеет специальное поле для вставки кода в область сайта head.
 
 
 
Настройки тему могут находиться в пункте «Внешний вид», либо вынесены в отельный пункт. В разных темах это может выглядеть, конечно же, по-разному, и не обязательно так, как у меня на скриншоте. А в некоторых темах этого вообще может и не быть.
 
Добавление кода с помощью плагинов
 
Универсальный способ добавить код в WordPress — это использовать плагин. И есть несколько вариантов.
 
Во-первых, рекомендую простой плагин Head, Footer and Post Injections. После активации перейдите в пункт «Настройки», подпункт «Head and footer». И тут вы увидите возможность добавить любой код в любое место сайта: в шапку, подвал, записи, страницы. Кроме того, есть дополнительные опции, вроде включения добавленного кода только на некоторых устройствах или типах страниц.
 
 
 
Есть, что изучать в этом плагине. Только один недостаток — всё на английском языке. Скачать можно по ссылке ниже.
 
Ещё один способ добавить код в WordPress, это плагин My Custom Functions. Он решает задачу интеграции PHP функций, и добавляет их так, будто они были написаны в файле темы functions.php. При этом ни обновление темы, ни даже её изменение данную интеграцию не нарушает.
 
Работу этого плагина я рассматривал на примере добавления в тему функции для реализации чек-бокса соглашения на обработку персональных данных в форме комментариев WordPress.
 
Скачать плагин можно по ссылке ниже.
 
После активации плагина, перейдите в пункт «Настройки», подпункт «PHP inserter». Включите применение кода и добавьте свою PHP функцию.
 
 
 
Добавление кода в файл темы или плагина
 
Вначале я писал о том, что есть правильные и неправильные способы добавить код в WordPress. Как раз таки сделать это непосредственно в файл плагина или темы — является самым неправильным методом, но рабочим. Иногда это бывает единственным способом, и поэтому на практике, всё-таки, используется.
 
Вся неблагодарность метода в том, что при первом же обновлении продукта внедрённая инъекция исчезнет и её придётся создавать заново. Поэтому нужно иметь копии изменённых файлов и вручную их заменять после обновления, что очень не удобно.
 
Итак, чтобы добавить код в WordPress прямо в файл, нужно перейти в пункт «Внешний вид», подпункт «Редактор» (если речь о теме) или пункт «Плагины», подпункт «Редактор» (если речь о плагине).
 
Сначала вы увидите пугающее предупреждение, где нужно нажать на «Я понимаю».
 
 
 
И теперь перед вами откроется редактор. Здесь в списке сверху можно выбрать редактируемый продукт (тему или плагин), в колонке справа выбирается файл, а в самом центре редактор с поддержкой синтаксиса кода.
 
 
 
Кроме этого, добраться до файлов тем и плагинов можно через файловый менеджер или FTP подключение. Плагины хранятся в папке wp-content/plugins, а темы в wp-content/themes. Каждый плагин/тема в отдельной папке.
 
При редактировании файлов будьте внимательны, делайте резервные копи.
 
Источник
 
Читайте также:  Java длина строки кода