Как использовать WordPress Theme Customizer (Ultimate Guide)

2 min


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

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

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

Как использовать WordPress Theme Customizer Ultimate Руководство

Как получить доступ к настройщику тем WordPress

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

Вы можете получить к нему доступ, войдя в свою админ-панель WordPress, а затем перейдя в Внешность » Настроить с левой боковой панели вашей панели администратора WordPress. Это откроет интерфейс Customizer с вашей текущей темой.

Как получить доступ к настройщику WordPress

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

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

Для этого вам нужно направиться к Внешность » Темы стр.

Затем наведите курсор мыши на любую установленную тему и нажмите Предварительный просмотр кнопку, чтобы открыть страницу настройки темы WordPress.

WordPress Theme Live Preview Возможность

Как использовать WordPress Theme Customizer

После открытия настройщика тем WordPress вы увидите все параметры настройки в левой части экрана и предварительный просмотр вашего веб-сайта в правой части.

WordPress Theme Customizer

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

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

Замечания: расширенные темы WordPress добавят дополнительные панели настроек для дополнительных настроек (подробнее об этом позже).

Давайте рассмотрим параметры по умолчанию, доступные в настройщике тем WordPress.

Панель идентификации сайта: добавление заголовка, логотипа и Favicon

Идентичность сайта Панель в настройщике тем WordPress позволяет добавлять или изменять заголовок и слоган вашего сайта.

По умолчанию WordPress добавляет «просто еще один сайт WordPress» в качестве лозунга сайта.

Рекомендуется изменить его после установки WordPress на свой сайт. Вы также можете оставить его пустым, если хотите.

Настройки идентификации сайта для изменения названия сайта, слогана, логотипа и значка сайта

Панель «Идентификация сайта» в настройщике тем WordPress также позволяет добавлять логотип вашего сайта. Просто нажмите на Выберите логотип Возможность загрузить логотип вашего сайта.

Хотите добавить иконку на свой сайт? Вы можете сделать это, нажав на Выберите значок сайта вариант. Для получения подробных инструкций вы можете следовать нашему руководству о том, как создать и добавить значок сайта на свой сайт.

WordPress Theme Customizer: меняйте цвета на своем сайте

Элементы управления на Цвета Панель будет в основном изменяться в зависимости от используемой вами темы WordPress.

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

Изменить цвета на вашем сайте

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

Добавление навигационных меню в настройщик тем

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

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

Панель меню в настройщике тем

Чтобы создать новое меню, вам нужно нажать на Создать новое меню кнопка.

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

Создать новое меню навигации

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

Добавить элементы в меню навигации

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

Контроль виджетов на вашем сайте в Theme Customizer

Виджеты Панель позволяет добавлять и управлять виджетами на вашем сайте.

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

Например, тема «Двадцать семнадцать» предлагает 3 местоположения виджетов, тогда как тема «Двадцать девятнадцать» содержит только одно местоположение.

Панель виджетов

Когда вы нажмете на любой из них, вы увидите виджеты, которые вы ранее добавили в это место.

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

Добавить виджеты на свой сайт

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

Панель настроек домашней страницы в Theme Customizer

По умолчанию WordPress отображает последние сообщения блога на вашей домашней странице.

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

Чтобы использовать собственную домашнюю страницу, вам необходимо выбрать переключатель «Статическая страница» на Настройки домашней страницы панель.

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

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

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

Дополнительная панель CSS для добавления пользовательских CSS

Хотите добавить собственный CSS-код для стилизации своего сайта? Вы можете сделать это в Дополнительный CSS панель.

Опытные и продвинутые пользователи WordPress часто настраивают свой сайт, добавляя код CSS непосредственно в файл style.css своей темы. Это добавляет дополнительные шаги, такие как FTP-доступ к вашему хостингу WordPress, изменение файлов тем и т. Д.

Более простое решение для начинающих — добавить свой собственный код CSS на панель «Дополнительные CSS» в настройщике тем WordPress. Это позволит вам вносить изменения в свой сайт и видеть их вживую в правой части экрана.

Добавить пользовательский код CSS на панель дополнительных CSS;

Когда вы начнете писать CSS-код, WordPress автоматически предложит вам атрибуты на основе введенных вами букв. Он также будет отображать сообщения об ошибках, если вы не написали правильную инструкцию CSS.

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

Другие параметры настройки темы

Некоторые бесплатные и премиальные темы предлагают больше возможностей настройки темы.

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

Вы также можете добавить определенные функции в настройщик темы с помощью плагинов. Например, вы можете добавить пользовательские шрифты в WordPress с помощью плагина Easy Google Fonts.

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

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

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

Внизу панели Theme Customizer вы найдете три значка и ссылку «Скрыть элементы управления».

Предварительный просмотр сайта на разных разрешениях экрана

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

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

Опубликовать, сохранить или запланировать настройки настройщика

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

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

Опубликовать настройки WordPress Customizer

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

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

WordPress Customizer Сохранить черновик вариант

Здесь вы найдете три варианта: «Опубликовать», «Сохранить черновик» и «Расписание».

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

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

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

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

Предварительный просмотр различных тем без запуска

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

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

На панели настройщика вы найдете название вашей активной темы и + Изменить кнопка.

Изменить тему WordPress из настройщика

Если вы нажмете на эту кнопку, WordPress отобразит все установленные вами темы в правой части страницы.

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

Предварительный просмотр установленных тем в настройщике тем

Вы также можете просмотреть темы из репозитория тем WordPress. Для этого нужно установить флажок «Темы WordPress.org» на левой панели.

Это покажет темы из каталога WordPress.org. Вы можете нажать кнопку «Установить и просмотреть», чтобы выбрать понравившуюся тему.

Каталог тем WordPress

Вы также можете отфильтровать темы, нажав на Фильтр Темы Кнопка присутствует в правом верхнем углу экрана.

Замечания: мы рекомендуем использовать промежуточный веб-сайт WordPress для тестирования новых тем вместо использования настройщика на живом сайте.

Импорт или экспорт настроек настройщика тем

Знаете ли вы, что вы можете импортировать и экспортировать настройки настройщика темы?

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

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

WordPress Theme Customizer Альтернативы

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

Что, если вам нравится ваша тема, но вы хотите, чтобы в ней были дополнительные настройки?

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

CSS Hero

Плагин CSS Hero

CSS Hero — это плагин WordPress, который позволяет настраивать ваш сайт без написания ни одной строки кода. У вас есть свобода стилизовать каждый элемент вашего сайта без каких-либо хлопот.

Хотите настроить страницу входа на свой сайт WordPress? CSS Hero позволяет сделать это в течение нескольких минут.

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

Строитель Бобров

Плагин Beaver Builder

Beaver Builder — один из лучших плагинов WordPress для создания страниц на рынке. Это позволяет создавать потрясающие страницы для вашего сайта, используя интерфейс перетаскивания.

Самое приятное, что Beaver Builder работает практически со всеми темами WordPress. Это позволяет вам использовать его с вашей текущей темой.

Beaver Builder поддерживает использование шорткодов и виджетов. Он также предлагает различные типы модулей, которые вы можете использовать для легкого стиля вашего сайта. См. Наше руководство о том, как создавать собственные макеты в WordPress для получения подробных инструкций.

Вы также можете использовать Beaver Builder для создания полностью настраиваемой темы WordPress без написания кода.

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

Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал на YouTube, чтобы получить больше видеоруководств по WordPress. Вы также можете подписаться на нас в щебет и фейсбук.


0 Comments

Добавить комментарий