В Оружейной веб-мастера" читают о том, как создать сайт или блог на Wordpress, как раскрутить сайт или блог самостоятельно, а также о том, как заработать на своём сайте и получать пассивный доход в Интернет.

Эффект загнутого угла страницы с плагином Page Peel

page-peel-mini

Доброго времени суток, друзья !:)

Продолжаем рассматривать полезные штучки для оформления блога на WordPress. На очереди плагин Page Peel, с помощью которого можно сделать красивый загнутый угол у страниц блога. За этим загнутым углом любопытный пользователь, потянувшийся туда мышкой, может найти для себя какую-то вкусняшку, которую вы заранее туда положили. :)

Я видел такие уголки на некоторых блогах, и они мне всегда нравились. Как это выглядит можно посмотреть вживую на моем тренировочном блоге или на картинке:

Эффект загнутого угла страницы - плагин Page Peel

А вот угол при раскрытии:

Плагин Page Peel: посетитель разворачивает свой подарок...

"Дёрни, внученька, за веревочку..."

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

Почему такого уголка пока нет в “Оружейной”? Об этом немного позже.

Последние пару дней я немного снизил темп наполнения этого блога содержимым. Нужно было время, чтобы произвести кое-какие улучшения блога, а также начать изучать обучающий курс Александра Борисова “Как стать блоггером-тысячником”. Кроме того, давно “стынет” другой мой проект… Но все эти замечательные занятия не отменяют основного предназначения “Оружейной”, которая в первую очередь рассказывает о технической стороне блоггерской реальности. Поэтому – Page Peel. :)

Установка плагина Page Peel

Page Peel – один из многих плагинов для загибания углов. Существует jQuery Page Peel, Page Cornr, Page Peel BujanQWorkS… Большинство из этих плагинов основаны на jQuery, а рассматриваемый нами – на Flash. Это обстоятельство делает его самым, на мой взгляд, симпатичным из аналогов.

Итак, как обычно ставим плагин из консоли с помощью “Плагины” – “Добавить новый”, активируем его и отправляемся в “Параметры” – “Page Peel Options”:

За кулисами плагина Page Peel

Ларчик открывается просто

Собственно, настроек только три:

  • Ad URL: адрес, который откроется при щелчке пользователя на обнажившееся закулисное содержимое. Это может быть страница подписки на обновления блога или покупки чего-либо.
  • Small image URL: путь к маленькой картинке, выглядывающей из-за отвернутого уголка. Желательно, чтобы ее размеры были 75х75 пикселей.
  • Big image URL: пусть к большой картинке (500х500 пикселей), которая предстанет глазам посетителя, тронувшего мышкой уголок.

Картинки можно загрузить на блог из консоли с помощью вкладки “Медиафайлы”, но лучше загрузить их файлы с помощью FTP, т.к. плагин рекомендует загружать их в эту папку: http://alaska-hot.ru/wp-content/themes/picolight. Это для моего тренировочного блога, темы оформления и моей версии WordPress. Вам плагин, возможно, порекомендует (внизу страницы настроек) другую папку.

Всё. Нажимайте Update Opntions и наслаждайтесь результатом в том случае, если… опс… :(

Проблема: Page Peel и WP-MK

Неожиданная “печалька”. В “Оружейной” используется (и очень мне нравится) плагин WP-MK – всплывающее окошко с предложением подписки. Наладить совместную работу WP-MK и Page Peel мне пока не удалось. Уголок добавляется исключительно к всплывающему окошку при его появлении, а не к основной странице. Та же проблема есть и с плагинами-аналогами.

Вот так всплывающее окошко приобрело ненужный угол

А кому ложку дегтя?

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

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

На этом всё. Успехов, друзья! :)

update: Да, и еще добавлю. Эта статья попала в индекс яндекса спустя 30 минут после размещения. Хотите знать как? Расскажу в скором времени. :)

С уважением, Оружейник

Ваша оценка статьи:

Ух ты! А тут еще есть:

Комментариев: 13

  1. Анатолий:

    Спасибо, что опять радуете нас полезностями для блога. На многих сайтах видел такой уголок, мне он нравится. Подумаю, как его приспособить для себя. Спасибо!

  2. Болислав Беднарский:

    Алексей! Поздравляю Вас с праздником “Днем Защитника Отечества”. У Вас и приборочка как раз к празднику. Ваш сайт нам очень нужен, продолжайте в том же духе. Всех благ.
    Болислав.

  3. billiko:

    Да уж, умеете Вы продвигать свои продукты. Интересное, что за новый проект Вы задумали?
    Я тоже решил сделать еще один блог на интересующую меня тему, надеюсь она будет интересна еще кому-то.

  4. Григорий:

    И снова спасибо за полезнейшие плагины! Поиск в гугле “плагин угла страницы” вывел в топы http://seo-armory.ru
    :)

  5. Автор:

    Здравствуйте! Плагин хорош, но у меня почему то не работает. Вернее работает, но с ошибкой. Уголок загибается, но при наведении на него мышкой – исчезает. И это произошло, после смены настроек. А может быть из-за того, что WP 3.2.2, с которым он пока не тестировался.
    Оружейник, подскажите в чем проблема? Спасибо!

    • Оружейник:

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

  6. Автор:

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

  7. Автор:

    Получилось бомба,я начинающий в таких делах,спасибо за статью!

  8. Автор:

    Обожаю загнутые уголки, да ещё и с сюрпризом! Спасибо, Оружейник!

  9. Автор:

    Получилось, ура! Спасибо, Алексей!!!

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

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

*

Пожалуйста, скопируйте этот пароль:

И вставьте его сюда (антиспам):


  • Оружейник
    on Google+