9 вставок кода для WordPress


Содержание

Как вставить код в статью WordPress

В этом уроке рассмотрим подборку лучших плагинов, позволяющих вставить красиво код в статью. Такая необходимость пригодится тем, кто часто приводит примеры кодов php, html, css и т.д. в своих статьях. Под словом красиво я имею в виду что код будет отображаться корректно с подсветкой синтаксиса и нумерацией строк. Возможно, вы замечали на многих ресурсах, в том числе и на моем подобную подсветку кода. Теперь вы узнаете, как это делается, и будете использовать на своем сайте.

№1 SyntaxHighlighter Evolved

Довольно легкий плагин хорошо справляется со своей работой имеет ряд самых необходимых настроек. Сохраняет форматирования текста также есть возможность выбрать тему оформления кода. Чтобы вставить код в статью требуется представить его в виде короткого кода:

Пример.

Результат.

Больше информации о коротких кодах вы найдете после установки плагина в конце настроек.

Как говориться в официальном описании плагина: обеспечивает чистую подсветку кода, поддерживает широкий круг популярных языков, а также сохраняет форматирования кода. Лично у меня с ним возникли небольшие проблемы, а точнее отображение в браузере Chrome (появлялись очень большие пробелы). Из-за этого мне пришлось многое переделать, но возможно это проблема была только у меня. Во всяком случае протестировать лишний раз не мешало бы. Для того чтобы вставить код следует обвернуть его в тег pre .

Пример.

Результат.

Разборка.

lang=”…”-язык, который следует отобразить (css,php,html,js и т.д.)
line=”1”-номер первой строки (необязательный атрибут)

У плагина настроек нет, после установки можете сразу вставлять код с правилами указанными выше.

№3 WP Code Highlight

Очень простой и удобный плагин как раз то, что необходимо для такой работы. Не нужно указывать язык выделения, после установки в редакторе появится кнопка для удобной вставки кода, есть четыре темы оформления и нумерации строк. Чтобы использовать его следует обвернуть нужный код в тег pre .

Пример.

Результат.

№4 Crayon Syntax Highlighter

Плагин имеет ну просто очень огромное количество настроек, половина которых совсем не нужны. Это делает его слишком сложным для такой простой работы. Чтобы вставить код нужно обвернуть в тег pre .

Пример.

Результат.

№5 FV Code Highlighter

Отличный легкий плагин, настроек не имеет, поддерживает языки PHP, (x) HTML, JavaScript, CSS и XML . Цветовая тема используется та же что и в Dreamweaver, но при знании css можно с легкостью изменить стили оформления (это касается всех перечисленных плагинов). Чтобы вставить код требуется обвернуть его в нужный тег.

Пример.

Результат.

Вот такая подборка плагинов для вставки кода в статью. На своем сайте я использую плагин №3 и вполне им доволен, а каким плагином воспользуетесь вы?

Как вставить код на сайт 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 .

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

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

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

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

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

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

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

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

Kama Quicktags: код на страницах вашего сайта

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

Вставка кода не требует особых усилий — необходимо всего-то, заменить HTML сущности на спецсимволы (например: это на или & на & ), это легко можно сделать с помощью небезызвестного нам notepad++, однако постоянно преобразовывать код очень неудобно, мне хотелось, чтобы такое преобразование можно было делать прямо в редакторе WordPress.

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

Цукерберг рекомендует:  Шаблоны проектирования Наблюдатель


Просвещенные люди скажут, WordPress сам делает такую замену, если вставить код в визуальный редактор и перейти в НTML редактор или просто сохранить страницу с визуального редактора и они будут правы, но вместе с преобразованием WordPress удалит все лишние пробелы и табы, которые необходимы для наглядности кода, чтобы полностью сохранить структуру кода его нужно заключить в теги , но заключить текст в определенные теги, можно только с HTML редактора, а если вставить код в HTML редактор, то WordPress никаких преобразований над символами в коде делать не будет, а хуже — он вырежет различные теги, при переходе в визуальный редактор. Во как все сложно. Если вы пробовали вставлять код, то наверняка знаете о чем я.

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

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

