Ваш промокод mojWPAds на плагин рекламы для WordPress >>

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

последние новости с миниатюрамиОчень простой в использовании плагин 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/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


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

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

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

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

    • Виталий says:

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

      • Ubpont says:

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

      • Ubpont says:

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

        • Виталий says:

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

          • Ubpont says:

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

  2. Андрей Долгов says:
    http://smartrunet.ru

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

  3. Danilkin says:
    http://fonavto.ru

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

  4. Cashve says:

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

    • Виталий says:

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

  5. Андрей says:
    http://zarobitok.ru

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

    • Виталий says:

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

      • Андрей says:
        http://zarobitok.ru/

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

  6. DimaBerg says:
    http://dimaberg.ru/

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

    • Виталий says:

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

  7. александр says:
    http://audiolot.ru

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

  8. александр says:
    http://audiolot.ru

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

  9. Сергей says:

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

    • Виталий says:
      http://mojWP.ru/

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

  10. Сергей says:

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

  11. Ольга says:
    http://olgapoz.ru/

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

    • Виталий says:
      http://mojWP.ru/

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

  12. Екатерина says:
    http://modgid.ru/

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

  13. Михаил says:

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

    • Виталий says:
      http://mojWP.ru/

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

  14. Александр says:

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

    • Виталий says:
      http://mojWP.ru/

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

      • Александр says:

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

        • Виталий says:
          http://mojWP.ru/

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

  15. Анна says:
    http://zdorovayamama.com/

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

    • Виталий says:
      http://mojWP.ru/

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

      #npcatch .title {float: none !important;}
      • Анна says:
        http://zdorovayamama.com/

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

  16. Данила says:

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

    • Виталий says:
      http://mojWP.ru/

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

  17. Данила says:

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

  18. Эдуард says:

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

  19. Вадим says:
    http://gamerrors.ml/

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

  20. Наталья says:
    http://joys-of-life.ru/

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

  21. Надежда says:
    http://vkpluss.ru/

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

  22. Надежда says:
    http://vkpluss.ru/

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

  23. Надежда says:
    http://vkpluss.ru/

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

  24. Ирина says:
    http://ulitka.kharkov.ua/

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

    • Виталий says:
      http://mojWP.ru/

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

  25. Андрей и Даша says:
    http://thebizfromscratch.ru/

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

  26. Ап says:
    http://www.sorek.ru

    херня

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

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

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.21MB | MySQL:142 | 0,388sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!