Hej, dziś natknęłam się na stronę fabriceleven. Mało istotne, o czym jest ta strona, dlaczego i jak na nią trafiłam. Ważne, co przykuło moją uwagę – zmieniający się tytuł strony, po przejściu na inną zakładkę w przeglądarce. Zobaczcie jak to wygląda poniżej:
Doszłam do wniosku, że to uroczy bajer! Nie wierzę, że dopiero dziś po raz pierwszy się z nim spotkałam. Tak czy siak chcę teraz pokazać Wam, jak możecie sami w prosty sposób zaimplementować takie zachowanie u siebie. Przy okazji powiem, czemu to jest fajne, a czemu nie.
A więc jak manipulować nazwą zakładki, w zależności od tego, czy jest aktywna, czy nie?
A więc tadam! Oto kod najprostszego przykładu takiej zakładki:
Wynikiem tego kodu jest:
Ameryki nie odkrywamy. Po prostu czystym Javascriptem zmieniamy tytuł strony. Przepraszam, że nie ma tu ES6, ani innych kolorowych upiększaczy – chcę jedynie pokazać sam proces zmiany wartości znacznika <title>.
Potencjalne wady dynamicznej zmiany nazwy zakładki
Widzimy, że to bardzo proste podejście. Tym razem – nie najlepsze. Czemu? Załóżmy, że nasz user otworzył 5 zakładek z różnymi stronami naszego bloga. Jeśli przejdzie na kolejną zakładkę, zobaczy obok 5 identycznych nazw zakładek i totalnie nie będzie wiedział, jakiej treści może się spodziewać na każdej z nich. User będzie zagubiony, zakłopotany, ale przede wszystkim – poirytowany. Często wymienia się też inną, generalną wadę dynamicznej zmiany nazwy zakładki, niezależną od sposobu implementacji – obawa usera przed spamem. Zakładając, że user nie jest stałym klientem Waszej strony, po chwili przebywania poza Waszą zakładką, może dojść do wniosku, że ta-strona-z-dziwną-nazwą to na pewno spam. I bez wahania kliknie na krzyżyk. Niefajnie. Inne wady zmiany tytułu możecie przeczytać TUTAJ.
Podejście user-friendly
Tymczasem chcę Wam przedstawić drugie podejście:
Tyci bardziej skomplikowane. Jednym zdaniem – przy otworzeniu każdej nowej strony, domyślna nazwa zakładki zapisuje się w zmiennej, którą też wyświetlamy zaraz obok naszego „hasła zachęty”, dzięki temu nie tracimy nazw zakładek mówiących o contencie strony. Jak to działa w praktyce, nie tylko na gifie? Możecie sprawdzić na tym blogu
WORDPRESS
Może część z Was zapyta – a co z WordPressem? Czy istnieje jakaś wtyczka do zmiany takiej nazwy zakładki? Nic mi o tym nie wiadomo. Ale co wiem, to tyle, że bez problemu możecie taką funkcjonalność wrzucić na swoją wordpressową stronę. Jak?
1. Instalujecie plugin do wrzucania własnego kodu JS. Polecam TEN.
2. Dodajecie swój nowy kod JS – dokładnie ten, który pokazałam Wam między znacznikami <script> </script>. Oczywiście zmieniacie swoje „hasło zachęty”
3. Zapisz – voilà!
A co Wy sądzicie o takim efekcie? Piszcie w komentarzach!
