Новые статьи на сайте в сайдбаре с картинками
Очень простой в использовании плагин Newpost Catch, который позволяет отобразить в сайдбаре виджет с последними записями. При этом он отображает миниатюры, либо первую картинку из текста. Настроек практически нет, что и делает его популярным. Однако я дам несколько советов, как усовершенствовать данный плагин.
Установка подобного плагина немного украсит "скучные и серые" сайты.
Ссылку на последнюю версию плагина Newpost Catch можно найти в конце статьи. Если никогда не устанавливали плагины, то вот Инструкция по установке плагина WordPress.
После установки в админке сайта идем Внешний вид ► Виджеты и находим одноименный виджет Newpost Catch. Размещаем его в нужном месте сайдбара и видим такие настройки:
Не обращаем внимания на группу Facebook, а сразу переходим к настройкам:
- Width - ширина картинки/миниатюры;
- Height - высота картинки/миниатюры;
- Showposts - количество записей, которые будут отображаться в виджете;
- Display date - отображать или нет дату публикации.
Нажимаем сохранить и виджет отобразился на вашем сайте. Однако нам этого мало. Давайте немного "допилим" плагин, чтобы сделать отображение записей под стиль своего сайта, при помощи стилей CSS.
Настройка плагина Newpost Catch
"Допиливать" будем при помощи редактирования файла стилей плагина (style.css в папке с плагином на хостинге). Если еще не используете Notepad++, то советую, т.к. с ним редактировать файлы намного удобнее.
[infob name="Предупреждаю"]Если начинаете редактировать файлы движка или шаблона/плагинов, то не забывайте делать резервные копии файлов на всякий случай.[/infob]
Итак. Открываем файл style.css плагина и редактируем:
- #npcatch li
Добавляем следующие строки (по желанию):
border-bottom: 1px dotted #888888;
padding: 2px;Здесь: border-bottom - нижнее подчеркивание элемента толщиной 1px, пунктиром (dotted) и цветом #888888 (можно указать любой цвет, а поможет пипетка FastStone Capture). padding - это внутренний отступ (сверху справа снизу слева) в 2px (написано один раз, т.к. со всех сторон одинаковый отступ). В результате между элементами списка появится пунктирная линия, которая будет разделять их между собой. Должно выглядеть красиво. Главное подберите цвета правильно.
- #npcatch img
Здесь мы добавляем стили для самой картинки:
border: 1px solid #FB9F77;
margin: 2px 5px 2px 0;
padding: 5px;Поясню. С border мы уже разобрались - это рамка вокруг всей картинки. Свойства аналогичны border-bottom из предыдущего пункта, только здесь линия непрерывна (solid). margin - внешний отступ картинки, который позволит сделать промежуток между ней и другими элементами (текстом, элементами меню, нижним подчеркиванием). padding - уже разбирали выше.
В данном случае сочетание border и padding сделают красивый эффект - внутри картинка, снаружи рамка выбранного цвета, а между ними задний фон сайдбара. Если не поняли о чем речь, то посмотрите у меня в сайдбаре на последние комментарии и аватарки: у них белая рамка вокруг картинки. На своем сайте вы сами подберете отступ (padding) и цвет.
- #npcatch .title
Здесь мы можем задать ширину самого виджета. Дело в том, что он по-умолчанию идет в 135px. Если у вас сайдбар шире, то остается много неиспользованного пространства. В параметре width можно поменять цифры на нужные. Данный шаг сделает виджет более привлекательным для клика со стороны посетителя сайта.
- #npcatch li:hover {background:#F6F6F6;}
Данного параметра нет в файле стилей по-умолчанию. Вам следует его добавить, чтобы сделать эффект при наведении курсора на какой-либо из пунктов данного виджета. Попробуйте предложенный мною вариант и увидите, что при наведении мышки фон меняется на серый. Далее цвет подберите сами, исходя из дизайна. Добавив в эту строку параметр color:#000000;, можно изменять цвет шрифта при наведении (цвет так же сами подберите). Сочетание меняющегося фона и цвета шрифта будет смотреться отлично, а так же придаст ненавязчивую динамики сайту.
Если у вас шаблон не поддерживает миниатюры
Как уже говорилось в начале статьи, плагин Newpost Catch отображает как миниатюры, так и первую картинку из записи. Если Ваш шаблон WordPress не поддерживает возможность загрузки миниатюры, то необходимо немного "пошаманить".
Возвращаясь к миниатюрам. В большинстве шаблонов они поддерживаются. Достаточно загрузить картинку в нужную форму. В админке при написании поста справа снизу есть такая кнопка:
Нажав на нее добавляем картинку как обычно, только в конце нужно нажать следующее:
Нажимаем "Использовать как миниатюру", а затем "Сохранить изменения". После этого нажимаем крестик в правом верхнем углу (нажимать "Вставить в запись" НЕ НУЖНО!).
Иногда миниатюры уже "вшиты" в шаблон, однако не отображаются по-умолчанию. Их нужно просто-напросто включить. В форме редактирования записи идем в самый верхний правый угол и нажимаем:
В появившемся меню поставьте галочку напротив нужного пункта.
Если же шаблон не поддерживает миниатюры по-умолчанию, то решим эту проблему вставкой следующих строчек в файл functions.php (он находится в папке с шаблоном). Вставляем в самый конец файла:
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );}Далее останется вставить миниатюру, как описывалось выше.
[downpg wp="3.3.1" vp="1.0.8" href="http://wordpress.org/extend/plugins/newpost-catch/"]Скачать плагин Newpost Catch[/downpg]
Послесловие
Вот и все. Теперь Ваш сайт преобразился за счет добавления графики. Если не брать в расчет правки кода плагина, то вся "процедура" занимает от силы минуту. Не забывайте, что при обновлении плагина внесенные правки так же придется снова добавлять.
Помните, что в сайдбар довольно часто вставляют рекламные ролики. Допустим, вы заказали такой ролик в http://www.video-web.ru. Чтобы его отобразить его в сайдбаре, вам необходимо будет выбрать виджет "Текст" и разместить там ссылку на ваше видео, загруженное в Youtube. Далее сам WordPress преобразует эту ссылку в видео.
