Блог Андрея Юрченко

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

WordPress популярные записи с миниатюрами без плагина

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

wordpress популярные записи

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

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

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

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

<div>
<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>

Здесь Вы можете изменить число выводимых записей в четвертой строке, указав свою цифру вместо 5.

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

<div class="top_rec">
<ul>
<?php
$pc = new WP_Query('cat=1 &showposts=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>

В четвертой строке Вы можете указать id категории, заменив цифру на свою cat=1, и количество записей showposts=5.

Для того, чтобы узнать ID категории нужно перейти в админ-панель, слева выбрать вкладку «Записи-Рубрики» и кликнуть на ту рубрику, где нужно узнать ID. После чего в адресной строке можно увидеть идентификатор

 …./edit-tags.php?action=edit&taxonomy=category&tag_ID=3&post_type=post

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

wordpress популярные записи

 Для этого откройте файл style.css вашей темы и в самом конце всавте следующий код:

.top_rec ul li{
 line-height:16px;
 display:block;
 border-bottom:1px solid #e9e9e9;
 padding:20px 0px 20px 0px;
 height:100px;   /* Высота блока одной записи*/
 font-size:14px; /* Шрифт записи*/
}

Здесь мы задали настройки для списков ul li и добавили линию, которая будет отделять каждую запись. А теперь давайте настроим вывод наших миниатюр и для этого вставьте сразу после предыдущего следующий код:

.top_rec ul li img {
 width: 100px;  /* Размер изображения по ширине*/
 height: 75px; ;  /* Размер изображения по высоте*/
 border:1px solid #ccc;
 background:#fff;
 padding:2px;
 float:left;
 margin:0 10px 0 0px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Для Firefox */
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Для Safari и Chrome */
 box-shadow: 2px 2px 2px rgba(0,0,0,0.1); /* Параметры тени */
 -moz-transition: border 0.3s 0.05s ease;
 -o-transition: border 0.3s 0.05s ease;
 -webkit-transition: border 0.3s 0.05s ease;
} 

.top_rec li img:hover {
 border:1px solid #888;

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

На этом у меня все. Можете еще почитать про то, как можно сделать фиксированное или плавающее меню на сайте- думаю Вам будет интересно.

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

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