плагин для вставки 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:

Источник

Публикация 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-кода. Успехов Вам в применении полученных знаний на практике и развитии ваших сайтов.
До новых встреч. Пока. Ваш Л. М.

Источник

Вставить код в раздел head на WordPress – темы, плагины и php функции

Большинство скриптов и систем аналитики требуют чтобы подключение к серверам происходило в шапке сайта, где располагается вся служебная информация. Чтобы добавить код в head WordPress не нужно придумывать сложных схем, стоит применить некоторые методы, описанные в статье.

Не путайте head и header, второй это тег семантической разметки сайта, который отображается и показывает, что здесь находится шапка сайта.

Если шаблон не обновляется

Самый простой методом – добавить код напрямую в файлы шаблона. Но есть несколько ограничений:

Открываете файл header.php (находится в корне темы), обычно он отвечает за показ первого экрана в WordPress. Используйте соединение по FTP, чтобы при ошибках откатить изменения. Я покажу на примере стандартного редактора в админке WP.

Перешел в редактор тем, нашел файл, потом вставил тестовый тег и обновил. Так он выглядит на главной странице.

Если обновляется, то данный метод сразу не подходит, переходим к другим способам.

Темы с возможностью добавлять код html в head

Возможно вы не знаете обо всех функциях своего шаблона, полезно будет изучить настройки, может быть в нем есть область для записи произвольного кода в хеад. Например, в теме Reboot есть такая возможность Внешний вид – Настроить.

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

Если не нашли таких настроек, то переходим к другим методам, чтобы добавить код в раздел в хеад.

Применяем плагин ClearfyPRO

Любимый ClearfyPRO умеет все, также прописывать html и другие виды спецификации в head блога.

Есть переключатель можно на время отключить отображение, чтобы не приходилось стирать и заново загружать код. Аналогично можно удалить стили recentcomments. Полезно узнать что ClearfyPRO оптимизирует, ускоряет и улучшает seo в WordPress дополнительно по 49 требованиям. Для читателей WPCourses делаем скидку на покупку.

Плагин для вставки кода Head & Footer Code

Применяем PHP инструкцию

Помещаем его в файл function php. Видим место куда добавлять, вводите любой HTML и js script, после сохранения изменений, ваша функция выведется после отработки основных сценариев wp_head. Также отключается xml rpc протокол в WordPress.

Применяя четыре простых способа смогли добавить любой код в head любимой CMS WordPress, советую использовать плагины, если нет подходящих мест в шаблоне.

Источник

Как вставить HTML (CSS, PHP, SQL, JAVA) на страницу или запись в WordPress

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

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

1. WP-Syntax

Плагин WP-Syntax справится с данной задачей на все 100%. В своей основе он достаточно простой, и для его функционирования не нужно совершать никаких настроек после установке на ваш сайт. Для вставки кода (HTML, CSS, PHP, SQL, JAVA) достаточно использовать конструкцию:

В этой конструкции lang – язык который вам необходимо отобразить, а line – номер строки с которой нужно начать отсчет при публикации кода.

Данную конструкцию нужно вставлять не в визуальном редакторе, а через исходный код страницы или записи.

2. CodeColorer

Один из лучших плагинов не только для вставки кода (HTML, CSS, PHP, SQL, JAVA), но и его красивого оформления. Также функционал данного плагина позволяет не только добиться поставленной задачи, но и сделать следующие пункты:

3. SyntaxHighlighter Plus

Данный плагин также решает проблему вставки кода (HTML, CSS, PHP, SQL, JAVA) при этом не нужно писать дополнительные теги. Вставка кода производится нажатием в визуальном редакторе на кнопку SyntaxHighlighter Plus. Во всплывающем окне выбираете язык кода и вставляете нужный код.

В данном плагине присутствует ряд настроек, что позволит как улучшить внешний вид блока кода, так и увеличит его функциональные возможности:

Вот пожалуй самые популярные варианты вставки кода HTML (CSS, PHP, SQL, JAVA) на страницу или запись в WordPress. Выбор за Вами!

Источник