Wyświetlanie przycisku scrollowania do góry strony na WP
Cześć. Potrzebuję lekkiej wtyczki, która pozwoli mi dodać w rogu mojego bloga przycisk (z ikonką lub tekstem) i po kliknięciu tego przycisku użytkownik zostanie przeniesiony na samą górę strony, na której obecnie się znajduje. Mam bloga na WordPressie, wrzucam dość długie treści i trochę jednak schodzi, żeby potem wrócić na przykład do górnego menu. Chciałbym dać użytkownikowi możliwość szybkiego przeskoku na samą górę. Nie mam dużych wymagań – coś lekkiego i żeby była możliwość wpływu na wygląd tego przycisku. Ewentualnie jak coś takiego zrobić bez dużej znajomości WP i wrzucania pluginów.
Odpowiedź
Z zaufanych wtyczek do takiego przycisku polecam WPFront Scroll Top.
Do pobrania: https://pl.wordpress.org/plugins/wpfront-scroll-top/
Myślę, że spełni Twoje oczekiwania, jest lekka i ma podstawowe funkcje m.in. :
- możesz wybrać wygląd (w pakiecie około 80 ikonek do wyboru plus możliwość wrzucenia własnej), tekst przycisku, miejsce, zmienić jego przezroczystość czy rozmiar,
- możesz ukryć przycisk z poziomu panelu na wybranych urządzeniach,
- możesz pokazywać i ukrywać przycisk na wybranych podstronach Twojego WP.
Zapytałeś jeszcze czy można coś takiego zrobić samemu bez dobrej znajomości WP.
Jasne i choć powyższy plugin nie jest ciężki, jeśli zrobisz to sam zawsze będziesz miał większe możliwości i o dwa zapytania po JSy i cssy mniej.
Jak zrobić przycisk scrollowania na WP?
Wrzuć sobie kod html (w zależności od tego gdzie chcesz ten przycisk wyświetlać) na przykład do stopki strony. W tym celu w katalogu motywu, którego używasz odnajdź plik footer.php.
Przykładowy kod html:
<div class="btn-to-top"> <i class="fa fa-angle-up" aria-hidden="true"></i> </div>
W środek diva wsadziłem ikonkę Font Awesome, jeśli nie masz podpiętych FA bądź chcesz inną ikonkę to zwyczajnie zmienisz to u siebie w htmlu i cssie.
Następnie dowolnie obstyluj sobie ten przycisk w pliku ze stylami:
.btn-to-top {
position: fixed;
bottom: 15px;
right: 15px;
width: 40px;
height: 40px;
background: #00b7bc;
color: #FFF;
line-height: 40px;
text-align: center;
cursor: pointer;
font-size: 20px;
border-radius:5px;
}
Teraz dodaj funkcję obsługującą ten przycisk w pliku z Twoimi skryptami:
jQuery(document).ready(function($) {
$('.btn-to-top').click(function() {
$('html, body').animate({
scrollTop: $("header").offset().top
}, 1500);
})
});
Gdzie header to u mnie pierwszy tag html-a w body strony, a 1500 to czas scrollowania do góry w milisekundach (1500 to 1,5 sekundy). Gotowe.
Powyższe rozwiązanie możesz oczywiście dowolnie stylować, edytować czy wykluczać.
Największa zmora WordPressa to podejście ludzi: ooo potrzebuję przycisku to zainstaluję sobie do tego plugin. Potem potrzebuję kolejnej pierdoły – kolejny plugin, a potem płacz że coś się sypie jak trzeba naraz zaktualizować 50 (nie) potrzebnych pluginów.
20 linijek kodu, 5 minut szukania w google, a potem o jeden wrzód mniej. Dobrze, że ktoś pokazał jak zrobić te banalną rzecz bez wtyczek..
Zgadzam sie z Toba, pchanie wszedzie pluginow nie ma sensu, dobrze ze autor dodal jeszcze sposob jak dodac samemu cos takiego. Poczatkujacym sie przyda.
Działa elegancko – dzięki !