Миниатюры последних записей в сайдбаре
Сегодня статья из разряда практических, в которой я предлагаю вам сделать в сайдбаре сайта автоматический вывод миниатюр последних статей. Вместо миниатюр (а можно и вместе с ними) вы можете указать заголовок статьи.
Все сделаем по шагам, чтобы каждый из вас мог реализовать подобное, даже не разбираясь в PHP/HTML/CSS. Кто не любит читать, может просто вставить представленный ниже код.
Вот что мы будем делать:
Подобная штука реализована у меня на блоге и читатели частенько интересуются как такое сделать у себя на сайте. Все сделано без плагина. При появлении новой статьи (а за ней и миниатюры в сайдбаре), последняя уходит в небытие и остальные сдвигаются на 1 позицию.
Если вы ленитесь разбираться в коде, или не знаете ничего о миниатюрах, то вот статья для вас Newpost Catch. В пункте "Если у вас шаблон не поддерживает миниатюры" расписано доступным языком как подключить миниатюры и использовать.
Насчет резервной копии файлов не шучу: пропишете что-то не правильно в код и сайт может "поехать", или вообще не работать. К тому же паника начнется, что все пропало... А так будет откуда взять рабочий вариант файлов и потом не спеша проверить где была допущена ошибка.
Шаг 1. Подключаем PHP в виджет Текст
Сейчас мы подключим отработку PHP в стандартном виджете Текст. Делается это один раз, а использовать можете сколько угодно раз.
Открываем functions.php (в папке с шаблоном лежит) и добавляем перед закрывающим ?> (конец файла) следующий код:
| 1 2 3 4 5 6 7 8 9 10 | 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. Код последних записей
Теперь идем в админку сайта, там в виджеты и добавляем стандартный виджет Текст с таким кодом:
| 1 2 3 4 5 6 7 | <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), вставляем следующее:
| 1 2 3 4 5 6 | .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; (отступ: сверху, справа, снизу, слева).
Послесловие
Чтобы добавить заголовок статьи (или заменить им миниатюру), нужно использовать
| 1 | <?php the_title(); ?> |
Вот так будет выглядеть сочетание миниатюры и заголовка статьи:
| 1 | <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/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru
Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи.
Олег: 
Максим Л: 
Дмитрий: 
александр: 
Сергей: 
На сайте опубликовано
Одобренных комментариев
Доброе время суток Виталий отлично все написано понятно и доступно, могу смело написать, что Вы мастер и профи в своем деле и написании статей.
Получилось у меня не так как у вас Виталий, размер сайдбара у меня маловат, но все таки это лучше чем использовать плагин Advanced Recent Posts, приступаю к его удалению.
Еще раз спасибо.
осталось оформить под стиль сайта.
Вообще-то выглядит здорово. Только не уверена, что эта штука нужна. Сайдбары и так ломятся от всякой всячины, а последние статьи на главной всё равно выводятся.
Вы конечно мыслите Ольга по женски широко,но не у всех же "ломятся",а от плагинов точно ломятся,до 60-ти уже доходит. И главное все "нужные".
Доброе время суток Виталий! вижу у Вас на сайте появилась функция подсчетов комментариев, постик не думаете об этом написать.
Заранее благодарен.
Это позаимствованное решение. Писать не буду.
Виталий, всегда с интересом читаю ваш сайт. Но вот зачем может пригодится вывод последних статей с сайдбаре никогда не мог понять? Их же и так сразу очень хорошо видно в ленте постов. Они же последние. Уж лучше рандомные или самые популярные там.
1. Не все приходят в статью с Главной
2. Мыслить шире нужно! Функция позволяет организовать отличнейший сайт-новостник, или другой тематики, с подачей материалов из разных рубрик.
Познавательно, надо попробовать 🙂
Спасибо, Вам, за информацию, я тоже не сторонница плагинов, и везде стараюсь найти решение,где можно обойтись без них. У меня стоят только самые необходимые, без которых никак нельзя. Беру вашу статью на заметку. В ближайшие дни займусь установкой. Удачи Вам!
Здравствуйте, Виталий, подскажите, пожалуйста, как можно реализовать вывод миниатюр записей на странице по меткам и категориям (т.е. на каждой странице выводятся миниатюры с определенными метками и категориями), как на сайте http://www.allcarz.ru/catalog/acura/
Добрый. Использовать php.
В комментарии чисто физически ответ вам дать не получится, т.к. это целая статья с пояснениями будет.
Погуглите по данному вопросу, либо обращайтесь.
Здравствуйте Виталий
А что с безопасностью? Я где то слышал, что php вставлять в html небезопасно.
Сам не специалист, говорят злоумышленник может как-то получить доступ к сайту...
Прокомментируйте, плиз
Добрый.
Весь WordPress - это php.
На HTML только сверстан ваш шаблон. А чтобы он получил функционал - в него вставляются функции php.
Добрый день!
Подскажите пожалуйста после вставки кода пропадает все содержимое которое располагается ниже? а то-есть все виджеты 🙂
Спасибо!
Статья помогла думать в нужном направлении, за что огромное СПАСИБО!!!
Почему-то у меня после добавления этого кода в шаблон single начинает глючить весь пост, отображается не та запись и появляется тег "далее" под записью.