Привет всем читателям моего блога. Сегодня речь пойдет о панели вкладок, которые у меня используются в сайдбаре. Уже довольно много человек у меня спросили, какой плагин я использую для создания панели вкладок у себя на блоге. Так вот, панель вкладок у меня выводится совершенно без плагинов.
Для создания панели вкладок в сайдбаре нам понадобится:
1)Прямые руки.
2)Немного терпения.
3)Filezilla, для подключения к ftp серверу.
4)Код из данной статьи, который можно найти чуть ниже.
В панель вкладок можно добавить совершенно различные данные, к примеру у меня на сайте панель вкладок в сайдбаре состоит из разделов: Популярное, Последние,Комментарии.
В разделе популярное выводятся все самые комментируемые статьи за последние 90 дней. В разделе «Последние» выводятся последние статьи опубликованные на сайте, ну и в «Комментарии» — последние комментарии на сайте. Кстати код который используется для вывода последних комментариев аналогичен тому, о котором я рассказывал в уроке «Как создать страницу с комментариями сайта?» .
Ну а сейчас давайте уже приступим к созданию панели вкладок.
В файле sidebar.php в том месте где Вы хотите вывести панель вкладок на wordpress необходимо добавить код:
<div id="tabs">
<ul class="wptab">
<li class="popular"><a href="#tab-pop" class="selected" onclick="click(); return false;">Популярное</a></li>
<li class="latest"><a href="#tab-latest" onclick="click(); return false;">Последние</a></li>
<li class="comments"><a href="#tab-comm" onclick="click(); return false;">Комментарии</a></li>
</ul>
<div class="clear"></div>
<div class="boxes box inside">
<ul id="tab-pop" class="list" style="display: block;">
<?php
$posts_qty = 15;
$period = 90;
$interval = date('Y-m-d', strtotime("-$period days"));
$result = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' AND post_date > '$interval' ORDER BY comment_count DESC LIMIT 0 , $posts_qty");
foreach ($result as $post) : setup_postdata($post);
$text = get_the_title();
?>
<li><a title="<?php echo $text; ?>" href="<?php the_permalink(); ?>"><?php echo $text; ?></a><div class="fix"></div></li>
<?php endforeach; ?>
</ul>
<ul id="tab-latest" class="list" style="display: none;">
<?php
$posts_qty = 15;
$period = 90;
$interval = date('Y-m-d', strtotime("-$period days"));
$result = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' AND post_date > '$interval' ORDER BY post_date DESC LIMIT 0 , $posts_qty");
foreach ($result as $post) : setup_postdata($post);
$text = get_the_title();
?>
<li><a title="<?php echo $text; ?>" href="<?php the_permalink(); ?>"><?php echo $text; ?></a><div class="fix"></div></li>
<?php endforeach; ?>
</ul>
<ul id="tab-comm" class="list" style="display: none;">
<?php recent_comments(10, 100); ?>
</ul>
</div><!-- /.boxes -->
</div><!-- /tabs -->
После чего в файл functions.php добавить код функции, выводящий последние комментарии:
function recent_comments($limit=10, $ex=45, $cat=0, $echo=1, $gravatar=''){
global $wpdb;
if($cat){
$IN = (strpos($cat,'-')===false)?"IN ($cat)":"NOT IN (".str_replace('-','',$cat).")";
$join = "LEFT JOIN $wpdb->term_relationships rel ON (p.ID = rel.object_id)
LEFT JOIN $wpdb->term_taxonomy tax ON (rel.term_taxonomy_id = tax.term_taxonomy_id)";
$and = "AND tax.taxonomy = 'category'
AND tax.term_id $IN";
}
$sql = "SELECT comment_ID, comment_post_ID, comment_content, post_title, guid, comment_author, comment_author_email
FROM $wpdb->comments com
LEFT JOIN $wpdb->posts p ON (com.comment_post_ID = p.ID) {$join}
WHERE comment_approved = '1'
AND comment_type = '' {$and}
ORDER BY comment_date DESC
LIMIT $limit";
$results = $wpdb->get_results($sql);
$out = '';
foreach ($results as $comment){
if($gravatar)
$grava = '<img src="http://www.gravatar.com/avatar/'. md5($comment->comment_author_email) .'?s=$gravatar&default=" alt="" width="'. $gravatar .'" height="'. $gravatar.'" />';
$comtext = strip_tags($comment->comment_content);
$leight = (int) iconv_strlen( $comtext, 'utf-8' );
$full_text = $comtext;
if($leight > $ex) $comtext = iconv_substr($comtext,0,$ex, 'UTF-8').' …';
$out .= "\n<li><a href='". get_comment_link($comment->comment_ID) ."' title='Комментарий от пользователя ".strip_tags($comment->comment_author). " к записи: {$comment->post_title}'>".strip_tags($comment->comment_author). "</a>: <a href='". get_comment_link($comment->comment_ID) ."' title='$full_text'>{$comtext}</a></li>";
}
if ($echo) echo $out;
else return $out;
}
В файл header.php перед закрывающим тегом добавляем вот этот код:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wptab a").click(function () {
$(".wptab a").removeClass("selected");
$(this).toggleClass("selected");
$(".list").attr("style","display: none;");
$("#tab-category").attr("style","display: block;");
var div_name = $(this).attr("href");
$(div_name).attr("style","display: block;");
});
});
</script>
Ну и для оформления этой всей красоты, вот кусок кода, который нужно вставить в файл style.css
#tabs {
height: auto;
display: block;
margin-bottom: 10px;
width:100%;
}
#tabs ul.wptab,#tabs ul.wptab-category {
position: relative;
bottom: -1px;
padding: 0px;
z-index: 99;
}
#tabs ul.wptab li,#tabs ul.wptab-category li {
float: left;
display: inline;
margin-right: 2px;
font-weight: bold;
color: #ffffff;
cursor: pointer;
}
#tabs ul.wptab li a.selected,
#tabs ul.wptab li a:hover {
background: #fff;
text-decoration: none;
border: 1px solid #d9d9d9;
border-width: 1px 1px 0;
color: #666;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
background: -webkit-linear-gradient(#f2f2f2, #ffffff);
background: -moz-linear-gradient(center top, #f2f2f2 0%, #ffffff 100%);
background: -moz-gradient(center top, #f2f2f2 0%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f2f2f2, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f2f2f2, endColorstr=#ffffff)";
box-shadow: inset 0 1px 0 #ffffff, 0 -1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 #ffffff, 0 -1px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 1px 0 #ffffff, 0 -1px 3px rgba(0, 0, 0, 0.1);
}
#tabs ul.wptab li a {
color: #999;
display: block;
float: left;
border: 1px solid transparent;
border-width: 1px 1px 0;
padding: 5px 8px 10px;
text-transform: uppercase;
font-size: 10px;
text-shadow: 1px 1px 0 solid #fff;
text-decoration: none;
}
#tabs .inside {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
#tabs .inside li {
background: #fff;
}
#tabs #tab-tags {
padding: 10px;
background: #fff;
border: 1px solid #d9d9d9;
}
#tabs .inside ul {
margin: 0;
border: 1px solid #d9d9d9;
border-width: 1px 0 1px 0;
list-style: none;
padding-left: 0px;
}
#tabs .inside li {
border: 1px solid #d9d9d9;
border-width: 0 1px 1px 1px;
padding: 3px 10px;
}
#tabs .inside li a {
font: bold 12px/1.5em "Helvetica Neue", Helvetica, sans-serif;
color: #555;
font-weight: bold;
padding: 0;
text-decoration: none;
}
#tabs .inside li a:hover {
text-decoration: underline;
}
#tabs .inside li span.meta {
display: block;
font: 300 11px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: #777;
}
#tabs .inside li img.avatar,
#tabs .inside li img.thumbnail {
float: left;
margin: 0 8px 0 0;
padding: 0;
border-radius: 300px;
-moz-border-radius: 300px;
-webkit-border-radius: 300px;
}
#tabs {
overflow: hidden;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-top: -8px;
}
#tabs ul.wptab li a.selected,
#tabs ul.wptab li a:hover {
border-top-right-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
}
#tabs .inside .list {
display: none;
}
#tabs .inside .list:first-child {
display: block;
}
.tab-pop li a {
font: bold 12px/1.5em "Helvetica Neue", Helvetica, sans-serif;
color: #555;
}
Понравился материал?Поделись со своими друзьями