Новые статьи на сайте в сайдбаре с картинками

последние новости с миниатюрамиОчень простой в использовании плагин Newpost Catch, который позволяет отобразить в сайдбаре виджет с последними записями. При этом он отображает миниатюры, либо первую картинку из текста. Настроек практически нет, что и делает его популярным. Однако я дам несколько советов, как усовершенствовать данный плагин.

Установка подобного плагина немного украсит "скучные и серые" сайты.

Ссылку на последнюю версию плагина Newpost Catch можно найти в конце статьи. Если никогда не устанавливали плагины, то вот Инструкция по установке плагина WordPress.

После установки в админке сайта идем Внешний видВиджеты и находим одноименный виджет Newpost Catch. Размещаем его в нужном месте сайдбара и видим такие настройки:

последние записи миниатюра

Не обращаем внимания на группу Facebook, а сразу переходим к настройкам:

  • Width - ширина картинки/миниатюры;
  • Height - высота картинки/миниатюры;
  • Showposts - количество записей, которые будут отображаться в виджете;
  • Display date - отображать или нет дату публикации.

Нажимаем сохранить и виджет отобразился на вашем сайте. Однако нам этого мало. Давайте немного "допилим" плагин, чтобы сделать отображение записей под стиль своего сайта, при помощи стилей CSS.

Настройка плагина Newpost Catch

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

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

Итак. Открываем файл 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 не поддерживает возможность загрузки миниатюры, то необходимо немного "пошаманить".

Возвращаясь к миниатюрам. В большинстве шаблонов они поддерживаются. Достаточно загрузить картинку в нужную форму. В админке при написании поста справа снизу есть такая кнопка:

вставить миниатюру в запись wordpress

Нажав на нее добавляем картинку как обычно, только в конце нужно нажать следующее:

как вставить миниатюру в запись wordpress

Нажимаем "Использовать как миниатюру", а затем "Сохранить изменения". После этого нажимаем крестик в правом верхнем углу (нажимать "Вставить в запись" НЕ НУЖНО!).

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

как вставить миниатюру в запись вордпресс

В появившемся меню поставьте галочку напротив нужного пункта.

Если же шаблон не поддерживает миниатюры по-умолчанию, то решим эту проблему вставкой следующих строчек в файл functions.php (он находится в папке с шаблоном). Вставляем в самый конец файла:

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );}

Далее останется вставить миниатюру, как описывалось выше.

Требуемая версия WP:  3.3.1
Рассмотренная версия плагина:  1.0.8
Скачать плагин

Послесловие

Вот и все. Теперь Ваш сайт преобразился за счет добавления графики. Если не брать в расчет правки кода плагина, то вся "процедура" занимает от силы минуту. Не забывайте, что при обновлении плагина внесенные правки так же придется снова добавлять.

Помните, что в сайдбар довольно часто вставляют рекламные ролики. Допустим, вы заказали такой ролик в http://www.video-web.ru. Чтобы его отобразить его в сайдбаре, вам необходимо будет выбрать виджет "Текст" и разместить там ссылку на ваше видео, загруженное в Youtube. Далее сам WordPress преобразует эту ссылку в видео.

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

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

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

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

