Миниатюры последних записей в сайдбаре

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

Все сделаем по шагам, чтобы каждый из вас мог реализовать подобное, даже не разбираясь в PHP/HTML/CSS. Кто не любит читать, может просто вставить представленный ниже код.

Вот что мы будем делать:

миниатюра записи

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

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

Внимание
Делайте резервную копию используемых файлов. Для редактирования советую использовать бесплатную программу Notepad++, которая позволяет откатить изменения (CTRL+Z), пока не был закрыт в ней редактируемый файл.

Насчет резервной копии файлов не шучу: пропишете что-то не правильно в код и сайт может "поехать", или вообще не работать. К тому же паника начнется, что все пропало... А так будет откуда взять рабочий вариант файлов и потом не спеша проверить где была допущена ошибка.

Шаг 1. Подключаем PHP в виджет Текст

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

Открываем functions.php (в папке с шаблоном лежит) и добавляем перед закрывающим ?> (конец файла) следующий код:

function php_in_widgets($widget_content) {
	if (strpos($widget_content, '<' . '?') !== false) {
		ob_start();
		eval('?' . '>' . $widget_content);
		$widget_content = ob_get_contents();
		ob_end_clean();
	}
	return $widget_content;
}
add_filter('widget_text', 'php_in_widgets', 99);

Сохранили ► закинули на хостинг ► убедились, что сайт работает.

Шаг 2. Код последних записей

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

<ul>
<?php query_posts('showposts=4&cat=-1'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><div class="lasttumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail();?></a></div></li>
<?php endwhile; endif; ?>
<br clear="left"/>
</ul>

Данный код отобразит 4 последних миниатюры статей (showposts=4), исключит рубрику с порядковым номером 1 (cat=-1). Цифру 4 можете заменить на произвольное.

Если не хотите исключать какую-нибудь рубрику, то уберите эти символы &cat=-1. Если же хотите показывать только из определенной рубрики, то будет выглядеть так &cat=1,5,21, т.е. через запятую и без минусов. Кто не знает как узнать ID (номер) рубрики, то почитайте статью Как не показывать записи рубрики на главной странице и в RSS.

Шаг 3. Наводим красоту при помощи CSS

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

В коде выше я задал class="lasttumb". Поэтому в файл стилей шаблона (расширение .css), вставляем следующее:

.lasttumb img {
width:132px;
height:106px;
float:left;
border: none !important;
}

Поясняю:

  • width:132px; - фиксированная ширина картинки. У меня они больше изначально, поэтому я их обжимаю до нужного мне размера. С точки зрения нагрузки на сервер это не правильно. Но я не наблюдаю проблем на своем хостинге.
  • height:106px; - это высота. Все аналогично ширине.
  • float:left; - обтекание слева. Т.е. миниатюры будут не друг под другом, а "обжиматься" по левой стороне.
  • border: none !important; - запретить рамку вокруг картинки. Вам может не понадобиться. Это у меня в шаблоне по-умолчанию все img с рамкой.

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

Между картинками можно сделать пустое пространство, чтобы они не слипались. Для этого можно добавить padding: 2px 5px 3px 0; (отступ: сверху, справа, снизу, слева).

Послесловие

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

<?php the_title(); ?>

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

<li><div class="lasttumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail();?><?php the_title(); ?></a></div></li>

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

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

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

Дерзайте.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 18 комментариев
  1. Андрей (129 комм.):
    http://zarobitok.ru/

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

  2. Андрей (129 комм.):
    http://zarobitok.ru/

    Получилось у меня не так как у вас Виталий, размер сайдбара у меня маловат, но все таки это лучше чем использовать плагин Advanced Recent Posts, приступаю к его удалению.
    Еще раз спасибо.

    • Виталий (1674 комм.):

      осталось оформить под стиль сайта.

  3. Ольга (1 комм.):
    http://bigros.ru

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

    • Александр (2 комм.):
      http://bakznak.ru

      Вы конечно мыслите Ольга по женски широко,но не у всех же "ломятся",а от плагинов точно ломятся,до 60-ти уже доходит. И главное все "нужные".

  4. Андрей (129 комм.):
    http://zarobitok.ru/

    Доброе время суток Виталий! вижу у Вас на сайте появилась функция подсчетов комментариев, постик не думаете об этом написать.
    Заранее благодарен.

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Это позаимствованное решение. Писать не буду.

  5. Dmitry (11 комм.):
    http://wpnice.ru/

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

    • Виталий (1674 комм.):
      http://mojWP.ru/

      1. Не все приходят в статью с Главной
      2. Мыслить шире нужно! Функция позволяет организовать отличнейший сайт-новостник, или другой тематики, с подачей материалов из разных рубрик.

  6. Игорь (1 комм.):
    http://www.cool-profit.ru

    Познавательно, надо попробовать 🙂

  7. Ирина (4 комм.):
    http://batalova62.ru/

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

  8. Дмитрий (1 комм.):

    Здравствуйте, Виталий, подскажите, пожалуйста, как можно реализовать вывод миниатюр записей на странице по меткам и категориям (т.е. на каждой странице выводятся миниатюры с определенными метками и категориями), как на сайте http://www.allcarz.ru/catalog/acura/

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Добрый. Использовать php.
      В комментарии чисто физически ответ вам дать не получится, т.к. это целая статья с пояснениями будет.
      Погуглите по данному вопросу, либо обращайтесь.

  9. Влас (3 комм.):

    Здравствуйте Виталий
    А что с безопасностью? Я где то слышал, что php вставлять в html небезопасно.
    Сам не специалист, говорят злоумышленник может как-то получить доступ к сайту...
    Прокомментируйте, плиз

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Добрый.
      Весь WordPress - это php.
      На HTML только сверстан ваш шаблон. А чтобы он получил функционал - в него вставляются функции php.

  10. Василий (1 комм.):

    Добрый день!

    Подскажите пожалуйста после вставки кода пропадает все содержимое которое располагается ниже? а то-есть все виджеты 🙂

    Спасибо!

  11. webolamer (1 комм.):
    http://webolamer.ru/

    Статья помогла думать в нужном направлении, за что огромное СПАСИБО!!!

  12. Anonim (1 комм.):
    http:astartaview.ru

    Почему-то у меня после добавления этого кода в шаблон single начинает глючить весь пост, отображается не та запись и появляется тег "далее" под записью.

Не держи в себе. Выскажись.

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

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.53MB | MySQL:81 | 0,551sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html