плагин для вставки html кода в wordpress
Топ плагинов для вставки кода в WordPress
На просторах интернета есть множество плагинов, которые позволят вставлять код на свою страницу в wordpress. В данной статье рассмотрим несколько лучших плагинов в своем деле.
Crayon Syntax Highlighter
Данный плагин является неоспоримым лидером среди всех подобных плагинов. Его основными плюсами являются:
1) При переключении режимов с визуального на текст код для пользователя отображается корректно. В некоторых аналогах наблюдается проблема в данном аспекте.
2) В визуальном режиме при нажатии спец значка <> открывается отдельное окно в котором множество настроек. И набор этих настроек нельзя ставить в сравнение ни с одним другим подобным плагином.
3) У пользователей есть возможность скопировать кол или открыть его в отдельном окне.
WP Syntax
Плагин отличается от предыдущего лишь количеством настроек. У него их не такое множество.
CodeColorer
Хороший плагин, отлично работает, но имеет большой минус в том, что код требуется вставлять в HTML режиме и при частом переключении режимов код начинает отображаться некорректно, хотя при выводе кода на страницу все отображается правильно.
WordPress Rainbow Hilite
Если сравнивать с Ctayon, то этот плагин использует меньше ресурсов, но и функционала предоставленного для пользователя в разы меньше.
Работать в нем довольно удобно, но есть небольшие недочеты в плане отображения кода в визуальном режиме, он смотрится большим. И в отличии от того же Crayon не подсвечивается отдельным цветом. С данным минусом можно смириться и не обращать внимания, но для пользователей ресурса на котором будет располагаться статья отображение будет так же не очень удобное. Хотя в остальном плагин функционирует хорошо.
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Плагины для вставки кода HTML и PHP на страницы WordPress c подсветкой синтаксиса
Здравствуйте, уважаемые читатели! Сегодня я расскажу о том, как в статьи блога WordPress вставить HTML или PHP код с подсветкой синтаксиса. Возможно, эту статью следовало бы поместить в раздел «Дополнительные плагины», потому что вряд ли авторам кулинарных или строительных блогов понадобится подобное делать, но я посчитал, что там этот пост затеряется.
Вся проблема со вставкой кода в текст страниц заключается в том, что WordPress пытается выполнить его и выдать на страницу уже результат. Кроме того, пользователи привыкли к подсветке синтаксиса программного кода, которую регулярно видят в своих редакторах, например Notepad++, и воспринимать сплошной код без какого-либо выделения очень трудно. Это одна из причин, по которой люди очень редко пользуются встроенными редакторами кода шаблонов темы WordPress и его плагинов.
И так, стандартными средства WordPress вставить код в статью и подсветит его синтаксис не получится, придется устанавливать дополнительный плагин с подобным функционалом. Таких плагинов очень много — достаточно в форме поиска на сайте WordPress.org ввести слово Syntax и в результатах получите более 500 всевозможных вариантов. Пожалуй, самым популярным и удобным является Syntax Highlighter Evolved.
Установка и использование плагина Syntax Highlighter Evolved
Установка SyntaxHighlighter Evolved очень простая:
Настройки плагина располагаются в разделе «Параметры» — «Подсветка синтаксиса».
Все настройки на русском языке, поэтому с их пониманием не должно возникнуть сложностей. После внесения изменений сохраняйте настройки и посмотрите на результат в опции «предпросмотр», где представлен образец произвольного кода.
Отмечу только, что в опции «Цвета» можно выбрать цветовую гамму для подсветки синтаксиса.
Теперь, чтобы вывести какой-либо программный текст в статье, вам потребуется переключится на встроенный html редактор и использовать либо короткий синтаксис:
Не работает Syntax Highlighter
На своем блоге я столкнулся с проблемой — Syntax Highlighter Evolved не работает. Устанавливается, настраивается, но корректно отображать код на странице на отрез отказывается. Самое главное, что и ошибок никаких не выдает, просто молча не работает.
Покопавшись на тематических форумах и блогах нарыл информацию, что Syntax Highlighter Evolved может не работать из-за несовместимости с плагинами кэширования, в частности с Hyper Cache. В качестве совета предлагалось повторно сбросить кэш. Подобная мера мне не помогла и пришлось искать альтернативу. Это оказалось не такой простой задачей — все остальные плагины из серии Syntax Highlighter тоже отказывались работать. Наконец, я наткнулся на легкий и простой WP-Syntax, который и использую на своем блоге.
Вставка кода с помощью WP-Syntax
line — атрибут позволяет отображать нумерацию строк. Указывается номер первой строчки кода.
При переключении с html в визуальный редактор WP тег pre интерпретируется и код не выводится так, как надо. Поэтому для редактирования подобных статей используйте только редактор в режиме html.
На сегодня это все. До скорых встреч на страницах блога FairHeart.ru!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Вставляем произвольный код в посты и страницы WordPress
Плагин Global Content Blocks
Если вам нужно вставить произвольный код в посты и страницы WordPress сайта, можно воспользоваться плагином Global Content Blocks. Плагин не тяжелый, позволяет быстро и удобно вставить в статью или страницу коды HTML, PHP, произвольные коды, формы подписки, рекламу AdSense, текстовые блоки. С его помощью можно вставить код php в шаблон сайта и разместить блоки в две, три колонки. Плагин постоянно обновляется и его можно отнести к лучшим плагинам WordPress.
Скачать и установить
Проходим стандартные шаги установки плагина. Если ставите плагины по FTP, даю адрес официальной страницы плагина: https://ru.wordpress.org/plugins/global-content-blocks/
Настройка плагина Global Content Blocks
Как таковых, настроек плагина нет. После активации плагина в консоли появляется меню: Global Content Blocks. На странице плагина видим вкладки управления:
Также, в редакторе сайта появляется кнопка добавления блоков плагина.
кнопка добавления блоков Global Content Blocks в редакторе
Вставить произвольный код в посты и страницы WordPress при помощи плагина Global Content Blocks
Работать с плагином несложно:
После создания блока, он появится в списке блоков. В столбце «Шорткод» списка блоков видим, шорткод, который соответствует созданному блоку. В столбце ID видим уникальный идентификатор блока.
Как вставлять блок в запись
Есть два варианта вставить созданный блок в запись:
Примеры вставки кодов
Вставить код формы подписки
Вставить рекламу AdSense
Вставить код в две, три колонки
Чтобы вставить код или текстовой код в две или три колонки вставляем шорткоды в таблице. Синтаксис HTML.
Выводим блоки в три колонки используя шорткоды блоков 
Видим контент в трех колонках.
Вставить PHP код в шаблон
Чтобы вставить PHP код в шаблон используем следующую конструкцию:
Замечу, что при добавлении содержания блока, можно сделать вложение и вложить один блок в другой. Зачем это нужно? Например, создаете форму подписки и вставляете в неё красивое описание в виде трех колонок.
Публикация HTML-кода на сайте WordPress
В этой статье рассмотрим вопрос размещения исходного HTML-кода на странице сайта WordPress. Я как-то затрагивал эту тему на одном из своих сайтов. Но там было рассмотрено несколько приёмов размещения кода на страницах ресурса индивидуальной разработки. А как это сделать на WordPress? Оказывается, проще простого!
Прежде всего, нужно отметить, что у этой задачи есть два варианта решения:
Вставка HTML-кода при помощи редактора
После этого в редакторе WordPress TinyMCE появится несколько вариантов вставки кода, которые мы сейчас рассмотрим. Именно этот плагин расширяет функциональные возможности редактора и, помимо всего прочего, добавляет возможность вставки кода.
Теперь в редакторе TinyMCE реализовано два варианта публикации кода:
Вариант №1
Альтернативный вариант: пройти по пути Форматы → Строки → Код :
В результате произведенных действий исходный код принимает другой формат текста ( на содержание кода не обращайте внимание, он взят для образца ) :
Вариант №2
Как мы уже знаем, редактор позволяет демонстрацию кода в поле тега PRE. Для этого так же вставляем участок кода без изменений, выделяем его мышью и в редакторе проходим по пути: Форматы → Блоки → Отформатированный :
В результате код выделяется примерно таким образом:
И в первом и во втором варианте представление кода корректное, визуально он выделяется заметно. При обрамлении тегами CODE и PRE, исходный код будет автоматически закодирован для отображения и не воспринимается браузером в изначальном, первозданном виде. Код легко копируется и применяется в дальнейшем по назначению.
Плагины для демонстрации исходного HTML-кода
Во многих публикациях в Интернете для вставки кода рекомендуют установку плагинов, например, Crayon Syntax Highlighter, WP Syntax, CodeColorer, Code Snippet Library, WordPress Rainbow Hilite и др. Не могу оспаривать полезность и практичность этих плагинов, но все-таки их применение влечет за собой использование дополнительных ресурсов и увеличение нагрузки на сервер. Кто-то является сторонником установки большого количества плагинов, а кто-то напротив, предпочитает их, по возможности, избегать.
Согласен, у плагинов много достоинств. Это и гибкие настройки и подсветка и удобство копирования кода и возможность открывать его в отдельном окне. Плагины дают возможность разнообразить стили отображения кода.
Единственный его недостаток — заимствует много ресурсов, что приводит к медленной загрузке страницы. Но наличие многих преимуществ с лихвой затмевает этот недостаток и многие пользователи жалуют Crayon и успешно применяют его на своих ресурсах.
На этом позвольте закончить обсуждение темы о выводе демонстрационного HTML-кода. Успехов Вам в применении полученных знаний на практике и развитии ваших сайтов.
До новых встреч. Пока. Ваш Л. М.
Как вставить код в статью WordPress
В этом уроке рассмотрим подборку лучших плагинов, позволяющих вставить красиво код в статью. Такая необходимость пригодится тем, кто часто приводит примеры кодов php, html, css и т.д. в своих статьях. Под словом красиво я имею в виду что код будет отображаться корректно с подсветкой синтаксиса и нумерацией строк. Возможно, вы замечали на многих ресурсах, в том числе и на моем подобную подсветку кода. Теперь вы узнаете, как это делается, и будете использовать на своем сайте.
№1 SyntaxHighlighter Evolved
Довольно легкий плагин хорошо справляется со своей работой имеет ряд самых необходимых настроек. Сохраняет форматирования текста также есть возможность выбрать тему оформления кода. Чтобы вставить код в статью требуется представить его в виде короткого кода:
Пример.
Результат.
Больше информации о коротких кодах вы найдете после установки плагина в конце настроек.
Пример.
Результат.
Разборка.
lang=”…”-язык, который следует отобразить (css,php,html,js и т.д.)
line=”1”-номер первой строки (необязательный атрибут)
У плагина настроек нет, после установки можете сразу вставлять код с правилами указанными выше.
№3 WP Code Highlight
Пример.
Результат.
№4 Crayon Syntax Highlighter
Результат.
№5 FV Code Highlighter
Пример.
Результат.
Вот такая подборка плагинов для вставки кода в статью. На своем сайте я использую плагин №3 и вполне им доволен, а каким плагином воспользуетесь вы?