Готовый плагин вывода последних материалов в виджете WordPress

8 комментариев

Приключилось. На одном из сайтов на WordPress надо стало сделать модуль, который выводил бы, например, справа, блок с последними интервью. Смысл в том, что надо было дать возможность выбирать категорию (рубрику), из которой будут выводиться новости, также выводить картинку-миниатюру, прикрепленную к записи, ну, и некоторые другие нужные и полезные фичи родились сами в процессе.

Собственно, изобретать я не стал, а взял готовый лисапед и переписал его: плагин Custom Recent Posts. Обозвал я это дело, не мудрствуя, Custom Recent Interviews.

Исходный плагин содержал только возможность вывести несколько статей из категории или по тегам.

Плагин содержит два виджета:

  1. Custom Recent Interviews — показывает записи по категориям
  2. Custom Recent Interviews by Tags — показывает записи по тегам

Теги и категории выбираются галочками в админке в виджете.

Установка плагина тривиальна.

  1. Распаковать .zip архив
  2. Загрузить папку `custom-recent-interviews-widget` на сервер в каталог `wp-content/plugins`.
  3. Активироать плагин в меню ‘Плагины’ в WordPress.
  4. В меню «Внешний вид» —> «Виджеты» добавить виджеты в сайдбар.

Есть вариант загрузки архива через WordPress (загрузить архив).

Настраивать это дело надо в сайдбаре, куда вы разместили виджет.

Возможности:

Заголовок
Заголовок блока в сайдбаре. Если заголовка нет — не выводится ничего.

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

Количество интервью
Сколько выводить статей в штуках. Если стоит ноль или поле пустое — выводятся пять последних записей.

Показать миниатюру?
Надо ли показывать изображение-миниатюру.

Ширина изображения
Ширина миниатюры в пикселях. Ширина имеет приоритетное значение перед высотой! То есть, если задать ширину 10, а высоту 20, то ширина будет 10, а высота подгонится автоматически.

Высота изображения
Высота в пикселях. Если нужно подогнать изображение по высоте — в поле Ширина указываем ноль.

Показать дату
Отображает дату поста.

Показать анонс
Нужно ли показывать анонс к записи.

ВКЛ/ВЫКЛ: из контента / из Цитаты
Флажок указывает, откуда брать анонс.

  • Если установлен — анонс берется из контента записи (разметка, которая сделана в контенте будет отображаться).
  • Если не установлен — анонс берется из поля Цитата под полем контента.

Количество слов в анонсе
Сколько выводить слов в анонсе. Если стоит ноль — выводится весь анонс.

Из каких рубрик выводить интервью
Галочками отмечаются рубрики, из которых нужно выводить записи.

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

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

/* Виджет для вывода свежих интервью */

/* по рубрикам */
.criw-wrap {list-style: none; margin: 0;}
.criw-item {padding: 5px 0;}
.criw-img {float: left; margin: 5px;}
.criw-preview {clear: both; padding: 0 5px 0 10px;}
.criw-title {font-weight: 700;}
.criw-date {}
.criw-html-before {}
.criw-html-after {}

/* по тегам */
.criw-tag-wrap {list-style: none; margin: 0;}
.criw-tag-item {padding: 5px 0;}
.criw-tag-img {float: left; margin: 5px;}
.criw-tag-preview {clear: both; padding: 0 5px 0 10px;}
.criw-tag-title {font-weight: 700;}
.criw-tag-date {}
.criw-tag-html-before {}
.criw-tag-html-after {}

где .criw-… — это отображение по категориям, а .criw-tag… — по тегам.

В процессе использования, выявился странный глюк Internet Explorer (не помню какой версии): Ослик отказался воспринимать ширину изображения, установленную в админке (<img width=»100″ … />, например). Побороть это можно в CSS вот так:

.criw-img {float: left; margin: 5px; width: 100px;}
...
.criw-tag-img {float: left; margin: 5px; width: 100px;}

Скриншоты.

screenshot-1

screenshot-2
screenshot-3

screenshot-4

Ну, и собственно, сам плагин для вывода последних новостей с изображением и заголовком: custom-recent-interviews-widget_wp3 СКАЧАТЬ.

P.S.: Сказать «спасибо» можно внизу в комментариях и/или справа, надавив на рыжую кнопку.

0

Еще:

  1. Не устанавливаются плагины в WordPress. Лечим.

Готовый плагин вывода последних материалов в виджете WordPress: 8 комментариев

  1. Александр

    Добрый день ))) … плаген просто супер … удобен и прост… Спасибо вам большое.
    Есть одно но! Не подскажите как убрать точку которая стает перед текстом… он очень мешает. Заранее благодарю )

    ↓
    1. merinovkv Автор записи

      Эти точки — это маркированный список. Попробуйте добавить стили в CSS, которые я в статье указал, а именно:
      /* по рубрикам */
      .criw-wrap {list-style: none;}
      /* по тегам */
      .criw-tag-wrap {list-style: none;}
      Это должно помочь.

      ↓
  3. Nik

    Здравствуйте, хороший плагин, но вот пара вопросов — можно ли добавить возможность прокрутки новостей в анонсе, т.е. выводится 3-5 новостей, но фактически их 50, что бы можно было пролистать.

    ↓
  4. korers

    Подскажите как вставить стили в WP4. Вставляю в custom.css, но все-равно точки маркированного списка остаются, видимо тянет основной стиль.

    ↓
    1. merinovkv Автор записи

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

      ↓
    1. merinovkv Автор записи

      В файлах criw-cat.php (со строки 70) замените это:
      a href="< ?php the_permalink(); ? rel="nofollow">" rel="bookmark" title="< ?php the_title_attribute(); ?>" class="criw-title">< ?php the_title(); ?>
      < ?php if ($show_date) : ?>

      < ?php echo "("; ?>< ?php echo get_the_date(); ?>< ?php echo ")"; ?>
      < ?php endif; ?>
      на это
      < ?php if ($show_date) : ?>

      < ?php echo "("; ?>< ?php echo get_the_date(); ?>< ?php echo ")"; ?>
      < ?php endif; ?>
      a href="< ?php the_permalink(); ? rel="nofollow">" rel="bookmark" title="< ?php the_title_attribute(); ?>" class="criw-title">< ?php the_title(); ?>

      и criw-tag.php (со строки 72) вот этот кусок
      a href="< ?php the_permalink(); ? rel="nofollow">" rel="bookmark" title="< ?php the_title_attribute(); ?>" class="criw-tag-title">< ?php the_title(); ?>
      < ?php if ($show_date) : ?>

      < ?php echo "("; ?>< ?php echo get_the_date(); ?>< ?php echo ")"; ?>
      < ?php endif; ?>
      замените на этот:
      < ?php if ($show_date) : ?>

      < ?php echo "("; ?>< ?php echo get_the_date(); ?>< ?php echo ")"; ?>
      < ?php endif; ?>
      a href="< ?php the_permalink(); ? rel="nofollow">" rel="bookmark" title="< ?php the_title_attribute(); ?>" class="criw-tag-title">< ?php the_title(); ?>

      ну, или в CSS можете извернуться.

      ↓

Добавить комментарий