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

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

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

2013-12-22 автор: Виталий Кириллов

Всем привет! Не так давно, один из читателей блога 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, вы можете почитать тут.

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

/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()); }?>

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

Это еще не все! Теперь нам надо вывести популярные записи в сайдбаре. Открываем файл 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 уважением, Виталий Кириллов

Интересное на блоге

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

Виктор:

2017-08-09

Можете взять этот вариант (кому интересно) Вставить надо в functions.php :

class ntech_popular_posts extends WP_Widget {
	public function __construct() {
		parent::__construct(
	 		'ntech_popular_posts',
			__('Popular','ntech'),
			array( 'description' => __( 'Popular posts by number of comments.','ntech' ) )
		);
	}
 	public function form( $instance ) {
		$defaults = array(
			'date' => 1,
			'show_thumb3' => 1,
		);
		$instance = wp_parse_args((array) $instance, $defaults);
		$title = isset( $instance[ 'title' ] ) ? $instance[ 'title' ] : __( 'Popular','ntech' );
		$qty = isset( $instance[ 'qty' ] ) ? intval( $instance[ 'qty' ] ) : 3;
		$date = isset( $instance[ 'date' ] ) ? intval( $instance[ 'date' ] ) : 1;
		$show_thumb3 = isset( $instance[ 'show_thumb3' ] ) ? intval( $instance[ 'show_thumb3' ] ) : 1;
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php __( 'Title:','ntech' ); ?></label> 
			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		</p>	   
		<p>
			<label for="<?php echo $this->get_field_id( 'qty' ); ?>"><?php _e( 'Number of posts','ntech' ); ?></label> 
			<input id="<?php echo $this->get_field_id( 'qty' ); ?>" name="<?php echo $this->get_field_name( 'qty' ); ?>" type="number" min="1" max="6" step="1" value="<?php echo $qty; ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id("show_thumb3"); ?>">
				<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id("show_thumb3"); ?>" name="<?php echo $this->get_field_name("show_thumb3"); ?>" value="1" <?php if (isset($instance['show_thumb3'])) { checked( 1, $instance['show_thumb3'], true ); } ?> />
				<?php _e( 'Show thumbnail', 'ntech'); ?>
			</label>
		</p>
		<p>
			<label for="<?php echo $this->get_field_id("date"); ?>">
				<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id("date"); ?>" name="<?php echo $this->get_field_name("date"); ?>" value="1" <?php if (isset($instance['date'])) { checked( 1, $instance['date'], true ); } ?> />
				<?php _e( 'Show date ', 'ntech'); ?>
			</label>
		</p>
		
		<?php 
	}
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['qty'] = intval( $new_instance['qty'] );
		$instance['date'] = intval( $new_instance['date'] );
		$instance['show_thumb3'] = intval( $new_instance['show_thumb3'] );
		return $instance;
	}
	public function widget( $args, $instance ) {
		extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );
		$date = $instance['date'];
		$qty = (int) $instance['qty'];
		$show_thumb3 = (int) $instance['show_thumb3'];
		echo $before_widget;
		if ( ! empty( $title ) ) echo $before_title . $title . $after_title;
		echo self::get_popular_posts( $qty, $date, $show_thumb3);
		echo $after_widget;
	}
	public function get_popular_posts( $qty,$date, $show_thumb3) {
		global $post;
		$popular = get_posts( array( 
            'suppress_filters' => false, 
            'ignore_sticky_posts' => 1, 
            'orderby' => 'comment_count', 
            'numberposts' => $qty,
            ) );  
		echo '<ul class="popular-posts">';
		foreach($popular as $post) :
			setup_postdata($post);
			?>
		<div class="popular-posts-content">
			<a data-link="<?php the_permalink(); ?>">		 
			    <?php if ( $show_thumb3 == 1 ) : ?>
			      	<?php if ( has_post_thumbnail() ) { the_post_thumbnail('mini-thumb');} else { ?>
                         <img src="<?php echo get_template_directory_uri(); ?>/images/default-image.png"/>
                    <?php } ?>
			    <?php endif; ?>	
				<div class="widget-entry-meta">
                    <h4 id="title-hover"><?php echo get_the_title(); ?></h4>
				<?php if ( $date == 1 ) : ?>
                <div class="data">				
	                <div class="fa fa-clock-o data"><span> <?php the_time('d.m.Y');?></span></div>
					<div class="fa fa-comments-o data"><span> <?php comments_number( '0', '1', '%'); ?></span></div>
				</div>	
		        <?php endif; ?>
                </div>
			</a>
		</div>	
		<?php endforeach; wp_reset_postdata();
		echo '</ul>'."\r\n";
	}
}
add_action( 'widgets_init', create_function( '', 'register_widget( "ntech_popular_posts" );' ) );

Ответить

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

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

Открыть преобразователь

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

SEO Маяк