Красиво вставляем HTML- код в текст статьи.

html-mini

Сегодня я расскажу, как вставить PHP, HTML, Javascript, CSS  и прочие коды в текст статьи на блоге WordPress, чтобы они красиво смотрелись, были удобны и доступны для посетителей.

 

Довольно часто возникает необходимость поделиться с коллегами интересным решением какой-либо задачи разместив код в статье. Если использовать для этого стандартный редактор в режиме “Текст” – WordPress  исковеркает в нём  до неузнаваемости всё, что  не распознает.

 

Даже с использованием  тега  “< cоde >”.

 23-02-2014-21-20-24-300x156

Проще всего это сделать с помощью  Crayon Syntax Highlighter — плагином  для вставки и подветки программного кода. 

 

Достоинств у этого плагина довольно много:

 

 

  • Как показывает приложение Page speed – плагин практически не тормозит загрузку сайта.
  • Даёт возможность переключения между подсвеченным кодом и простым.
  • Вставляет код в не изменённом виде.
  • Открывает код в новом окне.
  • При использовании кодов разных языков – подсвечивает их разным цветом.
  • Удобство пользования при вставке кода – достаточно в визуальном редакторе нажать знак <> на панели инструментов и откроется удобное окно для вставки кода.
  • И очень важное преимущество перед другими подобными плагинами – возможность представления кода, для копирования  с сайтов на которых включена функция защиты контента от копирования с помощью плагинов или скриптов.

 

Скачать и установить плагин Crayon Syntax Highlighter можно в стандартном режиме.

 

После активации можно настроить основные функции плагина.

 

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

 

 

HTML-codeinsert4

Прокрутите окно настроек вниз и обратите внимание на вкладку настроек “Код”.

Читать также:  Легко устанавливаем кнопку “вверх” на сайт WordPress без плагина.

 crayon-sintax-1-300x150

Обязательно поставьте галочки в чекбоксы, как показано на скриншоте. Дело в том, что когда в статье представляется  “рабочий” скрипт, он пытается запуститься, оказавшись в среде WordPress.

 

У меня такая ситуация возникла при демонстрации кода флеш-игры для сайта.  Один из читателей написал, что представленный код не копируется. Открыв указанную страницу, я увидел в рамке плагина не код для копирования, а запущенную игру. Ранее я замечал небольшие “баги” с плагином, но не мог объяснить природу их происхождения. Теперь всё понятно.

 

Для вставки кода используя плагин Crayon Syntax Highlighter не требуется никаких дополнительных действий и вставки тегов, кроме нажатия на соответствующий значок на панели инструментов в визуальном редакторе.

 crayon-sintax-2-300x72

После нажатия значок, как показано на скриншоте, откроется окно плагина для вставки кода.

 

crayon-sintax-code

“Язык” кода оставьте Default – плагин сам его распознает. Вставив код в соответствующее поле, нажмите кнопку “Добавить”.

 

 

 

 

Если представленный в статье плагин не стыкуется с шаблоном вашего сайта или другими плагинами, можно установить  Syntax-highlighter++. 

 

Смотрится он конечно скромнее, но я бы сказал – даже несколько удобней!

 

Скачать его можно также, в стандартном режиме из админки сайта. У плагина есть меню настроек, но ничего менять не надо. Если у вас тёмный дизайн шаблона – можно выбрать подходящую тему в разделе style.

 

Вставляется код очень легко: При редактировании записи или страницы, ниже окна редактора открыто окно плагина. Вставьте туда необходимый код и нажмите Insert.

 

Всего хорошего  и удачи Вам.

Похожие статьи

Читать также:  Конструктор шаблонов WordPress
Закладка постоянная ссылка.

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

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