JS, WP

Zmieniający się tytuł zakładki – taki bajer!

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:

GIF

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:

kod-1

Wynikiem tego kodu jest:

GIF

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:

kod-2

GIF

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!

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę