«Автор блога» — Бесплатный виджет со слайдером фотографий ВК и ссылками на профили

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

Собственно у меня он и стоит справа в сайдбаре, написал годно, код нравится, решил поделиться, он крайне нехитрый.

Плюсы слайдера:

  • Менее 5 kb кода
  • Красивый фон с продуманными градиентами
  • Основную область занимает слайдер с 5 последними картинками из профиля ВК (аватарками), имеющими анимацию при наведении
  • Шапка — удобная большая ссылка на автора блога, меняет градиент при наведении
  • В «подвале» расположены 5 ссылок на социальные профили автора
  • Стрелки «Вперёд» и «назад», текст можно поменять как вздумается
  • Кэш на 12 часов (можно настроить на любой промежуток), чтобы при каждой загрузке страницы не бомбардировать vk одними и теми же запросами
  • Компактный размер слайдера, не занимает много места, 300×408 px
  • Идеально встаёт на популярную и всем известную SEO-оптимизированную wordpress-тему, на которой сделан этот блог

Установка виджета «Автор блога» от NiceSEO

Устанавливаем любой плагин для выполнения кода в виджетах. У меня стоит простейший PHP Code Widget, рекомендую. Затем создаём виджет вида PHP-код и пишем в него:

Где значения у функции: id вконтакте (чьи фотки профиля нам нужны для слайдера), token вконтакте, ссылка на шапке, Текст — кто автор, ссылка на vk, ссылка на facebook, ссылка на instagram, ссылка на last.fm, ссылка на веб, кэш — сколько секунд.

Как получить токен вконтакте:

1. Создать приложение на странице https://vk.com/editapp?act=create — возможно, потребуется подтверждение по телефону.

2. Перейти по следующей ссылке, где 669125 замените на id вашего приложения:

3. Нажмите «Ок» во всплывающем окне, и перейдёте на страницу с адресом https://oauth.vk.com/blank.html#access_token=f26e2c313202d33a867ed2bc03672dfgt3453654gfh&expires_in=0&user_id=357808168

откуда копируем access_token (начинается на f26e2 и заканчивается на 54gfh в примере)

В своей теме в style.css либо любым другим способом, главное чтобы он подгружался на странице со слайдером, добавляем CSS-код:

Также делаем с JS-кодом:

Теперь в functions.php (либо я, например, пишу подобные вещи в плагин profunctions.php и вам советую) добавим следующий код:

Всё, если всё сделали правильно, и вписали все нужные значения, то всё, по идее, должно работать.

Как видите, кода пара килобайт, а сколько красоты!

P.S. Конечно, можно было бы оформить всё в красивую настройку виджета через Input-поля в админке, но зачем? Тратить драгоценные человеко-часы на написание того, что посетители не видят, а у админа одинаковое количество времени занимает как правка переменных в вызове функии в редактировании виджета, так и заполнение там же input-полей.

С вами был Linur, всем спасибо за внимание.

 

 

Продолжать писать подобные красивые плагины?
Конечно, очень красивоШлак, не интересно

Оцените статью!

5 (100%) всего голосов: 1

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Для отправки сообщения выберите лишнее изображение