Настройка темы WordPress. Внешний вид, виджеты, меню и редактор тем

Настройка темы WordPress

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

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

Итак, когда я говорю что же такое настройка темы WordPress, я имею в виду 4 главных элемента:

  • Внешний вид.
  • Виджеты.
  • Меню.
  • Редактор тем.

Все виды настроек выполняются из панели администратора WordPress через левое меню — «Внешний вид». А далее — по пунктам.

Настройка внешнего вида темы WordPress

Это настройка визуальных элементов, которые отвечают за внешнюю составляющую конкретной темы: цвета, шрифты, названия и т.д. Они настраиваются через «Внешний вид» — «Настроить». Откроется окно визуальной настройки. Там вы сможете увидеть, как вносимые изменения будут отображаться на вашем сайте.

Настройка темы WordPress

В моей теме этот раздел включает 8 элементов настройки.

  1. Свойства сайта. Здесь можно установить логотип, иконку для сайта (которая отображается во вкладке браузера), указать название сайта и его краткое описание.
  2. Цвета. На этой вкладке выбираются цвета для настраиваемых элементов вашей темы. В моём случае это цвета шрифтов, фонов, кнопок, ссылок, меню и т.д.
  3. Изображение заголовка. Здесь можно установить заголовок в виде картинки для шапки сайта.
  4. Меню. Здесь настраиваются элементы меню, используемые в теме. Но я предпочитаю делать это через инструмент «Внешний вид» — «Меню», о котором расскажу ниже.
  5. Виджеты. Это настройка отдельных областей вашего сайта, которые определяются вашей темой. Этот элемент я также предпочитаю настраивать в другом месте: через «Внешний вид» — «Виджеты». Его я также выделила отдельным пунктом.
  6. Настройки главной страницы. Здесь можно выбрать, что отображать в качестве главной страницы: выводить последние записи или показывать статическую страницу.
  7. Дополнительные стили. Здесь вручную можно прописать css-стили для отдельных элементов вашего сайта. Это позволит изменить дизайн элементов, возможности для изменения которых не предусмотрены темой. Однако, для работы с этим пунктом нужно знать основы языка CSS.
  8. Другие вкладки. В моей теме есть, например, вкладка «Отображение», которая предоставляет мне дополнительные возможности для настройки. Например, я могу выбирать ширину контентной области, расположение сайдбара, межстрочный интервал и многие другие компоненты.

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

Настройка виджетов темы WordPress

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

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

Их можно настраивать через «Внешний вид» — «Настроить». Я об этом упоминала в предыдущем пункте. Однако, я предпочитаю использовать другой вариант. Через консоль WordPress: «Внешний вид» — «Виджеты».

Настройка виджетов WordPress

Открывшееся окно содержит 3 зоны.

Зона 1. Доступные виджеты

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

Доступные виджеты ВордПресс

Я оставила только те виджеты, которые реально использую. Всё лишнее я отключила.

На самом деле, виджеты в WordPress — достаточно широкая тема, так как каждый из них используется для решения своих задач. Но я, в основном, использую только 4 из них:

  • HTML-код. Позволяет размещать в области для виджетов произвольный HTML-код. Я его использую в основном для размещения каких-то внешних элементов и скриптов. Например, у меня это строка поиска в верхнем меню, внешняя система комментирования для статей и постов, и подвал сайта, где я, собственно говоря, и размещаю все скрипты.
  • Текст. То есть, размещение произвольного текста в области виджета. Там можно добавить картинку, вставить ссылку и использовать списки. Его я использую в подвале сайта для вывода простого текста.
  • Редактор. Это немного расширенная версия текстового виджета. Он позволяет делать выравнивание текста, вставлять заголовки, выбирать цвет текста и т.д. То есть, предоставляет нам более обширный функционал для форматирования текста.
  • Рубрики. Я использую данный виджет для вывода списка рубрик в сайдбаре своего сайта. Это дополнительный элемент навигации, предназначенный для пользователей, которым нужна информация только из определённой категории.

Собственно говоря, этих 4 виджетов мне вполне хватает для работы.

