Wordpress делаем кнопку вниз. Кнопка Вверх для WordPress — быстрый переход в начало страницы. UItoTop JQuery плагин

Кнопка “наверх” для сайта уже давно стала обязательным атрибутом.

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

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

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

Варианты установки кнопки Наверх для сайта на движке WordPress Установка кнопки Наверх с помощью кода.

Тут у меня имеется своё мнение, которым, с удовольствием поделюсь с вами.

Много разных вариантов для установки кнопки Наверх, да и много ещё чего, самостоятельно. В принципе, не сложно прописать несколько строчек кода в нужные файлы. Вопрос только – ЗАЧЕМ?

Есть такое мнение, что лишние плагины утяжеляют работу сайта, делают её более медленной. Естественно, такое дело имеет место. Но, если вы уже решили сделать нужное дополнение, то, какая разница, пишите вы код самостоятельно, или он будет добавлен после установки нужного плагина? Количество команд и так и так увеличится, код скрипта, в любом случае потребует некоторые ресурсы для своей обработки. Только, в одном случае, вы добавляете код руками, в другом, это добавление делает плагин.

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

Ну и элементарное удобство. Надоел вам такой вариант кнопки Наверх, деактивировали плагин, установили другой. Понравилось, замечательно, нет, быстренько активировали проверенный. Смысл из-за такой мелочи огород городить, вот оно надо, через полгода вспоминать, что вы там в функции прописывали.

Не буду здесь описывать способ установки кодом, при желании, в сети эти варианты легко разыскиваются.

Плагин Scroll to Top Button

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

Идем в Плагины – Добавить новый , в окошко поиска вставляем Scroll to Top Button . Находим, устанавливаем, активируем.

Во вкладке Внешний вид появляется пункт Scroll to Top Button , нажимаем и видим настройки этого плагина:

Их всего две. Цветовая схема – темная или светлая. Размер – большой или маленький.

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

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

Плагин JCWP Scroll To Top

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

Идем в Плагины – Добавить новый , в поиск вставляем JCWP Scroll To Top , находим, устанавливаем, активируем.

Настройки плагина можно уже найти в другой вкладке – Параметры — JCWP Scroll To Top :

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

Настраивается практически всё.

• Длительность анимации;
• Через какое количество пикселей прокрутки появялется;
• Можно сделать свой идентификатор для кнопки;
• Эффект для появления кнопки;
• Позиция кнопки;
• Текст на кнопке;
• Настройка цвета фона, шрифта, размера букв, цвет рамки, закругления углов;
• Отключение для мобильных устройств;

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

Плагин WPFront Scroll Top

Установка стандартная Плагины – Добавить новый — WPFront Scroll Top . Скачиваем, устанавливаем, активируем.

Найти настройки плагина можно во вкладке WPFront – Scroll Top :

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

• Можно настроить количество пикселей для появления кнопки;
• Можно сделать свой размер кнопки;
• Кнопке можно добавить прозрачности;
• Настройки плавности для появления кнопки и для перемещения наверх;
• Можно настроить появление кнопки для мобильных устройств;
• Настройка расположения и отступов для кнопки;
• Можно задать адрес, по которому перейдет пользователь после нажатия на кнопку. Странная опция, хотя, кто знает, может кому и пригодится;

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

Вот такие плагины помогут вам легко и просто сделать на своём сайте нужную и полезную кнопочку Наверх. Всем удачи!

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

Кнопка “Наверх” – это небольшой значок-стрелочка, при нажатии на который страница быстро прокручивается вверх.

Таким образом, если пользователь начал читать статью или решил посмотреть, что пишут в комментариях, ему не придется потом мучиться с прокруткой сайта вверх. Вместо того, чтобы использовать стандартную прокрутку браузера, он нажмет на иконку кнопки “Наверх”, и плавно перенесется к началу страницы. Это очень удобно и практически является обязательным условием для любого “длинного” (если страницы ресурса такой длины, что их приходится прокручивать) сайта. В данной статье будут рассмотрены плагины для добавления кнопки “Наверх”.

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

