W artykule:
Czy chcesz utworzyć lepki pływający pasek stopki w WordPress? Używamy pływającego paska stopki na naszej stronie od wielu lat, ponieważ pomaga nam zmniejszyć współczynnik odrzuceń i zwiększyć liczbę stron przeglądanych przez użytkowników. Wielu z was pytało nas, jak stworzyć podobny pływający pasek, więc oto on. W tym artykule pokażemy, jak stworzyć lepki pływający pasek stopki w WordPress.
Co To jest Floating Footer Bar?
Lepki pływający pasek stopki pozwala na wyeksponowanie ważnych treści dla użytkowników. Ten pasek pozostaje widoczny dla użytkowników przez cały czas, więc są bardziej skłonni do klikania na niego i odkrywania bardziej przydatnych treści.
Możesz użyć pływającego paska stopki, aby:
- Prowadź więcej kliknięć do innych postów na blogu
- Zbuduj swoją listę e-mailową
- Zwróć uwagę na oferty specjalne / wyprzedaż
W tym artykule pokażemy dwie metody dodawania lepkiego pływającego paska stopki w witrynie WordPress. Jeden używa wtyczki, podczas gdy drugi jest metodą kodu, której używamy na WPBeginner. Możesz wybrać ten, który jest łatwiejszy w użyciu.
Metoda 1: ręcznie utwórz lepki pływający pasek stopki w WordPress
Ta metoda wymaga dodania kodu do plików WordPress. Jeśli dopiero zaczynasz dodawać kod, zapoznaj się z naszym przewodnikiem, jak wkleić fragmenty z sieci do WordPress.
Po pierwsze, musisz połączyć się z witryną WordPress za pomocą klienta FTP lub menedżera plików w cPanel.
W kliencie FTP musisz zlokalizować stopka.php plik w folderze motywu WordPress i pobierz go na pulpit. Znajdowałby się przy takiej ścieżce:
/ wp-content / themes / your-theme-folder/
Następnie musisz otworzyć stopkę.plik php w edytorze tekstowym jak Notatnik i dodać następujący kod tuż przed < / body> tag.
< div class = "fixedbar"> < div class = "boxfloat"> < ul id="porady"> < li > <a href="https://www.wpbeginner.com /" > WPBeginner Link jest pierwszym elementem < /a > < / li> < li > <a href="http://www.wordpress.org/" >WordPress.org jest drugim elementem < /a>< / li> < / ul> < / div> < / div>
Możesz dodać dowolną liczbę elementów listy. Pokażemy Ci, jak losowo obracać je przy każdym ładowaniu strony.
Następnym krokiem jest dodanie stylów CSS.
Możesz dodać CSS do swojego motywu WordPress styl.css plik lub użyj prostej niestandardowej wtyczki CSS.
/ * WPBeginner Footer Bar*/
.fixedbar {
tło: # 000;
/ bottom: 0px;
color: # fff;
rodzina czcionek: Arial, Helvetica, sans-serif;
pozostało:0;
padding: 0px 0;
pozycja: stała;
font-size: 16px;
Szerokość: 100%;
z-index: 99999;
float: left;
vertical-align: middle;
margin: 0px 0 0;
krycie: 0.95;
font-weight: bold;
}
.boxfloat {
text-align:center;
width: 920px;
margin: 0 auto;
}
# tips, # tips li {
margin: 0;
padding: 0;
styl listy: brak
}
# porady {
width: 920px;
font-size: 20px;
linia-wysokość: 120%;
}
# tips li {
padding: 15px 0;
Wyświetlacz: Brak;
}
/ tips li a{
color: # fff;
}
# tips li a: hover {
tekst-Dekoracja: Brak;
}
Po dodaniu CSS możesz nie widzieć zmian w swojej witrynie. Dzieje się tak dlatego, że ustawiliśmy wyświetlanie elementów na naszej liście na brak.
Następnie użyjemy jQuery, aby losowo wyświetlić jeden element z naszej listy na każdym ładowaniu strony.
Musisz otworzyć zwykły edytor tekstu, taki jak Notatnik na komputerze i dodać ten kod do pustego pliku:
(function ($) {
to.randomtip = function () {
var length = $("#tips li").długość;
var ran = Math.podłoga (Math.random () * length) + 1;
$("#tips li:NTH-child(" + ran + ")").show();
};
$(dokument).ready (function () {
randomtip();
});
}) (jQuery );
Po zakończeniu musisz zapisać ten plik jako floatingbar.js na pulpicie.
Teraz otwórz klienta FTP i połącz się z serwerem WWW. Przejdź do folderu motywu i znajdź folder js. To byłoby na ścieżce takiej jak ta:
/ wp-content / themes / your-theme-folder / js
Jeśli w katalogu motywu nie ma folderu js, musisz go utworzyć.
Teraz musisz przesłać floatingbar.utworzony wcześniej plik js do właśnie utworzonego folderu js.
Następnym krokiem jest zapytanie (załadowanie) pliku JavaScript w szablonie WordPress.
Wklej ten kod w funkcjach szablonu.plik php lub wtyczka specyficzna dla witryny.
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' );
To wszystko, możesz teraz odwiedzić swoją witrynę, aby zobaczyć pływający pasek stopki w akcji. Odśwież stronę kilka razy, aby zobaczyć pasek stopki losowo pokazujący różne elementy z listy.
Zaletą tej metody jest to, że możesz losowo obracać wiele linków w pływającym pasku stopki, tak jak my to robimy.
Jednak trudność polega na tym, że musisz dodać kod. Co więcej, nie możesz używać tego pływającego paska do innych rzeczy bez robienia zbyt wielu dostosowań CSS.
Metoda 2: za pomocą OptinMontser dodać pływający pasek stopki w WordPress
OptinMonster to popularna wtyczka do generowania leadów, która działa na wszystkich stronach internetowych. Pomaga konwertować odwiedzających witrynę na subskrybentów i klientów.
Jedną z funkcji OptinMonster jest pływający pasek nagłówka i stopki, którego można użyć do wyświetlenia formularza optin e-mail, a także do promowania pojedynczych linków / ofert.
Zaletą stosowania tej metody jest:
- Łatwa konfiguracja (bez kodu)
- Możesz pokazać niestandardowe paski pływające na różnych stronach / kategoriach swojej witryny.
- Możesz go użyć do zbudowania listy e-mailowej, a także promowania ofert.
Jedynym minusem jest to, że OptinMonster jest płatną usługą. Ale możesz skorzystać z naszego kuponu OptinMonster: WPB10 aby uzyskać 10% zniżki na dowolny plan OptinMonster.
Po zakupie OptinMonster (plan Plus lub Pro) możesz użyć wtyczki WordPress API OptinMonster na swojej stronie. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Ta wtyczka działa tylko jako łącznik między witryną WordPress a OptinMonster.
Po aktywacji wtyczka doda nowy element menu oznaczony OptinMonster do paska administracyjnego WordPress. Kliknięcie na niego przeniesie Cię do strony ustawień wtyczki.
Zostaniesz poproszony o podanie nazwy użytkownika i klucza OptinMonster API. Możesz uzyskać te klucze ze swojego konta OptinMonster.
Skopiuj i wklej klawisze do ustawień wtyczki i kliknij przycisk 'Connect to OptinMonster’. Wtyczka połączy teraz Twoją witrynę WordPress z kontem OptinMonster.
Następnie należy kliknąć przycisk „Utwórz nowy Optin”.
Spowoduje to przejście do strony „Create New Optin” na stronie OptinMonster.
Najpierw musisz podać tytuł kampanii Optin i wybrać stronę internetową, na której będziesz używać tego optin. Jeśli Twoja witryna nie znajduje się na liście, kliknij link „Dodaj nową witrynę”.
Następnie możesz kliknąć pasek pływający pod „wybierz typ optin”, aby użyć szablonów dostępnych do użycia jako pasek pływający.
Możesz dostosować wszystkie te szablony do własnych upodobań. Wybierz ten, który wygląda najbliżej tego, co masz na myśli.
Jak tylko wybierzesz szablon, OptinMonster uruchomi swój program do dostosowywania projektu. Jest to kreator wskaż i kliknij, w którym możesz skonfigurować wygląd i ustawienia dla swojego Optina.
Po zakończeniu konfigurowania wyglądu urządzenia optin należy kliknąć przycisk Zapisz.
Chociaż są one nazywane optins, nie zawsze muszą być. Możesz użyć funkcji tak / nie, aby dodać przycisk, aby wyświetlić post na blogu lub ubiegać się o specjalną zniżkę.
Gdy po raz pierwszy tworzysz Pasek pływający, jest on domyślnie wstrzymywany.
Po zakończeniu konfiguracji najedź kursorem na pasek stanu w górnym menu i wybierz Rozpocznij kampanię.
Twój pływający pasek jest teraz gotowy do dodania do witryny WordPress.
Wróć do obszaru administracyjnego swojej witryny WordPress i odwiedź OptinMonster ” Optiny. Zobaczysz swój optin na liście tutaj. Jeśli go nie widzisz, kliknij przycisk Odśwież Optins, a wtyczka go wyświetli.
Kliknij link „Edytuj ustawienia wyjściowe”, aby kontynuować.
Na następnej stronie zaznacz pole obok opcji „Włącz optin na stronie”, a następnie kliknij Zapisz ustawienia.
Możesz także użyć opcji zaawansowanej, aby pokazać pasek pływający tylko na określonych postach, stronach, kategoriach i innych obszarach.
To wszystko, pływający pasek stopki optin jest teraz dostępny w Twojej witrynie WordPress.
Mamy nadzieję, że ten artykuł pomógł Ci dodać pływający pasek stopki do swojej witryny WordPress. Możesz również zobaczyć te praktyczne wskazówki, aby przyciągnąć ruch do swojej witryny WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
