Редактор WP: как вставить код html, css, php или Java на страницу в wordpress

Многие начинающие блогеры, размещающие свои ресурсы на базе WP, сталкиваются с необходимостью упомянуть в своих текстах какой-нибудь php-, java- или html-код. И вот тут их будет ожидать подвох, когда, вставив необходимые строки в окошко редактора, они обнаружат свои скрипты исчезнувшими в никуда. А все дело в том, что редактор WordPress не воспринимает коды и может достойно реагировать только на размещение скриптов на html в соответствующем окошке редактора.

Что же делать в таком случае?
Как поделиться с читателями своими идейными разработками?

Придется обращаться все к тем же плагинам, коих в сети существует предостаточно. Один из них очень удобен в использовании и даже заслужил мое признание: WP-Syntax. Попробую рассказать подробнее, как он работает и в чем его основные особенности.

WP-Syntax – что за зверь?

WP-Syntax – это удобно, быстро и функционально.

С его помощью любой сайтостроитель сможет поделиться изобретенным кодом с широкой публикой, а вебмастер или блогер, описывающий работу какого-нибудь плагина (как я, например), смогут проиллюстрировать текст синтаксисом кода.

Пример:
JAVA-код без нумерации строк

javascript:(function(){document.body.appendChild(document.createElement('script')).src='//antixrist.github.io/vk-ads-enhancement/code.min.js';})();

HTML-код с нумерацией строк

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body style="background-color:PowderBlue;">
 
<h1>Посмотрите! Стили и цвета</h1>
 
<p style="font-family:verdana;color:red;">
Это красный Verdana-текст</p>
 
<p style="font-family:times;color:green;">
Это зеленый Times-текст</p>
 
<p style="font-size:30px;">Этот текст высотой 30 пикселей</p>
 
</body>
</html>

Работа плагина

Прежде чем приступить к описанию плагина настоятельно рекомендую читателям скачать WP-Syntax.
Так сказать, для наглядности. Дальнейшие действия при этом должны быть следующие:

  1. распаковать архив;
  2. закачать плагин в папку на компьютере;
  3. в панели администратора WP, точнее в панели «плагины» находим WP-Syntax и активируем.

После активации в панели инструментов редактора WordPress не появится никаких дополнительных кнопочек: можно даже не утруждать себя поиском.

Лучше прочитать внимательно текст, который я сейчас напишу:

для отображения в посте необходимого кода на любом языке, начиная от html и заканчивая xml, требуется ПЕРЕЙТИ В РЕДАКТОР HTML и перед началом скрипта прописать вот такую строчку:

<pre lang="html" line="1"> Ваш код </pre>

"lang"(language) — обязательное поле — необходимо выбрать язык, на котором написан Ваш скрипт
line="1" — НЕобязательное поле — указывает на номер строки, с которой начинается код.

Просто, не правда, ли?

Однако здесь есть один маленький нюанс:

при работе в HTML-редакторе нельзя переходить в обычный визуальный режим работы редактора WordPress! Это очень важно!!! В противном случае все прописанные скрипты опять загадочно исчезнут. Поэтому обновляем страницу, вносим корректировки только в режиме HTML!

Как работать с WP-Syntax тем, кто не может работать с html-кодом?

Есть такая проблема… Некоторые читатели, присылающие мне свои вопросы, жалуются на сложности работы с блогом, когда требуется хоть «копеечное» знание HTML. Аналогичная ситуация может возникнуть и при работе с этим плагином. Могу дать несколько советов:

  • просто сесть и ознакомиться с основами HTML-верстки.
    Поверьте, нет ничего сложного. Могу посоветовать отличный курс автора Евгения Попова, который продвигается в сети совершенно бесплатно;
  • еще один вариант подходит для тех, кто хотя бы знает, что такое тег и может найти необходимый в тексте.
    В этом случае достаточно полностью подготовить пост в визуальном редакторе, после чего переключиться в режим HTML и вставить строку WP-Syntax вместе с кодами php-, java- и т.д. Но после этого все изменения нужно делать только в этом режиме.
    Т.е. подготовили текст поста, перешли в HTML, вставили строку плагина, скопировали скрипт, сохранили и готово! Увидели, что нужны изменения, зашли в HTML-редактор, поменяли, сохранили и все!
  • последний вариант, который я могу посоветовать, требует загрузки еще одного плагина, который зовется WP-Syntax-button.
    Скачиваем и устанавливаем, после чего наблюдаем появление кнопки Code в панели инструментов визуального редактора. С этой кнопкой процесс вставки скрипта в текст становится просто наслаждением:
  1. прямо в визуальном редакторе вставляем скрипт, которым хотим поделиться с читателями;
  2. выделяем вставленный скрипт;
  3. нажимаем заветную кнопочку Code;
  4. выбираем язык программирования из появившегося списка;
  5. при необходимости в “line” указываем номер строки.

Смысл опций “line” и «язык» полностью аналогичен прописываемым значениям в HTML-редакторе. Думаю, это понятно.

Так что советую пользоваться WP-Syntax и не забыть хоть немного почитать про HTML: огромная польза для любого блогера гарантирована!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *