Home / Блог / Стрелка вверх – делаем её на странице блога WordPress

Стрелка вверх – делаем её на странице блога WordPress

Стрелка вверх – делаем её на странице блога WordPress

Приветствую вас в этот декабрьский день, я решил написать статью по одному незначительному, но весьма полезному инструменту для сайта на WordPress. Это стрелка вверх которая облегчает навигацию по странице или записи  в виде кнопки. Но не просто кнопка, а дополнительные возможности и настройки.

А теперь по порядку – для чего нужна эта стрелка вверх, ее основная функция и настройки.

Сама по себе стрелка вверх нужна только для того, чтобы помочь посетителю вашего блога подняться на самый верх страницы или записи в один клик, а не прокручивая несколько экранов. По сути без нее можно обойтись, но она придает юзабилити и удобства вашему сайту на WordPress.

И самое важное, что благодаря таким маленьким фишкам посетитель вашего сайта с большей вероятностью останется у вас на странице. У него на подсознательном уровне не будет возникать желания побыстрей уйти с него – тут сказываются привычки к удобствам, а стрелка «Вверх» прекрасно подойдет для этого.

В свое время я писал про плагин кнопки вверх и на тот момент она меня полностью устраивала, но после обновлений того плагина юзабилити кнопки стала просто отвратительной, и я начал искать новое решение для своего блога. В результате остановился на плагине WPFront Scroll Top в этой статье мы разберем именно его.

Установка и настройки

Для начала идете в репозиторий WordPress, скачиваете этот бесплатный плагин, активируете его и в настройках выставляете все необходимые параметры.

стрелка вверх

Разберем основные настройки.

Отображение – блок, отвечающий за дизайн кнопки и ее появление на сайте

Включить – включение или выключение вашей кнопки

JavaScript Async – использование Java, лично я не включал его чтобы не иметь заморочек с плагином кэширования и лишним java-кодом, которого и так много в блоге

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

Размер кнопки – тут все понятно, выставляете свой собственный размер или оставляете настройки на автомате при значении 0 и 0

Прозрачность кнопки – указываете прозрачность кнопки после скролла и тем самым можете придать ей определенный модный стиль

Исчезновение кнопки – полезна опция, которая отвечает за исчезновения с экрана вашей кнопки и тем самым она не будет мозолить глаза посетителям

Скорость скролла – насколько быстро будет происходить подъем наверх страницы при нажатии на кнопку, можно сделать реактивный взлет или медленное слайд-шоу

Скрывать – включаем либо выключаем возможность скрытия вашей кнопки

стрелка вверх

Скрывать после – можно выставить значение в секундах после которого кнопка исчезнет из поля зрения посетителя, т.е. пропадет

Скрывать на маленьких устройствах – удобная опция включения или выключения кнопки на мобильных девайсах

Ширина маленьких устройств – настройка экрана мобильных устройств, при которых кнопка будет скрыта с экранов

Скрывать при маленьком окне браузера – включение или выключение кнопки при маленьком экране браузера, например, при оконном режиме.

Ширина окна браузера – указываем ширину браузера в пикселях при котором будет скрыта кнопка

Скрывать в админке – если вам надоело смотреть на кнопку в админке вашего сайта, то можно отключить ее и она не будет появляться пока вы авторизованы на вашем блоге как администратор

Скрывать во фреймах – удобная вещь если вы хотите скрыть вашу кнопку во фреймах, но лично я эту опцию не включал, т.к. не использую фреймы на блоге

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

Атрибут Alt у картинки – здесь можно указать свой специфический атрибут к вашей  картинке и тем самым прибавив к ней индивидуальности

стрелка вверх

Текстовая кнопка – блок, отвечающий за текстовый вариант кнопки (если вы выбрали таковой)

Текст – непосредственно сам текст вашей кнопки

Цвет текста – цвет текста вашей кнопки

Цвет фона – цвет заднего фона вашей текстовой версии кнопки

Свои CSS стили – для изысканных творцов, которые желают настроить собственный стиль SCC и тем самым улучшить внешний вид вашей кнопки

Расположение – указываете место где будет находится ваша стрелка вверх – вверху слева, вверху справа, внизу слева или внизу справа

Отступ по горизонтали – указываете в пикселях место отступа от краев экрана по оси X

Отступ по вертикали – то же самое, но по оси Y

Фильтр – в первой половине окна укажите те страницы или записи вашего блога, на которых хотите показать вашу кнопку, а во второй можете запретить появление кнопки на определенных страницах либо записях