А если вы знаете особенности CSS языка программирования, то сможете самостоятельно настроить кнопку “Вверх” по собственному усмотрению. В целом, плагина jQuery Smooth Scroll достаточно, чтобы удовлетворить потребности большинства вебмастеров, но далее будут рассмотрены еще несколько популярных инструментов на случай, если этот модуль у вас не сработает.

Smooth Scroll Up

Далее следует не менее популярный плагин Smooth Scroll Up – это предельно простой и понятный инструмент, что в считанные минуты позволит создать иконку “Наверх” в боковой части сайта. Хотя в модуле и нет множества настроек, он весьма функционален. Далее указаны основные особенности плагина Smooth Scroll Up:

• можно выбирать между разными типами элемента “Вверх” (текст с ссылкой, значок, изображение и так далее);
• элемент прокрутки вверх можно выбирать самостоятельно из собственной коллекции;
• можно добавлять собственный комментарий около кнопки прокрутки наверх;
• расположение элемента на сайте регулируется (если она нужна, только чтобы удобно читать страницу, то лучше размещать в правой части, но плагин позволяет расположить ее в левой стороне, и по центру);
• можно добавлять исключения для отображения в разных частях сайта (отключить отображение кнопки “Наверх” на главной, либо дезактивировать на любой другой странице);
• модуль работает и на мобильных версиях сайта (по надобности, для телефона кнопку “Вверх” можно убрать);
• есть анимации для прокруток (slide и fade, либо без анимационного эффекта);
• можно указать расстояние, после которого кнопка “Вверх” появится (так удобнее читать, ведь элемент не будет бестолку появляться сразу после захода на сайт, а отобразиться только в нужный момент);
• в кнопку “Наверх” можно заложить ссылку для открытия страницы в новой вкладке;
• есть возможность добавить собственные параметры CSS для элемента.

WPFront Scroll Top

Этот плагин отлично подойдет для тех, кто не желает самостоятельно думать над тем, какой будет кнопка. Если вы просто хотите, что пользователям было проще читать и просматривать материалы, и при этом иметь интересную кнопку прокрутки, то WPFront Scroll Top – как раз то, что вам нужно. Модуль содержит крупную коллекцию готовых иконок. А если не хотите разбавлять внимание пользователя иконкой “Далее”, то можете просто добавить текст для прокрутки без изображения.

Плагин WPFront Scroll Top легко устанавливается на движок Вордпресс. Он содержит массу настроек, таких как:

• активация/дезактивация кнопки;
• размер иконки;
• степень прозрачности;
• скорость прокрутки;
• добавление автоматического скрытия кнопки через заданное количество секунд;
• пропись тега Alt для элемента;
• цвет и фоновое оформление текста кнопки (главное – чтобы читать надпись было удобно, она должна быть выразительной).

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

Scroll Back To Top

Далее еще один плагин, который улучшит “юзабилити” вашего ресурса – инструмент Scroll Back To Top. Он также содержит множество параметров настройки. Вы сможете в любой момент деактивировать элемент, сделать его непрозрачным или создать превью иконки. Размер и цвет элемента легко регулируются. Можно настраивать расстояние от “топа” сайта, после прохождения которого появляется кнопка. Расположение элемента в левой, правой части и по средине страницы.

Плагин Scroll Back To Top не содержит большого количество типов икон. Всего их около 10. По надобности можно отключить иконку и оставить один только текст (“Далее”, “Вверх” и т. п.). Размер иконок регулируется по специальной шкале от одного до шести. Для активации индивидуального стиля в параметрах элемента есть пункт “Extra CSS” для добавления собственного дизайна.

Dynamic “To Top” Plugin

Это английский модуль для размещения кнопки “Наверх” практически в любом положении на сайте. С ним читать и листать страницу будет куда проще, ведь кнопка может быть размещена в одном из четырех положений. Плагин настраивается на английском языке. Кнопка может быть активирована/отключена для мобильной версии ресурса. Скорость прокрутки регулируется.