Quicktags API

WordPress Quicktags API — с версии 3.3. WP позволяет вставлять кнопки через API — это просто. На этом способе и основан мой простенький плагин.

Как правильно оформлять код в своих статьях, чтобы он смотрелся эффектно и красиво

Всем привет! Как ваши дела? Как настроение? Уже во всю идет зима. Наступил январь, Новый 2020-ый год. Сейчас практически у всех выходные или каникулы.

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

Погода кстати, наконец-то, стала зимней. За несколько дней до Нового года на улице были лужи, а сейчас лежит снег, и температура – минус 20. Меня это радует. Люблю настоящую зиму.

Но сегодня не об этом. Сегодня я решил, наконец, рассказать вам, как вставить код в статью на wordpress. Уже несколько раз обещал написать об этом, и вот наступил этот момент.

Кстати если вы не помните, то говорил я об этом немного вскользь вот в этих статьях:

Введение

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

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

Кто-то спросит: «зачем как-то по-особому размещать код, можно ведь просто вставить как обычный текст и не заморачиваться совсем?»

Действительно, в этом нет строгой необходимости, но благодаря этому:

  1. Статьи будут лучше восприниматься читателями
  2. Код будет явно виден
  3. Это может поднять ваш авторитет, так как не все так умеют

Общий алгоритм размещения кода выглядит следующим способом:

  1. Установка плагина wp-syntax
  2. Предварительная вставка кода в визуальном режиме редактора
  3. Заключение его в теги в режиме «текст»
  4. Добавление свойств lang, escaped и Line

Как видите, процесс не самый простой, но и не сложный.

Шаг 1 . В первую очередь необходимо установить плагин wp-syntax. Сделать это можно через админ панель вордпресс. Сложностей здесь по определению возникнуть не должно.

Шаг 2 . Если плагин установлен, то смело просто вставьте нужный вам кусок кода в предназначенное для него место.

Важно ! Эту процедуру выполняем в визуальном режиме редактора вордпресс.

Шаг 3 . Далее переходим в режим «текст». Находим наш код. В самом начале ставим открывающий тег .

Шаг 4 . Внутри открывающего тега

Вместо html можно подставить и другие языки, например, php или css. Для каждого языка у этого плагина свой стиль отображения.

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

Но я рекомендую добавить еще два свойства внутри тега

Замечание ! Кавычки необходимо ставить, используя английскую клавиатуру. У меня это клавиша с русской буквой «Э».

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

Перед Новым годом автор блога «Без дураков» Валерий взял у меня интервью по поводу инвестирования на краудинвестинговой площадке Симекс . Вопроса было всего три. Если интересно, то перейдите по ссылке и прочитайте. Помимо меня там присутствуют интервью директора и менеджеров проектов.

Остались вопросы? — пишите комментарии. Чтобы получать новые статьи на email, подпишитесь в специальной форме ниже. А также поделитесь прочитанной информацией со своими товарищами в социальных сетях. До скорых встреч!

Плагины для вставки кода HTML и PHP на страницы WordPress c подсветкой синтаксиса

Здравствуйте, уважаемые читатели! Сегодня я расскажу о том, как в статьи блога WordPress вставить HTML или PHP код с подсветкой синтаксиса. Возможно, эту статью следовало бы поместить в раздел «Дополнительные плагины», потому что вряд ли авторам кулинарных или строительных блогов понадобится подобное делать, но я посчитал, что там этот пост затеряется.

Вся проблема со вставкой кода в текст страниц заключается в том, что WordPress пытается выполнить его и выдать на страницу уже результат. Кроме того, пользователи привыкли к подсветке синтаксиса программного кода, которую регулярно видят в своих редакторах, например Notepad++, и воспринимать сплошной код без какого-либо выделения очень трудно. Это одна из причин, по которой люди очень редко пользуются встроенными редакторами кода шаблонов темы WordPress и его плагинов.