Зона 2. Области для виджетов

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

У меня это так:

Области виджетов WordPress

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

Зона 3. Неактивные виджеты

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

Неактивные виджеты WordPRess

Чтобы удалить виджет навсегда, нужно открыть требуемый виджет и нажать кнопку «Удалить», расположенную в левом нижнем углу.

Настройка меню темы WordPress

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

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

Настраивать элементы меню можно через «Внешний вид» — «Настроить» (я уже выше говорила об этом). В этом случае вы сразу увидите, как элементы будут отображаться на вашем сайте.

Но я предпочитаю другой вариант. Настройка через «Внешний вид» — «Меню».

Настройка меню WordPress

Для создания нового меню нужно нажать на ссылку «Создайте новое меню».

Создать новое меню WordPress

Структура меню

Для создания нового меню, выполните следующую последовательность действий:

Шаг 1. Введите название меню, которое вы создаёте и нажмите на кнопку «Создать меню».

Создать меню

Шаг 2. Выберите, где данное меню должно отображаться. Если вы хотите, чтобы новые страницы верхнего уровня автоматически добавлялись в меню, поставьте соответствующую галочку.

Настройки меню

Шаг 3. Добавьте в меню нужные вам элементы. Для этого выберите нужные вам пункты и нажмите кнопку «Добавить в меню».

Элементы меню

Элементы меню

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

  • Страницы. В этом разделе вы можете найти и добавить в меню нужную вам страницу.
  • Записи. Здесь вы можете выбрать и добавить в меню любую запись.
  • Произвольные ссылки. Укажите название пункта меню и URL. Таким образом, вы сможете включить в меню любую страницу, даже если она находится не на вашем сайте.
  • Рубрики. Любую рубрику также можно поместить в меню вашего сайта.

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

Редактирование темы WordPress

Если вам недостаточно настроек, сделанных в предыдущих пунктах, и вы хотите немножко подкорректировать свою тему, то сделать это можно через «Внешний вид» — «Редактор тем».

Редактор тем

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

Но если вы вдруг на это решились, даю немного информации на эту тему.

Содержание темы WordPress

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

В каждой теме содержится определённый набор файлов.

Таблица стилей

Главный файл таблицы стилей — style.css. Он присутствует в теме обязательно. Помимо него могут быть использованы другие файлы со стилями, которые используются темой.

Файл функционала

За функционал темы отвечает файл functions.php. Именно там прописываются функции, которые используются в шаблонах темы. Туда лучше лишний раз не лезть, так как даже маленькая ошибка способна полностью погубить ваш сайт. Он просто не будет открываться. И вам придётся полностью восстанавливать его из резервной копии.

Файлы шаблонов

В WordPress есть 2 вида шаблонов.

  1. Шаблоны, которые отвечают за вывод определённой части сайта. Их набор может отличаться в зависимости от темы, но эти 3 файла часто встречаются:
    • header.php — вывод шапки сайта (хедера).
    • sidebar.php — вывод боковой колонки (сайдбара).
    • footer.php — вывод подвала сайта (футера).
  2. Шаблоны, отвечающие за вывод содержания страницы. Состав также может у разных тем быть свой. Но базовые такие.
    • index.php — базовый шаблон для вывода содержимого, который используется, если отсутствует другие файлы шаблонов.
    • single.php — отвечает за вывод отдельной записи сайта. Которая создаётся через «Записи» — «Добавить новую».
    • page.php — отвечает за вывод отдельной страницы. Она создаётся через «Страницы» — «Добавить новую».
    • home.php — шаблон для вывода содержания главной страницы.
    • category.php — выводит отдельные рубрики сайта.

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

Редактирование файлов темы WordPress

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

Файлы темы

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

Ну а если ваши изменения будут касаться только файла стилей, то лучше вносить их во встроенный редактор CSS. Его вы найдёте через «Внешний вид» — «Настроить» — «Дополнительные стили».

Дополнительные стили WordPress

На этом всё. Надеюсь, что статья оказалась полезной. Все вопросы и отзывы пишите в комментариях!

Понравилась статья? Поделитесь с друзьями!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: