Как легко создать собственную тему WordPress за 5 шагов

Хотите создать собственную тему WordPress для своего веб-сайта малого бизнеса?

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

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

Зачем настраивать тему WordPress?

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

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

Как создать тему WordPress с нуля?

Большинство тем WordPress созданы с использованием языков программирования HTML, CSS, PHP и JavaScript. Изучение этих языков требует времени и обучения, что нереально для многих владельцев веб-сайтов.

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

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

Почему вы должны использовать SeedProd?

SeedProd — самый удобный плагин для создания сайтов для WordPress.

Он включает в себя широкие возможности настройки и предлагает широкий спектр функций, в том числе:

• Конструктор тем WordPress
• 170+ шаблонов целевых страниц
• Полные наборы тем WordPress
• Конструктор перетаскивания
• Интеграция с почтовым маркетингом
• Функциональность импорта/экспорта
• Управление подписчиками
• Скоро появится и режим обслуживания
• и многое другое.

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

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

Создание пользовательской темы WordPress с помощью SeedProd

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

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

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

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

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

Шаг 1. Установите и активируйте плагин SeedProd

Для первого шага вам необходимо установить и активировать плагин SeedProd на вашем сайте WordPress. Следуйте этому подробному руководству по установке плагина WordPress, если вам нужна помощь на этом этапе.

Вам нужно будет выбрать лицензию SeedProd Pro, чтобы разблокировать функцию Theme Builder. Это даст вам лицензионный ключ, который вы можете ввести на странице настроек плагина.

Чтобы найти лицензионный ключ, войдите в свою учетную запись SeedProd, щелкните вкладку « Загрузки », а затем щелкните значок копирования, чтобы сохранить ключ в буфер обмена.

После этого перейдите к своему администратору WordPress, перейдите в SeedProd »Настройки и вставьте ключ в поле «Лицензионный ключ». Затем нажмите кнопку « Подтвердить ключ », чтобы сохранить изменения.

Теперь перейдите на страницу SeedProd » Theme Builder , где SeedProd отобразит различные элементы вашей темы.

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

Каждая тема WordPress состоит из нескольких частей, называемых файлами шаблонов, в том числе:

• Заголовок
• Нижний колонтитул
• Один пост
• Одна страница
• Архив или страница блога
• Результаты поиска
• Глобальная часть

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

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

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

Шаг 2. Выберите шаблон темы WordPress

Чтобы просмотреть все шаблоны тем SeedProd, нажмите кнопку « Темы ».

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

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

Как только вы щелкнете, чтобы импортировать шаблон темы, SeedProd автоматически сгенерирует части темы.

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

Вы также можете изменить условия каждой части, щелкнув ссылку «Изменить условия».

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

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

Шаг 3. Настройте свои части темы

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

Для этого руководства мы настроим части «Заголовок», «Нижний колонтитул», «Главная страница» и «Блог». Настройка других частей темы выполняется по тем же принципам.

Настройка верхнего и нижнего колонтитула WordPress

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

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

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

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

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

Затем щелкните блок меню в предварительном просмотре в реальном времени, чтобы настроить меню навигации. SeedProd по умолчанию использует блок Nav Menu для этого раздела, который имеет 2 различных пункта меню:

• Просто: добавляйте ссылки меню по отдельности в интерфейс конструктора
• Меню WordPress : используйте родное меню WordPress, чтобы показать свою навигацию.

После выбора типа меню вы можете щелкнуть вкладку « Дополнительно » и изменить цвета ссылок меню, типографику, стили и многое другое.

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

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

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

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

Используемый нами шаблон включает следующие разделы домашней страницы:

• Герой
• Функции
• Отзывы
• Часто задаваемые вопросы

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

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

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

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

Когда вы будете довольны дизайном своей домашней страницы, сохраните изменения и вернитесь на панель инструментов конструктора тем SeedProd.

Стилизация пользовательской страницы блога

Следующая часть темы, которую мы настроим, — это страница блога. На панели инструментов конструктора тем найдите заголовок « Блог», «Индекс», «Архивы», «Поиск » и щелкните ссылку « Редактировать дизайн» .

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

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

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

После настройки страницы блога нажмите кнопку « Сохранить » и вернитесь на панель инструментов конструктора тем.

Определение ваших глобальных настроек

Последняя часть шаблона, которую мы рассмотрим, управляет глобальными настройками стиля для кнопок вашей темы, цветов, типографики и макета. Найдите часть Global CSS и щелкните ссылку Edit Design , чтобы открыть настройки.

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

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

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

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

Шаг 4. Подключите службу почтового маркетинга

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

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

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

Шаг 5. Опубликуйте свою собственную тему WordPress

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

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

Вот оно!

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

Знаете ли вы, что SeedProd также включает в себя блок RafflePress? Добавление бесплатных раздач RafflePress в любом месте вашего пользовательского дизайна темы позволяет очень легко увеличить трафик, количество потенциальных клиентов и подписчиков в социальных сетях.

Готовы погрузиться?

Начните работу с SeedProd здесь и получите свою копию RafflePress здесь.

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков RafflePress. Вы также можете найти нас в Twitter и Facebook.