Home › News

Как вставить код в статью на wordpress: красиво и эффектно

01.09.2018

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

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

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

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

Урок 2. Плагин WP SpamFree

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

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

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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