Как вставить код на сайт в WordPress?

Как вставить код на сайт в WordPress?
Как вставить и подсветить код на сайте?
Всем привет. Иногда возникают моменты, когда необходимо вставить код (PHP, HTML, CSS и т.д.) в статью, но как это правильнее и лучше всего сделать? По сути, есть два варианта решения этой проблемы:

1. Вы можете вставить код просто текстом. Этот способ имеет много минусов. Во-первых, не будут отображаться отступы в коде, т.к. текстовый редактор просто будет вырезать все табуляции и повторяющиеся пробелы. Этого можно избежать, используя для вставки кода тег <pre> (добавить вручную в текстовом редакторе <pre>ваш код</pre>). Во-вторых, если вам понадобиться нумерация строк, то вам придется проставлять ее вручную. Такая нумерация не очень удобна, т.к. при копировании кода, нумерация строк тоже будет скопирована. В-третьих, код будет отображаться некрасиво и не будет подсветки кода.
Этот вариант подойдет для вставки небольших кусков кода.

2. Использовать специальный плагин для вставки кода в WordPress. Он значительно упростит вставку кода в статьи и сделает за вас всю работу. Рекомендую использовать именно этот вариант. Для WordPress Есть несколько таких плагинов, но мне больше всего понравился WP SyntaxHighlighter. В нем есть множество настроек и несколько тем оформления кода, поэтому дальше в этой статье речь пойдет именно о нем. Кстати, именно этот плагин используется на блоге seofine.ru, пример вы можете посмотреть в статье «Как подключить смайлы в комментариях?«.

Итак, сначала установим сам плагин. Тут ничего сложного нет, установка происходит стандартным образом. Подробнее об установке плагинов в WordPress, вы можете прочитать в статье «Установка плагинов в WordPress«.

Настройка WP SyntaxHighlighter

После того как плагин будет установлен, в меню Параметры появится пункт WP SyntaxHighlighter. Кликаем по нему и попадаем на страницу настроек плагина.

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

Basic Settings

Higlight your code in — тут вы можете выбрать страницы на которых будет работать вставка и подсветка кода.
Widget — если активировать эту опцию, то на странице Внешний вид -> Виджеты появится новый виджет «WP SyntaxHighlighter Widget», при помощи которого вы можете вывести ваш код, например, в сайдбаре или футере.

bbPress — эту опцию необходимо активировать, если вы используете форум bbPress и хотите что на страницах форума работало подсветка кода.
Theme — выберите понравившуюся тему.
Auto links — если эта опция будет активна, то все URL-адреса которые будут встречаться в коде, будут преобразованы к кликабельным ссылкам.
Quick code copy — быстрое выделение двойным кликом.
Title — заголовок, который будет выведен перед блоком с кодом.
Collapse — изначально код будет скрыт и будет отображена ссылка чтобы его развернуть. Текст ссылки меняется при помощи опции Label for collapsed code block.
Line number(Gutter) — отображение нумерации строк по умолчанию.
Starting line number — значение, с которого будет начинаться нумерация строк.
Toolbar — эта опция отвечает за отображение ссылки в правом верхнем углу. Чтобы ее убрать, просто снимете галочку напротив этой опции.

Visual Editor Settings

Add TinyMCE Button — кнопки, которые будут отображаться в визуальном редакторе. Select & Insert позволяет обернуть текст в блок с кодом или отредактировать ранее вставленный код. Отображается в виде кнопки pre. Codebox вставляет код, отображается в виде кнопки code.

Window size — размер окна. Если у вас в редакторе, при открытии окна вставки кода, отображаются полосы прокрутки (как на рисунке ниже), то увеличьте значение этой опции и полос прокрутки больше не будет.

HTML Editor Settings

Add Quicktag Button — добавляет кнопку вставки кода в текстовый редактор.

bbPress Settings

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

Default Languages Settings

Плагин поддерживает следующие языки: AppleScript, ActionScript3, Bash, ColdFusion, C, C++, C#, CSS, Delphi, Diff, Erlang, Groovy, HTML, Java, Java FX, JavaScript, Pascal, Patch, Perl, PHP, Plain text, PowerShell, Python, Ruby, Ruby on Rails, Sass, SCSS, Shell, SQL, VB, VB NET, XHTML, XML и XSLT. Изначально они все активны. В этом разделе можно отключить все ненужные языки.

Чтобы изменения вступили в силу, нужно сохранить настройки. Для этого нажмите на кнопку Save Changes.

Если вы хотите вернуть настройки в изначальное положение, то нажмите на кнопку Reset All Settings.

На этом настройка заканчивается. Теперь перейдем к использованию.

Вставка код на сайт

В админ-панели откроем запись или страницу для редактирования. В визуальном редакторе вы увидите две новые кнопки pre и code. Как я упоминал ранее, первая кнопка нужна чтобы обернуть текст в визуальном редакторе в блок с кодом или отредактировать уже вставленный код. Для этого вам нужно выделить текст, который вы хотите поместить в блок с кодом и нажать на кнопку pre, выбрать нужные параметры и нажать кнопку Insert. Редактирование параметров происходит точно так же.

Кнопка code просто вставляет код в визуальный редактор. Для нужно нажать кнопку code, выбрать нужные параметры, вставить код в поле Your Code и нажать кнопку Insert.

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

9 Комментариев

  1. Александр 4 года назад

    А мне по душе другой плагин   Crayon Syntax Highlighter. Он может менее функционален, но зато все просто. А мне как новичку это важно :).

    • Денис 4 года назад

      Александр, в WP SyntaxHighlighter тоже все просто. /wp-content/plugins/wp-monalisa/icons/wpml_yes.gif А вот с этим плагином - Crayon Syntax Highlighter, не работал. Но обязательно оценю его возможности, спасибо.

  2. Халоо 4 года назад

    А этот плагин ставит свои ссылки?

  3. Илья 4 года назад

    Спасибо за статью. Проверю оба плагина, хочется чтобы было как можно проще.

    Халоо, Crayon Syntax Highlighter не ставит своей ссылки точно. Проверил.

  4. Рашида 3 года назад

    Как-то ставила этот плагин для вставки и подсветки кода — пришлось удалить, потому что при вставке большого кода некорректно отображался сайдбар на блоге.

  5. SergeNikol 3 года назад

    Всем привет!

  6. Игорь 3 года назад

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

    Вопрос,как можно  без плагина и красиво  облагородить вставленый код?

    За ранее спасибо.

  7. Semm 3 года назад

    Спасибо большое за статью. Очень помогла настроить только что установленный плагин. Видел на других сайтах подобного типа плагины, но там еще есть возможность посетителям быстро скопировать код (кнопка вверху). В этом плагине это реализовано? Если нет, может другой какой посоветуете?

  8. Дмитрий 3 года назад

    Привет! Я пользуюсь плагином для вставки и подсветки кода, вот этот плагин WP Syntax.  Вот ссылка на страницу сделано этим плагином тут

Оставить комментарий

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

*

/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img src="" alt="" class="" width="" height="">