» » » Популярные записи с миниатюрами в сайдбаре без плагина
logotip

Популярные записи с миниатюрами в сайдбаре без плагина

Всем привет! Не так давно, один из читателей блога seo-mayak.com попросил меня рассказать, как вывести популярные записи в сайдбаре без плагина. Этим мы сегодня и займемся.

Наверное вы заметили у меня в сайдбаре блок «Популярное на блоге», конечно плагином там и не пахнет, все сделано средствами самого обычного HTML.

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

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

populyarnye zapisi v sidebare

Итак, зачем вообще нужен список популярных записей? Дело в том, что пресловутый поведенческий фактор все сильнее влияет на позиции сайта в поисковой выдаче и все больше поисковых систем используют ПФ в своих алгоритмах.

Блок популярных записей с интригующими заголовками, безусловно будет способствовать продвижению Вашего проекта в поисковой выдаче.

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

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

Плагин WP-PostViews. Я использовал этот плагин на своем кулинарном блоге. Довольно известный плагин, который рассчитывает популярность статьи на основе количества просмотров. Большой недостаток — это отсутствие миниатюр.

Плагин Featured Posts with thumbnails. Более мощный функционал, наличие миниатюр, но есть и минус. Плагин определяет первое изображения в статье и сжимает его до миниатюры с помощью скрипта timthumb.php, что создает не хилую нагрузку на сервер.

Я понимаю, что новичкам будет проще использовать один из плагинов, чем рыться в «непонятных» файлах шаблона, но еще раз всех предупреждаю:

Большое количество плагинов негативно скажется на скорости загрузки страниц Вашего ресурса!

Пожалуй начну урок с самого простого способа вывода популярных записей на WordPress. Поехали!

Как вывести популярные записи в сайдбаре с помощью HTML

Данные способ можно смело назвать ручной работой, так как выбор статей для блока производится непосредственно Вами и все ссылки проставляются ручками. Но зато есть существенные плюсы:

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

Плюс №2. Возможность использовать миниатюры, созданные CMS WordPress.

Плюс №3. Для блока можно выбрать совершенно любую статью, не опираясь на количество комментариев или просмотров.

Плюс №4. Для ссылки можно составить совершенно любой анкор, отличный от заголовка статьи, что улучшит анкор-лист проекта.

Плюс №5. Чистый HTML позволит минимизировать нагрузку на сервер.

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

Вариант №1. Миниатюра слева, заголовок-ссылка справа.

Вариант №2. Миниатюра сверху, заголовок-ссылка снизу.

Но ведь можно сделать миниатюру ссылкой и вообще обойтись без заголовка?

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

Теперь, когда мы определились со структурой блока, приступаем к созданию HTML таблицы. Таблицы можно создавать в любом текстовом редакторе. Лично я для этих целей использую редактор WordPress.

Итак, рассмотрим первый вариант — миниатюра слева, заголовок-ссылка справа. Структура таблицы должна выглядеть так:

<table>
<tbody>
<tr>
<td>Ячейка №1</td>
</tr>
<tr>
<td>Ячейка №2</td>
</tr>
<tr>
<td>Ячейка №3</td>
</tr>
<tr>
<td>Ячейка №4</td>
</tr>
<tr>
<td>Ячейка №5</td>
</tr>
</tbody>
</table>

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

Ячейка №1
Ячейка №2
Ячейка №3
Ячейка №4
Ячейка №5


Теперь нам надо в каждую ячейку поместить миниатюру и заголовок. Выглядеть это должно так:

<a href="Ссылка на статью"><img title="Описание на русском" alt="Описание английскими символами (транслитерация)" src="Путь до миниатюры" /></a><a href="Ссылка на статью">Заголовок статьи</a>

Возникает резонный вопрос, а зачем вообще нужна таблица?

Дело в том, что без таблицы изображения и заголовки будут налазить друг на друга и вообще будет твориться черт знает что. Вот наглядная иллюстрация:

populyarnye zapisi7

С помощью таблицы мы устанавливаем невидимые границы, за которые уже ничего «выползать» не будет.

populyarnye zapisi8

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

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

<table class="popul_post">

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

.popul_post img {
    float: left;  /*Выравниваем текст по левому краю*/
    margin: 5px 13px 0 0px; /*Внешние отступы*/
    background: #FFFFFF; /*Цвет фона*/
    border: 1px solid #D0D0BB; /*Задаем толщину,вид и цвет рамки*/
    border-radius: 5px; /*Закругляем края миниатюры*/
    box-shadow: 0 0 5px #666666; /*Задаем тень для изображения*/
}
.popul_post  a{
    color: #000; /*Задаем цвет текста для ссылок*/
}

