Как правильно оформлять код в своих статьях, чтобы он смотрелся эффектно и красиво

Рубрика:Блоговедение
как вставить код в статью на wordpress

Всем привет! Как ваши дела? Как настроение? Уже во всю идет зима. Наступил январь, Новый 2016-ый год. Сейчас практически у всех выходные или каникулы.

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

Погода кстати, наконец-то, стала зимней. За несколько дней до Нового года на улице были лужи, а сейчас лежит снег, и температура – минус 20. Меня это радует. Люблю настоящую зиму.

Но сегодня не об этом. Сегодня я решил, наконец, рассказать вам, как вставить код в статью на wordpress. Уже несколько раз обещал написать об этом, и вот наступил этот момент.

Кстати если вы не помните, то говорил я об этом немного вскользь вот в этих статьях:

  1. Плагины, которые улучшают функциональность моего сайта
  2. Как сделать содержание для статьи двумя способами.

Введение

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

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

Кто-то спросит: «зачем как-то по-особому размещать код, можно ведь просто вставить как обычный текст и не заморачиваться совсем?»

Действительно, в этом нет строгой необходимости, но благодаря этому:

  1. Статьи будут лучше восприниматься читателями
  2. Код будет явно виден
  3. Это может поднять ваш авторитет, так как не все так умеют :-)

Общий алгоритм размещения кода выглядит следующим способом:

  1. Установка плагина wp-syntax
  2. Предварительная вставка кода в визуальном режиме редактора
  3. Заключение его в теги <pre> и </pre> в режиме «текст»
  4. Добавление свойств lang, escaped и Line

Как видите, процесс не самый простой, но и не сложный.

Шаг 1. В первую очередь необходимо установить плагин wp-syntax. Сделать это можно через админ панель вордпресс. Сложностей здесь по определению возникнуть не должно.

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

Важно! Эту процедуру выполняем в визуальном режиме редактора вордпресс.

Шаг 3. Далее переходим в режим «текст». Находим наш код. В самом начале ставим открывающий тег <pre>, а в конце ставим закрывающий </pre>.

Шаг 4. Внутри открывающего тега <pre> нужно еще указать язык. Делается это таким образом:

<pre lang = “html”>...</pre>

Вместо html можно подставить и другие языки, например, php или css. Для каждого языка у этого плагина свой стиль отображения.

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

Но я рекомендую добавить еще два свойства внутри тега <pre>:

  1. Escaped
  2. Line

Дело в том, что редактор вордпресс шифрует угловые скобки«<» и «>» специальным набором символов. Вообще так устроен html язык. Для отображения различных знаков, отличных от обычных букв и цифр, используются специальные последовательности символов.

Например, «<» шифруется так «&lt;», а «>» вот так «&gt;»

Чтобы код отображался корректно, следует добавить свойство escaped = “true”.

А если вы хотите добавить нумерацию строк, то потребуется такое свойство, как line = “1”.

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

Важно! Escaped и Line вставляются внутри открывающего тега <pre>.

В итоге должно получиться примерно вот так:

<pre lang = "css" escaped = "true" line = "1">KOD</pre>

Замечание! Кавычки необходимо ставить, используя английскую клавиатуру. У меня это клавиша с русской буквой «Э».

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

Перед Новым годом автор блога «Без дураков» Валерий взял у меня интервью по поводу инвестирования на краудинвестинговой площадке Симекс. Вопроса было всего три. Если интересно, то перейдите по ссылке и прочитайте. Помимо меня там присутствуют интервью директора и менеджеров проектов.

Остались вопросы? — пишите комментарии. Чтобы получать новые статьи на email, подпишитесь в специальной форме ниже. А также поделитесь прочитанной информацией со своими товарищами в социальных сетях. До скорых встреч!

С уважением! Абдуллин Руслан

Как правильно оформлять код в своих статьях, чтобы он смотрелся эффектно и красиво
Оценка: 5 Всего голосов: 2
Понравился блог? Подпишись, чтобы получать новые статьи на почту и быть в курсе всех событий!
Ваш email:
Ваше имя:
email рассылки Конфиденциальность гарантирована

Комментарии пользователей (13)

  1. Сергей

    Вот, кстати, про escaped = «true» не знал, надо будет использовать, а то надоело уже искать в коде знак меньше и заменять его. А я пользуюсь немного другой версией — Bootstrap и Google-code-prettify. В ней просто открывается код таким тегом pre class="prettyprint". Ну и надо скачать пару скриптов и подключить их к страничке ) Язык программирования скрипт сам определяет, но можно и указать явно, если какой-то специфичный.

    Ответить
    • Абдуллин Руслан

      А я как-то даже и не пробовал разные варианты таких плагинов. Нашел wp-syntax и сразу на нем и остановился.

      Пытался еще найти варианты, чтобы всё происходило автоматически путем нажатия на одну кнопку, но таких вообще не нашел.

      Если кто знает, прошу поделиться )))

      Ответить
      • Вадим

        Тоже искал варианты. В итоге понял, что wp-syntax все таки является оптимальным вариантом.

        Ответить
  2. Николай

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

    Ответить
    • Абдуллин Руслан

      :-D :-D :-D

      Ответить
    • Валентина

      Вот это и моя мечта: все бы эти коды как-то волшебным способом уже установились сами, а ты только пишешь статьи и пишешь...))) Эх, мечты...))

      Ответить
      • Абдуллин Руслан

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

        Хотя эта статья о другом))]))

        Ответить
  3. Наталья Краснова

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

    Ответить
    • Абдуллин Руслан

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

      Ответить
      • Николай

        многие можно кодом заменить.

        Ответить
        • Абдуллин Руслан

          Согласен. Я например не использую плагин для блока «топ комментаторов» и для антиспама в комментариях.

          Но иногда мне лень и я ставлю плагин. Недавно не захотел возиться со звездами от гугла и просто поставил плагин

          Ответить
    • Валентина

      Вечно перед блогерами проблема — как бы добавить новый полезный плагин, да ещё бы он не оказался лишним. А вот некоторые, читала, чуть не 60 плагинов устанавливали...

      Ответить
  4. Валентина

    Коды для меня — тема вообще не изведанная. Но именно потому и открыла статью. И вот показалось после прочтения, что так понятно написано, что при необходимости и у меня получится.

    Ответить
Правила комментирования
author-photo
автор блога:
Я в социальных сетях
25 руб. Добавить ссылку
Валентина 21
Надежда Вв.13
Николай5
Безумная партнерка