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

Дата: 4 листопада 2013 Рубрика: Технічні поради по WP Коментарі: 5 коментарів

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

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

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

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

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

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

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

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

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

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

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

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

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

В прикладі виводиться 3 вкладки. Якщо Ви бажаєте — можете змінити це значення.

  • Третій таб
  •  — додаєте таким чином четвертий, п'ятий, шостий і не забуваєте додавати також вміст
    Вміст третього табу
    .

    Або прибрати зайвий таб — тут я думаю проблем не буде, видаляємо контейнер вмісту div class="box">Вміст третього табу

    і його заголовок
  • Третій таб
  • .

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

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

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

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

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

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

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

    Шануйтеся!

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


    З повагою, Олег Волощук.

    Бажаєте мати свій власний блог на WordPress?

    Отримайте АБСОЛЮТНО БЕЗКОШТОВНО детальний відеокурс і вперед!

    Ваш E-Mail 100% в безпеці!

     

    У цій же рубриці:

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

    1. Олександр коментує:

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

      Відповіcти
      • Олег Волощук коментує:

        Користуйся ;-)

        Відповіcти
    2. Pavlofox коментує:

      Прикольно! Дійсно може зберегти площу двоколонкової теми.

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

      Відповіcти
      • Олег Волощук коментує:

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

        Відповіcти
    3. Віктор Хільчук коментує:

      Думаю пізніше пригодиться. Буду знати де знайти інструкцію :-)

      Відповіcти

    Залишити свій коментар

    ;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

    Google + фейсбук Вконтакті Twitter RSS
    Категорії
    Останні коментарі
    Канал на YouTube
    Соціальні спільноти
    Кращі коментатори
    Ігор(3)
    Вітьок(1)
    Іван(1)
    Олена(1)
    Олександ.(1)
    запитів / генер. стор. / спож. пам'яті
    54 / 0.509 / 59.42mb
    Вгору