mobile ico

Как красиво оформлять код в своих статьях

Рубрика:Блоговедение
как вставить код в статью на 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, подпишитесь в специальной форме ниже. А также поделитесь прочитанной информацией со своими товарищами в социальных сетях. До скорых встреч!

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

03.01.2016 (обновлено 07.05.2020)
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 оценок, среднее: 5,00 из 5)
Загрузка...
автор

Меня зовут Абдуллин Руслан, и я автор блога abdullinru.ru

Уверен, что каждый должен стремиться к созданию нескольких источников дохода. Легче всего это сделать в интернете. И это миссия моего блога

Я в социальных сетях
Понравился блог? Подпишись, чтобы получать новые статьи на почту и быть в курсе всех событий!

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

  1. Сергей

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

    • Абдуллин Руслан

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

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

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

      • Вадим

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

  2. Николай

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

    • Абдуллин Руслан

      :-D :-D :-D

    • Валентина

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

      • Абдуллин Руслан

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

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

        • Валентина

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

          • Надежда Введенская

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

      • Надежда Введенская

        Я за столько лет ни разу не обращалась к кодам. Так что ваша мечта вполне реальна. А если уж сильно захочется навести красоту в кодах, то я все-таки предпочту фрилансера.

        • Валентина

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

          • Надежда Введенская

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

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

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

    • Абдуллин Руслан

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

      • Николай

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

        • Абдуллин Руслан

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

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

          • Надежда Введенская

            А код исправляете сами или все-таки заказываете это у специалиста?

          • Абдуллин Руслан

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

          • Валентина

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

          • Надежда Введенская

            Да, по сравнению с вами, мы еще по уровня «любителя» не дошли. Как говорится, есть самовары с крышкой и самовары без крышки :-D

    • Валентина

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

      • Надежда Введенская

        Это уже чересчур. Обычно останавливаются на двух-трех десятках.

        • Валентина

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

          • Надежда Введенская

            Кто учится, а кто — нет. Судя по вашему примеру, вряд ли этот человек занимается самообразованием. Тут как только что вычитаешь полезное, сразу стремишься реализовать это на своем сайте.

  4. Валентина

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

    • Надежда Введенская

      Ничего себе :( . Все-таки надо знать особый язык. И как это может получиться, если человек о нем не имеет понятия.

      • Валентина

        А я как-то книжку про html открыла. Тоже было довольно понятно написано. Но без применения на практике не было смысла читать.

        • Надежда Введенская

          Удивляюсь я такому подходу. несмотря на то, что я столько лет связана с программированием, и то испытывала сложности при написании сайта на html ;)

  5. Олег

    Тоже сначала хотел сделать при помощи плагина.

    Но результат меня не устроил.

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

    Поиски в интернете увенчались успехом.

    Наткнулся на оформление стилями цитат. Теперь оформляю текст как хочу.

    Чтобы все не запоминать, но оформлять быстро, сделал «шпаргалку» на своем блоге в виде домена третьего уровня.

    Особое спасибо за «кавычки». Сам не смог разобраться и сообразить.

    С ув.

  6. Надежда Введенская

    Я уже тоже созрела для работы над украшением текста. Если есть особым образом выделенные фрагменты, смотрится очень круто. Мне этого очень не хватает. Буду теперь разбираться.

    • Валентина

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

      • Надежда Введенская

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

Правила комментирования
author-photo
автор блога:
Я в социальных сетях
[sendpulse-form id="3774"]
Adblock
detector