Хотите создать собственную тему 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 – это плагин для создания сайтов, который позволяет вам создавать собственные макеты, используя интерфейс перетаскивания без необходимости изучать кодирование.
Давайте посмотрим, как легко создать тему WordPress с помощью Beaver Themer.
Видеоурок
Подписаться на 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.
Для этого урока мы использовали легкую и легко настраиваемую тему WordPress Astra.
Настройте свою тему для Beaver Themer
При создании пользовательской темы WordPress с помощью Beaver Themer важно обеспечить, чтобы Beaver Themer имел доступ ко всему телу страницы (от края до края).
Это стандартный дизайн Astra. Как видите, этот дизайн включает в себя боковую панель, с которой может быть сложно работать при использовании Beaver Themer.
Вы можете изменить это, зайдя в админ-панель вашего сайта, а затем просматривая Внешний вид »Настройка Боковой. Отсюда вы должны изменить Дизайн »боковые панели Я весил.
Просто выберите «Нет панели» в параметре макета по умолчанию и нажмите кнопку «Опубликовать», чтобы сохранить изменения.
Ваша тема теперь использует дизайн без боковых панелей. Это лучший дизайн для Beaver Themer.
Этот полный макет страницы позволяет Beaver Themer использовать каждый дюйм экрана, чтобы вы могли создавать прекрасные сквозные визуальные впечатления.
Большинство тем WordPress содержат шаблон страницы полной ширины. Если вы используете другую тему, вы найдете возможность удалить боковые панели в настройках темы.
Если вы не можете найти его, обратитесь за помощью к разработчику вашей темы.
После того, как вы настроили свою тему в полноэкранном макете, вы можете использовать Beaver Themer для создания собственной темы WordPress.
Основы быстрого бобра Themer
Beaver Themer сотрудничает с Beaver Builder. С Beaver Builder, как надстройка к конструктору страниц, вы можете перетаскивать элементы на страницу для создания пользовательских макетов.
Он содержит следующие элементы, которые вы можете использовать в своих проектах:
- Шаблон – коллекция столбцов, строк и модулей, составляющих полный макет страницы.
- Столбцы – модули вертикальной разметки, позволяющие разместить содержимое по горизонтали.
- Линии: горизонтальная сборка из нескольких модулей.
- Модуль: элемент, который генерирует определенную информацию, такую как заголовок, текстовый блок, таблица, галерея и т. Д.
Просто отредактируйте страницу в Beaver Builder и нажмите кнопку «Добавить» в правом верхнем углу. Затем вы можете перетаскивать столбцы, строки и модули на своей странице и сразу же начать редактирование.
Если вы не хотите начинать с нуля, сначала выберите список готовых шаблонов.
Beaver Builder также позволяет сохранять ваши проекты и использовать их позже в качестве шаблонов.
Для получения дополнительной информации см. Нашу статью о том, как создать пользовательский макет страницы с помощью Beaver Builder.
Однако мы не просто хотим создавать макеты страниц. Мы хотим создать полностью персонализированную тему.
Это когда Бивер Темер прибывает.
Добавьте еще один элемент в Beaver Builder, который называется «Themer Layout».
Тематические макеты позволяют создавать собственные макеты для верхнего, нижнего колонтитула, содержимого, страницы 404 и других разделов шаблона.
Это строительные блоки всех тем WordPress. Вы можете использовать эти строительные блоки для создания собственной темы, которая соответствует вашим потребностям.
Используйте шаблоны Beaver Themer для создания собственной темы WordPress
В приведенных ниже инструкциях мы расскажем о шагах, необходимых для создания наиболее популярных пользовательских элементов темы. Сделав это, вы полностью преобразовали свою основную тему в полностью настроенную дочернюю тему WordPress.
Создайте собственный заголовок для вашей темы
Начнем с названия вашего сайта. Пользовательский заголовок является неотъемлемой частью темы, и может быть сложно создать заголовок с использованием традиционных методов.
К счастью, Beaver Themer имеет встроенные функции заголовка. Вы можете использовать ранее обученный шаблон или использовать модули меню и изображения с двумя колонками.
Чтобы добраться до этой области заголовка, вы должны сначала настроить макет заголовка в Beaver Themer. визит Beaver Builder »Добавить новый Страница и введите заголовок для вашего заголовка.
Затем выберите «Дизайн Themer» в качестве типа и «Заголовок» в качестве варианта дизайна. Когда закончите, нажмите кнопку «Добавить тему», чтобы продолжить.
Это приведет вас к странице конфигурации макета. Отсюда выберите «Полный сайт» в качестве местоположения шаблона заголовка.
Затем нажмите кнопку «Start Beaver Builder», чтобы открыть интерфейс генератора.
Beaver Builder начинается с простого базового столбца и двухстрочного макета заголовка в качестве отправной точки.
Вы можете использовать те же инструменты перетаскивания в Beaver Builder, чтобы изменить фон, цвета, текст и т. Д. Вы также можете добавить другие модули, загрузить готовые шаблоны и добавить строки / столбцы, нажав кнопку «Добавить» в правом верхнем углу.
Когда вы будете удовлетворены дизайном, нажмите кнопку «Готово», чтобы сохранить или опубликовать свой дизайн.
Теперь вы можете посетить их сайт, чтобы увидеть название вашей пользовательской темы в действии. Как видите, мы применяем макет заголовка к нашей пользовательской теме.
Контента, кроме заголовка, пока нет, и вы, вероятно, увидите область нижнего колонтитула базовой темы.
Давайте изменим это.
Создайте собственный нижний колонтитул для вашей темы
Вы можете использовать Beaver Themer для создания пользовательского нижнего колонтитула для вашей темы, так же, как вы создали собственный заголовок.
Перейти к Beaver Builder »Добавить новый Страница и введите заголовок для макета нижнего колонтитула. Затем выберите «Layout Themer» в качестве типа и «Нижний колонтитул» в качестве параметра макета.
Нажмите кнопку «Добавить Themer Design», чтобы продолжить.
Это приведет вас к странице конфигурации макета. Отсюда выберите «Полная страница» в качестве расположения шаблона.
Затем нажмите кнопку «Start Beaver Builder», чтобы открыть интерфейс генератора.
Beaver Builder начинается с нижнего колонтитула с тремя столбцами. Вы можете использовать этот дизайн в качестве отправной точки и начать редактирование.
Вы можете добавить модули, текстовые блоки или все, что вы хотите. Вы можете изменить цвета, шрифты, добавить фоновое изображение и многое другое в любое время.
Когда вы будете удовлетворены дизайном, нажмите кнопку «Готово», чтобы сохранить или опубликовать свой дизайн.
Создать область контента для постов и страниц
После того как мы создали верхние и нижние колонтитулы для каждой страницы и содержимого на сайте, пришло время создать сообщение или тело на странице (область содержимого).
Мы начинаем так же, как создаем верхний и нижний колонтитулы и добавляем макет Singular для добавления новой страницы.
Затем выберите, где этот дизайн должен появиться. Вы можете выбрать единственное для всех сообщений и отдельных страниц, или выбрать сообщения или только страницы.
Затем нажмите кнопку «Start Beaver Builder», чтобы открыть интерфейс генератора.
Beaver Builder загружает уникальный образец макета с заголовком предыдущей статьи / страницы, за которым следуют контент, биобокс автора и область комментариев.
Вы можете указать и щелкнуть, чтобы отредактировать один из этих элементов или добавить новые модули, столбцы и строки по мере необходимости.
Когда вы будете удовлетворены дизайном, нажмите кнопку «Готово», чтобы сохранить и опубликовать свои изменения.
Теперь вы можете посетить их сайт, чтобы увидеть их в действии.
Создайте макеты файлов для вашей пользовательской темы
После того, как ваша пользовательская тема сформирована, вы все равно можете создавать макеты для других частей вашего сайта. WordPress перечисляет свои категории, теги, авторов и ежемесячные файлы на страницах архива.
Давайте создадим макет страницы архива для вашей пользовательской темы.
Вы начинаете с посещения Beaver Builder »Добавить новый Страница и введите название для вашего дизайна файла.
Затем выберите «Layout Themer» в качестве типа и «File» в качестве параметра макета. Нажмите кнопку «Добавить Themer Design», чтобы продолжить.
Это приведет вас к странице конфигурации макета. Отсюда выберите «Все файлы» в качестве местоположения шаблона. Вы также можете создавать отдельные макеты для каждого типа файла, например. Дата, результаты поиска, категория, теги и т. Д.
Затем нажмите кнопку «Start Beaver Builder», чтобы открыть интерфейс генератора.
Beaver Builder начинается с простого расположения столбцов. Заголовок файла появляется вверху, за которым следуют представления.
Вы можете указать и щелкнуть любой элемент, чтобы изменить его свойства. Вы также можете добавить новые модули, строки и столбцы, если это необходимо.
Затем нажмите кнопку «Готово», чтобы сохранить и опубликовать изменения.
Создавайте другие дизайны для вашей пользовательской темы WordPress
С Beaver Themer вы также можете создавать макеты для других страниц в иерархии шаблонов, например. Б. 404 страницы, части шаблона, страница результатов поиска и многое другое.
С помощью встроенной функции перетаскивания в Beaver Builder вы можете легко создавать свой собственный макет WordPress с нуля без написания кода. Это действительно самый удобный для начинающих способ разработки тем WordPress.
Мы надеемся, что эта статья помогла вам научиться создавать собственные темы WordPress, не разбираясь в коде. Вы также можете прочитать наше руководство о том, как ускорить работу вашего сайта WordPress для улучшения работы пользователей и SEO.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube смотреть обучающие видео по WordPress. Вы также можете найти нас на Twitter и Facebook,
Add comment