Что такое табы и как создать табы для переключения

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

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

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

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

Не большая вырезка. Сегодня утром зашел на свою почту, там было письмо от А. Борисова, где стояла ссылка совсем не на его блог, а на ресурс, которому он дал интервью. Знаете, что за интервью? Если Вы подписаны на его рассылку, то по любому знаете. Он рассказал о своем питании, о том, что он Сыроед, представляете?

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

ЧТО ТАКОЕ ТАБЫ?

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

Нажимая на кнопки «Обучение_1, обучение_2, обучение_3», будут меняться темы, а сними ссылки и картинки к статьям без перезагрузки страницы. Эта функция стоит на каждой записи и  странице. Короче эта штука есть на всем блоге.

Табы на блоге

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

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

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

КАК СОЗДАТЬ ТАБЫ?

Думаю, Вы уже определились, что поставите в tabi, где они будут стоять. Подумайте, нужны ли они Вам вообще! Ну что поехали?

Как создать табы

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

  1. Sidebar.php
  2. Footer.php
  3. Style.css

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

Начнем. Запустите FTP клиент. Зайдите в корень блога. Туда где лежат все файлы и папки движка, следуйте по такому пути:

wp-content/themes/ название шаблона вашей темы/

 

После того, как зашли, найдите файл sidebar.php. Это то место, в котором мы создадим функцию переключения элементов, без перезагрузки. Открыли? Теперь даю код, который когда-то нашел в интернете и почистил его от всего лишнего. Ну не буду страдать копирастией, дам ссылку на его скачивание. Скачайте, нажав здесь. Возьмите скачанный код, вставьте его в то место, где хотели бы видеть табы.

Измените не много эту часть:

<li class="popular"><a href="#tab-pop" class="selected" onclick="click(); return false;">Обучение_1</a></li>

<li class="latest"><a href="#tab-latest" onclick="click(); return false;">Обучение_2</a></li>

<li class="comments"><a href="#tab-comm" onclick="click(); return false;">Обучение_3</a></li>

Отвечает за название кнопок и их переключение. Там нужно поменять только мои названия «Обучение_1, обучение_2, обучение_3». Поставьте свои!

Уникальные табы

Между тегами div ставьте коды, скрипты, ссылки:

<!-- Статьи в картинках -->

<div>

Ваш код

</div>

<!--/ Статьи в картинках -->

Сразу предупреждаю, что табы работать пока не будут. Так как необходимо к ним кое-что подключить. Читайте дальше и узнаете, что!

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

Когда Ваш код будет готов, уже можно будет подключать скрипт роботы табов. Его мы вставим в конец блога, чтобы его не нагружать и все загружалось так быстро, как раньше. Для этого нам нужно открыть файл footer.php и перед закрывающимся тегом </body> вставьте skript, который нужно скачать отсюда.

Теперь нам нужно поставить стили для правильной работы и отображения наших переключателей. Скачайте их отсюда. Вставьте эти стили где-то в самом конце файла style.css. После чего сохраните изменения во всех трех файлах! Перезагрузите веб-ресурс, там будут красоваться tabi.

Поздравляю Вас! Думаю, что Вы теперь очень рады. Потому что найти информацию о пошаговой установке, узнать, что такое табы, как создать табы и установить правильно на своем сайте очень сложно. На этом у меня все. Теперь могу быть выдохнуть, ведь раскрыта еще одна фишка с блога Алексея Кобзарева. Удачи! [urlspan]Подписывайтесь на обновления[/urlspan], чтобы не пропускать новые тексты.

С уважением, Алексей Кобзарев



Интересный и полезный контент

10 thoughts on “Что такое табы и как создать табы для переключения

  1. Андрей

    Спасибо, Алексей! Как всегда все доступно и просто. 😉 Главное взять и применить. Скажу честно может быть и попробую. Просто ради самообразования, ведь учиться то надо. С уважением к Вашему умению Андрей. ➡ Да, с Днем Победы!

  2. Надежда Давыдова

    Алексей, молодец! Я планирую себе сделать табы с вкладками о поставленных и достигнутых целях. Собиралась заказывать у фрилансера. Теперь можно и самостоятельно сделать такую штуку. Только если честно, боюсь лезть в свой шаблон, дорого стоит 🙂 Конечно, надо просто сначала сохранить все. Вот недавно ковырялась, все пошло не так, начала паниковать, еле вспомнила, куда сохранила, чтобы перезалить. Ужас, какой я паникер. А что смайлики заменил? Есть причины?

    1. Алексей Кобзарев Автор записи

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

    2. Алексей Кобзарев Автор записи

      Ой, походу смайлы слетели. Спасибо, что сказала, а то я бы не известно когда заметил.

  3. Александр Каратаев

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

  4. Bikersky

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

  5. Марина

    Не знала, что такая «штучка» называется табы. Она, наверняка, улучшает поведенческие факторы. Подробно написано, как сделать эту «фишку». Стоит попробовать!

    1. Алексей Кобзарев Автор записи

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *