Стрелка вверх — делаем её на странице блога WordPress
Приветствую вас в этот декабрьский день, я решил написать статью по одному незначительному, но весьма полезному инструменту для сайта на WordPress. Это стрелка вверх которая облегчает навигацию по странице или записи в виде кнопки. Но не просто кнопка, а дополнительные возможности и настройки.
А теперь по порядку — для чего нужна эта стрелка вверх, ее основная функция и настройки.
Сама по себе стрелка вверх нужна только для того, чтобы помочь посетителю вашего блога подняться на самый верх страницы или записи в один клик, а не прокручивая несколько экранов. По сути без нее можно обойтись, но она придает юзабилити и удобства вашему сайту на WordPress.
И самое важное, что благодаря таким маленьким фишкам посетитель вашего сайта с большей вероятностью останется у вас на странице. У него на подсознательном уровне не будет возникать желания побыстрей уйти с него – тут сказываются привычки к удобствам, а стрелка «Вверх» прекрасно подойдет для этого.
В свое время я писал про плагин кнопки вверх и на тот момент она меня полностью устраивала, но после обновлений того плагина юзабилити кнопки стала просто отвратительной, и я начал искать новое решение для своего блога. В результате остановился на плагине WPFront Scroll Top в этой статье мы разберем именно его.
Установка и настройки
Для начала идете в репозиторий WordPress, скачиваете этот бесплатный плагин, активируете его и в настройках выставляете все необходимые параметры.
Разберем основные настройки.
Отображение – блок, отвечающий за дизайн кнопки и ее появление на сайте
Включить – включение или выключение вашей кнопки
JavaScript Async – использование Java, лично я не включал его чтобы не иметь заморочек с плагином кэширования и лишним java-кодом, которого и так много в блоге
Скроллирование – выставляем расстояние в пикселях от верхнего края страницы на котором будет появляться наша кнопка
Размер кнопки – тут все понятно, выставляете свой собственный размер или оставляете настройки на автомате при значении 0 и 0
Прозрачность кнопки – указываете прозрачность кнопки после скролла и тем самым можете придать ей определенный модный стиль
Исчезновение кнопки – полезна опция, которая отвечает за исчезновения с экрана вашей кнопки и тем самым она не будет мозолить глаза посетителям
Скорость скролла – насколько быстро будет происходить подъем наверх страницы при нажатии на кнопку, можно сделать реактивный взлет или медленное слайд-шоу
Скрывать – включаем либо выключаем возможность скрытия вашей кнопки
Скрывать после – можно выставить значение в секундах после которого кнопка исчезнет из поля зрения посетителя, т.е. пропадет
Скрывать на маленьких устройствах – удобная опция включения или выключения кнопки на мобильных девайсах
Ширина маленьких устройств – настройка экрана мобильных устройств, при которых кнопка будет скрыта с экранов
Скрывать при маленьком окне браузера – включение или выключение кнопки при маленьком экране браузера, например, при оконном режиме.
Ширина окна браузера – указываем ширину браузера в пикселях при котором будет скрыта кнопка
Скрывать в админке – если вам надоело смотреть на кнопку в админке вашего сайта, то можно отключить ее и она не будет появляться пока вы авторизованы на вашем блоге как администратор
Скрывать во фреймах – удобная вещь если вы хотите скрыть вашу кнопку во фреймах, но лично я эту опцию не включал, т.к. не использую фреймы на блоге
Стиль кнопки – можно вставить ее как картинку и именно так я и сделал, а можно и указать ваш собственный текст что очень удобно для определенного круга пользователей
Атрибут Alt у картинки – здесь можно указать свой специфический атрибут к вашей картинке и тем самым прибавив к ней индивидуальности
Текстовая кнопка – блок, отвечающий за текстовый вариант кнопки (если вы выбрали таковой)
Текст – непосредственно сам текст вашей кнопки
Цвет текста – цвет текста вашей кнопки
Цвет фона – цвет заднего фона вашей текстовой версии кнопки
Свои CSS стили – для изысканных творцов, которые желают настроить собственный стиль SCC и тем самым улучшить внешний вид вашей кнопки
Расположение – указываете место где будет находится ваша стрелка вверх – вверху слева, вверху справа, внизу слева или внизу справа
Отступ по горизонтали – указываете в пикселях место отступа от краев экрана по оси X
Отступ по вертикали – то же самое, но по оси Y
Фильтр – в первой половине окна укажите те страницы или записи вашего блога, на которых хотите показать вашу кнопку, а во второй можете запретить появление кнопки на определенных страницах либо записях
Картинка – здесь все должно быть понятно и можно выбрать одну из многих встроенных картинок либо указать URL-адрес к своей собственной иконке
Как видим, настроек великое множество и даже самая изысканная натура сможет найти себе вариант по вкусу и цвету, лично я не особо их изменял, потому что по умолчанию большинство из них мне подошли.
Если провести финальную черту под этой статьей, то скажу, что лично мне этот плагин очень понравился именно из-за его настроек, которых просто огромное количество они позволяют весьма гибко настроить вашу кнопку.
Например, вы можете указать свое собственное изображение картинки для кнопки, а также скрыть ее на мобильны устройствах или на браузере в оконном режиме. Попробуйте прямо сейчас сжать окно вашего браузера и увидите, что кнопка га этой статье пропала. Также можно настроить скорость прокрутки, отступы и время исчезновения кнопки.
Одним словом, все ограничено только полетом вашей фантазии и постановкой целей для этого плагина. Например, его можно отключить на страницах с заказом товаров если вы его используете на страницах интернет-магазина.
Думаю, что данное руководство будет вам полезно и вы соберете в этом конструкторе эту самую кнопку. А стрелка вверх будет помогать посетителям вашего сайта подниматься наверх страниц и записей. Еще это создает элемент удобной и уютной атмосферы на вашем сайте или блоге. И это в любом случае положительно скажется как на ранжировании, так и на продажах.
Вы можете поделиться этой статьей с вашими друзьями в социальных сетях, возможно, что они будут вам благодарны за эту информацию.
А ваши наблюдения пишите в комментариях – ведь всегда интересно знать, что получилось у других людей, не так ли?
Хотите чтобы в ближайшем будущем получать самые свежие посты на свой почтовый ящик? Подпишитесь на обновления блога – сразу же под этой статьей находится поле для этого.
Подписывайтесь на мой канал в Телеграм - там все про распаковку экспертости!
Хотите получать свежие статьи себе на почту?
Введите ваш рабочий электронный адрес:
Балашов, просто из уважения
за то что я тебя читаю
подари мне свой вариант бесплатной замены Хигиру
У меня есть уже от Преснецова
У меня есть обственный
Подари, чтобы я читал тебя…
Ибо, даже Ушанов, которого я читал ещё в 2007 ушел искать
Хигер послал всех
Олег Горячо останется , но не джатрапии
А все эти псвдо миллионеры
плешков, и ему пдобные ванини из клуба миллионе
ров умрут
вя их кухня базируетя на МММ-мавроди
Валерий, я могу подарить что-то из своих продуктов, но вот вопрос ЗАЧЕМ?
Во-первых, бесплатное не работает — это 400% проверено многими миллионами пользователей
во-вторых, курс у меня располагается в закрытом разделе, в который имеют доступ только мои клиенты и я не буду нарушать своих принципов и пускать в закрытую область сайта человека, который не является моим клиентом.
в-третьих, цена вопроса курса просто смешная, а его ценность зашкаливает и отдавать его просто так, не получив обратной связи в виде денег является обесцениванием себя и своих трудов.
Я часто отдавал свои продукты просто так из широты души и кому они принесли пользу?
Люди просто складировали их в папочку КУРСЫ, забивали свой жесткий диск и НИ-ЧЕ-ГО не делали.
И получалось, что я способствую их моральному разложению ибо они получили информацию и не начали ее внедрять.
Я не имею ни желания, ни настроения способствовать выращиванию «коллекционеров», которые ничего не будут делать, а будут рассчитывать на кого-то, кто все сделает за них.
Это утопия и она не работала на протяжении всей истории существования человека — никто из пассивных наблюдателей не становился у руля и уж тем более, не добивался успеха.
Спасибо за подробную статью, но …
Мы читаем слева направо и кнопку,как мне кажется, надо делать в левой части страницы, а не как у Вас.
Я руководствовался тем, что удобно для пользователя-правши, то есть, при скролле мышкой человеку не нужно перемещать ее через весь экран и к тому же, правая область наиболее восприимчива к элементам, призывающим к действию. В данном случае это кнопка Вверх. Но вы можете настроить такую кнопку как вам удобно настройки плагина это позволяют.
Думаю, что плагин — это дополнительная нагрузка на блог.
Не лучше сделать кнопку вверх без плагина?
Отчасти да, но при наличии плагина кэширования это не является проблемой.
Функция полезная и плагин неплохой.
Но, все же, плагины это не только лишняя нагрузка, это еще и лишние проблемы при обновлении версий (ваш опыт, описанный в статье это показал). поэтому, считаю, что делать плагинами надо то, что сложно реализовать просто кодом.
ИМХО. Кнопка наверх к такому не относится, так как реализуется до безобразия просто.
Хотя, новичкам плагин будет более удобен.
На самом деле это именно так и через плагины реализовать многие вещи гораздо проще нежели самостоятельно копаться в коде тем более, что в большинстве случаев есть большое количество настроек. которые облегчают работу. Ведь для многих пользователей лезть в код является чем-то из мир фантастики, а в таком случае плагины и спасают их от стресса.