mojwp.ru
Генератор рекламных блоков »
Назад

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

Опубликовано: 07.12.2012
Время на чтение: 6 мин
45
479

последние новости с миниатюрамиОчень простой в использовании плагин 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 (можно указать любой цвет, а поможет пипетка FastStone Capture). padding - это внутренний отступ (сверху справа снизу слева) в 2px (написано один раз, т.к. со всех сторон одинаковый отступ). В результате между элементами списка появится пунктирная линия, которая будет разделять их между собой. Должно выглядеть красиво. Главное подберите цвета правильно.

  • #npcatch img

Здесь мы добавляем стили для самой картинки:

Поясню. С 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 (он находится в папке с шаблоном). Вставляем в самый конец файла:

Далее останется вставить миниатюру, как описывалось выше.
[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 преобразует эту ссылку в видео.

Новые статьи на сайте в сайдбаре с картинками
5 (100%)
Проголосовало: 1

Давай, оцени статью!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Михаил
    Опубликовано: 07.07.2014 Ответить на сообщение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Наталья
    Опубликовано: 03.06.2015 Ответить на сообщение

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

  • Надежда
    Опубликовано: 17.11.2015 Ответить на сообщение

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

  • Надежда
    Опубликовано: 17.11.2015 Ответить на сообщение

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

  • Надежда
    Опубликовано: 17.11.2015 Ответить на сообщение

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

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

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

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

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

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

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

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

    херня

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

X
SEO-тема для WordPress сайта
Все заточено под продвижение. Максимально быстрая. Встроен функционал.