И так, стандартными средства WordPress вставить код в статью и подсветит его синтаксис не получится, придется устанавливать дополнительный плагин с подобным функционалом. Таких плагинов очень много — достаточно в форме поиска на сайте WordPress.org ввести слово Syntax и в результатах получите более 500 всевозможных вариантов. Пожалуй, самым популярным и удобным является Syntax Highlighter Evolved.

Установка и использование плагина Syntax Highlighter Evolved

Установка SyntaxHighlighter Evolved очень простая:

  • скачайте свежую версию Syntax Highlighter Evolved ;
  • распакуйте архив и перекиньте папку с файлами плагина на сервер в директорию wp-content/plugins, используя ftp клиент FileZilla;
  • скачайте локализацию для SyntaxHighlighter Evolved и загрузите два файла из архива в директорию wp-content/plugins/syntaxhighlighter/localization на сервере;
  • сбросьте кэш, если используете кэширование на блоге;
  • активируйте плагин через админку WP.

Настройки плагина располагаются в разделе «Параметры» — «Подсветка синтаксиса».

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

Отмечу только, что в опции «Цвета» можно выбрать цветовую гамму для подсветки синтаксиса.

Теперь, чтобы вывести какой-либо программный текст в статье, вам потребуется переключится на встроенный html редактор и использовать либо короткий синтаксис:

Плагин предоставляет большой набор параметров на все случае жизни, но основными из них являются сокращения языков, которые необходимо прописывать в атрибуте lang для корректной подсветки синтаксиса. Полный список языков и их сокращений можно посмотреть на официальном сайте плагина SyntaxHighlighter Evolved .

Не работает Syntax Highlighter

На своем блоге я столкнулся с проблемой — Syntax Highlighter Evolved не работает. Устанавливается, настраивается, но корректно отображать код на странице на отрез отказывается. Самое главное, что и ошибок никаких не выдает, просто молча не работает.

Покопавшись на тематических форумах и блогах нарыл информацию, что Syntax Highlighter Evolved может не работать из-за несовместимости с плагинами кэширования, в частности с Hyper Cache. В качестве совета предлагалось повторно сбросить кэш. Подобная мера мне не помогла и пришлось искать альтернативу. Это оказалось не такой простой задачей — все остальные плагины из серии Syntax Highlighter тоже отказывались работать. Наконец, я наткнулся на легкий и простой WP-Syntax, который и использую на своем блоге.

Вставка кода с помощью WP-Syntax

Устанавливается плагин стандартно и даже не требует настройки. Только скачайте свежую версию WP-Syntax с wordpress.org . Для вставки кода в текст статей используется тег pre с дополнительными атрибутами:


lang — указывается язык, на котором написан вставляемый код. Полный перечень всех поддерживаемых языков и сокращений для них можно посмотреть здесь, в разделе Supported Languages .

line — атрибут позволяет отображать нумерацию строк. Указывается номер первой строчки кода.

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

Цукерберг рекомендует:  Css - Активация программы с помощью PHP

На сегодня это все. До скорых встреч на страницах блога FairHeart.ru!

Лучший способ выразить благодарность автору — поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Эти статьи Вам могут быть интересны:

Да, действительно плагин Syntax Highlighter какой-то «сырой»

спасибо Дмитрий, как всегда твоя статья на высоте! плагин WP-Syntax простой и удобный сразу заработал!

Как добавить код в WordPress: все доступные методы

Необходимость добавить код на сайт возникает часто. Это может быть код статистики, скрипта какого-либо сервиса, новой функции сайта, нового стиля и многое другое.

Для того, чтобы добавить код в WordPress существует несколько удобных, правильных и неудобных, неправильных способов. В этой статье я расскажу вам про все эти способы. И все они могут пригодиться на практике.

Добавление кода в виджет

Виджеты в WordPress можно использовать для того, что добавить код на сайт. Для этого подходят виджеты «HTML-код» и «Текст». Благодаря такому способу можно установить какой-либо HTML код в любой области виджетов, предусмотренной активированной темой. И если этот код предусматривает вывод какого-либо элемента, то он будет виден.