Что интересно, плагин Dynamic “To Top” Plugin работает с кэшированием, потому постоянные пользователи смогут читать ваши посты и прокручивать страницы без промедлений работы браузера. Модуль прекрасно отображается на компьютерах и нового, и старого поколения.

Skysa Scroll-to-Top App

Далее следует Skysa Scroll-to-Top App – плагин, который абсолютно не похож на своих конкурентов. Вы не просто добавите при помощи него кнопку “Наверх”, но и сможете воспользоваться этим инструментом для создания целого бара виджетов. К примеру, можно добавить плавающий блок с голосованиями, кнопками социальных сетей и элементом прокрутки страницы. А чтобы плагин не тормозил работу сайта, он работает с кэшем браузеров. Возможности данного модуля практически не ограничены – вы даже сможете добавить ссылки в бар с кнопкой прокрутки.

Вывод

Скачать одно из указанных дополнений – это ничего не стоит для вас. Зато для сайта это принесет огромную пользу. Кнопки “Далее”, “Наверх”, “Назад” и т. д. значительно облегчат жизнь посетителям ресурса. Поверьте, они будут благодарны! А вместе с ними – и поисковые машины, так как чем сайт удобней, тем выше его позиции в поиске.

Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку «Вверх» на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку «Вверх» — страница возвратится вверх , к главному меню (шапке сайта).

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

Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top 😉

Вспомнить как можно найти и установить плагин Вы можете в одном из .

Создание кнопки «Вверх» без плагинов

Установить кнопку можно очень просто, всего за несколько простых шагов.

1. Откройте файл function.php .

Открыть function.php можно двумя способами:

• Открыть с помощью текстового редактора в корневой папке вашей темы
• Перейти в Внешний вид -> Редактор и выбрать для редакции Функции темы (functions.php)

2. Скопируйте и вставьте код ниже в самом низу, перед закрывающим тегом ?> .

Gif" />"; } add_action("wp_head", "back_to_top_style"); function back_to_top_style() { echo " #totop { cursor:pointer; position: fixed; right: 30px; bottom: 30px; display: none; outline: none; } "; } add_action("wp_footer", "back_to_top_script"); function back_to_top_script() { echo " jQuery(document).ready(function($){ $(window).scroll(function () { if ($(this).scrollTop() > 400) $("#totop").fadeIn(); else $("#totop").fadeOut(); }); $("#totop").click(function () { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }); "; }

3. Сохраните изменения и любуйтесь созданной вами кнопкой «Вверх» .

А сейчас, предугадывая Ваши вопросы, постараюсь заранее на них ответить!

И так, в данном примере мы поставили изображение на кнопку. Для того чтобы убрать изображение и поставить текст — замените в коде нашего примера строчку 3 на:

Echo "Вверх";

Для того чтобы заменить изображение кнопки — замените ссылку на нужное вам изображение в строчке 3.

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

If ($(this).scrollTop() > 400)

Если у вас что-то не получилось, смело пишите в комментариях! А если получилось — делитесь впечатлениями 🙂

Приветствую, друзья! В этой статье я хочу показать Вам как можно сделать кнопку "Вверх" на сайте. Такая кнопка будет полезна на сайтах с длинными статьями или страницами. При нажатии на кнопку "Вверх" - страница возвратится вверх, к главному меню (шапке сайта). Обычно для установки такой кнопки все хотят скачать как можно быстрее плагин и особо не заморачиваются, но я не думаю что нужно захламлять сайт кучей ненужных плагинов, когда можно все сделать очень легко и просто без использования плагинов. Самые ленивые могут создать такую кнопку с помощью многих плагинов, к примеру Scroll to Top или WP Scroll To Top ;) Вспомнить…

Многие хотят иметь на своем сайте кнопку «Вверх». Это такая стрелка, которая позволяет пользователю подняться в самое начало wordpress сайта одним кликом.

