Шаг №120.Как сделать панель вкладок в WordPress без плагинов?

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

Для создания панели вкладок в сайдбаре нам понадобится:

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;
}
  • Виктория

    как это будет выглядеть? не понятно(( 😐

    • http://wpcreate.ru Артем Петрусенко

      Вот так как у меня 😉 :

      • Виктория

        а что? симпатично!

      • Виктория

        надо попробовать!

      • Виктория

        Артем, а есть ли у вас урок как картинку поместить в доменное окно?
        Ну, знаете, такие маленькие картиночки перед доменным именем 😳 как они называться я не знаю

        • Andrey

          😆 😮 ❓

          • Виктория

            грешно смеяться над больными людьми (с)

        • Павел

          Иконки перед доменным именем называются favicon, на сайте, по поиску, можно найти несколько замечательных уроков 🙂

          • http://nashipchelu.ru/ Николай

            Виктория Вы необращайте внимание, Много думают что оочень крутые блогееры, а на самом деле то 😈 полный ноль!!!

        • http://Life-price.ru zee

          Виктория , мне бы ваши проблемы . А моя это как удержать стабильно 3000 посетителей в сутки http://wpcreate.ru/step/kak-postavit-ikonku-na-sayt.html

          • Виктория

            ну что ж, это прям беда-печаль!
            пойду вас выручать — принимайте в гости 3001)))

      • http://nashipchelu.ru/ Николай

        Ой да и чуть незабыл сказать спасибо автору блога!!!! Пошел делать себе!!!! Очень понравилось!

      • http://procentovka.by/ Виталик

        Артем здравствуйте, у меня проблема, название табов не выводится на русском, в чем может быть проблема?

    • http://nashipchelu.ru/ Николай

      Артем подскажите, А можно немного сузить панель потому что у меня она в сайтбар непомесчается!! Или что можно зделать подскажите Хочу поставить на свой сайт вот он nashipchelu.ru Подскажите пожалуйста, оочень прошу!!! ➡

  • Павел

    Скриншот в студию 🙂

    • http://wpcreate.ru Артем Петрусенко

      Ответил выше.

  • http://remontkafe.ru/ Саня

    Здравствуйте Артем. Хотел спросить, а на вордпрессе можно сделать сайт по типу биржи???Например кто-то что-то продать хочет, а кто-то купить????

  • http://bismen.ru/ Андрей

    Добрый день Артем!

    Решил создать сайт на вордпрессе, не пойму как создать статью, чтоб ниже было написано читать далее.
    Что я сделал:
    если идти через рубрики:
    создал записи, подвязал к Рубрикам.
    Рубрики отображаются на сайте.
    но мне нужны две рубрики с разными записями
    если идти через страница:
    создал страницу, а как там отображать записи, не понятно.

    2. Почему в Рубриках записи отображаются полностью. Как сделать чтобы после наименования заголовка записи, отображалось ЧИТАТЬ ДАЛЕЕ

    Спасибо за ответ

    • http://nashipchelu.ru/ Николай Гончар

      Можно установить плагин!

  • http://fierymusic.ru/teoriya-zvuka/kak-svodit-v-fl-studio Александр

    Не посвященному в HTML и CSS такое код самостоятельно не сделать. Спасибо что делитесь своими наработками.

  • http://www.konstantinn.com.ua/ Константин

    Спасибо большое вам Артем за код ! Ваши статьи приятно читать, ничего лишнего и растянутого. Желаю процветания вам и вашему блогу!

  • Николай

    Как связать вкладками комментарии Фейсбук, Вконтакте и Вордпрес?

  • http://yarychev.ru/ Николай

    Как сделать вкладки комментарий, например фейсбук, вконтакте и ворд пресс?

  • http://www.advdk.com/ Алексей

    Спасибо дружище! Целый день искал эти табы, многие блоггеры рассказывают, что такой скрипт есть, но ничего толком не могли объяснить. 😈

    А ты все объяснил в короткой статье и у меня все получилось, правда пока на тестовом блоге. Когда сделаю все внутренности, поставлю на основной блог. ❗

  • http://tourkg.com Урмат

    Спасибо, Артем, все понятно и доходчиво. Попробовал на тестовом сайте — работает.
    У меня вопрос: как сделать табы (их наличие), исходя из каких-то условий. Для примера, на сайте http://pioner-cinema.ru/ расписание сеансов сделано табами, насколько я понял. Но сами вкладки (сегодня, завтра, конкретные даты) изменяются. Скажем, если сегодняшняя дата 29.05.14, то табы будут начинаться с этой даты, а назавтра данная вкладка исчезнет и табы уже будут начинаться с 30.05.14.
    Сложно ли замутить что-то подобное на вордпрессе?
    Заранее спасибо за ответ.

    • http://modnairiska.com Ирина

      Помогите добавить комментарии к страницам, в настройках страницы стоит галочка, в файле page.php после контент стоит , но комментарии не выводятся всё равно.Подскажите в чём может быть проблема? Если можно ответьте на электронный адрес.

  • Юля

    Очень интересная статья. Подскажите, а если темой уже предусмотрены последние комментарии, как в табы вставить функцию вывода этого виджета? Также на форуме установлен форум phphbb, как во второй вкладке можно вывести последние комментарии из форума?