Для тех, кто не знает: виджеты находятся в пункте «Внешний вид», подпункте «Виджеты». Нужно лишь переместить мышкой виджет «HTML-код» или «Текст» из области «Доступные виджеты» (слева страницы), в какую либо область справа страницы. Затем в него можно вставить текст и сохранить с помощью соответствующей кнопки.

Если используется виджет «Текст», то код нужно добавлять во вкладку «Текст», а не «Визульно».

Добавлять код в виджет «Текст» нужно во вкладку «Текст».

Но удобнее, всё-таки, использовать виджет «HTML-код», который специально для этого и предназначен. В нём всего одна вкладка, а также есть подсветка синтаксиса.

В виджете «HTML-код» есть подсветка синтаксиса.

Иногда возникает необходимость добавить в виджет PHP код и сделать так, чтобы он работал. В этом случае придётся пользоваться дополнительным плагином, который создаст новый виджет «PHP-код».

Плагин называется PHP Code Widget и ссылка на него ниже.

Добавление кода в настройки темы

Ещё один способ добавить код в WordPress — это внедрить его в настройки дизайна. Подойдёт для добавления своих CSS стилей, а в не которых случаях (в зависимости от темы) и других видов кодов.

Для интеграции перейдите в пункт «Внешний вид», подпункт «Настроить». Вы увидите секции с опциями слева. Откройте «Дополнительные стили».

Откройте секцию «Дополнительные стили».

И вставьте CSS код в поле. Не забудьте сохранить всё кнопкой «Опубликовать».

Вставьте свой код стиля в поле.

А если нажать на кнопку с иконку в виде шестерёнки, то можно будет ещё и просто сохранить изменения, без публикации, и даже запланировать их публикацию на указный день и время.

Сохраните изменения или выберите другое действие.

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

Код можно добавить в настройках некоторых тем.

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

Добавление кода с помощью плагинов

Универсальный способ добавить код в WordPress — это использовать плагин. И есть несколько вариантов.

Во-первых, рекомендую простой плагин Head, Footer and Post Injections. После активации перейдите в пункт «Настройки», подпункт «Head and footer». И тут вы увидите возможность добавить любой код в любое место сайта: в шапку, подвал, записи, страницы. Кроме того, есть дополнительные опции, вроде включения добавленного кода только на некоторых устройствах или типах страниц.

Интерфейс плагина Плагин Head, Footer and Post Injections.

Есть, что изучать в этом плагине. Только один недостаток — всё на английском языке. Скачать можно по ссылке ниже.

Ещё один способ добавить код в WordPress, это плагин My Custom Functions. Он решает задачу интеграции PHP функций, и добавляет их так, будто они были написаны в файле темы functions.php. При этом ни обновление темы, ни даже её изменение данную интеграцию не нарушает.

Работу этого плагина я рассматривал на примере добавления в тему функции для реализации чек-бокса соглашения на обработку персональных данных в форме комментариев WordPress.

Скачать плагин можно по ссылке ниже.

После активации плагина, перейдите в пункт «Настройки», подпункт «PHP inserter». Включите применение кода и добавьте свою PHP функцию.

Добавление PHP функции в My Custom Functions.

Добавление кода в файл темы или плагина

Вначале я писал о том, что есть правильные и неправильные способы добавить код в WordPress. Как раз таки сделать это непосредственно в файл плагина или темы — является самым неправильным методом, но рабочим. Иногда это бывает единственным способом, и поэтому на практике, всё-таки, используется.

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

Итак, чтобы добавить код в WordPress прямо в файл, нужно перейти в пункт «Внешний вид», подпункт «Редактор» (если речь о теме) или пункт «Плагины», подпункт «Редактор» (если речь о плагине).

Сначала вы увидите пугающее предупреждение, где нужно нажать на «Я понимаю».

Чтобы начать редактировать файл, нажмите «Я понимаю».

И теперь перед вами откроется редактор. Здесь в списке сверху можно выбрать редактируемый продукт (тему или плагин), в колонке справа выбирается файл, а в самом центре редактор с поддержкой синтаксиса кода.

Добавление кода в файл темы/плагина.

