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

WordPress — добавляем произвольный код HTML

Сегодня хотел бы Вам рассказать о том как на примере WordPress добавить произвольный код HTML в нужном месте. Будь то код счётчика или код подписки на Ваш канал, реклама и так далее. Вставлять код будем через стандартный виджет WordPress.

WordPress — добавляем произвольный код HTML.

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

В последних версиях WordPress уже есть встроенный виджет для добавления произвольного HTML кода, так что устанавливать отдельные плагины не требуется.

И так, для того что бы добавить наш код нам необходимо в панели администратора перейти во вкладку «Внешний вид» -> «Настройка». Можно и через виджеты, но тогда мы не увидим сразу результат. Я предпочитаю больше визуальный редактор.

Визуальный редактор виджеты

Выбираем место куда хотим добавить наш код. Я хочу добавить счётчик в боковую панель. Выбираем «Боковую панель (Sidebar)», у Вас может отличаться название, всё зависит от шаблона.

виджеты выбираем боковую панель

Дальше нажимаем «Добавить виджет» и выбираем из списка «HTML-код».

Выбираем виджет HTML

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

Вставляем в код виджет

В результате получим такой результат.

Таким образом Вы можете добавить HTML код в любое место где можно использовать виджеты.

На этом всё, надеюсь данная статья была полезной.

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

Всем удачи и море печенек!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! 🙂

Источник

Как вставить код в статью WordPress

Здравствуйте, уважаемые читатели!

Поговорим о программном коде на сайте. Нередко у вебмастера возникает необходимость на одну или несколько страниц сайта вставить код. WordPress позволяет использовать php, java, html, css и т.п. код двумя способами: в качестве исполняемых команд, интерпретируемых движком сайта, и в виде доступного для чтения и копирования текста. В этой статье рассмотрим примеры того, как вставить код в страницу WordPress, чтобы он отображался корректно и красиво для посетителей.

Код в виде текста: зачем это нужно

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

Необходимость в публикации отдельных строк кода порой не ограничивается простым добавлением нужного фрагмента на сайт. Сопутствующее этому желание «сделать красиво» упирается в использование подсветки синтаксиса кода и в те или иные способы реализации. Подсветка кода на сайте способна существенно облегчить восприятие данных посетителями, привыкшими к использованию продвинутых редакторов вроде Notepad++.

Если просто вставить код в статью, WordPress интерпретирует его и исказит при публикации. Поэтому подобный тип данных всегда должен подвергаться обработке. Решить эту задачу можно различными способами: прописыванием необходимых тегов на странице вручную, используя встроенную в редактор WordPress кнопку и с помощью различных плагинов.

Как добавить код в статью без плагина

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

Добавляемый в визуальном редакторе контента блок, состоящий из одной и нескольких строк кода, WordPress при переходе в текстовый режим заменяет в тегах все символы символами

Чтобы показать CMS, что определенный фрагмент кода должен выводиться на странице «как есть», его в текстовом редакторе WordPress необходимо выделить и «обернуть» тегом с помощью кнопки на панели инструментов:

Выглядеть на странице это будет примерно так:

Наименование 1	Наименование 2
Значение 1	Значение 2

Чтобы вставить код в страницу WordPress с заданными отступами, при переходе из визуального редактора контента в текстовый можно использовать тег html

WP-Syntax

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

WP-Syntax не имеет собственной страницы настроек. Этот плагин WordPress для редактирования кода, точнее, для его вставки и изменения вида подсветки синтаксиса использует тег

Список поддерживаемых языков приводится на странице плагина.

Атрибут line в теге служит для отображения нумерации строк, его значение соответствует номеру строки, с которого начинается отсчет. Если код содержит html-объекты, рекомендуется использовать атрибут escaped со значением true в качестве опции:

Пример вывода и подсветки CSS-кода с помощью плагина:

При переключении из html-редактора в визуальный режим тег WordPress интерпретирует тег