Ну вот совсем другое дело:

populyarnye zapisi6

Еще раз хочу повторить:

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

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

cimvoly-klaviatury1-150×111.jpg

Именно цифры (размеры) 150х111 отличают название миниатюры от названия основного изображения. У вас конечно могут быть другие цифры. Подробно о том, как настроить размеры миниатюр при их автоматическом создании на WordPress, вы можете почитать тут.

В моем случаи путь до миниатюры будет выглядеть так:

http://seo-mayak.com/wp-content/uploads/2012/12/cimvoly-klaviatury1-150×111.jpg


Надеюсь понятно.

Переходим ко второму варианту — миниатюра сверху, заголовок-ссылка снизу.

Создаем таблицу с такой структурой:

<table>
<tbody>
<tr>
<td>Ячейка №1</td>
<td>Ячейка №2</td>
</tr>
<tr>
<td>Ячейка №3</td>
<td>Ячейка №4</td>
</tr>
<tr>
<td>Ячейка №5</td>
<td>Ячейка №6</td>
</tr>
<tr>
<td>Ячейка №7</td>
<td>Ячейка №8</td>
</tr>
<tr>
<td>Ячейка №9</td>
<td>Ячейка №10</td>
</tr>
</tbody>
</table>

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

Ячейка №1 Ячейка №2
Ячейка №3 Ячейка №4
Ячейка №5 Ячейка №6
Ячейка №7 Ячейка №8
Ячейка №9 Ячейка №10


Теперь во все ячейки вставляем миниатюры и заголовки, точно также, как мы это делали в первом варианте. Единственное, что я бы хотел посоветовать — это не делайте во-втором варианте слишком длинных заголовков. Например:

populyarnye zapisi4

По-моему гораздо лучше, когда популярные записи выглядят так:

populyarnye zapisi5

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

Кстати, скоро я планирую написать серию статей, посвященных скорости загрузки страниц, поэтому советую подписаться на обновления блога.

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

В этом случаи не обойтись без известного и для многих непонятного языка PHP.

Выводим популярные посты с миниатюрами по количеству комментариев

Чтобы вывести популярные посты по количеству комментариев, нижеприведенный код надо вставить в файл sidebar.php в нужное место.

<div class="popul-post">
 <h3>Самые популярные статьи</h3>
 <?php
 $posts_qty = 5;
 $period = 180;
 $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);
 ?>
 <table><tr><td><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>(<?php comments_number('0', '1', '%'); ?>)</td></tr></table>
 <?php endforeach; ?>
</div>

Теперь давайте разберемся, что в коде можно менять.

$posts_qty = 5;

Цифра 5 в переменной $posts_qty — это количество популярных статей в блоке. Ставим желаемое количество.

$period = 180;

Цифра 180 в переменной $period — это интервал в днях (начиная с текущей даты). Выбираются наиболее комметируемые статьи, опубликованные за данный промежуток времени.

<table><tr><td><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a><a href="<?php the_permalink() ?>"><?php the_title(); ?></a>(<?php comments_number('0', '1', '%'); ?>)</td></tr></table>

Данный отрезок кода выводит изображения и заголовки постов. Как видите я здесь также использовал таблицу, чтобы элементы не разбегались. Что мы тут можем изменить…

Кто не хочет, чтобы ссылки открывались в новом окне, удалите следующий участок кода:

onclick="return !window.open(this.href)"

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

(<?php comments_number('0', '1', '%'); ?>)

Для тех, кому необходимо подкорректировать размер миниатюр, надо заменить:

<?php the_post_thumbnail('thumbnail'); ?>

на:

<?php the_post_thumbnail(array(140,100)); ?>

Где 140,100 — желаемый размер миниатюры.

Важно! При изменении размеров миниатюр,  создается дополнительная нагрузка на сервер и как следствие, замедляется скорость загрузки страниц

Остальное трогать не надо.

Стили для блока можно применить те же, что я привел выше. Вот что у нас должно получится:

populyarnye zapisi

Важно! По умолчанию в WordPress PHP-коды не выполняются в виджетах! Ситуацию исправит специальная функция.

Выводим популярные статьи с миниатюрами по количеству просмотров

Чтобы вывести популярные записи по количеству просмотров, нам потребуется создать счетчик просмотров. Для этот открываем для редактирования файл functions.php и в самый низ перед знаком ?> вставляем следующий код:

