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

Хотите узнать, как вставить код на сайт WordPress проще всего , чтобы его можно было скопировать прямо из статьи?

Мне захотелось с этим разобраться.

Когда ведешь свой сайт на CMS (движке) WordPress, то приходится постоянно его совершенствовать и добавлять себе новые и полезные функции, которые встречаются на других подобных блогах.

Отставать нельзя!

Для этого иногда требуется редактировать шаблон Вордпресс и вставлять туда дополнительный код. Я специально опубликовала у себя на сайте подробную статью, где рассказываю про все изменения, которые я вносила в свою тему (шаблон) WordPress, чтобы они не потерялись. Ведь, в случае смены шаблона, эти корректировки придется проводить заново.

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

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

Но, иногда приходится добавлять иллюстрации показывающие, как я изменяла код на своем сайте.

До сих пор я применяла для этого только один способ: вставляла скриншот – фотографию экрана своего компьютера.

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

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

Прочитала рекомендации блогеров на эту тему.

Многие ссылаются на плагины:
WP Syntax в связке с WP Syntax Button;
SyntaxHighlighter Evolved;
Auto SyntaxHighlighter.

Нашла описание, как вставить код и без плагина. Для этого раньше использовали тег xmp (открывающий и закрывающий). Но сейчас он устарел, и вместо него в HTML рекомендуют применять тег pre (открывающий и закрывающий).

Но вставить программный код в статью только с помощью специальных тегов pre или xmp у меня не получилось. Пробовала и в контейнер div их помещать. И копировала полную фразу с сайтов, которые это рекомендовали.

Эксперимент не удался. Код при редактировании в режиме HTML не сохранялся. При переключении вкладок (Визуально/Текст) он просто исчезал из текста статьи. Почему-то это не срабатывает. Кто знает, напишите.

Попалась на глаза информация, что это можно сделать только после установки плагина WP Syntax. Т.е. все равно без плагина не обойтись. Версия WordPress у меня была установлена самая новая (на тот момент — 4.3.1).

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

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

Я нашла этот плагин по поиску в административной панели и установив его на тренировочном блоге.

Пользоваться им оказалось очень просто. Никакие настройки я не меняла, хотя там их довольно много. Все оставила по умолчанию (так, как настроил сам автор).

После установки и активации плагина, в режиме редактирования статьи в меню появляется специальная кнопка, нажав которую можно вставить код на сайт Вордпресс.

Появляется окно для вставки кода.

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

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

Все оказалось настолько просто, что лучшего я решила и не искать.

И теперь, уважаемые читатели, Вы сможете легко скопировать программный код с моего сайта.

Например, этот.

Код функции, чтобы скрыть логин администратора сайта WordPress в комментариях