Top

Strzałkowa nawigacja

na blogu WordPress

 

Pamiętacie moją radość po tym jak znalazłam wtyczkę, która umożliwia szybki powrót do początku strony?

Na niektórych blogach zauważyłam inne rozwiązanie, które spodobało mi się jeszcze bardziej. Chodzi o przeskakiwanie między wpisami w prawo i w lewo, trochę jak w elektronicznej książce.

Aby uniknąć nieprzespanej nocy i długich poszukiwań, tym razem uznałam, że zwyczajnie zapytam o nazwę wtyczki. O czarodziejskie strzałki zapytałam jedną z właścicielek bloga, ale odpowiedzi nie uzyskałam. Podejrzewam, że były one częścią szablonu. Mój takiej funkcji nie ma, a bardzo chciałam sprawdzić to rozwiązanie u siebie.

Wczoraj usiadłam do poszukiwań i przyznam, że tym razem poszło mi całkiem szybko. Może dlatego, że nie ograniczyłam poszukiwań do gotowego narzędzia. Znalazłam proste rozwiązanie, które u mnie zadziałało. Widzicie moje czarodziejskie strzałki po prawej i lewej stronie ekranu?

To dzięki wpisowi, który znajdziecie na stronie http://crunchify.com. Rozwiązanie dotyczy blogów opartych o WordPress, ale z pewnością coś podobnego można wyszukać dla platformy Blogger. To teraz szczegóły:

 

Moje kroki – zgodnie z instrukcją autora.

  1. Pierwszy kod wklejamy na końcu pliku o nazwie style.css

.arrowLeft a {
position: fixed;
z-index: 100;
left: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}

.arrowLeft a:hover {
left: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}

.arrowRight a {
position: fixed;
z-index: 100;
right: -5px;
top: 45%;
padding: 15px 10px;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}

.arrowRight a:hover {
right: 0;
-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
color: #fff;
}

.arrowNav a {
background: #225773;
color: #fff;
text-decoration: none;
font-size: 16px;
}

style_css

  1. Drugi kod wklejamy na końcu pliku o nazwie single.php

<div class=”arrowNav”>
<div class=”arrowLeft”>
<?php previous_post(‚%’,’←’, ‚no’); ?>
</div>
<div class=”arrowRight”>
<?php next_post(‚%’,’→’, ‚no’); ?>
</div>
</div>

Single_php

  1. Ja dodatkowo zmieniłam tło strzałek.

W pierwszym kodzie zmieniłam wartość pozycji background.  Dodałam także wartość o nazwie opacity, która powoduje przeźroczystość tła czarodziejskich strzałek. Ostatnia część kodu wygląda u mnie tak (fragment kodu z pliku style.css z moimi poprawkami):

.arrowNav a {
background: #6b6778;
color: #fff;
text-decoration: none;
font-size: 18px;
opacity:0.6;
}

I to już wszystko. U mnie zmiany było widać bez czyszczenia pamięci podręcznej przeglądarki, ale autor radzi to zrobić. Czarodziejskie strzałki pojawiają się tylko przy przeglądaniu pojedynczych postów.

Teraz czas na testowanie. Wtyczkę z poprzednią magiczną strzałką na razie wyłączyłam. Czy to ostateczne rozwiązanie – zobaczymy.

A Wam, która magiczna opcja wydaje się najpraktyczniejsza, a może wszystkie jednocześnie?

Poprzedni wpis
Następny wpis
Something is wrong.
Instagram token error.
Load More