Вставка html кода в страницу. Как отключить визуальный редактор? Дополнительные функции Wp-Syntex

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

Мне захотелось с этим разобраться.

Когда ведешь свой сайт на CMS (движке) WordPress, то приходится постоянно его совершенствовать и добавлять себе новые и полезные функции, которые встречаются на других подобных блогах.

Отставать нельзя!

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

Кроме того, у меня есть специальная , которые установлены на моем блоге. Там, кстати, можно найти ссылки на статьи с описанием, для чего служат эти плагины и как их лучше установить и настроить.

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

Но, иногда приходится добавлять иллюстрации показывающие, как я изменяла код на своем сайте.

До сих пор я применяла для этого только один способ: вставляла – фотографию экрана своего компьютера.

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

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

Многие ссылаются на плагины:
WP Syntax в связке с WP Syntax Button ;
SyntaxHighlighter Evolved ;
Auto SyntaxHighlighter .

Нашла описание, как вставить код и без плагина. Для этого раньше использовали тег xmp (открывающий и закрывающий). Но сейчас он устарел, и вместо него в HTML рекомендуют применять тег pre (открывающий и закрывающий).

Но вставить программный код в статью только с помощью специальных тегов pre или xmp у меня не получилось. Пробовала и в контейнер div их помещать. И копировала полную фразу с сайтов, которые это рекомендовали.

Эксперимент не удался. Код при редактировании в режиме HTML не сохранялся. При переключении вкладок (Визуально/Текст) он просто исчезал из текста статьи. Почему-то это не срабатывает. Кто знает, напишите.

Попалась на глаза информация, что это можно сделать только после установки плагина WP Syntax . Т.е. все равно без плагина не обойтись. Версия WordPress у меня была установлена самая новая (на тот момент — 4.3.1).

Но можно поступить и так. Увидели вставленный код на каком-то сайте, клацнули на нем правой кнопкой мыши, чтобы выбрать из контекстного меню «просмотр кода элемента» и просмотрели код. Так можно узнать, как он вставлен.

Таким образом, я определила, что на одном из знакомых мне сайтов, код вставлен с помощь плагина Crayon Syntax Highlighter .

Я нашла этот плагин по поиску в административной панели и установив его на тренировочном блоге.

Пользоваться им оказалось очень просто. Никакие настройки я не меняла, хотя там их довольно много. Все оставила по умолчанию (так, как настроил сам автор).

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

Появляется окно для вставки кода.

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

Код получается очень красочный. Его элементы выделяются разным цветом. Есть возможность настроить все это под себя.

Все оказалось настолько просто, что лучшего я решила и не искать.

И теперь, уважаемые читатели, Вы сможете легко скопировать программный код с моего сайта.

Например, этот.

Код функции, чтобы скрыть логин администратора сайта WordPress в комментариях

add_filter("comment_class", "udalit_class_avtora_kommentariya"); function udalit_class_avtora_kommentariya($klassi){ foreach($klassi as $kluch=>$klass) : if (strstr($klass, "comment-author-")) : unset($klassi[$kluch]); endif; endforeach; return $klassi; }

add_filter ("comment_class" , "udalit_class_avtora_kommentariya" ) ;

