mojwp.ru
Назад

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

Опубликовано: 12.06.2013
18
768

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

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

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

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

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

Если вы ленитесь разбираться в коде, или не знаете ничего о миниатюрах, то вот статья для вас Newpost Catch. В пункте "Если у вас шаблон не поддерживает миниатюры" расписано доступным языком как подключить миниатюры и использовать.
[infob]Делайте резервную копию используемых файлов. Для редактирования советую использовать бесплатную программу Notepad++, которая позволяет откатить изменения (CTRL+Z), пока не был закрыт в ней редактируемый файл.[/infob]

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

Шаг 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. Код последних записей

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


Данный код отобразит 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; (отступ: сверху, справа, снизу, слева).

Послесловие

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

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

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

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

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

    Дерзайте.

    Автор:
    Виталий
    Поделиться
    Похожие записи
    Черкани пару строк
    • Андрей
      Опубликовано: 13.06.2013 Ответить на сообщение

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

    • Андрей
      Опубликовано: 13.06.2013 Ответить на сообщение

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

      • Виталий
        Опубликовано: 13.06.2013 Ответить на сообщение

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

    • Ольга
      Опубликовано: 15.06.2013 Ответить на сообщение

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

      • Александр
        Опубликовано: 16.06.2013 Ответить на сообщение

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

    • Андрей
      Опубликовано: 17.06.2013 Ответить на сообщение

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

      • Виталий
        Опубликовано: 17.06.2013 Ответить на сообщение

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

    • Dmitry
      Опубликовано: 19.06.2013 Ответить на сообщение

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

      • Виталий
        Опубликовано: 19.06.2013 Ответить на сообщение

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

    • Игорь
      Опубликовано: 19.06.2013 Ответить на сообщение

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

    • Ирина
      Опубликовано: 27.06.2013 Ответить на сообщение

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

    • Дмитрий
      Опубликовано: 03.01.2014 Ответить на сообщение

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

      • Виталий
        Опубликовано: 03.01.2014 Ответить на сообщение

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

    • Влас
      Опубликовано: 07.01.2014 Ответить на сообщение

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

      • Виталий
        Опубликовано: 08.01.2014 Ответить на сообщение

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

    • Василий
      Опубликовано: 12.10.2015 Ответить на сообщение

      Добрый день!

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

      Спасибо!

    • webolamer
      Опубликовано: 13.10.2015 Ответить на сообщение

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

    • Anonim
      Опубликовано: 19.10.2015 Ответить на сообщение

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

    Имя
    Укажите своё имя и фамилию
    E-mail
    Без СПАМа, обещаем
    Текст сообщения
    Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.