Как использовать Редактор Внешнего вида в WordPress

Как использовать Редактор Внешнего вида в WordPress

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

Среди многих файлов в WordPress, которые могут быть модифицированы, есть два особенно интересных. Мы говорим о шаблоне темы и файлах таблицы стилей. И их Вы можете редактировать непосредственно из WordPress.

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

Как редактировать темы с помощью Редактора Внешнего вида

Если Вы готовы узнать больше о WordPress и замарать свои руки, набрав какой-то пользовательский код, войдите в пункт меню Внешний вид (Appearance) -> Редактор (Editor). Этот встроенный редактор позволяет изменять код, хранящийся в шаблоне темы и в файлах таблицы стилей. После открытия редактора перед Вами автоматически будет отображаться файл style.css, который использует Ваша текущая тема.

Редактор Внешнего вида WordPress

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

Как выбрать файлы для редактирования

После открытия Редактора WordPress покажет все доступные шаблоны и файлы таблицы стилей активной темы. Если Вы захотите отредактировать неактивную тему, перейдите наверх страницы редактора, выберите элемент в раскрывающемся меню «Выберите тему для изменения (Select theme to edit)» и нажмите кнопку «Выбрать (Select)». После этого WordPress загрузит все файлы, связанные с выбранной темой.

Файлы темы WordPress

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

Будьте осторожны

Хотя редактирование файлов таблицы стилей относительно безопасно, редактирование PHP-файлов может привести к ошибкам, которые могут сделать Ваш сайт непригодным для использования. Будьте очень осторожны, если решите редактировать PHP-файлы из Редактора Внешнего вида.

Пример: Как изменить размер шрифта с помощью Редактора Внешнего вида

Чтобы показать Вам, как работает редактор, мы собираемся изменить размер шрифта текста в записях в теме Twenty Seventeen.

Прежде чем продолжить, мы хотели бы на короткое время занять Ваше внимание. В версии 4.7 WordPress представила новую функцию, которая позволяет быстрее добавлять пользовательский CSS. Вместо редактирования кода через Редактор Внешнего вида мы предлагаем открыть Внешний вид (Appearance) -> Настроить (Customize) -> Дополнительные стили (Additional CSS), где Вы можете написать любой, какой захотите, пользовательский CSS-код, без прямого влияния на таблицу стилей.

Просмотреть код элементов

Просмотреть код элемента 1

Если Вы всё-таки хотите отредактировать таблицу стилей непосредственно через Редактор Внешнего вида, сделайте следующее:

  1. Откройте любую запись из Вашего блога
  2. Выберите текст в записи
  3. Нажмите на правую кнопку мыши и выберите «Просмотреть код (Inspect или Inspect Element)» (в зависимости от используемого браузера)
  4. В открывшемся новом разделе или окне найдите выделенный элемент <p>

Просмотреть код элемента 2

Класс <p> также должен быть виден на вкладке «Styles». Здесь Ваш браузер открыл таблицу стилей и позволяет редактировать CSS непосредственно из браузера. Вы можете использовать эту функцию для проверки пользовательского CSS-кода перед фактическим применением изменений на сайте. Поскольку мы хотели изменить размер шрифта текста в сообщениях, нам нужен следующий код CSS:

p {

font-size: 50px;

}

Применить изменения

После тестирования нескольких размеров шрифта из браузера запомните тот, который Вам понравился больше всего. Затем Вы можете перейти к редактору и изменить шрифт:

  1. Перейдите к Внешний вид (Appearance) -> Редактор (Editor)
  2. Если Вы еще не выбрали, выберите «Таблица стилей — Stylesheet» (style.css) из списка с правой стороны
  3. Найдите класс «p»
  4. Добавьте «font-size: 50px;» (весь код должен выглядеть так, как мы писали выше)
  5. Нажмите кнопку «Обновить файл (Update File)»

Изменение параграфа font-size

 

Изменение параграфа font-size 2

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

Будьте осторожны при работе с Редактором Внешнего вида

Редактор Внешнего вида — замечательный инструмент для быстрых изменений в файлах шаблонов и таблицы стилей. Но, чтобы сделать всё хорошо, важно быть полностью уверенным в производимых изменениях. Любое изменение PHP-файлов может блокировать Ваш сайт, пока не исправите их через FTP. Итак, при работе с PHP-файлами мы предлагаем Вам работать с локальным файлами, которые затем можно передать по FTP, сохраняя при этом исходную резервную копию. Если Вы вносите изменения в таблицы стилей, не забывайте о функции дополнительных стилей, которые были введены около года назад.

Оставьте комментарий