Как создать пользовательскую боковую панель WordPress без кода

Опубликовано: 2022-02-02

Хотите узнать, как создать пользовательскую боковую панель WordPress без кода?

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

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

Почему вы должны добавить пользовательскую боковую панель WordPress

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

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

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

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

Как создать пользовательскую боковую панель WordPress без кода

Чтобы узнать, как добавить боковую панель в WordPress, просто выполните следующие действия:

  1. Установка SeedProd
  2. Выбор шаблона темы
  3. Настройка боковой панели WordPress
    • Добавление контактной формы на боковую панель
    • Добавление последних сообщений на боковую панель WordPress
    • Удаление элементов с боковой панели
  4. Сохранение изменений и публикация боковой панели

Давайте начнем.

1. Установка SeedProd

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

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

SeedProd License key

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

enter SeedProd license key

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

2. Выбор шаблона темы

В области администрирования WordPress нажмите SeedProd »Theme Builder.

Theme builder menu

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

Теперь нажмите оранжевую кнопку « Темы ».

SeedProd theme builder template

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

SeedProd themes

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

Theme parts

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

Используя кнопки-переключатели под заголовком « Опубликовано» , мы отключили другие части темы и оставили боковую панель в состоянии « ДА ».

Sidebar toggle button

Теперь мы готовы приступить к настройке боковой панели.

3. Настройка боковой панели WordPress

Чтобы начать настройку боковой панели WordPress, наведите курсор на параметр « Боковая панель » на панели инструментов конструктора тем SeedProd и нажмите « Редактировать дизайн».

Sidebar Edit design

Это откроет интерфейс конструктора тем. Боковая панель темы Starter имеет панель поиска, категории и значки социальных сетей, включенные по умолчанию.

Sidebar Builder

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

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

Добавление контактной формы на боковую панель

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

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

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

SeedProd contact form block

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

Мы собираемся использовать форму, которую мы уже создали с помощью WPForms, щелкнув раскрывающееся меню « Выбрать форму » и выбрав ее из списка.

Simple contact form

Вот так выглядит форма.

Sidebar form

Если вам нужно отредактировать форму, нажмите Редактировать выбранную форму. Это откроет конструктор WPForms в том же окне, и вы сможете внести нужные изменения, не покидая экран конструктора тем.

Edit selected form

Кроме того, вы можете настроить дизайн формы, перейдя на вкладку « Дополнительно ». Здесь SeedProd предоставляет параметры для изменения стиля, атрибутов, интервалов и видимости устройства для формы.

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

Advanced settings

Далее мы покажем вам, как добавить последние сообщения на боковую панель вашего блога.

Добавление последних сообщений на боковую панель WordPress

Еще раз используйте поле поиска на вкладке « Блоки » конструктора тем и введите «последние сообщения». Теперь перетащите блок «Последние сообщения» в область, в которой вы хотите его отобразить.

SeedProd recent posts block

Виджет « Недавние сообщения » автоматически заполняется по мере публикации новых сообщений в блоге на вашем веб-сайте.

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

SeedProd recent posts block settings

На нашем примере тестового сайта всего 3 сообщения. Но рекомендуется включать 5 последних сообщений для отображения на боковой панели.

Удаление элементов с боковой панели

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

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

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

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

Delete block

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

Delete confirmation

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

4. Сохранение изменений и публикация боковой панели

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

Save chanes

Теперь нажмите кнопку с крестиком, чтобы выйти из конструктора тем.

Enable seedprod theme

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

Sidebar added

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

Затем настройте поддомен электронной почты.

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

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

Готовы исправить свои электронные письма? Начните сегодня с лучшим SMTP-плагином WordPress. WP Mail SMTP Elite включает в себя полную настройку White Glove и предлагает 14-дневную гарантию возврата денег.

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