Skip to content
 

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

Как вставить-код-на-сайт-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 в комментариях

Более подробно про защиту собственного сайта и рассказ о том, для чего необходимо не только поменять, но и скрыть логин администратора WordPress и куда вставлять эту функцию можно посмотреть здесь.
Это очень важная информация. Советую ознакомиться обязательно, если кто еще не читал.

Вот так постепенно, по мере необходимости, и расширяется наш кругозор.

Теперь и Вы тоже знаете, как вставить код на сайт Вордпресс прямо в статью и поделиться полезной информацией.

А я добавила таким способом программный код во все свои статьи, где это было необходимо. И теперь скопировать его можно запросто.

Желаю успехов!

Елена и tvoy-internet.ru

Считаешь информацию полезной? Поделись с друзьями!

7 комментариев

  1. У меня тоже Crayon Syntax Highlighter стоит, работает отлично.

  2. Очень полезная статья, Лена!
    Всегда нахожу на Вашем сайте много интересной и нужной информации по ведению сайтов и блогов.
    Спасибо!

  3. Спасибо, когда-то очень не хватало этой информации!

  4. Здравствуйте! Вставил этот плагин Crayon на свой сайт. На всех страницах и записях все нормально, а на карте сайта только один код. Пробовал в настройках плагина его очистить, возникает снова. Сам пока никакие коды не вводил. Что посоветуете? Если плагин выключаю, то все нормально.

  5. Юрий! Вопрос про код на карте сайта не совсем понятен.
    Но, если по каким-либо причинам плагин Crayon Вам не подходит, то можно выбрать другой аналогичный плагин, который обеспечивает вставку кода в текстовую информацию на сайте.

  6. Роза:

    Здравствуйте! За статью спасибо, сделала все как написано, теперь жду, когда сайт проверят. Подскажите, пожалуйста, как установить код, чтобы реклама показывалась в сайдбаре (как у вас)? Нужен какой-то специальный виджет или дополнительный плагин?

  7. Для того, чтобы установить рекламу (например, от Google AdSense) в сайдбар, нужно поместить предоставленный Вам код рекламы, например, «небоскреб» — вертикальный длинный и узкий прямоугольник, в обычный виджет Текст. Никакие дополнительные плагины в этом случае не нужны.
    Подробнее про виджеты Вордпресс можно прочитать здесь.

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

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