Хотите создать собственную тему WordPress с нуля?
В прошлом вы должны были следовать инструкциям WordPress и иметь приличные знания кодирования, чтобы создать собственную тему WordPress. Но благодаря новым генераторам тем WordPress вы теперь любой можете создать полностью настраиваемую тему WordPress в течение часа (знание кодирования не требуется).
В этой статье мы покажем вам, как легко создать собственную тему WordPress без знания кода.
Создание собственной темы WordPress для новичков
В отличие от статических сайтов HTML, темы WordPress представляют собой набор файлов в шаблонах, написанных на PHP, HTML, CSS и JavaScript. Как правило, вам нужно иметь приличное понимание всех этих языков веб-дизайна или нанять веб-разработчика для создания собственной темы WordPress.
Но если вы наняли разработчика или агентство, то стоимость настраиваемой темы WordPress может достигать несколько тысяч долларов.
Поскольку многие владельцы малого бизнеса не могут позволить себе высокую стоимость пользовательской темы WordPress, то просто соглашаются на установку темы по умолчанию, поставляемые с установщиком WordPress. Но прежде необходимо разобраться с доменным именем.
Те, кого не устраивал стандартный дизайн и настройки, либо использовали простой конструктор страниц WordPress , либо они использовали каркас известной темы для создания собственного представления.
Несмотря на то, что в последнее время фреймворки тем WordPress упростили создание дизайнерской темы WordPress, они приспособлены для разработчиков, а не рядовых владельцев сайта.
С другой стороны, плагины компоновщики страниц WordPress упрощали создание пользовательских макетов с помощью интерфейса перетаскивания, но они были ограничены только макетами. Вы не можете создавать по-настоящему собственные темы с ними.
Но сегодня, когда появился Beaver Builder — один из лучших плагинов WordPress для создания страниц — эту проблему легко решить с помощью его дополнения под названием Beaver Themer.
Beaver Themer — это надстройка для сайта, которая позволяет создавать собственные макеты тем с помощью интерфейса перетаскивания, без обучения программированию.
Давайте посмотрим, как использовать Beaver Themer для создания новой темы WordPress.
Настройка Beaver Themer для создания собственной темы
Beaver Themer — это дополнительный плагин для Beaver Builder , поэтому для этой статьи вам понадобятся оба плагина.
Для начала, вам нужно установить и активировать плагины Beaver Builder и Beaver Themer. Для получения более подробной информации.
Beaver Themer позволяет создавать собственные темы, но вам всё равно понадобится тема для начала. Мы рекомендуем использовать лёгкую тему, которая включает в себя полноразмерный шаблон страницы, чтобы выступить в качестве стартовой темы.
Вы можете найти много таких тем в каталоге тем WordPress. org. Большинство современных тем WordPress включают полноразмерный шаблон.
Наш выбор:
- Astra — бесплатная лёгкая универсальная тема WordPress, которая поставляется со встроенной поддержкой Beaver Builder.
- OeanWP — ещё одна популярная бесплатная многоцелевая тема WordPress, которая поставляется с полной поддержкой конструктора страниц.
- StudioPress темы — все их шаблоны совместимы с Beaver Builder и будут отлично работать с Beaver Themer.
Для этого урока мы будем использовать Astra , которая является лёгкой и простой в настройке темой WordPress.
Настройка темы для Beaver Themer
При создании пользовательской темы WordPress с помощью Beaver Themer важно убедиться, что Beaver Themer имеет доступ ко всему телу страницы (от края до края).
Возьмём макет Astra по умолчанию. Как вы можете видеть, этот макет включает в себя боковую панель, с которой может быть сложно работать при использовании Beaver Themer.
Вы можете изменить их, зайдя в админ-панель вашего сайта, а затем перейдите в раздел «Внешний вид» >> «Настройка страницы». Отсюда вам нужно переключиться на вкладку «Layout» >> «Sidebars».
Оказавшись там просто выберите «Нет боковой панели» под параметром макета по умолчанию и нажмите кнопку «Опубликовать», чтобы сохранить изменения.
Ваша тема теперь начнёт использовать макет без боковых панелей. Это лучший макет для использования с Beaver Themer.
Этот полный макет страницы позволяет Beaver Themer использовать каждый дюйм экрана, чтобы вы могли создавать прекрасные сквозные визуальные возможности.
Большинство тем WordPress включают файл шаблона для полноразмерных страниц. Если вы используете какую-то другую тему, то вы можете найти возможность удалить боковые панели в настройках вашей темы.
Если вы не можете найти его, обратитесь к разработчику вашей темы, и он может помочь вам это сделать.
После того как вы настроили свою тему на полноэкранный макет, вы уже готовы создать собственную тему WordPress с помощью Beaver Themer.
Быстрый старт с Beaver Themer
Beaver Themer работает совместно с Beaver Builder. Как плагин для конструктора страниц, Beaver Builder позволяет перетаскивать элементы на страницу для создания пользовательских макетов.
Он имеет следующие элементы, которые вы можете использовать в ваших макетах:
- Шаблон: коллекция строк столбцов и модулей, составляющих весь макет страницы.
- Столбцы: модули вертикальной разметки, которые помогают выровнять содержимое по горизонтали.
- Ряды: горизонтальная коллекция из нескольких модулей
- Модуль: элемент, который выводит определённую информацию, такую как заголовок, текстовый блок, таблица, галерея и т. Д.
Просто отредактируйте страницу в Beaver Builder, а затем нажмите кнопку добавления в правом верхнем углу. Затем вы можете перетаскивать столбцы, строки, модули на свою страницу и сразу же редактировать их.
Если вы не хотите начинать с нуля, то выберите понравившейся шаблон из списка готовых.
Beaver Builder также позволяет сохранять макеты, а затем использовать их позже в качестве шаблонов.
Однако мы не просто хотим создавать макеты страниц. Мы хотим создать полную пользовательскую тему.
Beaver Themer добавляет ещё один элемент в Beaver Builder под названием «Themer Layout».
Тематические макеты позволяют создавать собственные макеты для верхнего и нижнего колонтитула, областей содержимого, страницы 404, а также других частей шаблона.
Это строительные блоки всех тем WordPress, с их помощью вы сможете создать собственную тему, соответствующую вашим потребностям.
Использование шаблонов Beaver Themer для создания собственной темы WordPress
В следующих инструкциях мы расскажем о шагах, необходимых для создания самых популярных пользовательских элементов темы. К тому времени, как закончите, вы трансформируете свою базовую тему в полностью настраиваемую дочернюю тему WordPress.
Создание пользовательского заголовка для вашей темы
Давайте начнём с области заголовка вашего сайта. Пользовательский заголовок является важным компонентом темы и его строительство может быть сложным, используя традиционные методы.
К счастью, в Beaver Themer встроены функции заголовков. Вы можете использовать предварительно созданный шаблон или использовать меню и модули изображений с макетом из двух столбцов.
Чтобы добраться до этой области заголовка, сначала нам нужно настроить макет заголовка в Beaver Themer. В плагине Beaver Builder необходимо «Добавить новую страницу и указать заголовок».
После этого выберите «Themer Layout» в качестве типа и «Header» в качестве параметра макета. Когда вы закончите, нажмите кнопку «Добавить макет», чтобы продолжить.
Это приведёт вас к странице настроек макета. Отсюда вам нужно выбрать «Весь сайт» в качестве места, где будет отображаться шаблон заголовка.
Затем нажмите кнопку «Запустить Beaver Builder», чтобы открыть интерфейс строителя.
Beaver Builder запустится с базовым одиночным столбцом и двухстрочным макетом заголовка в качестве отправной точки.
Можно использовать те же инструменты перетаскивания Beaver Builder, чтобы изменить фон, вид, цвета, текст и т. Д. Можете добавить другие модули, загрузить готовые шаблоны и добавить строки / столбцы, нажав кнопку добавления в правом верхнем углу.
Если вы удовлетворены дизайном, нажмите кнопку «Готово», чтобы сохранить или опубликовать макет.
Теперь посетите свой веб-сайт, чтобы увидеть заголовок темы в действии. Ознакомьтесь, как мы применили макет заголовка к нашей пользовательской теме.
Помимо заголовка, вы пока не будете показывать контент, и, скорее всего, увидите нижний колонтитул вашей базовой темы.
Давайте изменим это.
Создание пользовательского нижнего колонтитула для вашей темы
Вы можете создать нижний колонтитул для своей темы, как вам заблагорассудится, используя Beaver Themer, так же, как вы создали собственный заголовок.
Перейдите к Beaver Builder «Добавить новую страницу и укажите название для макета нижнего колонтитула. Затем выберите «Themer Layout» в качестве типа и «Footer» в качестве параметра макета.
Нажмите на кнопку «Добавить макет», чтобы продолжить.
Это приведёт вас к странице настроек макета. Отсюда вам нужно выбрать «Весь сайт» в качестве места, где будет отображаться шаблон.
После этого нажмите кнопку «Запустить Beaver Builder», чтобы открыть интерфейс строителя.
Beaver Builder запустится с макетом нижнего колонтитула, имея три столбца. Данный макет можно использовать в качестве отправной точки и начать редактирование.
Скорее всего, вам захочется добавить модули, текстовые блоки или что-либо ещё. У вас имеется возможность изменять цвета, шрифты, добавлять фоновое изображение и многое другое.
Если вы удовлетворены дизайном, нажмите кнопку «Готово», чтобы сохранить или опубликовать макет.
Создание области содержимого для почты и страниц
Теперь, когда мы создали верхние и нижние колонтитулы для каждой страницы веб-сайта, пришло время создать сообщение или тело страницы (область содержимого).
Мы начнём почти так же, как мы построили верхний и нижний колонтитулы, добавив макет «Singular» на странице «Добавить новую».
Далее, вы выберете место для отображения этого макета. Вы можете выбрать единственное число, чтобы использовать его для всех отдельных сообщений и страниц, или вы можете выбрать сообщения или только страницы.
После этого нажмите кнопку «Запустить Beaver Builder», чтобы открыть интерфейс строителя.
Beaver Builder загрузит образец единственного макета с заголовком поста / страницы вверху, а затем с контентом, полем bio автора и областью комментариев.
Вы можете указать и щёлкнуть, чтобы отредактировать любой из этих элементов или добавить новые модули, столбцы и строки по мере необходимости.
Когда вы будете довольны макетом, нажмите кнопку «Готово», чтобы сохранить и опубликовать изменения.
Теперь вы можете посетить свой веб-сайт, чтобы увидеть его в действии.
Конструирование макетов архива для вашей пользовательской темы
Теперь, когда ваша собираемая тема начала развиваться, вы можете перейти к созданию макетов для других частей вашего сайта.
Страницы архивов WordPress должны как минимум отображать категории, теги и авторов. Также не стоит забывать об оптимизации SEO сайта.
Давайте создадим макет для страниц архива в вашей пользовательской теме.
Вы начнёте с посещения Beaver Builder «Добавить новую страницу и предоставления названия для своего макета архива.
После этого выберите «Themer Layout» в качестве типа и «Archive» в качестве параметра макета. Нажмите на кнопку «Добавить макет», чтобы продолжить.
Это приведёт вас к странице настроек макета. Отсюда вам нужно выбрать «Весь архив» в качестве местоположения, в котором будет отображаться шаблон. Вы также можете создавать отдельные макеты для каждого отдельного типа архива, например даты, результатов поиска, категории, тегов и т. Д.
После этого нажмите кнопку «Запустить Beaver Builder», чтобы открыть интерфейс строителя.
Beaver Builder запустится с базовой вёрсткой архива с одним столбцом. Вверху будет отображаться заголовок архива, за которым следуют посты.
Укажите и щёлкните любой элемент, чтобы изменить его свойства. Имеется возможность добавлять новые модули, строки и столбцы по мере необходимости.
Нажимаем кнопку «Готово», чтобы сохранить и опубликовать свои изменения.
Создание макетов дополнительных страниц вашей темы WordPress
Beaver Themer также даёт возможность создавать макеты страниц в иерархии шаблонов, например, страницы 404, частей шаблона, страницы результатов поиска и т. Д.
Используя встроенную функциональность перетаскивания в Beaver Builder, вы можете легко создавать собственные темы WordPress с нуля, даже не зная кода. Это действительно самый удобный для начинающих метод разработки тем WordPress. Отдельное спасибо за помощь в разработке материала wpbeginner.com.
Мы надеемся, что эта статья помогла вам научиться создавать собственные темы WordPress без обучения программированию.
