Як додати вкладки до публікацій та сторінок WordPress

Як додати вкладки до публікацій та сторінок WordPress

Вкладки – досить поширена функція на багатьох веб-сайтах, особливо в магазинах електронної комерції. Власники магазинів електронної комерції зазвичай використовують вкладки в області опису продукту, де вони розділяють огляди, опис, технічні характеристики тощо на кілька вкладок.


приклад вкладок, що діють на веб-сайті електронної комерції

Тим не менш, вкладки знайшли застосування на багатьох інших веб-сайтах різних типів, а не лише на веб-сайтах електронної комерції. Навіть на офіційному веб-сайті WordPress.org використовуються вкладки на сторінках з описом плагінів. Дивіться зображення нижче, щоб побачити виділені вкладки на WP.org.

вкладки на сторінці опису плагіна WordPress.org

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

гармошки на vistamedia.xyz

Але гармошки осторонь, ми тут, щоб поговорити вкладки, тож не втрачайте своєї уваги; Мені просто потрібно було зробити чітке розмежування між вкладками та гармошками. Тепер я сподіваюся, що ми на одній сторінці ��

По суті, власники веб-сайтів використовують вкладки для поділу інформації, яка б інакше займала повну сторінку або публікацію. Це означає, що вкладки полегшують засвоювання інформації, не обов’язково примушуючи користувачів потрапляти на колесо прокрутки мільйон разів.

Іншими словами, вкладки покращують зручність використання вашого веб-сайту, особливо у світі коротші проміжки уваги. Тож, якщо ви хочете довше зберігати користувачів на своєму веб-сайті, не нудьгуючи з ними довгими сторінками, варто подумати про використання вкладок.

У сьогоднішньому дописі ми покажемо вам, як саме додати вкладки до своїх публікацій та сторінок WordPress. До кінця цієї публікації ви матимете всі вказівки, необхідні для використання вкладок на вашу користь. Ми сподіваємося, що вам сподобається до самого кінця. Будь ласка, не залишайте, не ділившись своїми думками у розділі коментарів. Це з дороги, почнемо.

Використовуйте програму Page Builder

Якщо у вас вже встановлений конструктор сторінок, вам пощастило – у вас, ймовірно, вже є модуль вкладок на кінчиках пальців. Більшість основних розробників сторінок пропонують вкладки як частину основного набору елементів для створення сторінок. Ось короткий огляд двох наших улюблених.

Безкоштовний конструктор сторінок

Вкладки конструктора сторінок елемента

Інформація та DownloadView Демо

Популярний конструктор сторінок Elementor включає вкладки як частину безкоштовної версії плагіна. Все, що вам потрібно зробити – це вставити елемент вкладки на свою сторінку, а потім відредагувати заголовок, вміст, стиль тощо. Це все!

WPBakery Premium Page Builder

Вкладки Builder сторінки WPBakery

Використовуючи преміальну тему, яка включає в себе програму WPBakery Page Builder (наприклад, нашу власну тему Total)? Чудово! Вкладки вбудовані та прості у використанні.

Модуль вкладки WPBakery трохи відрізняється від попереднього прикладу, оскільки вкладки спочатку порожні, коли ви додаєте їх. Вам потрібно буде вставити додаткові елементи сторінки (текстову область, зображення, піктограми тощо) на вкладки, щоб додати вміст. Але це дає тону свободи для створення вкладок так, як ви хочете (крім вбудованих варіантів стилізації). Ми розробляли цю сторінку в блозі раніше, тому якщо ви хочете більш детальні інструкції, перегляньте наш посібник з WPBakery (зверніть увагу – цей плагін раніше називався Visual Composer, тому заздалегідь вибачте за будь-яку плутанину).

Встановіть плагін WordPress

Вкладки Безкоштовний плагін WordPress

Якщо ви не використовуєте конструктор сторінок, не потрібно використовувати його лише для вкладок. Існує маса чудових альтернатив, як-от безкоштовний плагін WordPress, відомий просто як Tabs від WP Shop Mart. Tabs – це чудовий плагін WordPress, який допоможе вам створити необмежену кількість прекрасних вкладок, не порушуючи поту..