Лично я считаю, что подобные вещи необходимы только в том случае, если посты на сайте очень длинные. Ведь посетителю будет неудобно постоянно пользоваться ползунком или мышкой! При таком раскладе дел кнопка «Вверх» для сайта WordPress просто необходима!

Реализовать эту задумку можно при помощи . Я предлагаю только один, и сейчас объясню почему.

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

Речь идет о плагине для кнопки Вверх — ToTop Link . Скачать его можно через официальную поисковую строку плагинов в вашей WordPress-админке. (Если не знаете, как это сделать – пишите в комментариях, помогу).

Основные достоинства ToTop Link

Возможность добавлять свое изображение на место стандартной стрелки «Вверх»;

Регулировка скорости скроллинга;

Более 4 положений стрелки на экране;

Возможность добавлять текст;

Ограничение показа стрелки «Вверх» для маленьких экранов.

Странно, что этот набор характеристик не присутствует во многих разработках. Тем не менее, хорошо, что хоть один человек сделал плагин кнопки «Вверх» для сайта WordPress с гибкими настройками.

Здравствуйте, дорогие читатели сайт! Представляю Вам и Вашему вниманию новый пост, в котором я расскажу о том для чего нужна кнопка «Наверх» и как её установить на WordPress. Ну в начале, как всегда, объясню для чего эта кнопка вообще нужна и стоит ли ее ставить. Приступаем!

Для чего нужна кнопка Наверх?

К примеру, Вы написали длинную статью, пользователь дочитал ее до конца и теперь хочет вернуться обратно в начало. Думаю знакомая ситуация. Не правда ли? А крутить колесиком мыши и «тянуть» за ползунок — не очень удобно и долго.

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

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

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

Первое что нужно сделать, это и активировать его. После чего кнопка начнет работать. Но, изображение кнопки будет стандартное. Советую Вам изменить ее, на свою. Для это:

Перейдите во вкладку «Параметры»

—> Scroll to Top

И выберите облик кнопки из предложенных или загрузите свою

Нажмите кнопку «Update Options»

Готово! Кнопка наверх для WordPress приняла новый облик

Вот так. Так же можно настроить ее, а именно:

• Расположение
• Отступы
• Скорость
• и другое

Кнопка «Наверх» без плагина

Сейчас мы рассмотрим как сделать кнопку наверх для wordpress не используя посторонних плагинов. Почему без плагина? А потому, что плагины замедляют работу сайта. Я уже не один раз об сказал (В статье — Добавляем видео на WordPress) и буду говорить еще и еще.

Для того, чтобы сделать кнопку следуйте инструкции ниже:

1. Откройте файл footer.php , который находится в папке с шаблоном, и вставьте перед код:

Только внесите некоторые изменения, а именно:

• где написанно ваш_сайт.ru — напишите адрес вашего сайта

• где путь к картинке — введите путь до картинке, которая будет кнопкой

• где картинка — название картинке. Если не.jpg, то измените на тот формат, который установлен на картинке.

2. Откройте файл style.css , который так же находится в папке с шаблоном, и в самом конце вставьте следующий код:

#toTop { width: 100px; text-align: center; padding: 5px; position: fixed; bottom: 10px; right: 10px; cursor: pointer; color: #666666; text-decoration: none;}

3. Скачайте и распакуйте его. В нем лежит файл verx.js , который нужно закинуть в корень Вашего сайта.

4. Откройте файл functions.php , находящийся в папке с шаблоном и вбейте туда код:

// smart jquery inclusion if (!is_admin()) { wp_deregister_script("jquery"); wp_register_script("jquery", ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); wp_enqueue_script("jquery"); }

5. Ну вот и все! Я могу Вас поздравить, теперь на Вашем сайте есть кнопка наверх для wordpress.

Вы только что прочли статью «Кнопка Наверх для WordPress» и установили ее себе. Какие впечатления? Пишите в комментариях! На этом у меня все, всем пока.

С уважением, Константин Белан.