function mayakPostViews($post_ID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($post_ID, $count_key, true);

    if($count == ''){
        $count = 0;
delete_post_meta($post_ID, $count_key);
add_post_meta($post_ID, $count_key, '0');
        return $count . ' Просмотр';
    }else{
        $count++;
        update_post_meta($post_ID, $count_key, $count);
        if($count == '1'){
        return $count . ' Просмотр';
        }
        else {
        return $count . ' Просмотров';
        }
    }
}

Теперь нам надо вызвать счетчик в нужном месте. Для этого в файл single.php ищем что-то похожее на такую строчку:

<?php the_date(); ?> автор: <?php the_author() ?>  <?php edit_post_link(__('Edit This')); ?>

В самый конец этой строки добавляем код вызова счетчика:

<?php if(function_exists('mayakPostViews')) { echo mayakPostViews(get_the_ID()); }?>

Должно получится примерно следующее:

populyarnye zapisi10

Это еще не все! Теперь нам надо вывести популярные записи в сайдбаре. Открываем файл sidebar.php и в нужное место вставляем такой код:

<div class="popul">
    <h3>Популярные статьи</h3>
    <table>
        <?php
            $args = array( 'posts_per_page' => 5, 'meta_key' => 'post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC' );
            query_posts($args);
            while ( have_posts() ) : the_post();
        ?>
        <tr><td><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></td></tr>
        <?php endwhile; wp_reset_query(); ?>
    </table>
</div>

В этом коде стоит обратить Ваше внимание на один участок:

'posts_per_page' => 5,

Где цифра 5 — это количество выводимых записей в блоке.

Стили остаются те же.

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

Вот как у нас должно получится:

populyarnye zapisi9

Хочу заметить, что данные варианты вывода блока популярных записей в сайдбар реализованы без использования плагинов. Еще предлагаю вам почитать про использование миниатюр на главной странице. Если что-то непонятно, готов выслушать Вас в комментариях.

На сегодня у меня все. Как Вам статья?

C уважением, Виталий Кириллов