и код не отображается правильно. Поэтому при редактировании статей со вставками блоков кода необходимо использовать редактор контента в режиме html.

Code Prettify

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

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

Заключение

Рассмотренные в статье решения на основе плагинов — лишь малая часть того, что предлагает хранилище плагинов WordPress. Перейдя по ссылкам меню консоли «Плагины — Добавить новый» на страницу поиска, по ключевым словам Highlight и Syntax можно обнаружить еще несколько десятков аналогичных плагинов, позволяющих красиво оформить программный код. Важно понимать, насколько уместным и необходимым будет подобный плагин на сайте. Возможно, именно в вашем случае вставить код в страницу WordPress будет проще вручную в текстовом редакторе, воспользовавшись тегами

Источник

Публикация HTML-кода на сайте WordPress

В этой статье рассмотрим вопрос размещения исходного HTML-кода на странице сайта WordPress. Я как-то затрагивал эту тему на одном из своих сайтов. Но там было рассмотрено несколько приёмов размещения кода на страницах ресурса индивидуальной разработки. А как это сделать на WordPress? Оказывается, проще простого!

Прежде всего, нужно отметить, что у этой задачи есть два варианта решения:

1. Применение функциональных возможностей движка, а именно, встроенного редактора TinyMCE ;
2. Использование дополнительных программных модулей ( плагинов ).

Вставка HTML-кода при помощи редактора

Для расширения возможностей встроенного редактора WordPress необходимо обязательно установить плагин TinyMCE Advanced . После его установки Вы заметите практически тотальное преображение редактора. Плагин устанавливается из админки ( Плагины → Добавить новый ). На открывшейся странице нужно ввести поисковый запрос, установить и активировать обнаруженный плагин:

После этого в редакторе WordPress TinyMCE появится несколько вариантов вставки кода, которые мы сейчас рассмотрим. Именно этот плагин расширяет функциональные возможности редактора и, помимо всего прочего, добавляет возможность вставки кода.

Теперь в редакторе TinyMCE реализовано два варианта публикации кода:

1. Для выделения участка кода используется тег CODE ( . );
2. Участок кода, подготовленный для демонстрации, обрамляется тегами PRE ( ).

Вариант №1

Для публикации и показа кода при помощи тега CODE, необходимо вставить нужный участок кода в редактор на вкладке Визуально . Ничего в коде изменять не следует. Выделить код мышкой и в редакторе нажать на значок КОД:

Альтернативный вариант: пройти по пути Форматы → Строки → Код :

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

Вариант №2

Как мы уже знаем, редактор позволяет демонстрацию кода в поле тега PRE. Для этого так же вставляем участок кода без изменений, выделяем его мышью и в редакторе проходим по пути: Форматы → Блоки → Отформатированный :

В результате код выделяется примерно таким образом:

И в первом и во втором варианте представление кода корректное, визуально он выделяется заметно. При обрамлении тегами CODE и PRE, исходный код будет автоматически закодирован для отображения и не воспринимается браузером в изначальном, первозданном виде. Код легко копируется и применяется в дальнейшем по назначению.

Плагины для демонстрации исходного HTML-кода

Во многих публикациях в Интернете для вставки кода рекомендуют установку плагинов, например, Crayon Syntax Highlighter, WP Syntax, CodeColorer, Code Snippet Library, WordPress Rainbow Hilite и др. Не могу оспаривать полезность и практичность этих плагинов, но все-таки их применение влечет за собой использование дополнительных ресурсов и увеличение нагрузки на сервер. Кто-то является сторонником установки большого количества плагинов, а кто-то напротив, предпочитает их, по возможности, избегать.

Согласен, у плагинов много достоинств. Это и гибкие настройки и подсветка и удобство копирования кода и возможность открывать его в отдельном окне. Плагины дают возможность разнообразить стили отображения кода.

По всеобщему мнению, лучшим из этого ряда является Crayon Syntax Highlighter . Он имеет большое количество настроек и режимов отображения, различные цветовые схемы и много удобных и полезных свойств. Это практически единственный плагин, который начинает работать сразу после его установки без каких-либо дополнительных заморочек, что выгодно отличает его от своих «собратьев».

Единственный его недостаток — заимствует много ресурсов, что приводит к медленной загрузке страницы. Но наличие многих преимуществ с лихвой затмевает этот недостаток и многие пользователи жалуют Crayon и успешно применяют его на своих ресурсах.

На этом позвольте закончить обсуждение темы о выводе демонстрационного HTML-кода. Успехов Вам в применении полученных знаний на практике и развитии ваших сайтов.
До новых встреч. Пока. Ваш Л. М.

Источник

WordPress – Как вставить содержимое .html файла в страницу или запись

Вступление

Плагин Include Me поможет Вам подключить в записи или страницы сайта отдельные файлы, обычно разделяемые между разными страницами или записями, и содержащие PHP, HTML или иной код, который может быть испорчен визуальным редактором WordPress.

Загрузить плагин можно здесь:

Правильное написание шорт кода плагина

На практике, и я в свое время отказался от использования данного плагина в связи с тем что при подключении отдельного файла WP издавал множество ошибок, а (найденные на просторах инета) решения (которые обязывали переписывать часть кода плагина) не совсем являлись адекватными. Ведь после очередного обновления все примененные настройки тупо слетят. Как оказалось все намного проще, в шорт коде плагина необходимо указывать путь к встраиваемому (отдельному) файлу без слеша в начале строки, то есть как указано ниже:

Пример вставки пути в шорт код плагина include-me :

Именно без слеша в начале ссылки

Документация плагина:

Include Me – мощный плагин, который позволяет включать в контент сайта внешний HTML или PHP-файл или содержимое другой публикации / страницы. Когда вы включаете файлы PHP, они будут исполняться и подключаться в основной вывод, поэтому вы можете создавать независимые скрипты, которые могут быть доступны практически из любой части сайта.

Официальная страница документации плагина:

Пример №1

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

Пример №2

Вам нужна специальная страница с вашим виджетами Facebook Fan Page (которая состоит из Javascript). Просто создайте *.js файл с кодом виджета Facebook и подключите его в любом удобном для Вас месте при помощи Include Me шорт кода.

Включение может быть сделано и в IFRAME если потребуется создать элемент показывающий внешнюю веб страницу.

Основные методы применения плагина

В любом сообщении или странице вы можете использовать Include Me с коротким кодом:

где атрибут «file» содержит имя файла, которое должно быть включено. Любой текстовый файл может быть включен, и, если он является файлом PHP (с расширением «.php»), он будет выполнен и включен его вывод.

Имя файла может быть относительным (не начинаться с «/»), поэтому его будут искать, начиная с корневой папки блога (для техников ABSPATH будет добавлен в начале). Если имя файла является абсолютным (начиная с «/»), оно будет использоваться как есть (поэтому вы можете включать файлы, даже внешние из корневой папки сайта).

Подключение других записей или страниц

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

«post_id» – это числовой идентификатор записи или страницы (наведите на кнопку редактирования для нужного контента в админ панели, параметр ID можно увидеть и таким образом).

Подключение iframe

Второй синтаксис доступен и вместо этого генерирует iframe для включения файла. Синтаксис iframe:

«url» — это сторонний веб-адрес. Любой другой атрибут, добавленный в короткий тег, будет использоваться как атрибут iframe. Например, если вы пишете:

Передача переменных

Если вы подключите скрипт PHP, он может получить доступ к атрибутам короткого кода, используя синтаксис $attrs[‘attribute name’]. Например, вызов:

При содержимом файла out.php

Вывод будет, конечно:

Таким образом, вы можете создать общий скрипт и сделать его доступным другим скриптам, используя атрибуты shortcode.

Я широко использовал этот плагин как в своих блогах, так и в сторонних проектах.

Источник