Кроме этого, добраться до файлов тем и плагинов можно через файловый менеджер или FTP подключение. Плагины хранятся в папке wp-content/plugins, а темы в wp-content/themes. Каждый плагин/тема в отдельной папке.

При редактировании файлов будьте внимательны, делайте резервные копи.

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

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


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

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

Настройка WP SyntaxHighlighter

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

WP SyntaxHighlighter в меню

Страница настроек WP SyntaxHighlighter

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

Топ плагинов для вставки кода в WordPress

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

Crayon Syntax Highlighter

Данный плагин является неоспоримым лидером среди всех подобных плагинов. Его основными плюсами являются:

1) При переключении режимов с визуального на текст код для пользователя отображается корректно. В некоторых аналогах наблюдается проблема в данном аспекте.

Цукерберг рекомендует:  Программистами не рождаются

2) В визуальном режиме при нажатии спец значка <> открывается отдельное окно в котором множество настроек. И набор этих настроек нельзя ставить в сравнение ни с одним другим подобным плагином.

3) У пользователей есть возможность скопировать кол или открыть его в отдельном окне.

WP Syntax

Плагин отличается от предыдущего лишь количеством настроек. У него их не такое множество.

CodeColorer

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

WordPress Rainbow Hilite

Если сравнивать с Ctayon, то этот плагин использует меньше ресурсов, но и функционала предоставленного для пользователя в разы меньше.

Работать в нем довольно удобно, но есть небольшие недочеты в плане отображения кода в визуальном режиме, он смотрится большим. И в отличии от того же Crayon не подсвечивается отдельным цветом. С данным минусом можно смириться и не обращать внимания, но для пользователей ресурса на котором будет располагаться статья отображение будет так же не очень удобное. Хотя в остальном плагин функционирует хорошо.

Плагин Code Snippets для вставки PHP кода в WordPress

П ро вставку PHP кода в WordPress я уже публиковал две заметки, сегодня дополню их еще одним хорошим методом (модуль Code Snippets). При добавлении простых скриптов или вывода информации в сайдбаре можно установить специальный виджет PHP кода, для более сложных решений рекомендуется использовать файл functions.php WordPress темы.

Большинство хаков для системы, которые вы найдете в интернете, реализуется именно вторым вариантом. Для таких случаев могу посоветовать плагин Code Snippets. Кроме простоты работы, он обладает парочкой очень интересных плюсов!

Основная функция модуля — интеграция в админку специального графического интерфейса для работы со сниппетами в вордпресс. Данный механизм аналогичен плагинам — вы можете добавлять, редактировать разные PHP коды, а также активировать и деактивировать их. С технической точки зрения нет никакого отличия при выполнении скриптов, размещенных через плагин Code Snippets или functions.php. Однако пользователям проще и нагляднее править отдельные сниппеты нежели просматривать сотни строк в одном файле функций.

Основные плюсы Code Snippets:

  • легкость вставки PHP кода в WordPress через графический интерфейс;
  • визуальный редактор с подсветкой синтаксиса;
  • сохранность скриптов при смене «темы» (т.к. они хранятся в базе данных);
  • возможность включать/выключать некоторые WordPress сниппеты;
  • настройка работы скриптов отдельно для бэкенда/фронтенда;
  • экспорт/импорт сниппетов;

Скачать модуль можете с официального репозитория с этой страницы либо установить его по названию Code Snippets из админки. На момент написания статьи актуальная версия плагина 2.8.0 имеет более 30 тысяч активаций и почти что максимальную оценку (4.8 из 5-ти, всего 90 голосов). Совместимость: от WP 3.6 до 4.7.

Давайте детально рассмотрим как вставить PHP код в WordPress сайта с помощью данного модуля. После активации в админке появится новый раздел «Snippets»

По умолчанию открывается пункт «All Snippets», где сможете просмотреть все созданные WordPress сниппеты. В каждой строке имеется описание, метки для быстрого поиска, а при наведении появляются ссылки редактирования и активации/деактивации. Для того чтобы вставить PHP код в WordPress, кликаете по кнопке «Добавить новый» или переходите в пункт меню «Add New». После увидите соответствующую страницу:

