плагин для вставки 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 и вполне им доволен, а каким плагином воспользуетесь вы?

Источник