Motyw Twenty Twenty, który jest domyślnym motywem WordPressa-a na rok 2020, posiada statyczny przycisk, a właściwie link „Na górę”/„W górę”. Nazwa jego zależy od rozmiaru ekranu, na którym wyświetla się strona. Jest to przydatna opcja, ponieważ pozwala na szybkie przejście na początek strony, ale wyświetla się w stopce, co przy długich tekstach się nie sprawdza.
Spis treści:
- Pływający przycisk „Na górę”
- Jak dodać przycisk „Na górę” w motywie Twenty Twenty?
- Usunięcie zbędnego kodu
- Gotowe wtyczki
- Podsumowanie
Pływający przycisk „Na górę”
W celu poprawienia obsługi strony wprowadziłem już kilka zmian, o których napisałem w artykule „Moje modyfikacje motywu Twenty Twenty„. Postanowiłem jeszcze zamienić statyczny przycisk „Na górę”, na „pływający”. To znaczy taki przycisk, który wyświetli się po przesunięciu strony i w tym miejscu będzie dostępny, dopóki go nie klikniemy. Kliknięcie wywoła przesunięcie strony na samą górę.
Co prawda taki przycisk możemy dodać, instalując odpowiednią wtyczkę do WordPress-a, co jest prostym rozwiązaniem, ale stworzenie własnego nie jest trudnym wyzwaniem, a za to nie będziemy mieli na stronie zbędnego kodu. Wystarczy stworzyć jeden nowy plik, wpisać kilka poleceń w odpowiednich plikach oraz sformatować wygląd przycisku.
Jak dodać przycisk „Na górę” w motywie Twenty Twenty?
Tworzymy skrypt obsługujący przycisk
- Wchodzimy do katalogu ze swoim motywem, a w nim do folderu „assets/js„.
- W katalogu „js” tworzymy nowy plik tekstowy z rozszerzeniem „js„, np. „back-to-top.js„.
- Edytujemy plik „js” (w naszym przypadku „back-to-top.js„).
- Do tego pliku wklejamy poniższą zawartość i zapisujemy zmianę:
jQuery(document).ready(function($){
var offset = 200;
var speed = 200;
var duration = 400;
$(window).scroll(function(){
if ($(this).scrollTop() < offset) {
$('.back-to-top') .fadeOut(duration);
} else {
$('.back-to-top') .fadeIn(duration);
}
});
$('.back-to-top').on('click', function(){
$('html, body').animate({scrollTop:0}, speed);
return false;
});
});W powyższym kodzie, wartości dla „var offset„, „var speed” i „var duration” możemy zmodyfikować według własnych preferencji:
- Opcją „var offset” można ustawić, po jak długim przewinięciu strony wyświetli się przycisk. Im wyższa wartość, tym trzeba więcej przewinąć stronę, aby ten przycisk się wyświetlił.
- Przy pomocy opcji „var speed” można określić szybkość powrotu do początku strony. Wyższe wartości, to dłuższy czas przewijania.
- Dla opcji „var duration” ustawiamy szybkość animacji wyświetlania i zanikania przycisku. Wyższa wartość to wolniejsze wyświetlanie i zanikanie przycisku.
W liniach:
$('.back-to-top') .fadeOut(duration);
$('.back-to-top') .fadeIn(duration);
$('.back-to-top').on('click', function(){nazwę „back-to-top” można zmienić na własną. Jest to nazwa klasy obiektu (przycisku), który będziemy opisywali w arkuszu stylów (style.css). Jeżeli nazwa zostanie zmieniona w tym miejscu, to należy pamiętać o zmianie w pozostałych.
Dodajemy funkcję wywołującą nowy skrypt
- Bezpośrednio w katalogu naszego motywu edytujemy plik „functions.php„.
- Dopisujemy do niego poniższą zawartość i zmianę zapisujemy:
function BackToTop() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/assets/js/back-to-top.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'BackToTop');Nazwa „BackToTop„, która widoczna jest w pierwszej i ostatniej linii, to nazwa funkcji, którą można zmienić na własną.
W linii „get_stylesheet_directory_uri() . '/assets/js/back-to-top.js’,” wskazujemy miejsce naszego pliku „js„. Jeżeli nazwaliśmy go inaczej niż „back-to-top.js„, to wprowadzamy w tym miejscu poprawną nazwę.
Tworzymy wygląd przycisku „Na górę”
- W głównym katalogu naszego motywu edytujemy plik z arkuszem stylów (style.css).
- W tym pliku dodajemy poniższy kod i zapisujemy zmianę:
.back-to-top {
height:5rem;
width:5rem;
position:fixed;
right:2rem;
bottom:5rem;
Z-index:1;
text-align: center;
padding:1rem;
background-color: #3274d6;
transition: background-color .3s;
border-radius: 0.4rem;
text-decoration:none;
display:none;
}
.back-to-top:hover {
opacity: 0.85;
}
.back-to-top-arrow {
color:#fff;
font-size: 2.4rem;
}Jeżeli w pliku JavaScript (js) wpisaliśmy własną nazwę klasy zamiast „back-to-top„, to tu wpisujemy poprawną w liniach „.back-to-top {” i „.back-to-top:hover {„.
Klasę „back-to-top” możemy zmodyfikować według własnych preferencji:
- Przy pomocy właściwości „height” i „width” określamy wysokość i szerokość przycisku.
- Właściwościami „right” i „bottom” możemy ustawić odległość przycisku od prawej i dolnej krawędzi strony.
- Właściwością „text-align” wyrównujemy położenie tekstu w poziomie. W naszym przypadku jest to strzałka do góry.
- Przy pomocy „padding” wyrównujemy tekst w poziomie. W naszym przypadku jest to strzałka do góry.
- Kolor przycisku możemy zmienić przy pomocy właściwości „background-color„.
- Przy pomocy „transition: background-color” ustawiamy czas animacji po najechaniu kursorem na przycisk.
- Jeżeli chcemy, aby nasz przycisk miał zaokrąglone rogi, to ustawiamy odpowiednią wartość dla właściwości „border-radius„. Im wyższa wartość, tym rogi są bardziej zaokrąglone.
- Przy pomocy „text-decoration” możemy skonfigurować, jak ma się zachować tekst na przycisku, po najechaniu na niego kursorem. Domyślnie wyświetla się podkreślenie, czego nie lubię, więc tę właściwość ustawiam na „none„.
Jeżeli ktoś zamiast wyświetlania tekstu lub prostej strzałki chce wyświetlać gotową grafikę, to może ominąć właściwości „text-align„, „padding„, „background-color„, „border-radius” oraz „text-decoration„. Zamiast nich może wstawić właściwości odpowiedzialne za wyświetlanie grafiki:
background-image:url("[adres-pliku]");
background-repeat:no-repeat;[adres-pliku] to ścieżka do pliku z grafiką.
W klasie „.back-to-top:hover” przy pomocy właściwości „background-color” możemy ustawić inny kolor po najechaniu na przycisk kursorem. Można również ustawić dla niego półprzezroczystość, co ja zrobiłem przy pomocy właściwości „ opacity”.
„back-to-top-arrow” to nazwa klasy dla strzałki, która wyświetla się w środku naszego przycisku. Nazwę można zmienić, jeżeli chcemy zostać przy wyświetlaniu strzałki lub innego tekstu. Możemy też ominąć tę klasę, jeżeli zamiast prostej strzałki chcemy wyświetlić grafikę.
Dodanie lokalizacji przycisku „Na górę”
- Bezpośrednio w katalogu motywu edytujemy „plik footer.php”.
- Nad tagiem „</div>” kończącym dowolną sekcję, na przykład nad linijką „</div><!– .section-inner -→„, dopisujemy:
<a href="#site-header" class="back-to-top"><span class="back-to-top-arrow">↑</span></a>
- „#site-header” to wywołanie początku strony. Można też użyć „#„.
- „back-to-top” to klasa naszego przycisku. Jeżeli ustawiliśmy inną nazwę, to tu należy ją wpisać.
- blok „span” wraz z klasą „back-to-top-arrow” został stworzony, aby ustawić wygląd dla tekstu, a właściwie strzałki, znajdującej się w tym bloku.
- „↑” to prosta strzałka do góry „↑”.
Blok „<span class=”back-to-top-arrow”>↑</span>” można ominąć, jeżeli zamiast tekstu lub strzałki chcemy wyświetlić grafikę.
Usunięcie zbędnego kodu
- Edytujemy plik „footer.php„, znajdujący się bezpośrednio w katalogu motywu.
- Usuwamy kod, odpowiedzialny za wyświetlanie obecnego przycisku „Na górę” i zapisujemy zmianę:
<a class="to-the-top" href="#site-header">
<span class="to-the-top-long">
<?php
/* translators: %s: HTML character for up arrow. */
printf( __( 'To the top %s', 'twentytwenty' ), '<span class="arrow" aria-hidden="true">↑</span>' );
?>
</span><!-- .to-the-top-long -->
<span class="to-the-top-short">
<?php
/* translators: %s: HTML character for up arrow. */
printf( __( 'Up %s', 'twentytwenty' ), '<span class="arrow" aria-hidden="true">↑</span>' );
?>
</span><!-- .to-the-top-short -->
</a><!-- .to-the-top →Gotowe wtyczki
WordPress posiada wiele gotowych wtyczek, które po instalacji wystarczy skonfigurować według potrzeb i możliwości samej wtyczki. Nie każda jest bardzo rozbudowana, ale niektóre mają ogrom możliwości, co może przerażać.
Poniżej prezentuje kilka wtyczek:
Podsumowanie
Mam nadzieję, że komuś przyda się ten opis. Trochę za bardzo szczegółowy, ale dzięki temu może trafić do szerszego grona odbiorców. W tym osób, które będą mogły użyć powyższego rozwiązania w swoich motywach 🙂