Здесь вводите название элемента и вставляете сам PHP код скрипта. Внимание! При этом добавлять теги открытия и закрытия не нужно! Далее по желанию указываете краткое описание и метки. В самом низу есть настройка «Область» со значениями:

  • запускать сниппет везде (админка + сам сайт);
  • во фронтенде сайта;
  • only run in administration area — только внутри системы;

Это полезно, поскольку некоторые сниппеты в WordPress предназначены только для админки или фронтенда, и опция позволит грузить скрипты лишь там, где они не нужны. После ввода всех данных кликаете по кнопке «Сохранить» либо «Сохранить и активировать». Кстати, в настройках «Settings» доступна автоматической активации сниппетов + есть многие другие параметры (в том числе и по внешнему виду редактора PHP кода).

Что касается экспорта. Сохраняются скрипты для переноса в XML формате, вы можете экспортировать элементы по одному или выделить сразу несколько (как на картинке ниже):

Импорт производится в одноименном пункте меню. После завершения процедуры переходите в All Snippets и активируете нужные WordPress сниппеты. Больше информации по Code Snippets ищите в FAQ на официальной странице модуля.

Напоследок один важный момент. Если в процессе работы у вас возникли проблемы с сайтом, и тот перестал грузиться, можете активировать безопасный режим плагина. Для этого добавьте следующую строку в файл wp-config.php:

Затем деактивируйте или удалите тот вордпресс сниппет, из-за которого и случилась ошибка. Еще раз повторюсь — чтобы вставить PHP код в WordPress сайт НЕ нужно добавлять открывающие и закрывающие теги в редакторе плагина. Если в найденном в интернете примере они есть, копируйте только код между ними. Разумеется, это не касается подобных тегов, когда они используются внутри хака для выделения HTML секций.

В целом, Code Snippets — отличный модуль! Функция импорта может сэкономить массу времени — вы просто загружаете на новый сайт всю свою подборку заранее заготовленных WordPress сниппетов, а потом активируете нужные из них. Подсветка синтаксиса + применение только для бэкенда/фронтенда — тоже весьма полезны. Рекомендую.

Если у вас есть что добавить про Code Snippets и по теме вставки PHP кода и WordPress, пишите в комментариях.

Как вставить код в запись Вордпресс

В одной из моих недавних статей мне понадобилось вставить код в запись WordPress, что вначале вызвало у меня определенные затруднения, но потом я разобрался как это реализуется и теперь делюсь с вами полученным опытом.

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

Как вам? По-моему довольно приятный внешний вид.

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

Если вы в рамках своего интернет-ресурса затрагиваете тонкости создания сайтов, то вам довольно часто придется вставлять в статьи разнообразные фрагменты кода.

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

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

Сейчас я вам помогу.

Как вставить код на страницу WordPress?

На самом деле решается данная проблема очень легко. Для начала устанавливаем плагин WordPress под названием WP-Syntax:

Плагин готов к работе, никаких дополнительных настроек не требуется.

Теперь осталось разобраться, как же использовать данный плагин, чтобы наш код отображался как надо.

Для того, чтобы плагин WP-Syntax понял, что мы хотим отображать определенный отрывок кода именно как код, существует конструкция:

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

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

Расшифрую содержимое данной конструкции:

  • — открывающий и закрывающий теги, определяющие предварительно отформатированный в исходном коде текст;
  • lang — (сокращение от language) язык программирования, на котором составлен код, вставляемый вами в запись;
  • xxx — нужно вписать язык программирования, на котором составлен код. В этом случае встречающиеся в коде операторы указанного языка программирования будут выделены визуально (подсвечены цветом, жирным текстом и т.д.). Наиболее распространенные языки: html4strict, php, css, xml. Полный список поддерживаемых языков можете посмотреть здесь;
  • line=»1″ — атрибут, отвечающий за отображение нумерации строк в области вывода кода на странице вашего сайта. Цифра означает номер первой строчки кода, если нумерация не нужна — просто удалите данную конструкцию.

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих