W artykule:
Jeden z naszych czytelników niedawno zapytał nas, jak dodać numeryczną paginację na stronie bloga WPBeginner. Domyślne motywy WordPress i wiele innych motywów wyświetla linki paginacji, dodając Starsze Posty i nowsze posty linki na dole stron archiwum WordPress. Istnieje jednak wiele witryn WordPress, które używają numerycznej paginacji, takiej jak WPBeginner. Z naszego doświadczenia wynika, że numeryczna paginacja jest bardziej przyjazna dla użytkownika, atrakcyjna i przyjazna dla SEO. Najbardziej zaawansowane ramy motywów WordPress, takie jak Genesis, mają wbudowaną funkcjonalność do dodawania numerycznej paginacji. W tym artykule pokażemy Ci, jak dodać numeryczną paginację w swoim motywie WordPress. Celem jest zastąpienie domyślnych starszych i nowszych linków paginacji na dole stron archiwalnych łatwymi w nawigacji numerami stron.
Istnieją dwie metody dodawania numerycznej paginacji w Twoim motywie WordPress. Pierwszą metodą jest ręczne dodawanie numerycznej paginacji bez polegania na wtyczce innej firmy. Ponieważ ten artykuł znajduje się w kategorii tematycznej i jest przeznaczony dla nowych projektantów motywów, najpierw pokażemy metodę ręczną. Drugą metodą jest użycie istniejącej wtyczki innej firmy, aby dodać numeryczną paginację. Polecamy tę metodę wszystkim naszym użytkownikom MAJSTERKOWICZÓW.
Ręczne dodawanie numerycznej paginacji w Twoich motywach WordPress
Najpierw pokażemy Ci, jak ręcznie dodać numeryczną paginację w swoich motywach WordPress. Skorzystają na tym nasi zaawansowani użytkownicy i użytkownicy, którzy uczą się tworzenia motywów lub chcą to zrobić bez polegania na wtyczce innej firmy. Zacznijmy od dodania następującego kodu do motywu funkcje.php plik.
Uwaga: ten kod pochodzi z Genesis Framework, którego używamy na naszej stronie. Jeśli używasz Genesis, nie potrzebujesz tego kodu ani wtyczki.
function wpbeginner_numeric_posts_nav () {
if( is_singular() )
return;
global $wp_query;
/ * * Stop execution if there ' s only 1 page */
if ($wp_query - > max_num_pages <= 1 )
return;
$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged')): 1;
$max = intval ($wp_query - >max_num_pages );
/ * * Dodaj bieżącą stronę do tablicy */
if ($paged >= 1 )
$linki [] = $paged;
/ * * Dodaj strony wokół bieżącej strony do tablicy */
if ($paged > = 3) {
$linki [] = $paged - 1;
$linki [] = $paged-2;
}
if (($paged + 2) < = $max) {
$linki [] = $paged + 2;
$linki [] = $paged + 1;
}
echo '<div class="navigation"><ul>' . "n";
/ * * Poprzedni Post Link */
if ( get_previous_posts_link() )
printf ('<li>%s</li>'. "n", get_previous_posts_link ());
/ * * Link do pierwszej strony, Plus elipsy w razie potrzeby */
jeśli ( ! in_array (1, $links)) {
$class = 1 = = $paged ? "class = "active"": {;
printf ('<li % s > < a href= "%s" > %s< / a > < / li>'. "n", $class, esc_url( get_pagenum_link( 1 ) ), '1');
jeśli ( ! in_array (2, $links ) )
echo ' < li>...</li>';
}
/ * * Link do bieżącej strony, plus 2 strony w dowolnym kierunku, jeśli to konieczne */
Sortuj ($linki );
foreach ((array) $links as $link) {
$class = $paged = = $link ? "class = "active"": {;
printf ('<li % s > < a href= "%s" > %s< / a > < / li>'. "n", $class, esc_url (get_pagenum_link ($link)), $link );
}
/ * * Link do ostatniej strony, Plus elipsy w razie potrzeby */
jeśli ( ! in_array ($max, $links)) {
jeśli ( ! in_array ($max-1, $links ) )
echo '<li>...</li>' . "n";
$class = $paged = = $max ? "class = "active"": {;
printf ('<li % s > < a href= "%s" > %s< / a > < / li>'. "n", $class, esc_url (get_pagenum_link ($max)), $max );
}
/ * * Next Post Link */
if ( get_next_posts_link() )
printf ('<li>%s</li>'. "n", get_next_posts_link ());
echo '</ul></div>' . "n";
}
W WPBeginner używamy tego samego kodu do numerycznej paginacji na naszych stronach archiwalnych(na przykład na naszym blogu lub stronie kategorii tutoriale WordPress). Kod ten pobiera liczbę stron i przygotowuje punktowaną listę ponumerowanych linków. Aby dodać to do szablonów, musisz dodać następujący tag szablonu w indeksie szablonu.php, archiwum.php, Kategoria.php i każdy inny szablon strony archiwum.
<?php wpbeginner_numeric_posts_nav ();?>
Teraz, gdy mamy naszą listę ponumerowanych stron, musimy stylizować tę listę. Chcemy, aby lista pojawiała się w bloku wiersza, w którym aktywna strona jest podświetlona innym kolorem tła. Aby to osiągnąć, dodajmy następujące elementy w stylu motywu.plik css:
.nawigacja li a,
.nawigacja li a: hover,
.nawigacja li. active a,
.nawigacja li. disabled {
color: # fff;
tekst-Dekoracja: Brak;
}
.nawigacja li {
wyświetlacz: inline;
}
.nawigacja li a,
.nawigacja li a: hover,
.nawigacja li. active a,
.nawigacja li. disabled {
background-color: #6FB7E9;
border-radius: 3px;
kursor: wskaźnik;
padding: 12px;
padding: 0.75 rem;
}
.nawigacja li a: hover,
.nawigacja li. active a {
background-color: # 3C8DC5;
}
Proszę bardzo. Mamy listę numerycznych paginacji w naszym temacie, który wygląda świetnie.
Dodawanie numerycznej paginacji w WordPress za pomocą WP-PageNavi
Teraz rzućmy okiem na to, jak dodać numeryczną paginację w swoim motywie WordPress za pomocą istniejącej wtyczki o nazwie WP-PageNavi. Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WP-PageNavi. Po aktywacji wtyczki przejdź do Ustawienia ” PageNavi aby skonfigurować ustawienia wtyczki.
Na stronie ustawienia wtyczki możesz zastąpić domyślne ustawienia paginacji tekstowej i numerycznej własnymi, jeśli chcesz. Jednak domyślne ustawienia powinny działać dla większości witryn.
W następnym kroku musisz dodać tag szablonu do motywu WordPress. Przejdź do folderu tematycznego i znajdź linie dla starszej i nowszej paginacji w szablonach stron archiwum: index.php, archiwum.php i wszelkie inne pliki szablonów archiwalnych. Dodaj następujący tag szablonu, aby zastąpić stare znaczniki previous_posts_link i next_posts_link.
<?php wp_pagenavi ();?>
Po dodaniu fragmentu wp_pagenavi tak wyglądałaby numeryczna paginacja:
Jeśli chcesz zmienić wygląd kolorów i styl numerycznej paginacji w wp-pagenavi, musisz przejść do Ustawienia ” PageNavi. Odznacz opcję Użyj PageNavi-css.css i zapisz zmiany. Teraz przejdź do Wtyczki ” Edytor. Od Wybierz wtyczkę do edycji rozwijane menu, wybierz WP-PageNavi i kliknij na Wybierz guzik. Edytor załaduje Pliki Wtyczek na prawym pasku bocznym. Kliknij na pagenavi-css.css, aby otworzyć go w edytorze, a następnie skopiować zawartość pliku.
Następnie musisz przejść do Wygląd ” Edytor i wklej zawartość pagenavi-css.css w stylu Twojego motywu.plik css. Teraz możesz modyfikować schemat kolorów i stylizację stąd. Powodem, dla którego skopiowaliśmy zawartość CSS wtyczki do arkusza stylów motywu, jest zapobieganie utracie zmian stylu w przypadku aktualizacji wtyczki. Oto nieco zmodyfikowana wersja numerycznej paginacji, możesz ją używać i modyfikować w swoim motywie.
.wp-pagenavi {
clear: zarówno;
}
.wp-pagenavi a,wp-pagenavi span {
color: # FFF;
tekst-Dekoracja: Brak;
background-color:#6FB7E9;
border: 1px solid # B2D1E5;
padding: 5px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #E9F2F9;
background-color:#6FB7E9;
}
.wp-pagenavi span.current {
font-weight: bold;
background-color: # 3C8DC5;
}
Oto jak by to wyglądało:
Jak zawsze warto poeksperymentować z CSS. Celem powinno być dopasowanie numerycznej stronicowania do wyglądu i stylu kolorów witryny, aby ładnie się wtapiała i nie wyglądała jak dziwnie umieszczony element.
Mamy nadzieję, że ten artykuł pomógł Ci dodać i wyświetlić numeryczną paginację w Twoim motywie WordPress. Którą metodę wolisz stosować? Podoba Ci się numeryczna paginacja, czy wolisz wbudowaną nawigację Poprzedni/Następny? Daj nam znać w komentarzach poniżej.
