как в вордпресс открыть код
Где редактировать код вашего шаблона WordPress
На этой страницы вы найдете небольшую инструкцию редактировать код вашего шаблона WordPress.
Вступление
CMS WordPress всегда имела внутренний инструмент для редактирования кода установленных тем. Ранее инструмент редактора был простым. С версии WP 4.9 в редактор добавили подсветку и инструмент предупреждения ошибок редактирования (песочницу). При этом авторы добавили возможность отмены подсветки. Где редактировать код вашего шаблона WordPress в этой небольшой инструкции.
Предупреждения
Во-первых, никогда не редактируйте код рабочего шаблона без резервной копии сайта или, как минимум копии шаблона. Эта мера безопасности позволит избежать потери сайта при неправильном редактировании. Делайте это, несмотря на имеющийся инструмент контроля за правкой кода (песочницу).
Во-вторых, помните, что прямая ручная правка кода шаблона, пропадёт после первого же обновления шаблона. Чтобы избежать отката редакции кода шаблона, используйте инструмент дочерней темы WordPress.
Где редактировать код вашего шаблона WordPress
Авторизуйтесь в административной панели сайта. Для редакции кода ваша роль пользователя должна быть не менее администратор.
Обратите внимание, что панель WordPress позволяет редактировать код не только рабочего (активного) шаблона, но любой темы установленной на сайт.
Если подсветка кода мешает, вам нужно отключить подсветку кода на вкладке Пользователи>>>Ваш профиль, поле «Отключить подсветку».
Остаётся проверить, на сайте, применение ваших изменений.
Вывод
Найти, где редактировать код вашего шаблона WordPress совсем не сложно. Важно точно знать, зачем это нужно, а также иметь под рукой, совсем не лишнюю резервную копию всего сайта. Хотя без ошибок не приходят знания, и если хотите разбираться в WordPress, править код нужно уметь.
Куда вставлять этот код в WordPress? Общая структура файлов темы
В наших уроках мы часто приводим примеры по улучшению и расширению встроенных возможностей WordPress. Часто это просто описание по настройке интересного плагина или виджета, а часто мы приводим в тексте фрагменты кода, который нужно вставить в тот или другой файл темы, чтобы добиться желаемого результата.
Как оказалось, для многих фраза — Вставьте этот код в functions.php — ничего не говорит, поэтому в этом уроке я постараюсь показать максимально упрощенно, что это за код, и как именно его нужно добавлять в файлы вашей темы. Эта заметка скорее для новичков, так что если вы профи в WordPress — ничего нового вы здесь не увидите.
Как редактировать код?
Не буду особо распинаться. Скажу коротко, у вас 2 варианта:
1. Встроенный редактор WordPress
Находится в Консоли в меню Внешний вид → Редактор.
2. Сторонние программы для правки кода
Обобщенная структура WordPress темы
Файлы темы оформления
Любой WordPress сайт (а правильней говорить тема, потому как сайт будет работать при активации одной из установленных тем) на самом деле является набором файлов. Где-то там на стороне вашего хостинг-провайдера эти файлы обрабатываются серверами, и вам на монитор возвращается готовый результат — собственно сайт. То, что вы видите, когда заходите по адресу через веб-браузер.
В случае с WordPress этот набор файлов будет отличаться в каждой теме по-своему. Но есть одна общая черта: этот набор состоит из файлов с расширением .php, .css и .js (сам WordPress целиком написан на языке PHP, так что .php файлы — основная часть любой темы оформления).
В каждой теме оформления должен присутствовать минимальный набор файлов для корректной работы в среде движка WordPress. Вы можете открыть папку со своей активной темой ( корень_сайтаwp-contentthemesваша_тема) и, скорее всего, вы найдете там все эти файлы:
Далее мы поговорим об этих файлах подробнее.
Внешний вид сайта
Теперь поговорим о структуре внешнего облика WordPress сайта. Для того, чтобы не было путаницы типа » Я хочу добавить эту штучку вот сюда» или » Мне нужно вставить эту кнопку туда», определенные области WordPress темы принято называть своими именами. Случайный посетитель, попавший на любой сайт, видит то, что видит: кнопочки, панельки, заголовки, ссылки и так далее. Человек более подкованный в WordPress видит этот сайт более структурно.
Давайте для примера возьмем наш блог Hostenko.com/wpcafe. Вот как выглядит его главная страница:
Я специально скомпоновал изображение так, чтобы было видно все основные области.
Как видите, главная страница нашего блога состоит из 4-х частей: шапки, подвала, основной части и боковой панели. Справедливо отметить, что такая структура является наиболее распространенной в большинстве тем оформления WordPress.
Теперь, когда вы знаете название областей внешнего представления WordPress сайта, вы можете говорить: » Мне нужно добавить еще один баннер в подвале», или » Я хочу вставить виджет в боковую панель», или » Нужно изменить порядок меню в шапке».
Подробнее о файлах и коде
На изображении выше вы видите, что за каждую область сайта отвечает определенный файл в папке темы оформления. Вы видите 4 области, которым соответствуют 4 файла, но на самом деле файлов больше. Я опишу только самые важные файлы темы.
header.php — Шапка
Шапка — это верхняя область сайта, в которой содержится логотип, название сайта, верхнее навигационное меню, дополнительно могут вставляться рекламные баннеры, закрепленные страницы. Это верхняя (первая) область, соответственно и обрабатываться этот файл будет в первую очередь. Это означает, что в файл header.php также прописываются все подключаемые JavaScript файлы, CSS файлы и так далее.
footer.php — Подвал
Аналогично шапке, это нижняя область сайта, которая может содержать копирайты, контактную информацию, дополнительное меню, счетчики метрики и так далее. Если провести аналогию с Microsoft Word, то шапка и подвал — это верхний и нижний колонтитулы. Это те части сайта, которые всегда будут отображаться сверху и снизу, куда бы вы не перешли в рамках сайта.
index.php — Основная часть
Основная часть (она же контентная) отвечает за вывод ленты ваших постов (записей, публикаций, это все синонимы). В этом файле содержится код для вывода заголовка записи, миниатюры, автора, даты публикации, меток, анонса записи, кнопки для продолжения чтения записи далее.
Фрагмент файла:
sidebar.php — Боковая панель
Боковая панель — это блок сопровождающей информации, где выводятся виджеты, форма поиска, социальные кнопки, облако меток, реклама, баннеры и прочая информация. Боковая панель может быть справа от основной части или слева. Может быть 2 боковые панели сразу, а может отсутствовать вообще.
Фрагмент файла:
Код этого файла говорит о том, что сайдбар в этой теме полностью настраивается через Консоль. И только панель поиска жестко закреплена в верхней позиции. А значит, чтобы добавить или изменить любой элемент в боковой панели, нужно зайти в меню Внешний вид → Виджеты, и там перетащить в область сайдбара нужные элементы:
Например, многие наши читатели спрашивают, каким плагином реализован наш блок социальных кнопок на главной странице. Ответ примерно следующий: это не плагин а наша собственная разработка. В сайдбаре добавлен виджет «Текст», который содержит код описания каждой кнопки. Выглядит это примерно так:
functions.php — Файл конфигурации темы
Это файл, которого «не видно» на сайте, но который играет очень важную роль в правильной работе темы оформления. Фактически, здесь содержатся инструкции по работе административной части темы оформления, здесь регистрируются все дополнительные функции, которые может задействовать тема, сюда включаются для загрузки все прочие компоненты и модули темы, которые были вынесены разработчиком в рамках отдельных файлов, чтобы потом можно было заменить одну составляющую вместо всего файла functions.php целиком.
Другими словами, этот файл отвечает за основную функциональную составляющую темы оформления. И именно в functions.php вставляется большинство примеров кода из наших уроков.
Фрагмент файла:
В этот файл приходится чаще всего вставлять код из примеров в наших уроках. Делается это очень просто: скопируйте код из урока, нажав по этой кнопке:
(это картинка, а не фрагмент кода)
Затем откройте файл functions.php (или другой нужный файл) с помощью встроенного редактора или сторонней программы (как было описано выше), опуститесь в конец файла и вставьте код перед закрытием php тега ?>
Это основное и единственное правило — не нарушить целостность и структуру уже существующего кода.
Если код, который вы вставляете, начинается открытием php тега
style.css — Таблица стилей оформления
Еще один очень важный файл, без которого не будет работать ни одна тема оформления WordPress. Этот файл как раз лучше всего «видно» на главной странице любого WordPress сайта.
Все оформление, фон, шрифты, цвета, интервалы отступа, заливка, тени, градиенты — за все это отвечает единый файл style.css, поэтому его важность сложно переоценить.
Фрагмент файла:
Этот файл отличается от всех, описанных выше, так как он целиком написан, используя разметку веб-стилей CSS. Поэтому весь код, что касается настройки оформления в наших уроках, добавляется в этот файл. Просто откройте этот файл, прокрутите в конец и добавьте свой css код начиная с новой пустой строки.
Какие еще файлы мы забыли?
Я просто коротко перечислю с описанием:
Вот и все! Надеюсь этот урок разъяснил некоторые моменты, и теперь вам будет проще ориентироваться, в какой именно файл нужно вставлять дополнительный код.
Редакторы
Редактор — это место, где добавляется содержимое для сайта или блога. В одном редакторе можно обрабатывать как записи, так и страницы. На этой странице описаны различные редакторы, которыми вы можете воспользоваться.
Редактор WordPress
Редактор WordPress, который также называют редактор блоков, был выпущен в конце 2018 года. Он предоставляет самые мощные и гибкие возможности редактирования WordPress. Им пользуются миллионы владельцев веб-сайтов по всему миру.
Каждый элемент сайта, например изображения, тексты, видеоролики и заголовки, добавляется посредством блока. Блоки — это отдельные структурные элементы, которые позволяют изолировать области содержимого для редактирования.
Редактирование HTML в редакторе WordPress
Существует два варианта редактирования HTML в редакторе WordPress.
На панели инструментов для каждого блока есть кнопка с многоточием. В ее меню есть опция Редактировать как HTML, которая позволяет отредактировать HTML только для этого конкретного блока.
Чтобы отредактировать HTML для всей страницы или записи, нажмите кнопку с многоточием рядом с кнопкой «Опубликовать» и перейдите в Редактор кода.
Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включен в список разрешенных тегов HTML и не является кодом для ограниченного использования как, например, JavaScript.
Переход на редактор WordPress
Если запись или публикация были в классическом редакторе до появления редактора WordPress, все существующее содержимое будет размещено в классическом блоке, где доступны многие функции классического редактора.
Нажмите кнопку с многоточием в правом верхнем углу классического блока, чтобы преобразовать содержимое в блоки.
Классический редактор
Классический редактор использовался по умолчанию для сайтов и блогов WordPress.com до выхода редактора WordPress (см. выше).
В редакторе WordPress есть классический блок, который повторяет функционал классического редактора WordPress. Он выглядит следующим образом:
В классическом блоке применяются те же инструменты редактирования, что и в классическом редакторе.
Классический редактор также доступен в WP Admin — классической консоли WordPress. В онлайн-руководствах по работе с WordPress часто фигурируют изображения этой консоли. Хотя практически все операции доступны в главной консоли WordPress.com, по желанию можно использовать WP Admin.
Доступ к консоли WP Admin осуществляется двумя способами:
Чтобы отредактировать страницу или запись в классическом редакторе, щелкните мышью её заголовок:
Страницы в WP Admin
В классическом редакторе есть два режима редактирования: визуальный редактор и редактор HTML.
Визуальный редактор
Визуальный редактор, работающий на базе TinyMCE, очень похож на текстовый процессор. Значки в визуальном редакторе дают возможность форматировать текст, изменять шрифты и выравнивание, вставлять маркированные и нумерованные списки, а также выполнять другие действия.
Скучаете по этому инструменту редактирования? В редакторе WordPress есть классический блок, где доступны те же функции, что и в визуальном редакторе.
Редактор HTML
Редактор HTML позволяет создавать страницы и записи в формате HTML или редактировать существующий код HTML. Для доступа к нему откройте вкладку «Текст» рядом со вкладкой «Визуальный».
Используйте редактор HTML, чтобы добавлять шорткод и стили для шрифтов или вставлять коды из внешних источников.
Добавляемый код HTML должен иметь правильный синтаксис включать только разрешённые теги HTML. С помощью кнопок в верхней части окна текстового редактора удобно вставлять распространённые теги HTML. Обратите внимание, что в WordPress.com действуют определённые ограничения на использование кода. Например, JavaScript, встроенные элементы и пользовательские формы запрещено использовать по соображениям безопасности.
Сторонние редакторы
На сайтах, тарифный план которых обновлён до версий Business или eCommerce, можно устанавливать плагины, в том числе сторонние редакторы (например, Elementor и WP Bakery). В некоторых случаях сторонние темы уже содержат собственный редактор.
Помните, что при использовании стороннего редактора лучше всего обращаться за поддержкой по связанным с ним вопросам к его разработчикам. Ссылки для прямой связи с ними часто указываются на странице настройки инструмента в консоли WP-Admin.
Как вставить PHP код в WordPress
Здравствуйте, дамы и господа! Сегодня мы рассмотрим с вами как правильно добавлять/вставлять в functions.php WordPress код PHP, то есть, безопасным и практичным способом. Не спешите редактировать файл functions.php. Есть гораздо более безопасные способы вставки своего кода в данный файл. В этом руководстве я покажу вам простой способ добавить / вставить собственный PHP код WordPress. Без редактирования файла functions.php и не нарушая работу вашего сайта WP (ВордПресс).
В некоторых случаях вам может понадобиться добавить новую функцию на свой веб-сайт, либо подключить что-либо к теме WP.
Сделать это можно разными способами: вставить PHP код WordPress напрямую в файл functions.php вашей темы (не безопасно и не практично). Или с помощью специального php плагина WP (легко, быстро, надёжно и безопасно).
Совет: Если вы редактируете файл functions.php, используемую в настоящий момент, подумайте о возможном нарушении работоспособности сайта.
При обновлении темы сделанные вами изменения будут перезаписаны. Чтобы избежать этого, можно создать дочернюю тему.
Файл functions.php WordPress
Вы можете использовать functions.php для добавления любых функций на ваш сайт (как это делают плагины). Однако новички часто не знают, как безопасно добавлять код в functions.php в WordPress. Обычно в статьях по WordPress вы найдете фрагменты кода с инструкциями (из уроков без плагина) по вставке их в файл functions.php темы или в плагин для конкретного сайта напрямую. Мол «необходимо будет вносить правки в файл функции темы сайта (functions.php)». Так делать не рекомендуется.
Проблема в том, что даже малюсенькая ошибочка в пользовательском PHP коде может поломать ваш сайт и сделать его недоступным. Или файл functions.php становится большим (сборная солянка) и не читаемым, а при смене активной темы пропадает часть функционала, которая вовсе не относится к внешнему виду сайта.
Безопасное добавление фрагментов кода в файл functions.php с помощью бесплатных плагинов.
Как добавить / вставить PHP код в WordPress
Универсальный способ добавить код в functions.php WordPress — это использовать плагин My Custom Functions, Code Snippets или создать собственный. Они решают задачу интеграции PHP функций, и добавляют их так, будто они были написаны в файле темы functions.php. При этом ни обновление темы, ни даже её изменение на новую, данную интеграцию не нарушают.
Больше не нужно редактировать файл functions.php вашей темы или какой-либо из ваших файлов плагинов для добавления собственного кода PHP. Просто добавьте свой собственный PHP-код в поле на странице плагина, и этот плагин сделает все остальное за вас. Он автоматически добавит ваш PHP-код на ваш сайт, без изменения каких-либо файлов вашей темы и без замедления вашего сайта.
Плагин работает полностью независимо от темы, поэтому вы можете использовать его с любой темой и независимо от того, имеет ли тема файл functions.php или нет. Код, который вы разместите на странице плагина, не изменится, если вы отредактируете содержимое файла functions.php темы или даже полностью измените тему.
Это действительно полезно в случае обновления темы или плагинов WordPress, потому что ваш собственный PHP-код никогда не будет перезаписан. Ваш собственный PHP-код будет продолжать работать независимо от того, сколько раз вы обновляете или переключаете тему и плагины.
Установка плагина My Custom Functions
После установки и активации в разделе Настройки появится пункт PHP Inserter. Кликните по нему, откроется страница настроек плагина My Custom Functions:
На странице плагина вы найдете редактор кода на базе CodeMirror. Этот редактор кода имеет такие параметры, как выделение синтаксиса, нумерация строк и многое другое.
Вставка кода PHP в WordPress
Чтобы добавить свой собственный PHP-код на свой веб-сайт, просто выполните следующие действия: на вкладке Главная, вставьте свой собственный код PHP в поле редактора.
Установите переключатель в положение ON (Включить) и нажмите кнопку «Сохранить изменения». Наслаждайтесь результатом применения вашего собственного кода PHP. Это так просто! Да, если будите добавлять ещё один код, тогда сделайте один пробел после первого и вставляйте следующий.
Можно ли использовать код HTML / CSS / JS, интегрированный в код PHP? Да, можно. Но делать это нужно правильно, вот так:
Пока не забыл, поделюсь. На скриншоте добавлена функция только один логин на пользователя. Для чего это?
У вас есть сайт WordPress на основе платной подписки (членство)? И пользователи могут делиться своей учетной записью со своими друзьями или кем угодно, что делает ее для них бесплатной. Но вы этого не желаете.
Вы хотите, чтобы к одной учетной записи мог входить только один человек. Можно реализовать функцию, которая предотвращает одновременный вход в систему более одного пользователя.
Переходим к следующему плагину. Он мне нравится больше и я его использую на двух моих блогах. Шикарный модуль.
Плагин Code Snippets (фрагменты кода)
Плагин Code Snippets позволяет использовать на своём сайте сниппеты кода (хуки, хаки и другие), не редактируя файлы темы functions.php. Такой метод имеет много преимуществ – при обновлении темы код пользователя не теряется, нет необходимости в создании дочерних тем, хаки работают на любой теме.
Code Snippets предоставляет графический интерфейс, аналогичный меню Plugins, для управления сниппетами. Фрагменты можно активировать и деактивировать, как и плагины. Редактор фрагментов включает поля для имени, описание с поддержкой визуального редактора, теги, позволяющие категоризировать фрагменты, и полнофункциональный редактор кода.
Установка плагина Code Snippets
После активации плагин добавит новый пункт меню с надписью Сниппеты (Snippets) в панель администратора WordPress. Нажав на нее, вы увидите список всех фрагментов пользовательского кода. По умолчанию в плагине добавлены фрагменты кода для примера. Это:
Они все деактивированы. Не удаляйте их. Они могут пригодится вам в качестве инструкции, как встроить HTML, CSS и JavaScript в PHP код:
Этот плагин предоставляет графический интерфейс для управления сниппетами, что упрощает добавление кода.
Как добавить фрагменты PHP кода в functions.php WordPress
Кликните на пункт Добавить новый. Для добавление сниппета нужно заполнить поля названия и кода. Обязательно укажите заголовок для фрагмента кода. Таким образом, вы сможете легко идентифицировать коды в будущем:
После присвоения фрагменту имени и добавления PHP кода вы также можете написать описание, которое поможет вам запомнить цель кода, где вы его нашли и почему вы добавляете его на свой веб-сайт. Это может быть полезно другим пользователям, которые работают над вашим сайтом сейчас или в будущем:
После этого, нажмите Сохранить изменения и активировать. Будьте внимательны, перед добавление сниппета убедитесь в том, что он является корректным PHP кодом, и не приведет к сбоям. Хотя добавляемый Snippets сразу не активизируется, это поможет сократить вероятность включения не исправного сниппета в будущем.
Как было уже сказано, вы можете легко управлять своими фрагментами PHP кода, включать, выключать, редактировать, удалять, клонировать или экспортировать их.
Как создать свой плагин дополнительного файла functions.php
Хорошим решением будет создать свой кастомный мини плагинчик.
Если нужно добавить на сайт свои пользовательские функции, но при этом вам не хочется устанавливать предложенные готовые модули или разбираться с дочерними темами, то сделать это можно при помощи своего личного плагина. Создаём плагин — отдельный файл функций для сайта WP. Создайте файл с кодом:
Сохраните данный файл в формате PHP с уникальным названием например, my-functions.php и загрузите его в директорию wp-content/plugins. Никакая пара используемых плагинов не должна иметь одинаковое имя файла. Далее перейдите в раздел Плагины в панели администрирования WordPress и просто активируйте его:
А давайте создадим настоящий плагин как положено, со стандартной информацией о нём:
Мой плагин активирован