Відкрити меню

Як зробити таби (вкладки) в сайдбарі блогу без плагінів

Доброго дня, шановні друзі! Сьогодні ми з Вами зробимо дуже корисну та дієву річ для нашого блогу – це таби (вкладки) в сайдбарі без використання плагінів. Таку штуку я давно планував зробити, але всі способи реалізації, які я знаходив, мене не влаштовували з однієї причини – це використання плагінів. Цих додатків у мене на блозі вже і так достатньо, тому я засів за код і пошук з питанням: “Як ці таби зробити без жодного плагіна”.

Таби в сайдбарі

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

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

Отже – перейдемо безпосередньо до реалізації.

Перше, що нам необхідно зробити, це забезпечити можливість виводу php у віджетах блогу.

Якщо Ви надумаєте виводити вкладки за допомогою звичайних текстових віджетів – то таку процедуру зробити необхідно. Для цього в файл функцій теми functions.php, після тегу <?php, пишемо наступне:

Дозвіл на вивід php у віджетах

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

В файлі header.php між тегами <head></head> прописуєте наступний код

Повторю – робите це тільки тоді, якщо у Вас не підключена ця бібліотека.

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

і збережемо його. Після цього просто розширення .txt змінюємо на розширення .js

Завантажуємо цей файл за допомогою FTP-клієнта на свій блог (я завантажив прямо в корінь блогу) і в файлі header.php між тегами <head></head> підключаємо його – прописуємо код

Підключаємо скрипт табів

Третє, виводимо таби в сайдбарі нашого блогу. Переходимо у Віджети, беремо звичайний текстовий віджет (я вставляв таби прямо в код – тут як бажаєте) і прописуємо туди функцію виводу вкладок:

В прикладі виводиться 3 вкладки. Якщо Ви бажаєте – можете змінити це значення. <li>Третій таб</li> – додаєте таким чином четвертий, п’ятий, шостий і не забуваєте додавати також вміст <div class=”box”>Вміст третього табу</div>.

Або прибрати зайвий таб – тут я думаю проблем не буде, видаляємо контейнер вмісту <div class=”box”>Вміст третього табу</div> і його заголовок <li>Третій таб</li>.

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

Четверте, прописуємо стилі табів.

В файлі стилів style.css (style.php) пишемо стиль:

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

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

Особисто я виводив в табах віджети груп в соціальних мережах – приклад роботи в сайдбарі блогу.

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

Шануйтеся!

P.S. Приєднуйтесь до групи блогу на Однокласниках та Facebook.

Нічого цікавогоТак собіНормальноДобреЧудово (Немає рейтингу)
Loading...
Обговорення: 10 коментарів
  1. Олександр сказав:

    Вов!!! Дуже корисна інформація! Обв’зково використаю. Дякую!

    Відповіcти
    1. Олег Волощук сказав:

      Користуйся 😉

      Відповіcти
  2. Pavlofox сказав:

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

    Відповіcти
    1. Олег Волощук сказав:

      Ну тим пощастило)). В мене от не було, а плагін ставити не хотілось, а так все просто та легко 😉

      Відповіcти
  3. Думаю пізніше пригодиться. Буду знати де знайти інструкцію 🙂

    Відповіcти
  4. Sergiy сказав:

    Усе роблю як написано, не виходить зробити таби(
    Після того як додаю код в functions.php сайт перестає працювати.

    Відповіcти
  5. Sergiy сказав:

    UP: Виявилось що у мене в темі вже реалізовані вкладки дещо по іншому. Лишилось розібратись з їх стилем.

    Відповіcти
    1. Олег Волощук сказав:

      Видно функції вбудованих табів конфліктували з новими, тому і не виходило нічого.

      Відповіcти
  6. Підкажіть люди добрі, чи можна зробити таби без плагіна на статичній сторінці, а не в сайдбарі?

    Відповіcти
    1. Олег Волощук сказав:

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

      Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google