function udalit_class_avtora_kommentariya ($ klassi ) {

foreach ($ klassi as $ kluch = > $ klass ) :

Причем, я сразу хотел бы пояснить, что код мы будем вставлять в саму статью, да так, чтобы его наши читатели могли копировать, не тратя время на набор самого текста. Тем самым мы будем повышать удобство () своего ресурса — это раз. Да и выглядеть статьи будут более профессионально и закончено — это два.

Также хотелось бы отметить, что информация в данной статье будет полезна людям, которые либо как мы рассказывают, как делать различного рода дополнения на сайте, или пользователям, которые просто любят делиться полезной информацией. И не важно, что эта информация – код 🙂 Кстати, раскрою небольшой секрет, на данном проекте мы выводим его при помощи плагина Wp-Syntex.

Вы спросите: «Почему мы используем именно его?» Ответ прост — на вкус и цвет товарищей нет. Шутка. На самом деле, мы выбрали этот плагин, потому что он прост в использовании, он прекрасно придает визуальную стилистику различного рода языкам программирования (css, html, java, javascript, perl, sql и т.д.), да и не сильно нагружает наш сервер.

Ну раз я проговорился на счет Wp-Syntex, так давайте на его примере мы и покажем, как вставлять код в статьи на WordPress.

Для начала вам нужно установить этот плагин. О том, как это сделать мы рассказывали в статье про . Поэтому описывать данное действие я тут не стану.

В результате у вас будет выводиться следующее:

Код который вы хотите чтобы выводился

Также вместо php в данном коде вы можете вставить другой язык программирования, например css или java. При этом стилистика оформления внешнего вида будет меняться.

Дополнительные функции Wp-Syntex

Если в открывающийся тег «pre» вы добавите атрибут line , то есть код, который вы должны будете вставить, будет начинаться так:

Код который вы хотите чтобы выводился

Надеюсь, вы заметили разницу?

Есть еще один небольшой атрибут, который может понадобиться вам — это escaped . Он позволяет преобразовывать html-коды символов непосредственно в сами символы. Например, ">" он преобразует в «>». Для того, чтобы заработала данная функция, в открывающийся тег «pre» вставьте следующий атрибут:

escaped= "true"

Соответственно тег будет начинаться так:

< pre lang= "php" line= "1" escaped= "true" >

Также на просторах интернета я находил информацию, что можно установить еще один плагин (WP-Syntax Button), который работает в связке с нашим плагином и добавляет в редактор WP кнопку вставки кода. Я не поленился и решил протестить его.

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

После активации WP-Syntax Button я решил в одну из наших статей попробовал вставить java скрипт. Сделал всё как и было указано в горе инструкциях и рекомендациях. Вставил скрипт в статью, выделил его и нажал кнопку «code».

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

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

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

Если вы хотите получать актуальную информацию к себе на электронную почту, то рекомендую .

Видео «Как вставить HTML код в статью»

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

Статьи в тему:

Ну что, надеюсь, статья получилась не сложной, и мне подробно удалось рассказать вам про то, как можно вставить html код на сайт без лишних заморочек.

Не пренебрегайте эстетическим обликом вашего блога. Ведь наш читатель как и в жизни, встречает по одёжке, а провожает по уму.

На этом у меня все!

Пока-пока!

С уважением, Калмыков Антон

Иногда нужно вставить какую нибудь информацию в статью типа баннер или какой нибудь формы. Эти вещи представляют из себя html код. Чтобы вставить html код в статью или страницу, никаких особых знаний не надо. Делается это очень просто. Вы уже знаете, что html код – это просто текст. Во время создания статьи или страницы выбираем режим Текст . Затем вставляем нужный Вам код. Сохраняем. И все, готово!

Есть еще способ, он позволяет вставить любой Html код на любую веб страницу.

Это тег . Принцип такой Сначала , потом Ваш код, потом . Привожу пример Ваш Html код Где

style отвечает за стиль, размеры, цвет текста внутри тега,
margin: 10px; размер отступа,
width: 300px; размер ширины,
height: 120px; размер высоты.

P.S. Небольшая тренировка мозга

Три лягушки сидели на берегу пруда. Одна из них решила прыгнуть в пруд. Сколько лягушек осталось на берегу?

Возможно вам это будет интересно:

Как подключить рассылку к сайту

2014-03-09T04:38:56+00:00 Надежда WordPress html код,вставить html код

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

Надежда Трофимова [email protected] Administrator Блог сайт

Возможно Вас также заинтересует:

Как убрать /category/ из url wordpress

Как убрать category из url wordpress и зачем это надо? Как этот префикс мешает продвижению сайта.

Как отключить и включить редактор файлов в консоли wordpress

Редактирование WP-config.php как-то мало меня интересовало, но видно до некоторой поры. Все-таки пришлось. Вхожу в консоль своего сайта, а там нет редактора файлов. Вы знаете...

Как настроить тему Islemag wordpress

Islemag является одной из самых лучших бесплатных тем.

Как откатить WordPress на старую версию

Приветствую читателей моего блога. Ну вот, пришла пора и я столкнулась с проблемой при обновлении новой версии WordPress, а именно из WordPress 5 на WordPress 4.7.

Как ускорить сайт на wordpress, выключив HeartBeat API

Всем привет. Продолжаем тему ускорения сайта на wordpress. В статье Как ускорить wordpress с помощью минимизации CSS, HTML и Javascript мы убрали лишнее из файлов, но...

" я рассказывал как зарегистрироваться на сайте liveinternet и получить html код счётчика.

Для того чтобы вставить код, будим использовать замечательный плагин Sourcerer. Этот плагин предназначен для сайтов сделанных на платформе joomla, и служит для вставки любых кодов, таких как (PHP, HTML, CSS, JavaScript).

Сразу хочется отметить, что бесплатная версия этого плагина, немного урезана по функционалу. Но это ни как не сказывается на основных функциях. Скачать плагин Sourcerer для joomla 3 можно

После того как вы скачаете плагин, его нужно установить. Как устанавливать расширения на joomla 3, я написал . Настраивать его нет необходимости, разработчик выставил оптимальные значения. Остаётся вставить код на страницы сайта.

Как вставить код на сайт с помощью модуля

Первым делом нужно зайти в админку joomla 3. Далее: Расширения > Менеджер модулей .

После нажмите кнопку " Создать ". Тем самым мы создадим новый модуль.

В пункте "Выбор типа модуля", кликнуть по ссылке "HTML-код".

В созданном модуле, необходимо заполнить поле "Заголовок".

Теперь скопируйте необходимый код, и вставьте его между этими тегами.

Остаётся заполнить стандартные поля модуля. Где вы укажите: показывать заголовок или нет, выберите позицию модуля и в строке состояние, поставите "Опубликовано".

В завершении, нажмите на кнопку "Сохранить".

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

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

После того как установили плагин Sourcerer, в редакторе материала, пропишите теги {source} {/source} и между ними вставьте необходимый код. Как видите, всё тоже самое, как и вмодуле.

На этом всё, если у кого то возникнут вопросы, задавайте их в комментариях. Повторюсь, аналогично вы можете вставлять на сайт joomla 3 (PHP, CSS, JavaScript) коды.

Конечно, не всем нужна эта информация, а только тем, кто на своих страницах делится с читателями своими наработками в ковырянии кода (читай кишках сайта) и какими-то его модернизациями через… ну вы поняли Через вмешательство в «генетику»! А вы о чём подумали?

Забегая вперёд, пока не приступил к основному повествованию, могу сообщить, что ковыряться буду и дальше, о чём буду писать и что, весьма вероятно, может вам пригодиться, если у вас тоже есть свой ресурс для клавиатурного творчества в Сети. А посему рекомендую следить за выходом новых статей , дабы не прощёлкать пропустить выход свежачка. Особенно, если вы это до сих пор ещё это не сделали, интересно почему?

А теперь, дорогие мои распрекрасные, начинается оно – повествование.

Может возникнуть резонный вопрос, а заем вообще надо заморачиваться по поводу вставки кода? Зачем надо делать какую-то подсветку кода и почему нельзя его просто вставить, как текст, например?

А всё просто – если попытаться вставить код просто так, то он вместо отображения, иногда начнет выполняться и вытворять все те функции, для которых предназначался, причём, прямо там, куда вы его употребите вставите. От всех этих «прелестей» сайт может «поплыть», его может «скрючить», а сама статья превратиться в непонятно что и посередине нечто – некрасиво! Да и сам код в «голом» виде, не очень читабельное «зрелище», что для неподготовленного взгляда может представлять неудобоваримую субстанцию, от которой, у взирающего может даже развиться нежелание что-либо понимать и вникать в суть происходящего. Короче, не оно! Да вы и сами можете убедиться, если посмотреть, например, на вид картинки в коде:

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

Как вставить html код в тело статьи красиво и правильно.

Вариант № 1 – подсветка кода через плагин WP-Syntax.

Точнее сказать, этот вариант реализуется через связку двух плагинов – для удобства работы. Первая часть связки так и называется: WP-Syntax и выполняет основную функцию. А вторая часть – это сервисная и называется WP-Syntax Button, которая реализует работу через нажатие кнопки, которую эту самую кнопку и добавляет к вам на приборную панель редактора wordpress. Скачиваете обе части этой связки либо через поиск в админке блога по названию, либо со страниц репозитария движка. Страница репозитария для WP-Syntax здеся . А страница для WP-Syntax Button . Мы же не в маршрутке, правильно?

Установка стандартная – нашли, скачали, активировали. Обратите внимание, что плагин-кнопка (Button) не обновлялся уже более двух лет и нет данных о его совместимости с вашей новой версией WordPress, что может вас насторожить. Если вы обеспокоены этим обстоятельством, то можете кнопку не скачивать и обойтись только первой частью связки – так тоже будет работать, только менее удобно. От себя же скажу, что пользуюсь полным набором и всё работает.

Если вы установите всё, то у вас на панели редактора появится новая кнопочка «Code».

Чтобы вставить код через этот плагин, надо сначала вставить его в визуальном (обычном, где набираете текст) режиме, выделить мышкой, а затем нажать кнопку «Code» и из выпадающего списка выбрать язык, который соответствует вашему коду. Заодно можете задать нумерацию строк, указав номер первой в Line Number. После выбора нажать Insert.

При этом, после сохранения/обновления поста/страницы вы увидите примерно такую картинку с вашим, красиво вставленным, кодом картинки, например:

Если вы не стали устанавливать часть WP-Syntax Button, то для вставки кода вам придется использовать такую комбинацию кода:

Сюда вписываете ваш код

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

1	Сюда вписываете ваш код

Вариант № 2 – подсветка синтаксиса через плагин SyntaxHighlighter Evolved , название которого именно так и преводится. Скачать можно через поиск по названию в админке блога, либо со этой странице плагина . Установка стандартная. Этот плагин работает, как и предыдущий, но в менее удобном варианте.

После установки у вас появится пункт меню Настройки > SyntaxHighlighter, где будут все его настройки. Да, забыл сказать, что плагин англоязычный и нерусифицирован – недостаток. Если что будет непонятным, то пользуйтесь переводом страницы.

Настройки плагина можно оставить по-умолчанию – они работоспособны. А можете выставить значения, как на картинке с примером моих настроек:

Если запутаетесь, то в настройках есть кнопка Reset to Defaults – сброс настроек на первоначальные. А также внизу страницы, под кнопками, есть предпросмотр отображения кода – можете смело поиграться и выбрать свой вариант настроек и вывода кода. На есть список поддерживаемых языков и более подробное описание его настроек – там всё на русском, разберётесь.

Чтобы вставить html или php код в запись сайта с эти плагином, надо применить одну из конструкций из примера в странице настроек плагина (в самом низу):

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

Сюда вписываете ваш длииииииииииииииииииииииииинныйкод

Вариант № 3 – вставить html или php код без плагина.

Чтобы обойтись без плагина и вставить html код в тело блога надо заключить его в следующий код:

ВСТАВИТЬ СЮДА ВАШ КОД

Где, height и width – соответственно высота и ширина выводимого поля с кодом в писклелях, color – цвет. Цвет можете подобрать с помощью пипетки в , о которой я уже писал. Ширину и высоту можно подобрать под параметры вашего сайта. На выходе получится примерно следующее:

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

Думаю, теперь определитесь, как вставить html код красиво в блог.

На этом буду заканчивать разглагольствовать. Надеюсь, пользу вам сегодня причинил Спасибо, что дочитали.

Немного позитива:

Нажатия на социальные кнопочки и комментарии приветствуются!

Пройдись по кнопочкам, расскажи о статье друзьям - это к деньгам!