Опубликовано 45 комментариев
  1. Ubpont (16 комм.):

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

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

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

      • Ubpont (16 комм.):

        Немного не понял вас. Это как бы борьба со спамерами или что? Можете объяснить поконкретнее?
        p.s. Зарывают в земле очевидно не только собак.

      • Ubpont (16 комм.):

        В падлу по нормальному ответить что ли? Зачем тогда вообще блог вести? Может ну его нах, а Виталик?

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

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

          • Ubpont (16 комм.):

            ладно, извините.

  2. Андрей Долгов (7 комм.):
    http://smartrunet.ru

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

  3. Danilkin (1 комм.):
    http://fonavto.ru

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

  4. Cashve (1 комм.):

    Добрый вечер. А не подскажите как задействовать вывод этот плагина с помощью php кода (функции вызова). Виджеты не использую, не дело это 🙂

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

      Не подскажу, т.к. использую виджет - это дело! Не вижу смысла искать подобное решение.

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

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

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

      у меня не плагином

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

        Если у Вас это сделано не через плагин, тогда через верстку? сколько будет стоить?

  6. DimaBerg (1 комм.):
    http://dimaberg.ru/

    Нормально так. Искал решение для нового сайта. Очень хорошо получилось! Но я бы хотел еще его допилить. Как выводить еще превью первых нескольких слов?

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

      копайте в сторону функции the_excerpt()
      Нужно будет плагин модифицировать немного.

  7. александр (2 комм.):
    http://audiolot.ru

    Подскажите, а как вывести миниатюры в виджете без плагинов, т.е. покопаться в коде?

  8. александр (2 комм.):
    http://audiolot.ru

    Все, разобрался без плагина. Нужно в файле вордпресса default-widgets.php добавить вывод превьюшек get_the_post_thumbnail

  9. Сергей (2 комм.):

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

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

      Добрый день.
      Не задавался целью сделать подобное с этим плагином, т.к. не востребовано.
      Задуманное вами проще сделать без плагина.

  10. Сергей (2 комм.):

    до тега (Море)

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

    А у меня при редактировании пишет newpost-catch/style.css (неактивен) и все записи под миниатюрами, а не справа. Как исправить

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

      уберите вот это в файле стилей http://prntscr.com/1us6kt

  12. Екатерина (1 комм.):
    http://modgid.ru/

    Спасибо за интересную статью! Теперь мой сайт преобразился

  13. Михаил (1 комм.):

    Доброго времени суток, собственно вопрос. Не отображаются картинки (или отображаются не все) на главной странице сайта, на внутренних страницах отображаются все, в какую сторону копать? что бы решить вопрос с отображением картинок на главной...

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

      Добрый.
      Если честно, то затрудняюсь ответить.
      Вероятно плагин нестабильно работает у вас,либо конфликтует.
      Кеш очистили сайта?

  14. Александр (2 комм.):

    Доброго времени суток,скажите , а как можно организовать вывод картинок в два столбца ? Читал , что можно с помощью width: 50%; float: left; , а как это правильно применить не знаю .

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

      Добрый.
      Применять в файле стилей шаблона (обычно style.css). Здесь вам нужно указать для какого элемента сделать обтекание слева.
      К сожалению, отсюда больше ничем не помогу, т.к. даже сайт не знаю. Все шаблоны индивидуальны.

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

        Я имел в виду картинки в обсуждаемом виджете . Стандартно они в одной колонке , а я хотел бы сделать в двух параллельных . Пробовал в CSS прописать в #npcatch li display: block;
        float: left;
        width: 45%; , да виджет разделяется на две колонки , но при этом тянет за собой другие виджеты

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

          Еще раз продублирую свою же фразу:
          "К сожалению, отсюда больше ничем не помогу, т.к. даже сайт не знаю. Все шаблоны индивидуальны."

  15. Анна (3 комм.):
    http://zdorovayamama.com/

    у меня получилась картинка, а внизу название статьи. А как сделать, чтобы все было в строчку?
    Спасибо.

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

      Добавьте в файл стилей шаблона строку

      #npcatch .title {float: none !important;}
      • Анна (3 комм.):
        http://zdorovayamama.com/

        Большое спасибо, теперь гораздо красивее )))

  16. Данила (4 комм.):

    Скажите, а как в плагине Newpost Catch заголовок виджета сделать ссылкой? Спасибо.

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

      Заголовок виджета ссылкой делается через файл функций. Гуглите как сделать виджет на wordpress

  17. Данила (4 комм.):

    Подскажите, пожалуйста, если конечно располагаете этой информацией!

  18. Эдуард (1 комм.):

    Спасибо. Неделю периодически выискивал информацию по редактированию виджетов. У вас наконец-то нашёл.

  19. Вадим (1 комм.):
    http://gamerrors.ml/

    Скажите, а как размер текста изменить?

  20. Наталья (1 комм.):
    http://joys-of-life.ru/

    СПАСИБО ЗА ПЛАГИН.
    Тут писали в комментариях, что на главной странице этот плагин не нужен. А я поставила и с помощью еще одного плагина Виджет Логик задала, чтобы на главной не показывали, а на всех остальных записях показываются свежие записи с картинками. Мне понравилось

  21. Надежда (18 комм.):
    http://vkpluss.ru/

    У меня нет картинок почему то, а квадратики на месте, в смысле рамочки, что делать, а?

  22. Надежда (18 комм.):
    http://vkpluss.ru/

    Погорячилась, все получилось

  23. Надежда (18 комм.):
    http://vkpluss.ru/

    А как тоже самое для комментаторов сделать?

  24. Ирина (1 комм.):
    http://ulitka.kharkov.ua/

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

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

      Попросить у разработчика плагина внедрить подобную функцию

  25. Андрей и Даша (1 комм.):
    http://thebizfromscratch.ru/

    Здравствуйте, Виталий. Довольно познавательная статья! Как раз хотели приукрасить свой блог, надеемся плагин, про который Вы рассказываете поможет нам)

  26. Ап (1 комм.):
    http://www.sorek.ru

    херня

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

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

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