Рассмотрим как сделать на блоге отгибающийся уголок. Это привлекающий внимание пользователя визуальный эффект, расположенный например в верхний правый уголок области вашего блога. Уголок немного отгибается заманивая пользователя навести на него. После того как у пользователя не останется сил совладать со своим любопытством и огромным желанием навести указатель мыши на уголок, ему начнет повелеваться уголок. Уголок начнет отслаиваться от блога при этом приоткрывая свою тайну и покажет пользователю, что было за ним спрятано весьма заманчивое предложение. А при клике на этому предложению пользователь перейдет на заранее созданную страницу.
Отгибающийся уголок на сайте – плагин Page Peel для WordPress
Сразу предупрежу, если вас сложны и пугают простые вещи такие как закачать файл на сайт, внести небольшие изменения в файлы темы оформления, то лучше установите себе плагин Page Peel для WordPress. Привлекательность этого плагина в том, что он легок в настройках, а именно в них указывается всего три ссылки:
- Ссылка на страницу перехода
- Ссылка на маленькую картинку размером 75х75 px
- Ссылка на большую картинку размером 500х500 px
[download=http://wordpress.org/extend/plugins/page-peel/]
Отгибающийся уголок на сайте без плагина
Для тех же кто не боится трудностей приступим к установке красивого уголка на сайт.
Для начала давайте подключим скрипты и стили css заходите в файл header.php вашего шаблона и до </head> вставляем код:
<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/jquery.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/jquery-ui.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/turn.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/peel/turn.css">
<script type="text/javascript">
$(document).ready(function(){
$('#target').fold();
});
</script>Если у вас Jquery подключен в шаблоне, то эту строчку можно удалить:
<script src="<?php bloginfo('stylesheet_directory'); ?>/peel/jquery.min.js"></script>Далее где-нибудь после тега <body> вставляем картинку, которая должна скрываться за уголком с ссылкой на нужную вам страницу:
<a href="https://studio-gost.ru"><img id="target" src="code.png"></a>
не забываем указать ссылку на нужную вам страницу.
Данный уголок хорош тем, что в нем можно поменять настройки под нужды вашего сайта. Ниже представлены описания всех настройк, которые находятся в файле turn.js
// Возможные настройки
var defaults = {
directory: '/wp-content/themes/Ваша_Тема/', // Папка в которой находится скрипт
side: 'right', // поменятйе на "left" и картика будет слева
turnImage: 'fold-sw.png', // картинка самого уголка
(если переместите уголок на другую сторону необходимо поменять картинку уголка - также есть в архиве)
maxHeight: 400, // Максиальная высота
startingWidth: 80, // Высота и ширина
startingHeight: 80, // разворота уголка (можно поменять, если хотите чтоб уголок был более развернутым)
autoCurl: true // если тут указать "false", тогда уголок будет отгибаться только при перетаскивании мышкой
};Теперь осталась закачать нужные файлы в тему шаблона на вашем блоге.
[download=https://studio-gost.ru/wp-content/uploads/2012/08/peel.rar]
Ну вот и все! Теперь на Вашем блоге должен быть установлен уголок.
20 комментариев
ссылка на демо в первом случае 404 🙁
Сайт разработчика временно закрыт на реконструкцию, поэтому пока демо поставил на своем сайте.
оо, спасибо – приятная и полезная весчь =) Симпотишно будет смотреться на большинстве сайтов различной тематики =)
Игорь, ручками прописывать все некогда. Я бы выбрал плагин (чисто время сэкономить).
Посмотрел в поиске плагинов – нашел только это
Версия: 0.3
Автор: Nemanja Avramovic
Обновление: 690 дней назад
Требуемая версия WordPress: 2.5 или выше
Совместим вплоть до: 3.0.5
Но больно он старый.
У Вас что то другое или то-же?
Про используемый плагин написано в статье и он прекрасно работает с последней версией wordpress
Я установила плагин. Для меня работа с шаблоном и css – темный лес пока. Поэтому мне проще было поставить плагин. Пользуюсь уже несколько месяцев. Очень нравится!
Я вчера сделала себе такой уголок с помощью плагина. Скажите, а какая визуальная разница при реализации обоими способами. Если использовать способ без плагина, уголочек тоже будет колыхаться, как на ветру?
Без плагина уголочек колыхаться на ветру не будет и при отвороте картинка не отзеркаливает.
Спасибо за ответ. Теперь мой выбор очевиден. Продолжу пользоваться уголком, реализованным с помощью плагина.
Друг мой сделал без плагина с отзеркаливанием и с колыханием. Когда соберусь, буду делать как он делал. Таак что это возможно!
Игорь забыла поля заполнить и пришлось снова все писать. Почему не сохраняется? у всех сохраняется, остается только нажать кнопку назад(стрелки) и заполнить поля, а текст остается. Может какой то сбой вышел? Проверьте, если это от вас конечно зависит.
Актуальная тема про отгибающийся уголок. Я пока воспользуюсь плагином. Но буду иметь ввиду Ваш пост. Думаю позже пригодится. Спасибо.
Охриненная тема! А на joomla 1.5.26 такое сделать можно????
Сделать можно ан любом сайте и cms.
Что за разделение, в Джумлу код запрещают вставлять ? 🙂
Даже не подозревал, что так все просто. На выходных попробую применить
Добавил статью в закладки! Скоро буду делать что-то подобное, вот и статья пригодится!
то же использовал, плагин, все работает, нормально, на хочу сделать чтобы он двигался весте с прокруткой в низ, может подскажешь что не-буть.
Скорее всего в CSS надо просто сделать позицию зафиксировано для уголка.
-А ПОПОДРОБНЕЙ МОЖНО, А ТО Я ДУБ-ДУБОМ В ТАКИХ ВОПРОСАХ.
Попробуйте так прописать
#target {position: fixed;top: 0;right: 0;}