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

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

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

Пример того, как в WordPress вставить html-код на страницу без плагинов с помощью тега 

 

 

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

 
 Значение 1
 
 Значение 2
 

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


Возможности форматирования выводимых на странице блоков с помощью атрибутов достаточно широки, но не безграничны. Использование рассмотренных тегов оправдано, когда на страницу добавляются в качестве примеров одиночные строки или небольшие фрагменты кода. О красивом оформлении в этом случае говорить не приходится, результат вставки будет предельно минималистичен, но многим достаточно и этого.
Сложное форматирование, позволяющее реализовать подсветку синтаксиса — результат работы плагинов, о которых пойдет речь ниже.
Плагины вставки кода для WordPress
Предлагаем на выбор несколько плагинов из официального репозитория WordPress, позволяющих выводить любой код (php, java, html, css) красиво: построчно и с соответствующей подсветкой элементов.
SyntaxHighlighter Evolved

Распространенный плагин для вставки кода в WordPress, продвинутый и мощный, на странице настроек которого можно применить одну из семи имеющихся тем оформления и, при необходимости, выбрать отображение нумерации строк и панели инструментов, сделать кликабельными URL свернуть поле кода, выставить автоматический перенос длинных строк и т.д. Тут же присутствует визуальный предпросмотр вывода, имеется расшифровка используемых атрибутов.
В плагине SyntaxHighlighter Evolved
 предусмотрено все, что может когда-либо понадобиться. Вставить код в статью WordPress с его помощью очень просто, для этого необходимо в настройках разрешить плагину обрабатывать тег 
Или использовать соответствующие шорткоды:
Пример
пример
пример
пример
WP-Syntax

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

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

Пример вывода и подсветки CSS-кода с помощью плагина:
 1
2
3
4
5
6
7
8
 .block
 {

 border
:
 2px
 #8E0505
;

 color
:
 #2D0000
;
 /*цвет текста*/

 padding
:
 2px
;
 /*внутренние отступы*/

 text-align
:
 left
;
 /*выравнивание текста*/

 font-family
:
 arial;

 font-size
:
 14px
;

}


Block {
 border: 2px #8E0505;
 color: #2D0000; /*цвет текста*/
 padding: 2px; /*внутренние отступы*/
 text-align: left; /*выравнивание текста*/
 font-family: arial;
 font-size: 14px;
}
При переключении из html-редактора в визуальный режим тег WordPress интерпретирует тег 
И код не отображается правильно. Поэтому при редактировании статей со вставками блоков кода необходимо использовать редактор контента в режиме html.

Code Prettify

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

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


Причем, я сразу хотел бы пояснить, что код мы будем вставлять в саму статью, да так, чтобы его наши читатели могли копировать, не тратя время на набор самого текста. Тем самым мы будем повышать удобство () своего ресурса — это раз. Да и выглядеть статьи будут более профессионально и закончено — это два.
Также хотелось бы отметить, что информация в данной статье будет полезна людям, которые либо как мы рассказывают, как делать различного рода дополнения на сайте, или пользователям, которые просто любят делиться полезной информацией. И не важно, что эта информация – код 🙂 Кстати, раскрою небольшой секрет, на данном проекте мы выводим его при помощи плагина 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 код на страничку, перерыл гугл, яндекс и даже mail поиск, но не нашел конкретного ответа на мой вопрос как сделать вот так.
сделать так очень легко, просто нужно использовать тег textarea + использовать дополнительные параметры высоты, ширины и отступа
Давайте по порядку разложу как и что. На wordprese можно просто в визуальном редакторе ставить необходимый код и он будет отображаться примерно так:


»alt=»Автоматизированная система зарабатывания денег»/>



Но как вы видите код отображается не красиво и скопировать его не очень удобно. Так вот для реализации таких задач нужно использовать тег:
</b> между которым вводить ваш код или любой текст <b>
.
Так же помните, что этот тег нужно вставлять в текстовом редакторе не только на движке wordpress, а на любом движке.
Нужно учитывать и использовать дополнительные теги, которые добавляют параметры отступа от верхней строки style=margin: 2px;

 Так же параметр высоты: height: 40px;

 и конечно же параметр ширины: width: 660px;


Теперь я подведу итог на писаному. При открытие кода </b> нужно вставить параметры отступа ширины и высоты, выглядит это вот так: <b><i><textarea style=»margin: 2px; width: 660px; height: 40px;»>
</i>
</b> задайте необходимые параметры в пикселях и все ваш код почти готов, далее пишите текст или код и потом закрываете тег <i><b>


И напоследок, как и обещал прилагаю Шпаргалку:

Как вставить Html код в Html страницу?

 —————————————

Скопируйте в блокнот тег   и между вставьте код ниже, заменив при этом ссылку на ваш сайт и ссылку на ваш банер
</b></p>
<p><a href=»http://ваш_сайт.ru»><img src='/ram/vstavka-koda-na-stranicu-kuda-vstavlyat-etot-kod-v-wordpress/' loading=lazy>»alt=»введите текст, которые показывается при наведении мышки на банер»/></a></p>
<p><b>

Сноски:


*  
 — тег, позволяющий втавлять любой Html тег на любую веб страницу

* style
 — параметр, отвечающий за стиль, размеры, цвет текста внутри тега

* margin: 5px;
 — параметр отступа

* width: 660px;
 — параметр ширины

* height: 80px;
 — параметр высоты
 На этом дорогие друзья все, подписывайтесь на RSS ленту а также на мой канал YouTube 

Всем хорошего настроения. 🙂

 
Об авторе
 Многие, наверное, не понимают, почему я назвал свой блог Социальный лифт из тьмы к солнцу
, тогда я рассказу и объясню. Для меня интернет это лифт, в который я погружаюсь на нужным мне этаж умений, навыков, заработков; а социальный, потому что он для людей, для общества, для желающих, для тех, кто очень схож с моим видением. Тьма
 - это жопа, или другими словами днище обычной жизни, в которой был я, в которой многие сейчас, да, наверное, половина людей в нашей стране в этой жопе, которые думаю, что это чайка, а нет… Солнце
 - это то, что дает жизнь абсолютно всему живому на планете, в том числе и нам с вами. Если б солнца не было, не было бы жизни. Солнце
- это энергия к жизни.
А если все резюмировать, InternetLIFT
 - это возможность обычным пользователям интернета, которые работают на дядю, находятся в финансовой жопе, мечтаю разбогатеть, но не знают с чего им начать. Internet Lift
 - это платформа, которая поможет желающим, стать немного или значительно подкованными в тонкостях и схемах заработка. Смогут узнать, с чего начать, куда идти, и как стать самому себе начальником.
Я надеюсь, мои советы и статьи помогут вам и мне в том числе. Так как однажды вы поймете, почему я веду блог, если вы что-то знаете, это ценно только тогда, когда вы это помните. А когда вы запишите и поделитесь, это будет вечно, в том числе в вашей памяти!!!
Хотите узнать, как вставить код на сайт 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
)
:

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

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

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

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

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


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

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

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


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


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


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


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


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

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