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

вставить 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».

Кнопка-Code

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

Вставка-языка

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

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

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

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

Онлайн-эксперимент в блоггинге!

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

Подписаться

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

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

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

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

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

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

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

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

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

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

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

Пока-пока!

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

Поделись с друзьями:

Комментариев: 2

  1. Сергей

    А мне вот больше для вставки кода на сайт нравится связка Bootstrap и Google-code-prettify. Код можно оформить как угодно и скрипты автоматически определяют распространенные языки программирования.

    Ответить
  2. Екатерина Калмыкова

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

    Ответить

Оставить комментарий

=) 8) :( ;( ;) :P :-D =-O :-! *IN LOVE* %) *CRAZY* *LOL* ]:-> *MACHO* *EEK*