Комментарии: 121

  1. Андрей:

    Отличная статья, простым и доступным языком описано.
    Кое, что взял на заметку, удобно делать свои тизерные блоки с обычными новостями

    Ответить
    • Виталий Кириллов:

      Спасибо Андрей!

      Ответить
  2. Анна Вечеря:

    Спасибо, Виталий огромное! как всегда, все просто и понятно! Можно теперь без плагина)

    Ответить
    • Виталий Кириллов:

      Пожалуйста Анна, пользуйтесь!

      Ответить
  3. Sasha:

    Статья отличная! Может, что-то попробую. Со счетчиком способ особенно понравился.

    Ответить
    • Виталий Кириллов:

      Спасибо Саша за высокую оценку!

      Ответить
  4. Анна:

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

    Ответить
    • Виталий Кириллов:

      Анна, какой из вариантов вы имеете в виду?

      Ответить
  5. Александр Силиванов:

    Виталий! Не в тему статьи… С Новым годом!

    Ответить
    • Виталий Кириллов:

      Спасибо Александр! Вас тоже с Новым Годом!

      Ответить
  6. Валентина Кирс:

    Виталий, поздравляю Вас с Новым годом! Счастья, радости и успехов в Новом году! А сайту — новых достижений!!!

    Ответить
    • Виталий Кириллов:

      Спасибо Валентина!

      Ответить
  7. Виталий:

    Виталий, поздравляю с 2014-м!
    Желаю тебе в Новом году сибирского здоровья, много солнечных дней, творческих успехов и оригинального креатива, радостных и счастливых событий, удачи в делах и на отдыхе!
    Давненько у тебя в гостях не был. Очень интересные материалы у тебя появились на сайте!
    Буду понемногу внедрять их и у себя в блоге.
    Спасибо!

    Ответить
    • Виталий Кириллов:

      И вам спасибо Виталий!

      Ответить
  8. Анна:

    Виталий, я хочу спросить по поводу этого плагина Featured Posts with thumbnails, если у меня первое изображение в статье задано как миниатюра — нагрузки на сервер не будет создаваться этим плагином? Пробовала разобраться с кодами, но это для меня сильно сложно пока…

    Ответить
    • Виталий Кириллов:

      Здравствуйте Анна, рад снова Вас видеть на блоге!
      Если размер заданной миниатюры совпадает с размером миниатюры выводимой плагином, то нагрузка будет меньше.

      Ответить
  9. Дмитрий:

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

    Ответить
    • Виталий Кириллов:

      Дмитрий, попробуйте встроить в ячейку слайдер)

      Ответить
  10. Виталий:

    Огромное спасибо! Действительно без плагина довольно таки неплохо получается и все намного проще чем я думал.

    Ответить
  11. Наталья:

    Я для вывода популярных статей использую последний предложенный Вами способ (по количеству просмотров). Все бы было хорошо, если бы не одно но… Выводятся записи популярные за все время, а мне надо за последние 7 дней, например. А получается, с этим кодом невозможно сделать такую выборку, т.к. мы в БД не сохраняем дату просмотра. Единственная мысль приходит в голову, это каждую неделю обнулять счетчик. Но это что-то не то…
    Может, у Вас есть какие-то идеи на этот счет? Кстати, везде, где я видела эту тему, людей интересовал этот вопрос. Но никто из админов на него не мог ответить. Может быть, Вы будете первым?)

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Наталья:

        вот и я о том же) задача сложная и мороки много. Не знаю, стоит ли игра свеч, чтобы возиться с ней. Жаль, что до сих пор никто не выложил работающий код.

        Ответить
        • Виталий Кириллов:

          Вот и о том же.

          Ответить
  12. Svena:

    Спасибо большое, очень пригодилась функция вывода самых комментируемых постов. Пришлось немного преобразовать ее, чтобы вместо thumbnail выводились прикрепленные картинки, и все заработало как надо!

    Ответить
  13. Андрей:

    Все хорошо, только не пойму почему изображения (миниатюры) обрезаются, а не уменьшаются в масштабе. И правильно ли я понял, что они автоматически обрезаются до размера 150 x 150 ??

    Ответить
    • Виталий Кириллов:

      Андрей, когда вы загружали картинку на сайт, то миниатюра автоматически создалась исходя из настроек (Настройки -> Медиафайлы), а там по умолчанию стоят размеры 150х150. Если задать иные пропорции, то можно добиться необрезанных миниатюр.

      Ответить
  14. Сергей:

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

    Ответить
    • Виталий Кириллов:

      Все коды можно вставлять в виджет, а стили прописываются в файле style.css

      Ответить
  15. Odessit:

    Добрый день! Подскажите, а как выйти из ситуации, если миниатюры изначально не было созданы? У меня на кулинарном сайте для миниатюр подходит только одно фото в конце статьи, с готовым блюдом, как можно решить этот вопрос? Заранее спасибо.

    Ответить
  16. Александр:

    Благодарю. Код рабочий применил у себя на сайте. Вывел лучшие записи.

    Ответить
  17. Odessit:

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

    Ответить
  18. Odessit:

    Виталий, добрый день! Вы не подскажите, вставил код в виджет в боковой сайдбар, ещё вчера вечером, но там до сих пор отображается вот это((( 5, ‘meta_key’ => ‘post_views_count’, ‘orderby’ => ‘meta_value_num’, ‘order’ => ‘DESC’ ); query_posts($args); while ( have_posts() ) : the_post(); ?>

    Что не так? Счётчик работает, т.е. по идее должно всё работать…Это популярные записи по кол-ву просмотров.

    Ответить
  19. Odessit:

    И опять я сам справился, ответ на вопрос из гугла, привёл к вам же. Кстати этот момент, могли бы дописать в статье)))
    Вывод PHP-кода через виджеты WordPress без плагина. Ещё раз спасибо, пошёл играться со стилями.

    Ответить
    • Odessit:

      Ещё раз пробежался, всё такие это есть в статье, извините)))
      А вот стили почему то не работают, что с ними, что без них, ничего не меняется((

      Ответить
      • Виталий Кириллов:

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

        Ответить
        • Odessit:

          Нашёл проблему, если вдруг вам будет интересно. Каждому виджету надо задать id, и уже к конкретному виджету прописать стили.

          Ответить
  20. Олеся:

    Спасибо за замечательные статьи! По данной статье у меня возник вопрос, возможно ли вывести в сайдбар блок миниатур, состоящий из случайных записей рубрик или меток, такой же как предлагается вами в посте «Как вывести похожие записи с миниатюрами на WordPress без плагина». Т.е. в сайдбар мне нужно вывести случайные, меняющиеся записи с миниатюрами.

    Ответить
    • Виталий Кириллов:

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

      $args = array( 'posts_per_page' => 5, 'meta_key' => 'post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC' );
      

      Вместо:

      'orderby' => 'meta_value_num'
      

      Вставьте:

      'orderby' => 'rand'
      

      И удалите такой участок кода:

      'meta_key' => 'post_views_count'
      

      Функцию подсчета количества просмотров можно не использовать.

      Ответить
  21. Олеся:

    Вот такой код вставляю в виджет

    <div class="popul">
    <h3>Популярные статьи</h3>
    <ul>
    <?php
    $args = array( 'posts_per_page' => 5, 'orderby' => 'rand', 'order' => 'DESC' );
    query_posts($args);
    while ( have_posts() ) : the_post();
    ?>
    <table><tr><td><a onclick="return !window.open(this.href)" href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></td></tr></table>
    <?php endwhile; wp_reset_query(); ?>
    </ul>
    </div>

    Ответить
    • Виталий Кириллов:

      Олеся,У Вас возможно виджеты не настроены на обработку php кодов. Настройте их по этой статье
      Код рабочий!

      Ответить
  22. Василий:

    Виталий помогите пожалуйста: не могу разобраться с ss, сколько мучился, не получается. Вывел записи в сайдбар по количеству просмотров, в одну колонку (получается первый вариант). Подскажите пожалуйста, как сделать чтобы текст был внизу миниатюры, а не сбоку?

    Ответить
    • Виталий Кириллов:

      Василий, я за Вас CSS не выучу! Я не увидел в Вашем файле css ни одного значения для класса .popul_post, Вы в каком месте мучились?

      Ответить
      • Василий:

        В общем решил проблему (чтобы текст был внизу миниатюры, а не сбоку): взял отдельно текст в div, прописал стиль и получилось! Моей радости нет предела!
        Просто я учусь еще, и в основном методом тыка..
        А статья ваша очень пригодилась, спасибо.

        Ответить
  23. Олеся:

    Виталий, спасибо, теперь все заработало!

    Ответить
  24. Алексей:

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

    Спасибо.

    Ответить
  25. Катерина:

    Виталий, спасибо!!! плагин который у меня занимался популярными и похожими статьями закончил свою работу 31 декабря… и я как раз искала чем его заменить, но ваша идея без плагина мне ещё больше нравится! особенно, потому что в последнее время заметила, что сайт стал дольше загружаться, это ещё предстоит проверить…
    очень понравилось, что вы прямо рядом с кодами пишите по-русски расшифровку, что эти значки обозначают, так и выучить можно постепенно 🙂 здорово!!!
    Благодарю!!!!!!!!!!!!!!

    Ответить
  26. Виталий:

    Здравствуйте.
    Необходима Ваша помощь. У меня сайт на ворд пресс и в сайд баре просто новые темы(дата и текст) помогите сделать так что бы с текстом была еще и картинка. Я могу добавлять картинки к каждой теме в сайтбаре, но это занимает время! Надо так что бы автоматически — указал какие темы выводить те темы и выводятся только ещё и с картинками.
    Кто сможет помочь пишите wetl009@mail.ru
    Спасибо.

    Ответить
  27. Ксения:

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

    Ответить
  28. Татьяна:

    Отличная статья, очень все понятно. В виджеты поставила код для вывода по счетчику, не отображаются миниатюры, а только ради них старалась (вывод миниатюр подключен). Как быть?

    Ответить
  29. Алена:

    Оказывается, все проще, чем я думала. Благодаря Вашей подробной статье разобралась. Осталось доработать стили. Спасибо, Виталий!

    Ответить
  30. Игорь:

    А вот у меня руки кривые ничего не получилось, наоборот вышла ошибка пропал фон сайдбара, но все по порядку:

    Из статьи http://seo-mayak.com/sozdanie-bloga/plaginy-wordpress/vypolnenie-php-koda-v-vidzhetax-wordpress-bez-plagina.html

    Вствил в файл function.php такой код:
    function mayak_widget_php($widget_content) {
    if (strpos($widget_content, » . $widget_content);
    $widget_content = ob_get_contents();
    ob_end_clean();
    }
    return $widget_content;
    }
    add_filter(‘widget_text’, ‘mayak_widget_php’, 99);

    В виджет:

    Самые популярные статьи
    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);
    ?>
    <a onclick="return !window.open(this.href)" href="»><a href="»>()

    Ответить
  31. Игорь:

    Часть кода в предыдущем сообщение не отразилась

    Ответить
    • Виталий Кириллов:

      Игорь, фон сайдбара может пропасть по многим причинам и не могу сходу поставить правильный диагноз.

      Ответить
  32. Александр Белый:

    Отличная статья, все правильно написано. Сделал благодаря вашим статьям себе виджет с миниатюрами.

    Ответить
  33. Влад:

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

    Ответить
    • Влад:

      Хотя уже все — разобрался… ))
      Если кому нужен код, то вот. Выводит в 3 строки и 3 столбца статьи в случайном порядке. Пришлось помучаться, чтобы так сделать…

       
      ID;
      query_posts(array(‘post_type’ => ‘post’, ‘post_status’ => ‘publish’, ‘orderby’ => ‘rand’, ‘showposts’ => 9, ‘post__not_in’ => array($this_post))); ?>

      <a onclick="return !window.open(this.href)" href="»><a onclick="return !window.open(this.href)" href="»>

      <a onclick="return !window.open(this.href)" href="»><a onclick="return !window.open(this.href)" href="»>

      <a onclick="return !window.open(this.href)" href="»><a onclick="return !window.open(this.href)" href="»>

       

      Ответить
  34. Юрий:

    Когда что то хочу сделать на сайте и ищу в инете, частенько попадаю на Ваш сайт, и из всех выбранных сайтов, на Вашем задерживаюсь больше всего.
    Это говорит о том (для меня), что сайт сделан для людей. Все четко и доходчиво объясняется.
    Спасибо Вам.
    Желаю найвысших позиций в поисковиках.
    Есть рекомендация: сделайте кнопочку, типа лайк, и наоборот. Думаю у Вас будет очень много лайков.

    Ответить
    • Виталий Кириллов:

      Спасибо на добром слове!

      Ответить
  35. Юрий:

    Хотел сделать по вашему примеру (по просмотрам). Вот такая ошибка.
    Скажите в чем может быть дело?

    Parse error: syntax error, unexpected ‘<' in /home/agroflor/agroflora.ru/www/wp-content/themes/aroma/functions.php on line 736

    Ответить
    • Виталий Кириллов:

      Юрий, это ошибка синтаксиса. Проверьте полностью ли Вы скопировали код.

      Ответить
  36. Юрий:

    Спасибо. Уже нашел ошибку.
    Вот только что то популярные выводятся не очень реально. Подожду немного. Чтобы набрали реальных просмотров.
    А как можно поделится, как выглядит мой вариант?

    Ответить
    • Виталий Кириллов:

      Кому будет интересно, как выглядит ваш вариант, может перейти по ссылки на ваш сайт с имени комментатора.

      Ответить
  37. Юрий:

    Виталий, такой вопрос.
    Из ЯМетрики Грибы грузди прямых заходов — 130.
    А ваш счетчик, если зайти на эту статью показывает — 26. В чем может быть проблема?

    Ответить
    • Виталий Кириллов:

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

      Ответить
  38. Майя Дьячковская:

    Здравствуйте! Пыталась установить популярные записи внизу статьи. array() — размер картинки не меняет. Комментарии вордпресс сходят с ума — после любой статьи высвечиваются комментарии последней статьи из популярных…
    Вчера пыталась поставить на сайдбар, но даже после установки функции с разрешением PHP, ничего не происходит… Точнее код дальше не выполняется…
    Может у меня тема какая-то корявая?

    Ответить
    • Виталий Кириллов:

      Вполне может быть.

      Ответить
  39. Генна:

    Добрый день. Отличная статья, все доступно и понятно написано, сделал себе раздел популярных статей. Огромное спасибо!
    Есть один вопрос, как сделать так чтобы на всех страница в разделе отображалось допустим 10 миниатюр (сейчас так и есть), а на одной странице (разделе) отображалось только три миниатюры.
    Заранее спасибо за подсказку.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Геннадий, точно не могу сказать, а какой вариант Вы применяете?

      Ответить
      • Генна:

        использую вывод по количеству просмотров

        Ответить
  40. Генна:

    Добрый день, статья супер, спасибо.

    возник вопрос, возможно ли исключить некоторые записи из популярных (по количеству просмотров), то есть чтобы некоторые записи не выводились в топ, в не зависимости от количества просмотров.

    Заранее спасибо!

    Ответить
    • Генна:

      уже нашел решение сам, может кому надо будет вот код для исключения некоторых записей по id

      function exclude_post($query) {
      if ($query->is_home)
      {$query->set(‘post__not_in’, array(5255, 6610) );} // id записи (поста)
      return $query; }
      add_filter(‘pre_get_posts’,’exclude_post’);

      Ответить
      • Виталий Кириллов:

        Гена я рад , что у Вас все получилось.

        Ответить
  41. Денис:

    Здравствуйте. У меня в принципе код работает (тестирую его пока на локальном компьютере), но вот счетчик всегда прибавляет +2 при просмотре. В чем может быть причина? Вроде бы не загружаю страницу 2 раза… использую счетчик «по количеству просмотров»

    Ответить
    • Денис:

      Путем экспериментов, частичным удалением кода, нашел причину, но не понимаю как это связано. в абсолютно другом блоке у меня картинка с src=»#». Если вместо решетки вставить что-либо, хоть и пустую строку, то счетчик норм считает. Как вы думаете, как это связано??

      Ответить
  42. Григорий:

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

    Ответить
  43. Виктор:

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

    Подписался на новости, будет свободное время, обязательно займусь.

    Ответить
  44. Semen:

    Большое спасибо за такое прекрасное решение!
    Не хотелось использовать плагин, но хотелось, чтоб было красиво и заметно.
    И с помощью вашего кода — все получилось.
    Сразу повысилось количество просмотров на человека и время пребывания на сайте.
    Спасибо за ваш труд и знания!

    Ответить
  45. Наталья:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Наталья! Надо вместо теги таблицы (table, tr и td) поменять на теги списка (ul, li), затем с помощью стилей можно будет создать две колонки.

      Ответить
      • Наталья:

        Спасибо Виталий, попробую.

        Ответить
  46. Виктор:

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

    Ответить
  47. Станислав:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Вот статья, по Вашему вопросу.

      Ответить
  48. Сергей:

    Сразу видно челок любит свое дело, все расписал и объяснил очень толково, лично у меня не возникло никаких проблем с кодом и его установке, большое спасибо автору блога!

    Ответить
  49. Виктор:

    Спасибо, Виталий!
    Мне понравилось, все работает 🙂 Случайно нашел то, как вывести количество комментариев. Теперь я приблизился на еще один шаг, по созданию тем для WP.

    Ответить
  50. Сергей:

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

    Ответить
  51. Виктор:

    Еще раз спасибо, Виталий)
    Я к вам вернулся с таким вопросом.
    Можно сделать так, чтоб популярные записи выводились в слайдере? Если да, то как?

    Ответить
    • Виталий Кириллов:

      Виктор, готового варианта у меня нет. Поищите решение среди плагинов.

      Ответить
      • Виктор:

        Эх, жаль.
        Дело в том, что я учусь верстать темы для WP. Хочу в index.php создать слайдер популярных записей. Ну ничего, буду экспериментировать. 😀 Как только найду решение, постараюсь поделиться.

        Ответить
  52. Alex:

    Добрый день, всё отлично работает, только один вопрос. Как сделать, чтобы в популярных записях не показывалась текущая запись?

    Ответить
  53. Елена:

    Помогите понять, я написала код в редакторе вордпресс, то есть создала черновик новой записи. Поставила код в виджет, в сайдбаре появилась таблица: миниатюры с надписями. Но если вставлять код и стили, то стили так и отображаютя в сайдбаре в виде букв и символов, яубрала стили и оставила только код. Все прекрасно, в сайдбаре поучила анонсы статей.
    Мне не понятно, что делать с черновиком, в котором писала код таблицы.(я надеялась написать код, скопировать его, поставить в виджет, а черновик удалить. Но код поставлен, а стили виджет принимать отказывается!)
    Я понимаю, что таблице был присвоен класс, а к классу применены стили, но не понимаю, почему код в виджете видит стили, ведь они остались в черновике новой записи, а в виджете размещен только сам код. Может черновик попадает на сервер?
    Вы в коментах написали, что стили прописыатся в файле style.css, но я же ничего никуда не прописывала, только написала код и стили в черновик.Я какой-то структурной связи не знаю, подскажите.

    Ответить
  54. Ирина:

    Никогда не пишу комментов, но тут не могу удержаться. Спасибо огромное!

    Ответить
  55. Руслан:

    Как реализовать пример как у вас на блоге, стоят похожие новости под основной новостью, но через DIV/CSS ? 2 ряда, 4 колонки. Картинка выше, название статьи ниже, чтобы они не уходили за границу

    Ответить
    • Виталий Кириллов:

      Что у Вас уходит за границу картинки или заголовок?

      Ответить
  56. Игорь:

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

    Ответить
  57. Альберт:

    Здравствуйте, Виталий! Воспользовался этим способом вывода популярного и обратил внимание, что картинки прописываются с «itemprop». У Вас на сайте этого нет. Каким образом Вы исключили добавления этого. Если не секрет конечно.

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Альберт:

        У меня используется All in One SEO Pack, там сняты галочки на медиафайлы. Дело в том, что я использую всю микроразметку сделаную Вами, включая микроразметку миниатюр. Если я отключаю микроразметку миниатюр, то тогда пропадают в валидаторе и миниатюры. Хотелось бы чтоб остались миниатюры в отображении валидатора, но не индексировались в популярных. Просто не хочется применять плагин популярных статей — там картинки, кстати, не индексируются. Вот каким образом это можно было бы сделать?

        Ответить
        • Виталий Кириллов:

          К сожалению не получается отделить миниатюры в сайдбаре.

          Ответить
          • Альберт:

            Спасибо, Виталий! Жаль конечно, но я думаю, что это не будет критически определяться роботами как ошибка. Спасибо!

            Ответить
  58. Елена:

    Я еще совсем мало что понимаю, поэтому вопрос, наверняка, дурацкий. Я прописала таблицу в редакторе вордпресс,потом скопировала в виджет и все заработало. Черновик записи я удалила. Прошу очень, объясните, почему все работает, если с виджете только часть кода стоит,(стили, которые описывают размеры, бордюры, отступы, цвет я их же в виджет не ставила, а черновик удалила),Откуда вордпресс знает что было в записи, если я ее удалила?

    Ответить
  59. Сергей:

    Спасибо за Ваше творчество. Очень много полезного. Как можно выводить записи из определенной категории? Подскажите куда вставить ID категории. Ещё раз огромное спасибо.

    Ответить
    • Виталий Кириллов:

      Я вот так вам покажу, а как вставить надеюсь разберетесь.

      query_posts('p=7');

      где 7 — ID поста.

      Ответить
      • Сергей:

        $args = array( 'posts_per_page' => 5, 'meta_key' => 'views', 'orderby' => 'meta_value_num', 'order' => 'DESC', 'cat' => 1);
        query_posts($args);
        Еще вариант

        Ответить
      • Сергей:

        Еще вопрос есть. Возможно ли сделать проверку ID категории и на основании этого выводить посты из этой категории?

        Ответить
        • Виталий Кириллов:

          Так ву Вас в коде есть

          'cat' => 1

          Где 1 — id категории

          Ответить
          • Сергей:

            Вставляю код в файл «loop-single.php». И автоматом скрипт выводится на главной, что нежелательно. Как запретить его вывод на главной. Спасибо.

            Ответить
  60. Галина:

    Спасибо за статью! Подскажите, это адаптивный блок? как он себя поведет под мобильные, под разную ширину экрана?

    Ответить
    • VicKey:

      Галина, нет, он не адаптивный. Но это можно легко исправить

      Ответить
      • Галина:

        Подскажите как! Что дописать в цсс, что картинки растягивались или сам блок подстраивался под мобильные устройства. Спасибо!

        Ответить
        • Галина:

          сама разобралась )

          Ответить
        • VicKey:

          Галина, для начала, вам надо было хоть немного выучить CSS и HTML. Потом уже браться за сайтостроение 🙂 В рамках ответов на комментарии, мне не очень удобно вам что-то показать. Советую нажать на мое имя пользователя, или на эту ссылочку, что б перейти на мою страничку в социальных сетях. Постараюсь вам подсказать…

          Ответить
          • Галина:

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

            Ответить
            • VicKey:

              Галина, я думаю, что Вы зря меня благодарите. Это блог Виталия 🙂 А я простой комментатор.

              Вот! Вы сами разобрались. Надо было немного покопаться в CSS 😀

              Ответить
              • Галина:

                понятно )
                ну тогда спасибо и вам, просто комментатор, что предложили найти вас в соц.сети, чтобы помочь мне 🙂

                Ответить
  61. Александр:

    Здравствуйте! Подскажите пожалуйста, а как вывести кол-во просмотров в самом списке «Популярных записей»? Ставил тоже самое что и в Single.php, но он соответственно считает просмотры)

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр!
      Так не получится, ведь количество просмотров считается при заходе на страницу, а сайдбар для всех страниц один.

      Ответить
  62. Владимир:

    Здравствуйте! У меня при добавлении таблицы в виджет остается сама таблица, получается что каждая ссылка с картинкой разделена линиями, и по бокам виджета остаются границы таблицы. Как можно сделать ее «невидимой»? Заранее благодарю.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Владимир!
      У вас к таблице применены следующие стили:

      .kolonka table {
          border: 1px solid #f5f5f5;
          border-radius: 5px;
          box-shadow: 5px 7px 10px #f5f5f5, 0 0 5px #f5f5f5 inset;
          margin: 10px 0 2px 2px;
          padding: 2px 0 0 2px;
      }
      table, td, th {
          border: 1px solid #e3e3e3;
          border-collapse: collapse;
          text-align: left;
      }

      Чтобы у таблицы не было рамок, надо оставить следующее:

      .kolonka table {
          margin: 10px 0 2px 2px;
          padding: 2px 0 0 2px;
      }
      table, td, th {
          border-collapse: collapse;
          text-align: left;
      }
      Ответить
  63. maloir:

    Подскажите как сделать что бы названия статей были не снизу а с боку. Например справа от картинки.

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

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS