Как вставить код на страницу сайта

Содержание

Depositphotos

Здравствуйте, уважаемые читатели! Сегодня я расскажу о том, как в статьи блога WordPress вставить HTML или PHP код с подсветкой синтаксиса. Возможно, эту статью следовало бы поместить в раздел «Дополнительные плагины», потому что вряд ли авторам кулинарных или строительных блогов понадобится подобное делать, но я посчитал, что там этот пост затеряется.

Вставка кода в страницу wordpress

Вся проблема со вставкой кода в текст страниц заключается в том, что WordPress пытается выполнить его и выдать на страницу уже результат. Кроме того, пользователи привыкли к подсветке синтаксиса программного кода, которую регулярно видят в своих редакторах, например Notepad++, и воспринимать сплошной код без какого-либо выделения очень трудно. Это одна из причин, по которой люди очень редко пользуются встроенными редакторами кода шаблонов темы WordPress и его плагинов.

#31 Как добавить код на сайт HTML тег code

И так, стандартными средства WordPress вставить код в статью и подсветит его синтаксис не получится, придется устанавливать дополнительный плагин с подобным функционалом. Таких плагинов очень много — достаточно в форме поиска на сайте WordPress.org ввести слово Syntax и в результатах получите более 500 всевозможных вариантов. Пожалуй, самым популярным и удобным является Syntax Highlighter Evolved.

Установка и использование плагина Syntax Highlighter Evolved

Установка SyntaxHighlighter Evolved очень простая:

скачайте свежую версию Syntax Highlighter Evolved ;
распакуйте архив и перекиньте папку с файлами плагина на сервер в директорию wp-content/plugins, используя ftp клиент FileZilla;
скачайте локализацию для SyntaxHighlighter Evolved и загрузите два файла из архива в директорию wp-content/plugins/syntaxhighlighter/localization на сервере;
сбросьте кэш, если используете кэширование на блоге;
активируйте плагин через админку WP.

Настройки плагина располагаются в разделе «Параметры» — «Подсветка синтаксиса».

Все настройки на русском языке, поэтому с их пониманием не должно возникнуть сложностей. После внесения изменений сохраняйте настройки и посмотрите на результат в опции «предпросмотр», где представлен образец произвольного кода.

Отмечу только, что в опции «Цвета» можно выбрать цветовую гамму для подсветки синтаксиса.

Теперь, чтобы вывести какой-либо программный текст в статье, вам потребуется переключится на встроенный html редактор и использовать либо короткий синтаксис:

[рhp]Слова и символы на языке программирования php[/рhp]
[сode lang=»рhp»]В опции lang выбран язык php[/сode]

Плагин предоставляет большой набор параметров на все случае жизни, но основными из них являются сокращения языков, которые необходимо прописывать в атрибуте lang для корректной подсветки синтаксиса. Полный список языков и их сокращений можно посмотреть на официальном сайте плагина SyntaxHighlighter Evolved .

Вставка HTML-код, CSS или JavaScript на все или несколько страниц сайта | Тильда Конструктор Сайтов

Не работает Syntax Highlighter

На своем блоге я столкнулся с проблемой — Syntax Highlighter Evolved не работает. Устанавливается, настраивается, но корректно отображать код на странице на отрез отказывается. Самое главное, что и ошибок никаких не выдает, просто молча не работает.

Покопавшись на тематических форумах и блогах нарыл информацию, что Syntax Highlighter Evolved может не работать из-за несовместимости с плагинами кэширования, в частности с Hyper Cache. В качестве совета предлагалось повторно сбросить кэш. Подобная мера мне не помогла и пришлось искать альтернативу. Это оказалось не такой простой задачей — все остальные плагины из серии Syntax Highlighter тоже отказывались работать. Наконец, я наткнулся на легкий и простой WP-Syntax, который и использую на своем блоге.

Вставка кода с помощью WP-Syntax

Устанавливается плагин стандартно и даже не требует настройки. Только скачайте свежую версию WP-Syntax с wordpress.org . Для вставки кода в текст статей используется тег pre с дополнительными атрибутами:

WP-Syntax

lang — указывается язык, на котором написан вставляемый код. Полный перечень всех поддерживаемых языков и сокращений для них можно посмотреть здесь, в разделе Supported Languages .

line — атрибут позволяет отображать нумерацию строк. Указывается номер первой строчки кода.

При переключении с html в визуальный редактор WP тег pre интерпретируется и код не выводится так, как надо. Поэтому для редактирования подобных статей используйте только редактор в режиме html.

На сегодня это все. До скорых встреч на страницах блога FairHeart.ru!

Лучший способ выразить благодарность автору — поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Эти статьи Вам могут быть интересны:

Плагины для комментариев WordPress
Рубрики, записи, метки и страницы WordPress
Карта сайта WordPress — плагины Google XML Sitemaps и WP DS Blog Map
Текстовый и визуальный редактор WordPress
WordPress плагины похожих, популярный и случайных статей для внутренней перелинковки
Картинки в WordPress: плагины для создания галерей изображений, слайдшоу, лайтбоксов и слайдеров
Плагины с виджетом погоды для WordPress

Комментариев нет

Источник: fairheart.ru