Как легко создать пользовательскую тему WordPress (без кода)

Вы хотите создать собственную тему WordPress с нуля??


В прошлом вы должны были следовать кодексу 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 Builder лучший плагин для WordPress

Beaver Themer – это надстройка для сайта, которая позволяет создавать собственные макеты тем с помощью интерфейса перетаскивания и без обучения программированию.

Давайте посмотрим, как использовать Beaver Themer для простого создания темы WordPress..

Видеоурок

Подписаться на WPBeginner

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

Настройка Beaver Themer для создания собственной темы

Beaver Themer – это дополнительный плагин для Beaver Builder, поэтому для этой статьи вам понадобятся оба плагина..

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

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.

Макет темы по умолчанию с боковой панелью

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

Отключение боковых панелей в вашей теме

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

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

Макет темы без боковых панелей

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

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

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

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

Quick Beaver Themer Основы

Beaver Themer работает над Beaver Builder. Как плагин для конструктора страниц, Beaver Builder позволяет перетаскивать элементы на страницу для создания пользовательских макетов..

Он имеет следующие элементы, которые вы можете использовать в ваших макетах:

  • Шаблон: коллекция строк столбцов и модулей, составляющих весь макет страницы..
  • Столбцы: модули вертикальной разметки, которые помогают выровнять содержимое по горизонтали.
  • Ряды: горизонтальная коллекция из нескольких модулей
  • Модуль: элемент, который выводит определенную информацию, такую ​​как заголовок, текстовый блок, таблица, галерея и т. Д..

Просто отредактируйте страницу в Beaver Builder и затем нажмите кнопку добавления в верхнем правом углу. Затем вы можете перетаскивать столбцы, строки, модули на свою страницу и сразу же редактировать их..

Использование Beaver Builder

Если вы не хотите начинать с нуля, выберите из списка готовых шаблонов, чтобы начать с.

Шаблоны Beaver Builder

Beaver Builder также позволяет сохранять макеты, а затем использовать их позже в качестве шаблонов..

Чтобы узнать больше, смотрите нашу статью о том, как создать пользовательский макет страницы с помощью Beaver Builder..

Однако мы не просто хотим создавать макеты страниц. Мы хотим создать полную пользовательскую тему.

Это когда Бивер Темер приходит.

Он добавляет еще один элемент в Beaver Builder под названием «Themer Layout».

Themer Layout

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

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

Использование шаблонов Beaver Themer для создания собственной темы WordPress

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

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

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

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

Чтобы добраться до этой области заголовка, сначала нам нужно настроить макет заголовка в Beaver Themer. Посещение Beaver Builder »Добавить новый страницы и укажите заголовок заголовка.

Создание собственного макета заголовка

После этого выберите «Themer Layout» в качестве типа и «Header» в качестве параметра макета. Когда вы закончите, нажмите кнопку «Добавить макет», чтобы продолжить.

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

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

Затем нажмите кнопку «Launch Beaver Builder», чтобы открыть интерфейс Builder..

Beaver Builder запустится с базовым одиночным столбцом и двухстрочным макетом заголовка в качестве отправной точки.

Макет заголовка

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

Если вы удовлетворены дизайном, нажмите кнопку «Готово», чтобы сохранить или опубликовать макет..

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

Пользовательский заголовок в вашей пользовательской теме

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

Давайте изменим это.

Создание пользовательского нижнего колонтитула для вашей темы

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

Направляйтесь к Beaver Builder »Добавить новый страницы и укажите название для макета нижнего колонтитула. Затем выберите «Themer Layout» в качестве типа и «Footer» в качестве параметра макета.

Макет нижнего колонтитула

Нажмите на кнопку «Добавить макет», чтобы продолжить.

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

Настройки макета нижнего колонтитула

После этого нажмите кнопку «Launch Beaver Builder», чтобы открыть интерфейс Builder..

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

Редактирование макета нижнего колонтитула

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

Если вы удовлетворены дизайном, нажмите кнопку «Готово», чтобы сохранить или опубликовать макет..

Создание области содержимого для почты и страниц

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

Мы начнем почти так же, как мы создали верхний и нижний колонтитулы, добавив макет «Singular» на странице «Добавить новую».

Создание постов и макетов страниц

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

Особые настройки макета

После этого нажмите кнопку «Launch Beaver Builder», чтобы открыть интерфейс Builder..

Редактирование единственного макета

Beaver Builder загрузит образец единственного макета с заголовком поста / страницы вверху, за которым следуют контент, био-окно автора и область комментариев..

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

Если вы довольны макетом, нажмите кнопку «Готово», чтобы сохранить и опубликовать изменения..

Теперь вы можете посетить свой веб-сайт, чтобы увидеть его в действии.

Макет темы с контентом

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

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

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

Вы начнете с посещения Beaver Builder »Добавить новый страница и предоставление заголовка для вашего макета архива.

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

После этого выберите «Themer Layout» в качестве типа и «Archive» в качестве параметра макета. Нажмите кнопку «Добавить макет», чтобы продолжить.

Это приведет вас к странице настроек макета. Отсюда вам нужно выбрать «All Archive» в качестве местоположения, в котором будет отображаться шаблон. Вы также можете создавать отдельные макеты для каждого отдельного типа архива, например, даты, результатов поиска, категории, тегов и т. Д..

Настройки макета архива

После этого нажмите кнопку «Launch Beaver Builder», чтобы открыть интерфейс Builder..

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

Редактирование макетов архивов для вашей темы

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

После этого нажмите кнопку «Готово», чтобы сохранить и опубликовать изменения..

Создание других макетов для вашей темы WordPress

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me