Вкладки для сайта (табы — tabs) | Видео уроки WordPress для чайников. Создать блог несложно, если изучить плагины wordpress, защитить wordpress от взломщиков и провести seo оптимизацию wordpress

Вкладки для сайта (их еще называют «табы» от английского «tabs») — удобный способ логически разделить страницу для упрощения восприятия и удобства чтения статьи.
В сегодняшнем уроке мы разберем один интересный плагин, который позволит оптимизировать размещение текста на страницах сайта. Речь идет о так называемых вкладках — tabs, с помощью которых можно на одной странице разбить контент по небольшим подразделам для удобства отображения и чтения статьи на мониторе, уменьшив полосу вертикальной прокрутки. Для этого используется плагин для wordpress PostTabs.

Вкладки tabs на сайте без плагина

Ну а для тех, кто не хочет лишний раз напрягать свой сервер запросами в БД, предлагаю руководство по самостоятельно внедрению в сайдбар вкладок на jQuery.
Приступим. Прежде всего создадим файл скрипта, вставим туда нижеприведенный код и сохраним как tabs.js

$(document).ready(function(){ // When a link is clicked $("a.tab").click(function () { // switch all tabs off $(".active").removeClass("active"); // switch this tab on $(this).addClass("active"); // slide all content up $(".content").hide(); // slide this content up var content_show = $(this).attr("title"); $("#"+content_show).show(); });
});

Теперь подключим библиотеку jQuery и этот файл к нашему блогу, вставив такой код (делается это обычно в header.php)

< script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
">

Следующий шаг — в файл стилей style.css добавляем оформление вкладок для сайта:

#tabbed_box_1 {
 margin: 0px auto 0px auto; width:300px;
}
.tabbed_box h4 { font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#ffffff;
 letter-spacing:-1px; margin-bottom:10px;
}
.tabbed_box h4 small { color:#e3e9ec;
 font-weight:normal; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; position:relative; top:-4px; left:6px; letter-spacing:0px;
}
.tabbed_area { border:1px solid #494e52;
 background-color:#636d76;
 padding:8px;
}
ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px;
}
ul.tabs li { list-style:none; display:inline;
}
ul.tabs li a { background-color:#464c54;
 color:#ffebb5;
 padding:8px 14px 8px 14px; text-decoration:none; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:1px solid #464c54;
}
ul.tabs li a:hover { background-color:#2f343a;
 border-color:#2f343a;
}
ul.tabs li a.active { background-color:#ffffff;
 color:#282e32;
 border:1px solid #464c54;
 border-bottom: 1px solid #ffffff;
}
.content { background-color:#ffffff;
 padding:10px; border:1px solid #464c54;
 font-family:Arial, Helvetica, sans-serif;
}
#content_2, #content_3 { display:none; }
.content ul { margin:0px; padding:0px 20px 0px 20px;
}
.content ul li { list-style:none; border-bottom:1px solid #d6dde0;
 padding-top:15px; padding-bottom:15px; font-size:13px;
}
.content ul li:last-child { border-bottom:none;
}
.content ul li a { text-decoration:none; color:#3e4346;
}
.content ul li a small { color:#8b959c;
 font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px;
}
.content ul li a:hover { color:#a59c83;
}
.content ul li a:hover small { color:#baae8e;
}

Ну и наконец в сайдбар вставляем такой код:

 
  
  • Рубрики
  • Теги
  • Новости
  
   
   
           
    

Если сделали все верно, то на выходе получится примерно так:

Вкладки для сайта в комментариях

Аналогично можно разбить на вкладки комментарии, например отделить встроенные от вконтактовских и фейсбуковских.
Точно так же подключаем jQuery, далее вставляем в шаблон страницы нижеследующий код. В нем вам нужно будет только заменить API ключ для комментариев ВКонтакте и Facebook. Разумеется, для работы сторонних скриптов необходимо их сначала правильно подключить, но об этом отдельные уроки из рубрики «Комментарии»

 
     
    • Комментарии
     
    • ВКонтакте
     
    • Facebook
    
    
    
    
    
    • VK.Widgets.Comments(«vk_comments», {limit: 10, width: «496», attach: «*»});
    
    
    

    Оцените статью