Миниатюры последних записей в сайдбаре
Сегодня статья из разряда практических, в которой я предлагаю вам сделать в сайдбаре сайта автоматический вывод миниатюр последних статей. Вместо миниатюр (а можно и вместе с ними) вы можете указать заголовок статьи.
Все сделаем по шагам, чтобы каждый из вас мог реализовать подобное, даже не разбираясь в PHP/HTML/CSS. Кто не любит читать, может просто вставить представленный ниже код.
Вот что мы будем делать:
Подобная штука реализована у меня на блоге и читатели частенько интересуются как такое сделать у себя на сайте. Все сделано без плагина. При появлении новой статьи (а за ней и миниатюры в сайдбаре), последняя уходит в небытие и остальные сдвигаются на 1 позицию.
Если вы ленитесь разбираться в коде, или не знаете ничего о миниатюрах, то вот статья для вас Newpost Catch. В пункте "Если у вас шаблон не поддерживает миниатюры" расписано доступным языком как подключить миниатюры и использовать.
[infob]Делайте резервную копию используемых файлов. Для редактирования советую использовать бесплатную программу Notepad++, которая позволяет откатить изменения (CTRL+Z), пока не был закрыт в ней редактируемый файл.[/infob]
Насчет резервной копии файлов не шучу: пропишете что-то не правильно в код и сайт может "поехать", или вообще не работать. К тому же паника начнется, что все пропало... А так будет откуда взять рабочий вариант файлов и потом не спеша проверить где была допущена ошибка.
Шаг 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 увидеть параметры.
Дерзайте.
Давай, оцени статью!
