Stylizacja poprzedni wpis / kolejny wpis

Niektóre motywy WordPress nie mają wizualnie dopracowanej części odpowiedzialnej za przejście do starszego / nowszego wpisu. Jest to ta sekcja widoczna pod szczegółami wpisu.

W zależności od motywu jaki wykorzystujemy na naszej stronie można łatwiej lub trudniej zmodyfikować te odsyłacze. Pierwszy pomysł w jaki sposób to zrobić, to zapewne zmiana funkcji, która jest odpowiedzialna za generowanie tej części kodu. Jednakże nie każdy jest w stanie sobie z tym poradzić, a nawet jeśli potrafi to zrobić to nie musi, ponieważ można prostym zabiegiem dodać klasy do odsyłaczy.

Poniżej przykład – podglądając kod strony widzimy już dodane klasy „starszy-wpis” i „nowszy-wpis”.

<nav class="navigation post-navigation"> <h1 class="screen-reader-text">Zobacz wpisy</h1> <div class="nav-links"> <a class="starszy-wpis" href="http://www.itbvega.pl/automatycznie-zmieniany-stopce-strony/" rel="prev"><span class="meta-nav">&laquo; Poprzedni wpis</span>Automatycznie zmieniany rok w stopce strony</a> <a class="nowszy-wpis" href="http://www.itbvega.pl/ograniczanie-ilosci-starszych-wersji-wpisow-w-wordpress/" rel="next"><span class="meta-nav">Kolejny wpis &raquo;</span>Ograniczanie ilości starszych wersji wpisów w WordPress</a> </div> </nav>

Mając te klasy można dalej bawić się w stylizowanie wyglądu przy pomocy kodu CSS. Na tej stronie wygląda to tak:

 

Zapewne jest to nic wielkiego, można by dodać jakieś graficzne dodatki, na przykład strzałki etc. Jednakże tutaj chodziło dokładnie o takie delikatne stylizowanie. Odsyłacze zostały rozmieszczone obok siebie, a każda linia tekstu odpowiednio delikatnie sformatowana – odpowiednia wielkość i grubość czcionek oraz podkreślenie dla odsyłaczy.

W jaki sposób dodać te klasy?
W pliku functions.php należy wstawić kod:

add_filter('next_post_link', 'post_link_attributes1'); add_filter('previous_post_link', 'post_link_attributes2'); function post_link_attributes1($output) { $code = 'class="nowszy-wpis"'; return str_replace('<a href=', '<a '.$code.' href=', $output); } function post_link_attributes2($output) { $code = 'class="starszy-wpis"'; return str_replace('<a href=', '<a '.$code.' href=', $output); }

i po sprawie :-)

A czemu wiewiórka jest jako obrazek tytułowy?
Bo uwielbiiam robić zdjęcia, bo kocham wiewiórki, bo wiewiórki są ciekawskie.
Stare pierniki na wsiach gadały: ciekawość to pierwszy stopień do piekła. Ale to jest wielki fałsz. Ciekawość prowadzi do rozwoju, pomaga doświadczać tego świata, badać, sięgać dalej, robić kolejny krok, który z piekłem nie ma nic wspólnego. Także starym piernikom dziękujemy i robimy ciekawski krok…

7 maja 2018, Tomasz Bartosiewicz, komentarze 2

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

2 myśli nt. „Stylizacja poprzedni wpis / kolejny wpis”