Jak stworzyć ruchomy pasek z powiadomieniami w WordPress

Chciałbyś poinformować użytkowników swojej strony o zmianach, nowościach lub np. polityce plików cookie? Można to zrobić za pomocą specjalnego ruchomego paska przypiętego do głównej strony witryny. Z tego poradnika dowiesz się, jak to osiągnąć na platformie Wordpress.

Informacje, jakie chcemy wyświetlać na naszej stronie nie muszą koniecznie znajdować się w stałych elementach witryny. Czasami chcemy umieścić na stronie dodatkowe, "szybkie" informacje takie jak np. baner z informacją o szkoleniach, promocji, ważnym wydarzeniu czy możliwości zapisania się do newslettera. W takim przypadku najlepiej jest dodać nowy, wyrazisty element, który będzie odcinał się nieco od całej strony.

Czymś takim są właśnie specjalne ruchome paski. Możemy w nich umieścić dowolną informację, a pasek pojawi się na głównej stronie albo np. podczas przewijania strony - dajmy na to, kiedy użytkownik przewinie artykuł niemal do samego końca. Możemy też wywoływać paski ze specjalnymi informacjami po kliknięciu w określony przycisk na stronie. Możliwości jest sporo. Przejdźmy jednak do samego poradnika.

Metoda pierwsze - tworzenie paska za pomocą kodu

Na początek rozwiązanie najprostsze, chociaż wymagające pewnych umiejętnosci. Najprostsze, bo wystarczy dodać parę linijek kodu do naszej strony, aby uruchomić specjalny pasek z informacjami. Co więcej, jeżeli choć trochę znamy HTML, możemy łatwo modyfikować taki element.

Z drugiej jednak strony dla laików rozwiązanie to może być nieco skomplikowane. Dlatego też, jeżeli nie czujesz się w temacie HTML, możesz spokojnie przejść do dalszej, drugiej metody i tam poszukać wygodniejszego rozwiązania - za pomocą darmowej wtyczki dla Wordpressa. Wróćmy jednak do tematu.

W celu dodania ruchomego paska na naszej stronie wystarczy znaleźć z poziomu Kokpitu, czyli panelu zarządzania Wordpressem, w lewym pasku menu zakładkę Wygląd > Edytor. Tutaj, sprawdziwszy, czy edytujemy nasz domyślny motyw, przechodzimy w prawej części okna do pliku footer.php. Może on być opisany też jako Stopka. Otwieramy ten plik.

Następnie wklejamy do niego następujący kod:

Jest to prosta lista, którą możemy dowolnie edytować. Następnie zapisujemy nasz plik i przechodzimy do kolejnego - CSS style. Tutaj dodajemy następujące linijki kodu:

.fixedbar {
background: #000; 
bottom: 0px; 
color:#fff; 
font-family: Arial, Helvetica, sans-serif; 
left:0; 
padding: 0px 0; 
position:fixed; 
font-size:16px; 
width:100%; 
z-index:99999; 
float:left; 
vertical-align:middle; 
margin: 0px 0 0; 
opacity: 0.95; 
font-weight: bold;
}
.boxfloat {
text-align:center; 
width:920px; 
margin:0 auto;
}

#tips, #tips li {
margin:0; 
padding:0; 
list-style:none
}
#tips {
width:920px; 
font-size:20px; 
line-height:120%;
}
#tips li {
padding: 15px 0; 
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}

Plik również zapisujemy. Po wykonaniu tej czynności właśnie stworzyliśmy nowy pasek z informacją, który będzie wyświetlał się w stopce naszej strony internetowej lub bloga.

Musimy jeszcze stworzyć plik jQuery, który będzie go uruchamiał. W ten sposób tworzymy plik z poziomu Notatnika, gdzie dodajemy następujący kod:

(function($) {
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){	
	randomtip();
});
})( jQuery );

Następnie logujemy się do naszego hostingu i z poziomu menedżera plików udostępnianego przez hostingodawcę, bądź klienta FTP, dodajemy stworzony przez siebie plik do następującej ścieżki:

/wp-content/themes/FOLDER Z TWOIM MOTYWEM/js

Gdzie rzecz jasna FOLDER Z TWOIM MOTYWEM to katalog szablonu Wordpress, z którego akurat korzystamy. Kiedy zapiszemy w folderze "js" stworzony przez nas plik jQuery wystarczy już tylko w functions.php (dostęp taki sam jak w przypadku Stopki) wkleić następujący kod:

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

Po zapisaniu pliku odświeżamy stronę. Ruchomy pasek powinien działać już bez problemów.

Metoda druga - ruchomy pasek z poziomu wtyczki

Przejdźmy teraz do omówienia wtyczki dla Wordpressa, która wykona za nas robotę. Wtyczka ta to OptinMonster, darmowe rozwiązanie, które pobierzemy standardowo. Oczywiście, po ściągnięciu na stronę, należy jeszcze aktywwować wtyczkę w naszym kokpcie. Dodatek jest płatny w pełnej wersji.

W lewym pasku menu aktywujemy wtyczkę z poziomu zakładki OptinMonster. Następnie przechodzimy do strony twórców dodatku i tam rejestrujemy własne konto, do którego zostanie podpięta nasza wtyczka. Po wykonaniu tej czynności możemy przejść do korzystania z tego rozwiązania.

Teraz z poziomu wtyczki tworzymy nowy ruchomy pasek - za pomocą "Create New Optin". W tym poradniku polecamy stworzyć polecenie "Floating Bar", aczkolwiek dostępne są też inne opcje takie jak Sidebar, Lightbox czy innego rodzaju dodatki. Każdy z nich posiada własną grafikę, dzięki czemu mamy wizualizację paska, który chcemy dodać do strony.

Teraz wystarczy już tylko dodać własny tekst do paska z informacją i aktywować go. Po chwili zostanie wyświetlony na naszej stronie. Jeżeli jednak będziecie mieli jakiekolwiek problemy z omawianym tutaj rozwiązaniem, prosimy o komentarze. Postaramy się pomóc we wszystkich przypadkach.

Komentarze