Pasek informujący ile artykułu mamy już za sobą stał się popularny za sprawą serwisu NaTemat. Kilkakrotnie od uruchomienia portalu Tomasza Machały słyszałem o prośbie ze strony klientów aby podobny pasek umieścić na ich witrynie. Aktualnie taki pasek można samodzielnie dodać w prosty sposób. Dziś pokażę jak go dodać i zmodyfikować zmieniając jego położenie oraz ilość umieszczonych na nim informacji.

W ten sposób wygląda pasek, który podpiąłem do swojej witryny:

Domyślnie dodatkowy pasek pojawia się na dole witryny i zawiera oprócz informacji o postępie czytanego elementu także szereg dodatkowych informacji takich jak czas czytania, kategoria, tytuł czy ilość komentarzy. Przy jego pomocy możesz także udostępnić otwarty wpis na Facebooku, Twitterze, Google +, LinkedIn lub Pintereście. Na końcu znajdują się strzałki ułatwiające nawigację do poprzedniego/następnego wpisu.

Na przedstawionej powyżej ilustracji nie zmieścił się cały pasek. W całości prezentuje się tak:

Czerwonymi kropkami oznaczyłem elementy, które się na nim znajdują. A są to:

1 – nazwa kategorii wpisu
2 – tytuł wpisu
3 – informacja o autorze
4 – informacja o czasie czytania wyliczana na podstawie ilości słów znajdujących się w tekście
5 – „progress bar” czyli informacja o ilości przeczytanego tekstu pobierana na podstawie położenia oglądanego ekranu względem całego artykułu
6 – ilość komentarzy we wpisie
7 – pasek do udostępniana wpisu na serwisach społecznościowych
8 – strzałki do poprzedni/następny wpis

Jak zainstalować?

Aby umieścić na swojej witrynie taki pasek należy przejść do sekcji Wtyczki -> Dodaj nową, a następnie wpisać w wyszukiwarkę nazwę wtyczki: Swifty Bar. Po instalacji pasek powinien być widoczny we wszystkich wpisach.

Dodatkowa konfiguracja

Ustawienia wtyczki pozwalają na:

• ukrycie paska
• przetłumaczenie wszystkich słów, które się na nim pojawiają na j. polski
• zmianę liczby czytanych słów na minutę (na podstawie których jest wyliczany czas czytania) – domyślnie ustawione na 250 słów na minutę
• określenie czy strzałki poprzedni/następny wpis mają wskazywać na wpisy w jednej kategorii, wpisy z takim samym tagiem albo wszystkie wpisy
• zmianę kolorystyki paska (poniżej wersje kolorystyczne)
  
• wyłączenie/włącznie praktycznie wszystkich elementów widocznych na pasku
• włączenie kwadratowych przycisków serwisów społecznościowych (wyglądających tak jak na zrzucie poniżej)
  

Konfiguracja niestandardowa

Autor wtyczki wyszedł z założenia, że dobra wtyczka to taka, która nie spowalnia strony i jest możliwie prosta. Dlatego właśnie nie znajdziesz kilku opcji, które mogłyby się przydać. Jednak co to dla nas? W kilku linijkach kodu możesz zmodyfikować pasek tak aby np. umieścić go na górze zamiast na dole albo zmienić kolor przewodni na inny. Zacznijmy modyfikacje.

Jak przenieść pasek na górę strony?

Pasek Swifty Bar jest przylepiony do dolnej krawędzi strony. Zdaję sobie sprawę z tego, że niektórym może bardziej pasować na górze. Aby zmodyfikować jego lokalizację wystarczy do pliku style.css (sekcja Wygląd -> Edytor) dodać następujący fragment kodu:

#sb_super_bar {
        top: 0!important;
}

Nic więcej dodawać nie trzeba aby pasek Swifty Bar przylegał do górnej krawędzi. Problemem jest jednak w tej sytuacji pasek narzędzi administratora (admin bar), który przykrywa Swifty Bar i uniemożliwia korzystanie z niego. Co prawda jest to problem zalogowanego użytkownika, więc dla internauty, który nie ma konta na Twoim WordPressie nie stanowi to żadnego problemu, ale mimo wszystko warto ten błąd naprawić. Jest kilka rozwiązań:

• przenieść pasek narzędzi administratora na dół strony przy pomocy wtyczki Bottom Admin Bar
• ukryć pasek narzędzi np. przy pomocy wtyczki Hide Admin Bar Toolbar
• pozostawić pasek na górze ale wyłączyć efekt przewijania wraz z paskiem

Trzeci sposób nie sprawia, że paski na siebie nie nachodzą, jednak niweluje problem podczas przewijania. Pasek narzędzi pozostaje na górze, a Swifty Bar porusza się wraz z ekranem. Aby to osiągnąć wystarczy do pliku style.css (sekcja Wygląd -> Edytor) dodać następujący fragment kodu:

body.admin-bar #wpadminbar {
        position: absolute!important;
}

Jak zmienić kolor przewodni paska?

Jeśli powyższe siedem opcji kolorystycznych nie pasuje do kolorystyki Twojego bloga, możesz dokonać modyfikacji w kodzie CSS wtyczki. Zamiast edytować plik .css we wtyczce warto dopisać kilka linijek w pliku style.css, który to plik nie zostanie nadpisany przy okazji aktualizacji wtyczki.

Aby zmienić kolor kategorii, paska postępu oraz strzałek wystarczy do pliku style.css (sekcja Wygląd -> Edytor) dodać następujący fragment kodu:

#sb_super_bar.asphalt .sb_text-size a, #sb_super_bar.asphalt .sbprogress-bar,  #sb_super_bar.asphalt .sb_prev-next-posts .sb_next_post_info span.sb_category {
    background-color: #333333!important;
}

#sb_super_bar.asphalt .sb_prev-next-posts > a, #sb_super_bar.asphalt .sb_prev-next-posts > a {
    color: #333333!important;
}

W linii 3 i 7 po znaku # należy wpisać kod HEX wybranego koloru. Kod HEX możesz pobrać np. ze strony Color Picker lub z dowolnego programu graficznego bardziej zaawansowanego niż Paint.

Moje przyciski do udostępniania po najechaniu myszką nie prezentują się dobrze. Co zrobić?

Problem o którym teraz napiszę można zauważyć na animacji przedstawiającej pasek. Po najechaniu na ikonę serwisów społecznościowych, środek ikon podświetlał się na czerwono. Nie wyglądało to estetyczne, dlatego postanowiłem ten element zmodyfikować. Wystarczyło wpisać do pliku style.css (sekcja Wygląd -> Edytor) następujący fragment kodu:

.sb_share li a {
    color: #ffffff!important;
}

Zdecydowałbyś się na zainstalowanie takiego paska na swojej stronie?