Почнемо з установки плагіна Tabs WordPress. Оскільки він доступний в офіційному репо-плагіні WordPress, ви можете встановити плагін безпосередньо з панелі керування WordPress адміністратора.

Ми використовуємо безкоштовну версію, але доступна преміальна версія, якщо ви хочете згодом оновити додаткові функції.

Встановлення плагінів WordPress

Увійдіть на інформаційну панель адміністратора WordPress та перейдіть на сторінку Плагіни> Додати нове і введіть “вкладки wpshopmart” у поле пошуку за ключовими словами. Як тільки ви знайдете потрібний плагін, натисніть на Встановити зараз кнопку, як показано нижче.

встановлення плагіна WordPress

Після цього натисніть кнопку Активуйте кнопка. І це все, ваш плагін WordPress у відповіді на Tabs готовий до використання. Тепер давайте створимо пару вкладок, щоб дізнатися, що може запропонувати цей плагін.

Налаштуйте плагін WordPress на вкладках

Активація плагіна додасть новий елемент у ваше адміністраторське меню WordPress. Щоб створити нові вкладки, перейдіть до Вкладки чуйні> Додати нові вкладки як ми детально описуємо в скрінграбі нижче.

додавання нових вкладок, використовуючи плагін WordPress плагін

Це призведе вас до Tabs Respovable Builder, який є повною кількістю всіх функцій, необхідних для створення гарних вкладок, як бос. Дивіться зображення нижче, щоб побачити, що очікувати.

вкладки чуйний WordPress плагін конструктор

Цілком сувій не так? Ну, ви можете знайти більшість функцій на правій бічній панелі. Зауважте також, що окремі вкладки мають свої налаштування. Ви навіть можете використовувати редактори WYSIWYG на вкладках, це означає, що ви маєте достатній контроль над своїми вкладками.

Тепер давайте створимо пару зразків вкладок і відобразимо їх на сторінці чи публікації.

Додайте заголовок

додати заголовок вкладок

Почніть з надання вкладкам описової назви (як і у меню навігації), як показано на зображенні вище. Таким чином, ви можете легко визначити свої вкладки на інформаційній панелі адміністратора WordPress пізніше, якщо вам потрібно буде що-небудь редагувати. Для цього навчального посібника я охрестив свої вкладки “Тестові вкладки додому”.

Виберіть шаблон дизайну вкладок

виберіть шаблон дизайну вкладок

Як показано на знімку екрана, наступний крок передбачає вибір шаблону дизайну, який ви хочете використовувати для своїх вкладок. Безкоштовна версія плагіна Tabs WordPress пропонує вам лише один шаблон дизайну, але ви завжди можете оновити до преміум-версії для Ще 19. Розмова про свободу дизайну.

Додати вкладки

Далі додайте стільки вкладок, скільки вам потрібно, як показано нижче.

додавання нових вкладок

Ми створили нумерований список із деталізацією того, що ви можете зробити на Додати вкладки розділ, показаний вище. Числа відповідають кожній області.

  1. Назва вкладки – Додайте назву вкладки в це поле, напр. Опис, технічні характеристики, деталі, тощо.
  2. Вкладка Опис – Додайте сюди опис вкладки. Це поле дозволяє додавати вміст вкладки. Найкраще – ви можете використовувати редактор WYSIWYG (показаний на номері 3 нижче), щоб додати багатий вміст у свої вкладки, включаючи зображення, музику та відео
  3. Використовуйте WYSIWYG – Якщо ви хочете скористатися знайомим Wшапка-Yун-Sее-Яс-Wшапка-Yун-Гта редактор, щоб створити вміст вкладки, сміливо натисніть цю кнопку, щоб запустити спливаюче вікно
  4. Піктограма вкладки – Це поле допоможе вам вибрати піктограму, яка буде використовуватися на вкладці. Плагін Tabs WordPress пропонує вам доступ до тонн значків шрифтів Awesome, щоб джазувати свої вкладки, як професіонали
  5. Відобразити над значком – Якщо ви хочете відобразити назву вкладки поряд із значком, вам сподобається ця функція. Крім того, це дозволяє відключити піктограму, не торкаючись заголовка вкладки
  6. Видалити – Натисніть цю кнопку, щоб видалити певну вкладку
  7. Додати нові вкладки – Натисніть на цю кнопку, щоб додати більше вкладок
  8. Видалити всі – Набридло всіх вкладок? Просто натисніть на Видалити всі кнопку, щоб скинути все