Картинка – здесь все должно быть понятно и можно выбрать одну из многих встроенных картинок либо указать URL-адрес к своей собственной иконке

стрелка вверх

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

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

Например, вы можете указать свое собственное изображение картинки для кнопки, а также скрыть ее на мобильны устройствах или на браузере в оконном режиме. Попробуйте прямо сейчас сжать окно вашего браузера и увидите, что кнопка га этой статье пропала. Также можно настроить скорость прокрутки, отступы и время исчезновения кнопки.

Одним словом, все ограничено только полетом вашей фантазии и постановкой целей для этого плагина. Например, его можно отключить на страницах с заказом товаров если вы его используете на страницах интернет-магазина.

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

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

А ваши наблюдения пишите в комментариях – ведь всегда интересно знать, что получилось у других людей, не так ли?

Хотите  чтобы в ближайшем будущем получать самые свежие посты на свой почтовый ящик? Подпишитесь на обновления блога – сразу же под этой статьей находится поле для этого.

Понравилась статья?
Введи своё настоящее имя и действующий e-mail в форму
и получай новые материалы на почту!!!

Введите ваш е-маил адрес

Мы даём 100% гарантию конфиденциальности ваших данных.
В любой момент вы сможете отписаться.


Проверьте ещё

Optincrusher –  плагин для сбора подписчиков

Приветствую вас этим жарким июльским днем. Лето стоит в самом разгаре и многие не заглядывают …

8 комментариев

  1. Балашов, просто из уважения
    за то что я тебя читаю
    подари мне свой вариант бесплатной замены Хигиру
    У меня есть уже от Преснецова
    У меня есть обственный
    Подари, чтобы я читал тебя…
    Ибо, даже Ушанов, которого я читал ещё в 2007 ушел искать
    Хигер послал всех
    Олег Горячо останется , но не джатрапии
    А все эти псвдо миллионеры
    плешков, и ему пдобные ванини из клуба миллионе
    ров умрут
    вя их кухня базируетя на МММ-мавроди

    • Валерий, я могу подарить что-то из своих продуктов, но вот вопрос ЗАЧЕМ?
      Во-первых, бесплатное не работает – это 400% проверено многими миллионами пользователей
      во-вторых, курс у меня располагается в закрытом разделе, в который имеют доступ только мои клиенты и я не буду нарушать своих принципов и пускать в закрытую область сайта человека, который не является моим клиентом.
      в-третьих, цена вопроса курса просто смешная, а его ценность зашкаливает и отдавать его просто так, не получив обратной связи в виде денег является обесцениванием себя и своих трудов.

      Я часто отдавал свои продукты просто так из широты души и кому они принесли пользу?
      Люди просто складировали их в папочку КУРСЫ, забивали свой жесткий диск и НИ-ЧЕ-ГО не делали.
      И получалось, что я способствую их моральному разложению ибо они получили информацию и не начали ее внедрять.
      Я не имею ни желания, ни настроения способствовать выращиванию “коллекционеров”, которые ничего не будут делать, а будут рассчитывать на кого-то, кто все сделает за них.
      Это утопия и она не работала на протяжении всей истории существования человека – никто из пассивных наблюдателей не становился у руля и уж тем более, не добивался успеха.

  2. http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif
    Спасибо за подробную статью, но …
    Мы читаем слева направо и кнопку,как мне кажется, надо делать в левой части страницы, а не как у Вас.

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

  3. Думаю, что плагин – это дополнительная нагрузка на блог.
    Не лучше сделать кнопку вверх без плагина?

  4. Функция полезная и плагин неплохой.
    Но, все же, плагины это не только лишняя нагрузка, это еще и лишние проблемы при обновлении версий (ваш опыт, описанный в статье это показал). поэтому, считаю, что делать плагинами надо то, что сложно реализовать просто кодом.
    ИМХО. Кнопка наверх к такому не относится, так как реализуется до безобразия просто.
    Хотя, новичкам плагин будет более удобен.

    • На самом деле это именно так и через плагины реализовать многие вещи гораздо проще нежели самостоятельно копаться в коде тем более, что в большинстве случаев есть большое количество настроек. которые облегчают работу. Ведь для многих пользователей лезть в код является чем-то из мир фантастики, а в таком случае плагины и спасают их от стресса.

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

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

http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/by.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/dn.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/bo.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/buba.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/eyes.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/drink.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/de.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/jokingly.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/bt.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/dt.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/cl.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/ca.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/bz.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/di.gif 
http://balashoff.ru/wp-content/plugins/wp-monalisa/icons/ab.gif