Всем привет! Как ваши дела? Как настроение? Уже во всю идет зима. Наступил январь, Новый 2016-ый год. Сейчас практически у всех выходные или каникулы.
Но у блоггеров выходных практически нет, особенно на начальном этапе. Есть план публикации статей и следует его придерживаться.
Погода кстати, наконец-то, стала зимней. За несколько дней до Нового года на улице были лужи, а сейчас лежит снег, и температура – минус 20. Меня это радует. Люблю настоящую зиму.
Но сегодня не об этом. Сегодня я решил, наконец, рассказать вам, как вставить код в статью на wordpress. Уже несколько раз обещал написать об этом, и вот наступил этот момент.
Кстати если вы не помните, то говорил я об этом немного вскользь вот в этих статьях:
- Плагины, которые улучшают функциональность моего сайта
- Как сделать содержание для статьи двумя способами.
Введение
Давайте сначала разберемся, зачем это вообще нужно и кому это может пригодиться.
Мне кажется, что это может пригодиться только тем, кто ведет свои блоги на темы, связанные с созданием сайтов, с различными языками программирования и другие смежные тематики.
Кто-то спросит: «зачем как-то по-особому размещать код, можно ведь просто вставить как обычный текст и не заморачиваться совсем?»
Действительно, в этом нет строгой необходимости, но благодаря этому:
- Статьи будут лучше восприниматься читателями
- Код будет явно виден
- Это может поднять ваш авторитет, так как не все так умеют
Общий алгоритм размещения кода выглядит следующим способом:
- Установка плагина wp-syntax
- Предварительная вставка кода в визуальном режиме редактора
- Заключение его в теги <pre> и </pre> в режиме «текст»
- Добавление свойств lang, escaped и Line
Как видите, процесс не самый простой, но и не сложный.
Шаг 1. В первую очередь необходимо установить плагин wp-syntax. Сделать это можно через админ панель вордпресс. Сложностей здесь по определению возникнуть не должно.
Шаг 2. Если плагин установлен, то смело просто вставьте нужный вам кусок кода в предназначенное для него место.
Важно! Эту процедуру выполняем в визуальном режиме редактора вордпресс.
Шаг 3. Далее переходим в режим «текст». Находим наш код. В самом начале ставим открывающий тег <pre>, а в конце ставим закрывающий </pre>.
Шаг 4. Внутри открывающего тега <pre> нужно еще указать язык. Делается это таким образом:
<pre lang = “html”>...</pre>
Вместо html можно подставить и другие языки, например, php или css. Для каждого языка у этого плагина свой стиль отображения.
По сути, на данном этапе уже можно остановиться, сохранить изменения и посмотреть, как выглядит ваш код в статье.
Но я рекомендую добавить еще два свойства внутри тега <pre>:
- Escaped
- Line
Дело в том, что редактор вордпресс шифрует угловые скобки«<» и «>» специальным набором символов. Вообще так устроен html язык. Для отображения различных знаков, отличных от обычных букв и цифр, используются специальные последовательности символов.
Например, «<» шифруется так «<», а «>» вот так «>»
Чтобы код отображался корректно, следует добавить свойство escaped = “true”.
А если вы хотите добавить нумерацию строк, то потребуется такое свойство, как line = “1”.
Уверен, что у Line есть и другие значения, кроме единички, но я не искал на эту тему информацию, так как мне это не нужно, я всегда ставлю единичку или вообще не использую это свойство.
Важно! Escaped и Line вставляются внутри открывающего тега <pre>.
В итоге должно получиться примерно вот так:
<pre lang = "css" escaped = "true" line = "1">KOD</pre> |
Замечание! Кавычки необходимо ставить, используя английскую клавиатуру. У меня это клавиша с русской буквой «Э».
Вот в общем то и всё. Используйте данную конструкцию, и код на вашем сайте будет выглядеть эффектно и красиво. Читатели оценят ваши старания.
Перед Новым годом автор блога «Без дураков» Валерий взял у меня интервью по поводу инвестирования на краудинвестинговой площадке Симекс. Вопроса было всего три. Если интересно, то перейдите по ссылке и прочитайте. Помимо меня там присутствуют интервью директора и менеджеров проектов.
Остались вопросы? — пишите комментарии. Чтобы получать новые статьи на email, подпишитесь в специальной форме ниже. А также поделитесь прочитанной информацией со своими товарищами в социальных сетях. До скорых встреч!
С уважением! Абдуллин Руслан
Загрузка...
SendPuls 
Seolib 
Вот, кстати, про escaped = «true» не знал, надо будет использовать, а то надоело уже искать в коде знак меньше и заменять его. А я пользуюсь немного другой версией — Bootstrap и Google-code-prettify. В ней просто открывается код таким тегом pre class="prettyprint". Ну и надо скачать пару скриптов и подключить их к страничке ) Язык программирования скрипт сам определяет, но можно и указать явно, если какой-то специфичный.
А я как-то даже и не пробовал разные варианты таких плагинов. Нашел wp-syntax и сразу на нем и остановился.
Пытался еще найти варианты, чтобы всё происходило автоматически путем нажатия на одну кнопку, но таких вообще не нашел.
Если кто знает, прошу поделиться )))
Тоже искал варианты. В итоге понял, что wp-syntax все таки является оптимальным вариантом.
С кодом если честно не заморачиваюсь. Когда создавал блог то немного почистил код, удалил ненужные скрипты и т. д. Сейчас только статьи пишу.
Вот это и моя мечта: все бы эти коды как-то волшебным способом уже установились сами, а ты только пишешь статьи и пишешь...))) Эх, мечты...))
Ну так на самом деле и есть. Вы пишете статьи, а технической настройкой сайта занимается другой человек если вы этого не хотите)))
Хотя эта статья о другом))]))
Не, я бы не доверила чужому человеку управлять своим сайтом.))) Если и ошибки, то свои.
Это вы пока говорите, не осознавая, сколько времени занимает работа над сайтом. При определенном уровне проще делегировать ее и заняться более важными делами.
Я за столько лет ни разу не обращалась к кодам. Так что ваша мечта вполне реальна. А если уж сильно захочется навести красоту в кодах, то я все-таки предпочту фрилансера.
Если Вы , Надежда, сами научились вести так хорошо блог, то оставшимся работам по его украшению тем более научитесь. Я уверена.
Я все же склоняюсь к тому, что более правильно разовые задачи передавать кому-то другому. Человек сделает это намного быстрее и качественнее.
Все хорошо! Но еще один плагин — это плохо. Я сейчас думаю на тем, как уменьшить их количество и от какого можно отказаться.
По своему опыту скажу, это очень непростая задача — решить какие плагины не нужны
многие можно кодом заменить.
Согласен. Я например не использую плагин для блока «топ комментаторов» и для антиспама в комментариях.
Но иногда мне лень и я ставлю плагин. Недавно не захотел возиться со звездами от гугла и просто поставил плагин
А код исправляете сами или все-таки заказываете это у специалиста?
Когда нужны правки в коде, я заказываю, я любитель, могу только самое простое сам сделать
Все бы любители так умели справляться с кодами...У Вас , Руслан, Уже очень много знаний.
Да, по сравнению с вами, мы еще по уровня «любителя» не дошли. Как говорится, есть самовары с крышкой и самовары без крышки
Вечно перед блогерами проблема — как бы добавить новый полезный плагин, да ещё бы он не оказался лишним. А вот некоторые, читала, чуть не 60 плагинов устанавливали...
Это уже чересчур. Обычно останавливаются на двух-трех десятках.
Да я понимаю, что и 30 плагинов уже многовато, а пример привела из реальности. Он о том, что блогеры учатся на ходу, кто лучше, кто хуже.
Кто учится, а кто — нет. Судя по вашему примеру, вряд ли этот человек занимается самообразованием. Тут как только что вычитаешь полезное, сразу стремишься реализовать это на своем сайте.
Коды для меня — тема вообще не изведанная. Но именно потому и открыла статью. И вот показалось после прочтения, что так понятно написано, что при необходимости и у меня получится.
Ничего себе
. Все-таки надо знать особый язык. И как это может получиться, если человек о нем не имеет понятия.
А я как-то книжку про html открыла. Тоже было довольно понятно написано. Но без применения на практике не было смысла читать.
Удивляюсь я такому подходу. несмотря на то, что я столько лет связана с программированием, и то испытывала сложности при написании сайта на html
Тоже сначала хотел сделать при помощи плагина.
Но результат меня не устроил.
Параллельно адаптировал сайт под мобильные устройства. Никак не мог справиться с горизонтальной прокруткой.
Поиски в интернете увенчались успехом.
Наткнулся на оформление стилями цитат. Теперь оформляю текст как хочу.
Чтобы все не запоминать, но оформлять быстро, сделал «шпаргалку» на своем блоге в виде домена третьего уровня.
Особое спасибо за «кавычки». Сам не смог разобраться и сообразить.
С ув.
Я уже тоже созрела для работы над украшением текста. Если есть особым образом выделенные фрагменты, смотрится очень круто. Мне этого очень не хватает. Буду теперь разбираться.
Это точно. Иногда тексты так красиво украшены: рамочки, кнопочки, мелкие картинки и т.п. Вот думаю: научились же!
Вот если бы еще кто грамотно описал, как это сделать, цены бы такому материалу не было