Кілька бонусних порад, які допоможуть вам допомогти. По-перше, ви можете перетягувати вкладки навколо, щоб впорядкувати та упорядкувати їх за бажанням.

Друге – не забудьте вдарити Зберегти чернетку натискайте кнопку один-два рази під час створення вкладок, щоб не втратити жодних змін у разі випадкового відходу від конструктора вкладок..

І нарешті – якщо вам потрібна підтримка, є великий синій Отримайте підтримку кнопку трохи нижче Додати вкладки розділ (і на більшості сторінок плагіна), який веде вас до офіційного форуму підтримки вкладок на WordPress.org. Не соромтеся натиснути кнопку підтримки, якщо вам потрібна допомога в будь-який час.

Короткі вкладки

вкладки короткий код

Потім ви знайдете короткий код Tabs, який використовуєте для додавання та відображення вкладок на будь-якій сторінці або публікації, яку ви бажаєте. Наприклад, наш короткий код – [TABS_R id = 443]. Щоб відобразити вкладки на сторінці, я просто скопіював би вкладений вище короткий код на цю конкретну сторінку.

Віджет Tabs

підтримка віджетів вкладок

Ви хочете додати свої вкладки у область віджетів на своєму веб-сайті? Якщо це чудово, так, вам сподобається підтримка віджетів, яка постачається із плагіном Tabs WordPress..

Удар Натисніть тут Посилання на зображенні вище перенесе вас на екран віджетів WordPress, де ви можете додавати свої вкладки будь-де, де у вашій темі є область віджетів..

віджет вкладок

Спеціальний CSS

У той час як плагін Tabs WordPress оснащений великою кількістю параметрів налаштування вкладок (просто погляньте на праву бічну панель; тут повно варіантів стилізації!), Ви можете додати свої власні стилі CSS, як показано нижче.

вкладки wordpress плагін користувальницький css

Крім того, ви можете встановити власні налаштування як налаштування за замовчуванням для всіх нових вкладок, просто натиснувши на Оновіть налаштування за замовчуванням кнопку, як показано на зображенні вище.

Права бічна панель

Параметри стилізації плагінів WordPress

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

  • Колір фону вкладки
  • Колір шрифту вкладки
  • Сім’я шрифту та стиль
  • Відображення параметрів заголовка та піктограми вкладки
  • Вирівнювання положення піктограми вкладки, тобто до або після заголовка вкладки
  • Вкладки кордонів
  • Кілька анімацій опису вкладок
  • І так багато іншого

Додайте свої вкладки на сторінку або публікацію WordPress

Додавши вміст та параметри стилю вкладки, прокрутіть вгору та натисніть на Опублікувати кнопку, як показано нижче.

На цьому етапі ваші вкладки готові. Вам просто потрібно додати вкладки на сторінку або публікацію WordPress. Просто скопіюйте короткий код вкладок, який ми бачили раніше. Наш – [TABS_R id = 443].

Запустіть редактор публікацій (навіть якщо ви використовуєте Гутенберг) та вставте короткий код у свою публікацію / сторінку. Після цього натисніть на Опублікувати кнопку, як показано нижче.

Приблизно через 5 хвилин налаштування речей; Я використовую тему «Двадцять сімнадцять» і багато Лорема Іпсума, я придумав наступний результат.

Зауважте, що я не налаштовував кольори чи щось інше. Скажи мені, що ти думаєш; було не так просто?


Додавання вкладок до ваших сторінок і публікацій WordPress є предметом четвертокласників. Я не сподіваюся, що у вас виникнуть проблеми, особливо якщо ви використовуєте плагін, такий як Tabs від WP Shop Mart.

Як ви додаєте вкладки на свої сторінки та публікації WordPress? Який ваш улюблений плагін WordPress плагін? Будь ласка, поділіться своїми думками в коментарях. Щасливе створення!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map