Как вставить код в страницу WordPress: простые способы
Здравствуйте, уважаемые читатели!
Поговорим о программном коде на сайте. Нередко у вебмастера возникает необходимость на одну или несколько страниц сайта вставить код. WordPress позволяет использовать php, java, html, css и т.п. код двумя способами: в качестве исполняемых команд, интерпретируемых движком сайта, и в виде доступного для чтения и копирования текста. В этой статье рассмотрим примеры того, как вставить код в страницу WordPress, чтобы он отображался корректно и красиво для посетителей.
Содержание:
- Кому и зачем нужен код на страницах сайта
- Использование тегов и возможностей WordPress
- Плагины для вставки и подсветки кода
Код в виде текста: зачем это нужно
Потребность в выводе программного кода в WordPress распространенной не назовешь. Можно с уверенностью сказать, что у владельцев медицинских, строительных или кулинарных блогов подобный вопрос вряд ли возникнет. Чего не скажешь об авторах проектов, посвященных таким темам как создание и продвижение сайтов, веб-дизайн и программирование, разработка приложений и т.п.
Необходимость в публикации отдельных строк кода порой не ограничивается простым добавлением нужного фрагмента на сайт. Сопутствующее этому желание «сделать красиво» упирается в использование подсветки синтаксиса кода и в те или иные способы реализации. Подсветка кода на сайте способна существенно облегчить восприятие данных посетителями, привыкшими к использованию продвинутых редакторов вроде Notepad++.
Если просто вставить код в статью, WordPress интерпретирует его и исказит при публикации. Поэтому подобный тип данных всегда должен подвергаться обработке. Решить эту задачу можно различными способами: прописыванием необходимых тегов на странице вручную, используя встроенную в редактор WordPress кнопку и с помощью различных плагинов.
Как добавить код в статью без плагина
WordPress предлагает для решения этой задачи администратору сайта собственный, являющийся частью системы управления контентом, инструмент.
Добавляемый в визуальном редакторе контента блок, состоящий из одной и нескольких строк кода, WordPress при переходе в текстовый режим заменяет в тегах все символы < и > символами < и >
Чтобы показать CMS, что определенный фрагмент кода должен выводиться на странице «как есть», его в текстовом редакторе WordPress необходимо выделить и «обернуть» тегом <code> с помощью кнопки на панели инструментов:
Выглядеть на странице это будет примерно так:
<table border="1">
<tr>
<th>Наименование 1</th>
<th>Наименование 2</th>
</tr>
<tr>
<td>Значение 1</td>
<td>Значение 2</td>
</table>
Чтобы вставить код в страницу WordPress с заданными отступами, при переходе из визуального редактора контента в текстовый можно использовать тег html <pre>, сохраняющий все дополнительные пробелы, служащие для формирования отступов. Содержимое элементов <pre> и <code> по умолчанию отображается браузерами моноширинным шрифтом.
Пример того, как в WordPress вставить html-код на страницу без плагинов с помощью тега <pre>:
<table border="1"> <tr> <th>Наименование 1</th> <th>Наименование 2</th> </tr> <tr> <td>1</td> <td>
Значение Значение
2</td> </tr> </table>
К тегу <pre> применимы универсальные атрибуты, в частности, атрибут style, используемый для определения элемента с помощью CSS. В приведенном ниже примере показано, как значениями атрибута style задаются цвет выводимого текста, цвет фона блока, толщина, цвет и радиус закругления границы блока:
<pre>
Возможности форматирования выводимых на странице блоков с помощью атрибутов достаточно широки, но не безграничны.
Сложное форматирование, позволяющее реализовать подсветку синтаксиса — результат работы плагинов, о которых пойдет речь ниже.
Плагины вставки кода для WordPress
Предлагаем на выбор несколько плагинов из официального репозитория WordPress, позволяющих выводить любой код (php, java, html, css) красиво: построчно и с соответствующей подсветкой элементов.
SyntaxHighlighter Evolved
Распространенный плагин для вставки кода в WordPress, продвинутый и мощный, на странице настроек которого можно применить одну из семи имеющихся тем оформления и, при необходимости, выбрать отображение нумерации строк и панели инструментов, сделать кликабельными URL свернуть поле кода, выставить автоматический перенос длинных строк и т.
В плагине SyntaxHighlighter Evolved предусмотрено все, что может когда-либо понадобиться. Вставить код в статью WordPress с его помощью очень просто, для этого необходимо в настройках разрешить плагину обрабатывать тег <pre> или использовать соответствующие шорткоды:
[php]пример[/php] [html]пример[/html] [css]пример[/css] [codelang="js"]пример[/code]
WP-Syntax
Еще один плагин, долгое время заслуженно пользовавшийся признанием у вебмастеров. В настоящее время статистика официального репозитория показывает более 10 тысяч активных установок. К сожалению, плагин не обновлялся уже год, однако продолжает исправно выполнять заявленные функции.
WP-Syntax не имеет собственной страницы настроек. Этот плагин WordPress для редактирования кода, точнее, для его вставки и изменения вида подсветки синтаксиса использует тег <pre> с атрибутом выбора языка:
<pre lang="php">пример</pre> <pre lang="java">пример</pre> <pre lang="css">пример</pre>
Список поддерживаемых языков приводится на странице плагина.
Атрибут line в теге служит для отображения нумерации строк, его значение соответствует номеру строки, с которого начинается отсчет. Если код содержит html-объекты, рекомендуется использовать атрибут escaped со значением true в качестве опции:
<pre lang="xml" line="1" escaped="true">пример</pre>
Пример вывода и подсветки CSS-кода с помощью плагина:
1 2 3 4 5 6 7 8 | .block { border: 2px #8E0505; color: #2D0000; /*цвет текста*/ padding: 2px; /*внутренние отступы*/ text-align: left; /*выравнивание текста*/ font-family: arial; font-size: 14px; } |
При переключении из html-редактора в визуальный режим тег WordPress интерпретирует тег <pre> и код не отображается правильно. Поэтому при редактировании статей со вставками блоков кода необходимо использовать редактор контента в режиме html.
Code Prettify
Легкий плагин без настроек, дающий возможность вставить код на сайте WordPress с использованием автоматической подсветки без необходимости указывать язык. Реализует подсветку для тегов <pre> и <code> на странице. Простое решение на основе модуля Google Code Prettify library для тех, кто не желает вникать в особенности форматирования синтаксиса выводимых на сайте блоков с программным кодом.
Заключение
Рассмотренные в статье решения на основе плагинов — лишь малая часть того, что предлагает хранилище плагинов WordPress. Перейдя по ссылкам меню консоли «Плагины — Добавить новый» на страницу поиска, по ключевым словам Highlight и Syntax можно обнаружить еще несколько десятков аналогичных плагинов, позволяющих красиво оформить программный код. Важно понимать, насколько уместным и необходимым будет подобный плагин на сайте. Возможно, именно в вашем случае вставить код в страницу WordPress будет проще вручную в текстовом редакторе, воспользовавшись тегами <pre> и <code>.
Как вставить php код в webflow
Здравствуйте, уважаемые читатели! Сегодня я расскажу о том, как в статьи блога 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.
На сегодня это все. До скорых встреч на страницах блога FairHeart.ru!
Лучший способ выразить благодарность автору — поделиться с друзьями!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Не забывайте, что HTML код — это часть ответа сервера. Если в файле есть заголовки, то они должны идти раньше любых тэгов. В нашем примере есть заголовок, устанавливающий кодировку и он идёт в самом начале. Сохраните этот файл с расщирением php и он будет формировать обычную страницу, содержащую все нужные тэги.
Подобным способом страницы создаются достаточно часто. Нет смысла формировать весь HTML код в скрипте, если он каждый раз одинаковый. Проще его вставить в PHP файл. Большая часть страницы создаётся таким образом, а в скриптах формируются только отдельные элементы, которые беруться из базы данных или расчитавается каким-то другим способом.
Как лучше — добавить свой код в functions.php или создать кастомный плагин на WordPress?
Наверняка, вы не раз сталкивались с тем, что нужно добавить какой-то кусок кода для вашего сайта на WordPress, чтобы добавить новую функциональность. Я говорю сейчас не о скриптах Google аналитики, которые вы вставляете в header часть вашей темы. Нет. Я о тех маленьких фрагментах кода, которые вы нашли на форумах в интернете и сразу же побежали добавлять их в свой файл functions.php.
Давайте будем честны, ведь вы хоть раз делали это, не так ли? И это понятно, ведь на форуме так и было написано — добавьте этот код в functions.php вашей темы на WordPress.
Правда в том, что добавлять каждый найденный в интернете код в functions.php — не всегда хорошая идея. Более безопасным решением будет создать свой кастомный мини плагин с этим кодом.
В этом уроке мы расскажем, в каких случаях можно добавлять код в functions.php, а в каких лучше использовать отдельный плагин. Также мы покажем, как вы можете сами создать кастомный плагин и добавить в него свой код.
Что такое functions.php
Если вы когда либо лазили по файлам вашего WordPress сайта, вы могли наткнуться на несколько файлов functions. php. Файл functions.php, о котором мы будем говорить в этом уроке, находится в папке: wp-contentthemesваша_темаfunctions.php.
Очевидно, это тот самый файл, который хранит все функции и настройки вашей конкретной темы, активной в данный момент. Обратите внимание на слово «активной», потому как в этом и будет крыться основной посыл этого урока.
Почему всегда использовать functions.php — это плохая идея
Не поймите неправильно, использовать functions.php для маленьких кусочков кода в пару строк — это вполне нормальная ситуация. Мы говорим о том, что нежелательно использовать functions.php как склад для абсолютно всего добавленного вами кода. Это не универсальное решение для любой ситуации.
Причина №1.
Если выйдет обновление для вашей темы оформления, вы потеряете всё, что вы дописали в файле functions.php. Я знаю, о чем вы только что подумали — но ведь есть дочерние темы как раз для таких ситуаций?
Конечно есть. Но есть также много людей, которые понятия не имеют, что такое дочерняя тема. Или есть люди, которые обратились к вам за помощью добавить кусок кода в их тему.
Поэтому эта причина находится в этом списке. Если вы добавляете код в functions.php без использования дочерней темы, это ваш первый тревожный звоночек.
Причина №2.
Даже если вы правильно настроили и используете дочернюю тему. Что случится, если вы захотите перейти на другую тему оформления? Я надеюсь, вы добавили комментарий к каждому внесенному изменению в вашем файле functions.php, потому как без этого переход на другую тему будет крайне болезненным. Думаю, вы уловили мысль.
Причина №3.
Если вы добавили код в functions.php, который совершенно неожиданным образом полностью сломал ваш сайт, и вы видите пустой белый экран — вам понадобится FTP клиент, чтобы закачать «испорченный» functions.php, отредактировать его и загрузить обратно на сайт. Удовольствие такое себе.
Когда можно использовать functions.php
Правильное использование functions. php для дочерней темы, активной в данный момент — это допустимый вариант. Но помните, я акцентировал внимание на этом слове «активной«?
Если вы добавляете порции кода, которые будут иметь смысл только в работе с конкретно этой темой, тогда вы можете смело использовать functions.php (в дочерней теме). Вот несколько примеров, когда это будет уместно:
- Добавление еще одного файла стилей (.css) для вашей темы
- Изменение длины для анонса записи (post excerpt), чтобы сайт выглядел лучше
- Добавление кастомных шрифтов для текущей темы
- Добавление файла локализации для перевода текущей темы
Другими словами, каждый раз при добавлении или изменении чего-либо, связанного с конкретной текущей темой, вы можете смело использовать functions.php.
Когда лучше обойтись без functions.php
Использовать functions.php для добавления более глобальных вещей и функций, которые вам теоретически могут пригодиться и для другой темы — вот это плохая идея.
Вот пару примеров, когда лучше обойтись без functions.php:
- Создание кастомных виджетов, которые вы будете часто использовать
- Создание кастомных шорткодов
- Добавление кода, который не зависит от темы оформления (код Google Analytics и т.д.)
В таких случаях лучше сохранять этот код независимо от вашей темы оформления. И вы можете сделать это с помощью кастомных плагинов.
Вы сейчас подумали — ломать голову над созданием плагина, когда можно отредактировать functions.php? Это слишком сложно! Поверьте, это не так. Это делается очень легко и быстро.
Как настроить кастомный плагин вместо functions.php
Чтобы создать свой кастомный плагин для хранения вашего кода, вам нужно:
- Создать текстовый файл с вашим кодом и сохранить его как .php файл
- Запаковать полученный .php файл в .zip архив
- Установить этот архив как обычный WordPress плагин в меню Плагины → Добавить новый
Вот и все, всего 3 действия.
Шаг 1. Создание .php файла с вашим кодом
Откройте Блокнот на вашем компьютере и вставьте следующий текст:
Конечно, вы можете использовать свое имя для плагина в строке Plugin Name:
Сохраните файл и дайте ему какое-то уникальное имя, чтобы WordPress не перепутал ваш плагин с уже установленными. Например: wpcafe-custom-functions.php.
Да, не забудьте при сохранении выбрать тип файлов «Все файлы» и дописать расширение .php:
Шаг 2. Создайте .zip архив
Думаю, тут не нужно никаких пояснений. Просто создайте .zip архив с вашим файлом любым удобным архиватором.
Шаг 3. Установите как обычный плагин
Самая простая часть. Просто зайдите в админке WordPress в Плагины → Добавить новый и загрузите ваш архив как самый обычный плагин.
Как только вы активируете его, вы сможете увидеть свой новый плагин в списке всех других установленных плагинов:
Как добавлять свой код
Чтобы добавить свой фрагмент кода, просто вставляйте его в файл . php, который вы создали. Или вы всегда можете сделать еще один отдельный плагин для двух разных функций.
Например, вот так будет выглядеть ваш файл .php, если вы захотите сделать шорткод «Hello World!»:
Мы также рекомендуем добавлять свой комментарий к каждому фрагменту кода в каждом кастомном плагине, который вы создаете.
Эти комментарии никак не влияют на работоспособность вашего кода и на скорость выполнения плагина. Но с ними вам будет проще ориентироваться и помнить, что делает каждая функция, которую вы добавили.
Просто оберните свой комментарий в синтаксис из косой и звездочки: /* Ваш комментарий */
После внесения изменений в ваш код вы можете перезагрузить .php файл через FTP или просто создать новый .zip архив и загрузить как новый плагин, а старый удалить.
Другие способы как избегать правок functions.php
По большому счету, если вы достаточно уверены в своих силах и знаете, как добавлять код в functions. php, у вас не должно возникнуть никаких трудностей и с кастомными плагинами. Здесь нет ничего сложного.
Но мы прекрасно понимаем, если у вас нет желания возиться со всем этим вручную. Все же, это WordPress. Поэтому вам может пригодиться бесплатный плагин Code Snippets, который позволяет легко добавлять ваш дополнительный код на сайт:
С этим плагином вы можете добавлять разные сниппеты с кодом, давать им название, описание, активировать и отключать выборочно тот или иной фрагмент кода.
Другая классная особенность состоит в том, что вы можете импортировать/экспортировать ваши фрагменты кода между сайтами.
Итоги
Это может показаться незначительной мелочью, но правильное расположение вашего дополнительного кода позволит в дальнейшем без проблем переключаться между другими темами оформления. Также вы можете по-отдельности включать или отключать ту или иную функциональность, если вы разделите каждую дополнительную функцию между отдельными плагинами.
Так что, этот метод действительно заслуживает внимания.
Смотрите также:
Вставка PHP кода в WordPress через виджеты
В wordpress, по сути, существует 2 разных подхода для добавления функциональных элементов в сайдбар или футер блога — это использование виджетов, а также добавления php кода и специальных wordpress функций в файлы шаблона. Первый вариант удобнее для пользователей без сильной технической подготовки, весьма нагляден и прост, второй — разработчикам, которые хотят управлять всеми нюансами отображаемой информации. Но иногда возникает задача, когда нужно эти 2 подхода совместить. Самый простой пример это когда вы создаете сайт под заказчика — он должен получить работающую админку с некоторыми несложными (!) опциями для управления проектом. Вы же не будете его вводить в курс дела по различным вордпресс функциям, какие параметры там есть как работают и т.п. В таком случае, без виджетов не обойтись.
Обновление 19.06.2019: По последним данным виджет PHP Code не обновлялся уже года два и более, поэтому как альтернативу советую обратить внимание на продвинутый Enhanced Text Widget где кроме PHP работает с JavaScript, HTML/CSS и шорткодами — универсальная штука!
В одном из прошлых постов я уже рассказывал как создать блок виджетов в шаблоне wordpress процесс это не такой сложный, как может показаться на первый взгляд. Хотя, в принципе, почти все wordpress темы уже изначально поддерживают виджеты. Второй нюанс в данном вопросе — не все задачи можно решить с помощью стандартного набора видежтов, которые имеют лишь базовые настройки — заголовок и пару опций. В то время как WP предоставляет куда больший функционал, что иногда приходится использовать. Взять хотя бы виджет «Свежие записи» и сравнить его с функцией wp_get_archives — виджет позволят выбрать только количество ссылок в блоке, ни тебе сортировки, оформления, типа архива. Виджеты удобные, но зачастую предоставляют мало опций. Помогает в этом деле — добавление PHP кода непосредственно через виджеты с помощью плагина PHP Code Widget.
Плагин PHP Code WidgetДанный плагин добавляет в wordpress новый тип виджета, который очень похож на стандартный текстовый блок. Называется он PHP Code. Скачать плагин можно здесь, установка стандартная — копируете файл плагина в /wp-content/plugins/, активируете в админке, после чего на странице виджетов появится новый элемент.
Дабы добавить php код просто перетаскиваете виджет в нужное место панели вижетов шаблона и в текстовом поле пишите свой php код. Важно при этом использовать правильный синтаксис дабы не возникало ошибок, а интерпретатор воспринял код как нужно! Как видите, плагин предельно прост в использовании, протестирован мною на парочке сайтов, где отлично работает.
Что же касается плагин PHP Code Widget, то сам принцип добавления кода через виджеты поможет пользователю полностью перейти на работу с шаблоном через механизм виджетов. Даже, если пользователь не слишком силен в технических аспектах, порядок отключения или изменения определенных элементов шаблона будет намного проще чем поиск нужного участка кода в файлах шаблона. С помощью такого подхода можно также легко работать с уже созданными работающими сайтами, которые поддерживают вижджеты и где вам нужно внести какие-то изменения. Например добавить код sape в wordpress — через виджеты пользователь сможет понять где и что у него отображается. Или вам заказали разработку каких-то изменений на сайте, а внедрение их в файлы шаблона не так просто реализовать — допустим имеется блок с табами, где в одну из закладок нужно вывести информацию — весьма нецелесообразно удалять плагины табов, потом добавлять их поддержку вручную через шаблон, а дальше уже вставлять код требуемых изменений. Во много раз проще установить плагин PHP Code Widget и добавить информацию в табы через виджеты.
В общем, нельзя сказать, что необходимость добавления PHP кода через виджеты есть всегда, но иногда такая задача, как видите, может возникнуть. В этом случае PHP Code Widget поможет решить все вопросы легко и быстро. Простой такой, но весьма полезный модуль.
P.S. Заказывать книги в интернете стало еще проще — специальный книжный интернет магазин онлайн имеет широкий выбор товаров, доступные цены и доставку прямо к вам домой.
Одесские автомеханики могут все, если нужны стартеры и автомобильные генераторы в Одессе купить или заказать в вместе с установкой — нет проблем, обращайтесь в Starter. od.ua.
Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!
Как вставить HTML или PHP код в страницу WordPress
Здравствуйте, уважаемые читатели! Сегодня я расскажу о том, как в статьи блога 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.
На сегодня это все. До скорых встреч на страницах блога FairHeart.ru!
Лучший способ выразить благодарность автору — поделиться с друзьями!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Следите за обновлениями в Twitter и RSS.
Как вставить в WordPress код HTML или PHP
Всех начинающих вебмастеров пугает и отталкивает работа с кодом – они опасаются навредить своему сайту, добавляя в него HTML или PHP, вставив его не в том место. Конечно же, если в WordPress код поставить не туда, то можно и всё испортить. Однако эта CMS настолько хорошо заточено под новичков, что ошибиться будет сложно.
В данной статье мы рассмотрим, как без риска вставить в WordPress код HTML или PHP. Но для начала – зачем это может пригодиться.
Зачем вставлять в WordPress код
У вебмастера в течение жизни сайта может возникнуть нужда установить на WordPress код, который должен выполняться на страницах. Это может понадобиться от разнообразных причин: например, установить счётчик посещаемости, какой-нибудь необычный виджет, добавить шаблону индивидуальности.
WordPress предлагает два способа установки кода. Рассмотрим их.
Установка с помощью виджета «Текст»
Для того, что бы установить на WordPress код с помощью виджета, необходимо перейти в пункт меню в консоли «Внешний вид», и подпункт «Виджеты». Среди стандартных виджетов следует найти «Текст» и переместить его в нужную область мышкой.
Виджет раскроется и можно будет заполнить его заголовок, а также поместить необходимый код в соответствующее поле. После нажатия на кнопку «Сохранить», операция будет выполняться на страницах сайта.
Данный способ установки на WordPress кода подходит для выполнения операций на HTML, PHP и даже JavaScript. Этот метод часто используется, так как он лёгок, и он хорошо подходит новичкам.
Установка в файл
Установка на WordPress кода с помощью редактирования файлов не рекомендуется новичкам, однако освоить его рано или поздно придётся всем. Такой способ удобен тем, что HTML или PHP может быть помещен в любую часть, не только область виджета, как было описано в первом методе. Недостатком этого способа установки является то, что он может быть опасен, и при ошибках приводит к неработоспособности сайта. Поэтому перед тем, как воспользоваться этим методом, необходимо обязательно сделать резервную копию файлов и базы данных.
Чтобы установить на WordPress код непосредственно в файл, требуется знать, за какую область сайта отвечает тот или иной файл. Здесь нельзя дать точных рекомендаций, так как в разных шаблонах разные файлы выполняют те или иные функции. Однако кое-что о файлах тем, вы можете узнать тут. Кроме установки на WordPress кода в файл шаблона, это можно сделать и в файлы самой CMS.
По умолчанию WordPress не поддерживает вставку PHP кода в сайдбар. Если вы попробуете вставить код через виджет «Текст», то в результате увидите сам код, а не то что должно получиться. Есть много отдельных кодов, которые легко вставляются через виджет без использования плагина. Но чтобы этот код отображал свое значение нужно в файл functions.php добавить фрагмент кода. Этот код позволит поддерживать PHP в сайдбаре.
Установка.
Для установки нам понадобится отредактировать только один файл. Вторым действием проверим проделанной работы. Откройте файл functions.php и в конце перед знаком ?> добавьте код.
После чего, сохраните файл, зайдите в админ-панель, Внешний вид – Виджеты и добавьте виджет «Текст». И в поле ввода пропишите какой-нибудь PHP код, сохраните и проверьте результат. Для проверки можете использовать код указанный ниже этот код выводит все категории сайта.
Если у вас остались вопросы или что-то было непонятно, то можете задать их в комментариях.
Как вставить код PHP в сообщения и страницы WordPress
- Фейсбук
- Твиттер
Разработчики не часто вставляют код PHP в сообщения и страницы WordPress. Обычно владельцы сайтов изменяют файлы тем для создания желаемого эффекта. Тем не менее, некоторые люди считают размещение фрагментов в сообщениях и на страницах более идеальным в определенных ситуациях.
Если вы пытаетесь внести изменения в поведение темы, я предлагаю использовать дочернюю тему вместо размещения PHP в сообщениях. Но если вы хотите включить элемент записи или страницы с помощью PHP, вы можете сделать это с помощью фрагментов кода и шорткодов.
Сегодня я расскажу, как размещать PHP в постах и на страницах. Я по-прежнему советую вносить определенные изменения непосредственно из файлов темы, но во многих случаях этот метод работает исключительно хорошо.
Использование фрагмента кода PHP
Если вы пытались вставить код в WordPress, вы могли заметить, что он либо удаляет определенные элементы, либо полностью запрещает их использование. Возможно, один из лучших способов обойти эту проблему — использовать фрагмент кода PHP.
Этот плагин возьмет ваши фрагменты кода PHP и превратит их в полезные шорткоды для WordPress. А поскольку это шорткод, он будет работать в постах, на страницах и даже в виджете «Текст» для компонента боковой панели.
Вы можете использовать это для создания рекламных кодов от партнеров, проверки входа пользователей или любой другой функции, которую вы могли бы разработать на PHP. Просто убедитесь, что вы используете безопасную и актуальную версию PHP при внесении изменений.
Установите и активируйте плагин Insert PHP Code Snippet.
Настройка фрагмента кода
Нажмите слева на функцию «XYZ PHP Code».
Нажмите кнопку «Добавить новый фрагмент кода PHP».
Введите имя отслеживания для фрагмента. Это то, что плагин будет использовать для «именования» шорткода. Вероятно, будет лучше, если вы сделаете его кратким и лаконичным, чтобы вы могли легко идентифицировать его позже. Это не должно быть чем-то вычурным. Например, вы можете использовать слово «Часы», если вы вставляете на свой сайт часы с кодом PHP.
Введите код PHP.
Когда вы закончите, нажмите кнопку «Создать» внизу.
Теперь вы увидите шорткод, созданный для фрагмента кода. Вы можете скопировать и вставить это в любую область WordPress, где разрешено использование шорткодов.
Использование PHP в редакторе WordPress
Хотя шорткод полезен в некоторых ситуациях, что, если вы не хотите копировать и вставлять текст? Возможно, вы просто хотите вставить PHP в сообщения с экрана редактора.
PHP Code Snippet делает то же самое. Позвольте мне показать вам, где находится эта функция при создании или редактировании сообщения.
Перейдите в раздел «Сообщения» и нажмите «Добавить новый».
В визуальном редакторе для WordPress вы увидите новую кнопку. Нажмите «PHP» на панели инструментов редактора.
С помощью этой кнопки будет виден ваш список сохраненных фрагментов кода PHP. Нажмите на нужный фрагмент, и плагин автоматически вставит шорткод.
Эта функция недоступна в текстовом редакторе WordPress. Он доступен только в Визуальном редакторе для постов, страниц и некоторых пользовательских типов постов. Если кнопка недоступна, вам придется вставить шорткод самостоятельно.
Настройка вашего веб-сайта
Этот метод является одним из самых простых способов настроить WordPress с помощью PHP-кода на страницах и в сообщениях. Это простой способ сделать сайт более привлекательным для посетителей. Хотя некоторые настройки PHP по-прежнему потребуют изменения файлов темы, вы можете использовать этот плагин для добавления некоторых из более простых дополнений.
Какие элементы PHP вы включаете в дизайн своего веб-сайта? Как часто вы модифицируете файлы своих тем для определенных функций в PHP?
- Фейсбук
- Твиттер
Как добавить PHP в WordPress (быстро и просто)
Обновлено Брайан Джексон
Ядро WordPress, темы и плагины выполняют большую часть работы на вашем сайте. Но обычно бывают случаи, когда вам нужно добавить фрагмент кода или PHP в WordPress. Обычно это добавление фильтра для управления или изменения работы плагина или темы. Сегодня я поделюсь несколькими простыми способами сделать это без сбоя вашего сайта.
- Как добавить PHP в WordPress с помощью плагина
- Как добавить PHP в WordPress вручную
Как добавить PHP в WordPress с помощью плагина
Первый вариант — добавить PHP в WordPress с помощью бесплатного плагина. Это, безусловно, самый простой и безопасный метод. Вам не нужно редактировать ядро WordPress, вашу тему или плагин. Код будет оставаться на протяжении всех обновлений на вашем сайте, и вам не нужно беспокоиться о том, чтобы возиться с дочерней темой. Я отказался от дочерних тем много лет назад, так как они просто усложняют ситуацию.
Выполните следующие действия.
Шаг 1
Установите бесплатный плагин Code Snippets. Я использую этот плагин более пяти лет, и у меня никогда не было ни одной проблемы. Это что-то говорит. Он также имеет пятизвездочный рейтинг с более чем 300 пятизвездочными отзывами.
Шаг 2
В разделе «Фрагменты кода» на боковой панели администратора WordPress нажмите «Добавить новый».
Добавить новый фрагмент кодаШаг 3
Щелкните вкладку «Функции (PHP)».
Фрагменты кода Функции PHPШаг 4
Добавьте название фрагмента кода, это может быть что угодно. Затем добавьте свой фрагмент кода PHP. В этом примере я добавляю фильтр из нашего плагина Perfmatters, чтобы изменить скорость появления при отложенной загрузке.
Убедитесь, что ваш код правильно отформатирован. Но не волнуйтесь, если это не так, плагин выдаст вам ошибку и не позволит применить его, что хорошо. Это означает, что он не приведет к сбою вашего сайта.
Шаг 5
Выберите, где вы хотите запустить фрагмент кода. В этом случае мне нужно, чтобы он работал только на передней части сайта. Хотя с большинством фрагментов кода PHP вам, вероятно, понадобится запускать его везде.
Выберите, где должен выполняться фрагмент кодаШаг 6
Нажмите «Сохранить изменения и активировать».
Как добавить PHP в WordPress вручную
Второй способ добавить PHP в WordPress — вручную, добавив код в файл function.php
вашей темы. Просто будьте осторожны, это может сломать сайт, если вы не будете осторожны. Следуйте инструкциям ниже.
Если вы используете тему, основанную на полном редактировании сайта, мы рекомендуем описанный выше метод плагина, так как все немного изменилось.
Шаг 1
В разделе «Внешний вид» на боковой панели администратора WordPress нажмите «Редактор файла темы»
Редактор файла темы WordPressШаг 2
Щелкните файл functions.php
вашей темы. Если вы используете дочернюю тему, вам лучше использовать ее.
Шаг 3
В нижней части файла введите свой код PHP. В этом примере я добавляю фильтр из нашего плагина Perfmatters, чтобы изменить скорость появления при отложенной загрузке.
Убедитесь, что ваш код правильно отформатирован, иначе вы можете сломать свой сайт.
Добавить функцию PHP в файл functions.phpХорошей новостью является то, что новые версии WordPress теперь имеют некоторые встроенные средства защиты. Вот пример ниже. Я забыл закрыть оператор, и после обновления файла он откатил изменения, когда обнаружил проблему. Это предотвратило сбой сайта WordPress. В старые добрые времена это вызвало бы белый экран смерти.
Изменения кода WordPress отмененыШаг 4
Нажмите «Обновить файл».
Резюме
Как видите, добавление кода PHP на ваш сайт WordPress не должно быть сложным. Бесплатный метод фрагментов кода на самом деле делает его очень быстрым, безопасным и простым!
Есть вопросы? Не стесняйтесь оставлять их в комментариях ниже.