Виджет WordPress со вкладками без плагина

Без плагина WordSmall

Сегодня снова затронем тему о виджетах и рассмотрим разновидность со вкладками. В чем заключается особенность вкладок: меньше занимает места в сайдбаре, немного додаст динамичности сайту. Это позволит скомбинировать последние комментарии, новые статьи, популярные посты и т.д. «все в один лаконичный виджет». Вся эта конструкция будет создана подручными средствами. То есть, HTML разметка, CSS стилизация и небольшой скрипт для плавного переключения вкладок.

Создаем виджет со вкладками

Первым делом нужно подключить поддержку php в сайдбаре WordPress. Это необходимо для упрощения работы поскольку вывод информации делается с помощью php функций, а WordPress, к сожалению, изначально не поддерживает такую возможность. Можно сделать по-другому, но придется лезть в тело шаблона «sidebar.php» что усложнит установку.

Вторым делом идет разметка, обычный HTML код. Верхняя часть содержит переключатель между вкладками, а нижняя часть контент. Ниже представленный код вставьте в текстовый виджет в разделе «Внешний вид – Виджеты».

<div class="wp-tabs-widget">

<ul class="wp-tabs-menu">
  <li class="active" rel="wp-tabs1">Новинки</li>
  <li rel="wp-tabs2">Комменты</li>
  <li rel="wp-tabs3">Популярное</li>
</ul>

<div class="wp-tabs-contener">

         <!-- Новые публикации-->
  <div id="wp-tabs1" class="wp-tabs-content">
    <ul>
    <?php query_posts('showposts=5'); ?>
    <?php while (have_posts()) : the_post(); ?>
    <li>
        <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a>
    <a class="title" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?>        </a><br/>
    </li>
    <?php endwhile; ?>
    </ul>
  </div>

  <!-- Последние комментарии -->
  <div id="wp-tabs2" class="wp-tabs-content">
                        <?php $comments = get_comments('status=approve&number=5'); ?>
                <ul class="widgcomm">
                        <?php foreach ($comments as $comment) { ?>
                <li class="comcont"><?php
        $title = get_the_title($comment->comment_post_ID);
        echo get_avatar( $comment, $size = '35');
        echo '<span class="tecom">' . ($comment->comment_author) . '';
        ?> к посту: </span><a class="auth" href="<?php echo get_permalink($comment->comment_post_ID); ?>"
           rel="external nofollow" title="<?php echo $title; ?>">
           <?php echo $title; ?> </a>
                "<?php
        echo  '<span class="tecom">' . wp_html_excerpt( $comment->comment_content, 35 ) . '</span>'; ?>.."
    </li>
                <?php }  ?>
        </ul>
  </div>

 <!-- Популярные посты (самые комментирующие) -->
  <div id="wp-tabs3" class="wp-tabs-content">
          <ul>
        <?php $pc=new WP_Query('orderby=comment_count&posts_per_page=5');?>
        <?php while($pc->have_posts()):$pc->the_post();?>
        <li>
        <a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_post_thumbnail(array());?></a>
        <a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a>
        </li>
        <?php endwhile;?>
</ul>
  </div>
</div>
</div>

Следующий шаг – стилизация внешнего вида и корректность элементов. Так как вкладки выводятся через текстовый виджет WordPress, то дизайн незначительно будет меняться, исходя из вашей установленной темы. Стили нужно добавить в файл style.css в самом конце.

.wp-tabs-widget {
    position: relative;
    width: 300px;
}
.wp-tabs-widget .wp-tabs-menu {
    height: 40px;
    list-style:none;
    margin: 0;
    padding: 0;
}
.wp-tabs-widget .wp-tabs-menu li {
    background:#0d4371;
    color: #fff;
    cursor: pointer;
    display: block;
    float: left;
    font: 400 14px/40px "open sans",sans-serif;
    height: 40px;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: all 0.5s ease 0s;
    width: 33.3%;
}
.wp-tabs-widget .wp-tabs-menu li:hover {
    background-color: #2c6290;
}
.wp-tabs-widget .wp-tabs-menu li.active {
    background:#f6f6f6;
    color: #0d4371;
}
.wp-tabs-widget .wp-tabs-contener {
    background: #f6f6f6;
    border-bottom: 3px solid #ddd;
    clear: both;
    float: left;
    width: 100%;
}
.wp-tabs-widget .wp-tabs-content {
    display: none;
    padding: 10px;
}

.wp-tabs-content img {
    float: left;
    height: 50px;/*размер миниатюры*/
    margin: 5px 10px 11px 0 !important;
    width: 50px;/*размер миниатюры*/
}

.wp-tabs-content ul{
        margin: 0;
        padding: 10px;
}
.wp-tabs-content li {
    clear: both;
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid #dae3eb!important;
}
.wp-tabs-content li a:hover {
    text-decoration: underline;
}
.wp-tabs-content a{
        color: #666;
    font: 500 14px arial;
    text-decoration: none;
}

Последняя часть виджета со вкладками является, как говорилось выше, небольшой скрипт. Он создаст плавный эффект и подсветку активной вкладки. Подключение скрипта, желательно, вывести в отдельный файл, во многих темах практикуется этот «правильный» вариант. Или стандартным путем в файл header.php между тегами <head> </head> или в файл footer.php перед закрывающим тегом </body> подключить скрипт. Стоит обратить внимание, что вмести со скриптом подключается и библиотека jQuery. Если ранее вы ее подключали снова это делать не нужно.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    $(".wp-tabs-content").hide();
    $(".wp-tabs-content:first").show();
    $(".wp-tabs-menu li").click(function() {
    $(".wp-tabs-content").hide();
    var activeTab = $(this).attr("rel");
    $("#"+activeTab).fadeIn(800);                
    $(".wp-tabs-menu li").removeClass("active");
    $(this).addClass("active");
    });
</script>

Посмотреть Demo

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

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 2
  • Константин

    Спасибо, всё получилось. Но не получается сделать то же самое с виджетами соц сетей (VK, Fb, OK). Если полностью заменяю код во вкладке на код виджета соц сети то либо криво, либо вообще не переключается и все 3 виджета стоят в столбик. Как можно это осуществить? Заранее спасибо!

    • WordSmall

      Посмотрите исходный код, должно быть, теги от темы влияют на корректный вид. Так как все темы разные, то по-любому не обходится без мелких правок.

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