Porady, Wordpress
9 czerwca 2013
Stylowanie paginacji / stronnicowania w WordPress
Stylowanie paginacji / stronnicowania w WordPress

Osoby posiadające własnego bloga lub stronę opartą na systemie WordPress zapewne nie raz zastanawiały się jak podzielić dłuższy artykuł na strony. Z tego też powodu przygotowaliśmy dla Was prosty poradnik, który pozwoli Wam się zagłębić w meandry dodawania i stylowania paginacji.

Podzielenie tekstu jest istotne z kilku powodów:

  • czytelnik czytając jeden tekst przechodząc między stronami wczytuje po raz kolejny reklamy
  • czytelnik nie będzie znużony długim tekstem, w każdej chwili będzie mógł zakończyć jego czytanie na wybranej stronie, a następnie wrócić do niego później
  • możemy ładniej dostosować wygląd strony, np. dzieląc tekst na takie porcje, by każda kończyła się równo z paskiem bocznym

Niestety zapewne większość z Was zauważyła, że w edytorze wizualnym brak jest odpowiedniego przycisku, który pozwoli nam w łatwy sposób podzielić nasz tekst. Z niewiadomych przyczyn twórcy WordPressa usunęli opisywaną opcję, choć jest ona wbudowana w system. W poradniku tym postaram się wytłumaczyć krok po kroku co zrobić, abyśmy mogli ponownie cieszyć możliwością podziału tekstu bez konieczności instalowania zbędnych wtyczek.

Na początek przechodzimy do folderu z naszym szablonem i odnajdujemy plik single.php. Otwieramy go i w miejscu, w którym ma się znaleźć pole z linkami do poszczególnych stron dodajemy linijkę:

<?php wp_link_pages(); ?>

Standardowo wygląd podziału stron jest jednak mało reprezentatywny (są to same, niewystylizowane linki), dlatego warto byłoby zadbać o jego wygląd. Zaczniemy od opakowania wp_link_pages w div-a:

<div class="strony"><?php wp_link_pages(); ?></div>

Teraz pozostaje nam dodać odpowiednią klasę do naszego pliku CSS (przeważniestyle.css). Klasa „strony” składać się będzie z kilku innych tworząc jedną całość. Musimy zatem pamiętać o:

  • .strony(standardowy wygląd czcionki),
  • .strony a(wygląd linku),
  • .strony a:hover(wygląd linku po najechaniu myszką),
  • .strony span.current(wygląd linku strony aktualnie odwiedzonej).

Cały kod CSS może zatem wygląd np. tak:

// Wygląd paginacji (podziału stron)
.strony {
 margin-bottom:15px; 
 color:#000;
 font-size: 15px;
}
.strony a, .strony span {
 border:1px solid #000;
 color:#fff;
 background:#000;
 display:inline-block;
 width:25px;
 height:25px;
 line-height:25px;
 text-align:center;
 margin-left:5px;
 margin-right:5px;
 font-size:15px;
}
.strony a:hover {
 border:1px solid #000;
 color:#9c0909;
 background: #fff;
}
.strony span.current {
 border:1px solid #000;
 color:#fff;
 background: #000;
}

Następnie musimy do naszego edytora TinyMCE dodać odpowiedni przycisk, po kliknięciu którego w wybranym miejscu pojawi się podział strony. Szukamy w folderze z szablonem pliku functions.php, a następnie dodajemy do niego linijkę:

// Dodaje przycisk Następna Strona do naszego edytora TinyMCE
add_filter('mce_buttons','wysiwyg_editor');

function wysiwyg_editor($mce_buttons) {
 $pos = array_search('wp_more',$mce_buttons,true);
 if ($pos !== false) {
 $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
 $tmp_buttons[] = 'wp_page';
 $mce_buttons = array_merge($tmp_buttons,
 array_slice($mce_buttons, $pos+1));
 }
 return $mce_buttons;
}

Na koniec wszystko zapisujemy i sprawdzamy czy działa zgodnie z naszymi oczekiwaniami.

Fotografia: CreativeVIP.net
No Comment 0