Как вставить html код на сайт или преобрази свои технические статьи

Привет Всем! C вами Blog-Bridge.ru и я, Калмыков Антон. Сегодня я хотел бы поделиться с вами информацией о том, как вставить html код на сайт.

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

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

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

Как вывести код при помощи плагина Wp-Syntex

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

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

Итак, будем считать, что вы его установили. Главное не забудьте нажать «Активировать», в противном случае расширение работать не будет.

1. Теперь перейдите в вашу статью, в которой вы хотели бы поделиться кодом или скриптом.
2. В визуальном редакторе (1) записи вставьте ваш код в то место, где вы хотите, чтобы он располагался.
3. Далее перейдите в html редактор (2) вашей записи и заключите код в следующий закрывающийся тег:

<pre lang="php">Код который вы хотите чтобы выводился</pre>

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

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

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

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

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

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

То ваша информация будет выводиться с нумерацией строк. Причем, если вы вместо значения «1» поставите, например, «24», то нумерация будет начинаться именно с этого значения. Давайте я покажу, как это будет выглядеть со значением «24»:

24

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

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

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

escaped="true"

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

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

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

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

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

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

Далее, сколько я не нажимал на кнопку «Insert» ничего не происходило, и код так и не вставлялся.

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

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

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

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

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

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

Простой способ защиты от спамеров: Akismet плагин

Hyper Cache — настройка лучшего плагина по кэшированию

Настройка Google XML Sitemaps или успех быстрой индексации вашего сайта

WordPress плагин формы обратной связи: Contact Form 7 ваш незаменимый помощник для общения

Как сделать хлебные крошки WordPress? Плагин Yoast SEO наш лучший помощник

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

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

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

Пока-пока!

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