Топ статей на сайте с картинками и без плагинов

топ статей на сайте с картинкамиПриветствую вас в очередной статье, посвященной фишкам по wordpress для новичков.

Ранее, я писал как сделать топ с миниатюрами в вордпрессе с использованием плагина Advanced Recent Posts Widget.

Сегодня же мы обойдемся простыми стандартными возможностями движка wordpress.

При этом мы сами сможем выбрать, какую статью выводит в сайдбар, а не делать вывод только по количеству комментарием или дате, или выбирать еще какую-либо сортировку.

Плюс мы сможем вывести не только картинку со ссылкой на статью, но и вообще ссылку на какой-либо сайт или партнерку.

А делается это очень просто.

Добавление новых ссылок с картинками

1. В админке блога слева находим раздел «ссылки», наводим на него и видим в выпадающем меню «Рубрики ссылок». Кликаем и создаем новую рубрику и сохраняем.

rubriki

2. Затем кликаем слева по подразделу «Добавить новую».

 

new-links

3. Заполняем поля. На скриншоте я показал что откуда брать, но ниже все же подробнее распишу.

obscn2

  • Название — это название самой ссылки при отображении в сайдбаре
  • Адрес — ссылка на пост, то есть переходите на статью, копируете URL со строки браузера и вставляете в это поле.
  • Описание — это title ссылки, т.е. тоже указываете название статьи.
  • Рубрики — ставим галочку, в той, которую вы создали предварительно.
  • Цель — выбираем _blank (открытие при клике в новом окне).
  • Отношение к ссылки — можете оставить пустым (ничего не выбирать).
  • Дополнительно:

  • Адрес картинки — переходим на статью, на которую будет вести ссылка, и если у нас там уже есть картинка, то просто наводим на нее курсор, нажимаем правой кнопкой мыши и выбираем «Копировать адрес изображения» и вставляем его в это поле.

Все остальные поля (адрес rss и заметки) оставляем пустыми. Можете указать рейтинг для ссылки.

Кликаем кнопку «сохранить» справа вверху.

4. Заходим в меню слева в раздел «Внешний вид > Виджеты» и перетаскиваем виджет «ссылки» в нужный вам сайдбар.

vidzet

Там можно указать количество ссылок и некоторые другие параметры.

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

Может быть такая ситуация что картинки, которые используются в статье слишком большие.

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

И в самый низ добавьте:

ul li img { 
width: 230px; /* размер картинки по ширине */
height: 151px;  /* размер картинки по высоте */
margin: 5px 5px 5px 5px;   /* отступ картинки сверху, справа, снизу, слева ; можно задать с минусом -5px */
}

Ну и соответственно можете подрегулировать эти значение для своего сайта.

Старался объяснить новичкам, надеюсь получилось

Оцените статью
Дневник Сеошника
Добавить комментарий