Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

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

Добрый день уважаемые читатели Progress-project.

Сегодня очередная максимально полезная тема на abrek-ad-abra.ru по улучшению поведенческого фактора на ваших ресурсах под управлением CMS WordPress.

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

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

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

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

И здесь думаю, что можно начать с достаточно известного плагина носящего название: «Featured Posts with thumbnails». Это достаточно функциональный плагин способный выводить наиболее читаемые или комментируемые записи с миниатюрами, но в месте с тем несёт и значительную нагрузку на блог и сервер в целом сжимая миниатюру из оригинального первого попавшего в статье изображения.

Но и ещё один плагин на который можно обратить внимание это «WP-PostViews». Данный плагин ведёт расчёт вывода постов исходя из количества их просмотра но к сожалению в нём отсутствует функция вывода миниатюр.

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

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

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

  • 1). Это простота и надёжность. Конечно придётся всё проделать руками но зато на выходе у вас получится чистый HTML код, что никак не повлияет на скорость загрузки вашего блога.
  • 2). Это возможность применения миниатюр которые генерируются с помощью WordPress или же вообще вы можете предварительно сделать любое необходимое вам по размеру изображение, что вовсе исключит какое-либо сжатие.
  • 3). Возможность вывода любых статей блога не зависимо от их популярности и количества просмотров.
  • 4). Вы сможете указать абсолютно любой текст в качестве анкора ссылки независимо от заголовков ваших постов.

Давайте теперь приступим уже не посредственно к реализации нашей задумки.

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

В дальнейшем я планирую посвятить этой теме отдельную статью, пока же опишу процесс вкратце.

Подключение поддержки миниатюр займёт у вас буквально пару минут, от вас всего навсего требуется добавить в самый низ файла действующей темы: functions.php до знака «?>» следующий код:

add_theme_support('post-thumbnails');

Теперь на странице редактирования записи у вас появиться дополнительный блок:

Если этого не произошло поменяйте вставленный только, что код в functions.php на:

if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');

Теперь то блок точно должен появиться.

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

  • 1). Существует два наиболее распространённых способа из которых первый располагает вывод изображения с левого края а заголовок со ссылкой с правого.
  • 2). И второй вариант вверху миниатюра внизу ссылка с заголовком.

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

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

Миниатюра у нас будет располагаться слева а ссылка с заголовком справа.

И для этого нам необходимо создать простенькую табличку. Удобнее всего это делать прямо в редакторе которым располагает 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>

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

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

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

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

<table class="popul_post">

После чего в файл темы style.css вставляем сами стили настраивая блок наших популярных записей под дизайн своего блога.

.popul_post {
 border: 1px solid #cccccc;
 border-radius: 10px;
 box-shadow: 2px 4px 5px #cccccc, 0 0 5px #cccccc inset;
 height: auto;
 margin: 1px;
 padding: 1px 2.1px 0 2px;
 width: 270px;
}
.popul_post h4 {
 color: #17586b;
 font-size: 19px;
 font-weight: bold;
 margin: 1px 10px 8px;
 text-shadow: 0 1px 2px #00d21c;
}
.popul_post td {
 padding: 3px 3px 3px 0;
}
.popul_post a {
 color: #08156f;
 font-size: 14px;
 font-weight: bold;
 line-height: 15px;
}
.popul_post img {
 border: 3px solid #cccccc;
 border-radius: 10px;
 float: left;
 margin: 2px;
}

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

Что касается миниатюр, как я и говорил здесь лучше всего их сделать отдельно по размерам подходящим под сайтбар вашего ресурса либо использовать те миниатюры которые генерируются непосредственно в самом WordPress располагаются они в корневой папки блога по адресу wp-content — uploads и имеют отличие от оригинального изображения дополнением на конце названия в виде цифр составляющих их размеры исходя из установленных параметров в настройках блога.

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

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

И для этого нам необходимо создать новую табличку уже с такой внутренней структурой:

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

Как видите данный блок у нас более вместим и содержит 5 ячеек в высоту и 2 в ширину.

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

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

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

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

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

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

Для этого находим среди файлов темы: functions.php, опускаемся в самый его низ где перед таким знаком ?> вставляем код счётчика:

function progressPostViews($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('progressPostViews')) { echo progressPostViews(get_the_ID()); }?>

Которая и будет выводить счётчик просмотра.

Результат должен быть примерно такой:

Дальше выводим сами популярные записей в боковой колонке блога.
Открываем sidebar.php выбираем наиболее подходящее место и вставляем блок:

<div class="popul">
 <h3>Популярные статьи</h3>
 <ul>
 <?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();
 ?>
 <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>

Здесь вы можете самостоятельно задавать желаемое количество выводимых постов меняя указанные цифры на любые свои:

'posts_per_page' => 5,

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

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

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

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

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

<div class="popul-post">
 <h3>Популярные статьи</h3>
 <?php
 $posts_qty = 6;
 $period = 160;
 $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 = 6;

Количество статей, при необходимости можно указать своё.

$period = 160;

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

<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(122,78)); ?>

CSS стили можно применить всё те-же.

Единственный здесь нюанс в том, что PHP коды в виджетах WordPress не выводит и что-бы это исправить вам нужно установить специальную функцию.

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

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-17

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

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

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

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

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

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

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

При использовании материалов сайта гиперссылка на обязательна!



seo-блог