WP-PageNavi - nawigacja po stronie bloga WordPress - zainstaluj, skonfiguruj i zmień wygląd paginacji. Wtyczka paginacji (paginacja) WordPress Paginacja w WordPressie bez wtyczki

Pozdrowienia, drodzy czytelnicy bloga. Dzisiaj porozmawiamy o bardzo popularnej wtyczce WP-PageNavi, która pozwala przenieść nawigację po stronie Twojego bloga WordPress na nowy poziom.

Zasadniczo paginacja, która jest używana domyślnie, jest dość strawna, ale mimo to opcja, którą oferuje to rozszerzenie, wygląda znacznie atrakcyjniej.

Dlaczego warto korzystać z wtyczki WP-PageNavi

Oceń sam, tak wygląda domyślna paginacja:

A po zainstalowaniu wtyczki:

lub tak:

zależy to od opcji wybranych w oknie ustawień.

Moim zdaniem druga opcja jest znacznie ładniejsza niż pierwsza, która jest używana domyślnie. Jeśli też tak myślisz, przeczytaj ten artykuł do końca i poznaj wszystkie niuanse instalacji i konfiguracji tego wspaniałego rozszerzenia.

Wtyczkę należy najpierw pobrać. stąd. Znajdź przycisk „Pobierz” po prawej stronie i zapisz archiwum wp-pagenavi.zip na swoim komputerze. Następnie rozpakuj go i prześlij wynikowy folder na serwer hostingowy w katalogu wtyczek wp-content/plugins/ .

Aby to zrobić, musisz uzyskać dostęp do plików i folderów swojego bloga WP za pomocą protokołu FTP ().

Podczas rozpakowywania zdarza się, że pojawia się dodatkowy folder zewnętrzny, więc sprawdź to i pozbądź się go, jeśli to konieczne. Mam nadzieję, że wyjaśniłem jasno? Inaczej w W przeciwnym razie WordPress nie zobaczy zainstalowanej wtyczki. OK, kontynuujmy.

Po skopiowaniu plików wtyczek na serwer hostingowy w folderze wp-content/plugins/, musisz przejść do panelu administracyjnego WordPress (http://your_sait.ru/wp-admin/) i wybrać „Plugins” element z lewego menu panelu administratora”. W górnej części otwartego okna „Zarządzanie” należy kliknąć link „Nieaktywny” (lub, jeśli nie ma tłumaczenia, „Nieaktywny”).

Otworzy się okno ze wszystkimi zainstalowanymi, ale jeszcze nie aktywowanymi rozszerzeniami. Znajdź wśród nich „WP-PageNavi” i kliknij link „Aktywuj” znajdujący się pod jego nazwą.

Wklej kod wyjściowy wtyczki do żądanych szablonów WordPress

Wtyczka jest aktywna, ale aby zobaczyć efekty jej pracy na swoim blogu, trzeba będzie również wstawić kod wywołania funkcji wp_pagenavi do plików aktualnego motywu. .

Zwykle podział na strony jest używany na stronie głównej bloga (plik INDEX.PHP w folderze motywu), na stronach z zarchiwizowaną zawartością (ARCHIVE.PHP) oraz w wynikach wyszukiwania (plik SEARCH.PHP). W rzeczywistości będziemy musieli wstawić kod wywołania potrzebnej nam funkcji do tych plików (szablonów).

Te. będziesz musiał ponownie połączyć się przez FTP i przejść do folderu z aktualnym motywem:

wp-content/themes/Nazwa folderu z motywem

Znajdź w nim INDEX.PHP i otwórz go do edycji w wygodnym dla ciebie edytorze (używam do tego zaawansowanego Notepad ++ - mam artykuł o pracy z nim). Teraz Twoim zadaniem jest znalezienie tej sekcji kodu w INDEX.PHP, która odpowiada za przejście do poprzedniej lub następnej strony. Trudne zadanie, prawda? Chociaż oczywiście dla kogo.

INDEX.PHP nie jest bardzo duży, przestudiuj dokładnie jego zawartość pod kątem komentarzy związanych z paginacją, na przykład:

Zazwyczaj twórcy motywów WordPress umieszczają w takich komentarzach obszar kodu odpowiedzialny za wyświetlanie paginacji. Sam standardowy kod może wyglądać np. tak:

Po zidentyfikowaniu żądanego fragmentu należy go zastąpić linią wywołującą funkcję wp_pagenavi:

Teraz musisz zapisać zmiany wprowadzone w INDEX.PHP, przejść do strony głównej swojego bloga i upewnić się, że wszystko działa tak, jak powinno. Te. zamiast standardowej paginacji używanej w WordPressie, używasz piękna WP-PageNavi.

Nawiasem mówiąc, standardowej paginacji nie można usunąć z kodu INDEX.PHP, więc po usunięciu tej wtyczki nie będziesz mieć z nią później problemów. Aby to zrobić, będziesz musiał napisać w INDEX.PHP, zamiast standardowego kodu nawigacyjnego, warunek, który określa, kiedy wyświetlić standard, a kiedy panel WP-PageNavi.

Warunek będzie zależał od tego, czy wtyczka WP-PageNavi jest zainstalowana na Twoim blogu, czy nie. Może to wyglądać mniej więcej tak:

Warunek w tym kodzie:

If(function_exists("wp_pagenavi"))

sprawdza, czy wtyczka jest zainstalowana, a jeśli nie jest zainstalowana, wówczas zadziała standardowy skrypt:

inny(?>

A jeśli WP-PageNavi jest zainstalowany, pasek nawigacyjny zostanie utworzony przez jego siły:

{ ?>

Chociaż oczywiście nie możesz sobie zawracać głowy i po prostu wymieniać jedno na drugie, ale to już zależy od Ciebie.

Więc teraz będziesz musiał zrobić to samo dla plików ARCHIVE.PHP i SEARCH.PHP z folderu motywu (wp-content/themes/Nazwa folderu motywu).

Ustawienia wtyczki WP-PageNavi dla bloga WordPress

Aby się do nich dostać, należy wybrać w panelu administracyjnym z lewego menu w obszarze „Parametry” pozycję „Lista stron”. Otworzy się okno z aktywną zakładką „Szablony listy stron”:

W polu „Szablon ogólnej listy stron” na powyższym rysunku ustawia się wyświetlanie bieżącej strony i całkowitą liczbę stron. Z opcją wypełnienia tego pola panel WP-PageNavi będzie wyglądał następująco:

Jeśli wolisz, możesz dodać słowo „Strona” do tego pola:

Strona %CURRENT_PAGE% z %TOTAL_PAGES%

A jeśli chcesz, możesz go nawet posprzątać. W kolumnach „Element„ Bieżąca strona ”” i „Element” Strona „” pozostaw wszystko tak, jak jest. Tutaj możesz ustawić wyświetlanie napisu dla bieżącej i wszystkich innych stron internetowych jako numeru seryjnego. Okaże się coś takiego:

W polach „Tekst na pierwszą stronę” i „Tekst na ostatnią stronę” możesz ustawić tekst przycisków, aby przejść do pierwszej i ostatniej strony:

Zamiast tekstu w kolumnie „Tekst na pierwszą stronę” możesz wpisać jeden, aw polu „Tekst na ostatnią stronę” - %TOTAL_PAGES% (zamiast tego napisu zostanie wyświetlona liczba wszystkich stron internetowych):

W polach „Tekst do następnego posta” i „Tekst do poprzedniego postu” zapisywane są znaki strzałek, które mają wyświetlać się na przyciskach przejścia do następnego i poprzedniego:

Wyczyściłem kolejne dwa pola, ponieważ w przeciwnym razie zamiast tego były wyświetlane dwa białe przyciski bez tekstu. Możliwe, że tego nie będziesz miał i sam zdecydujesz, do czego one służą.

Przejdźmy do dalszych ustawień zwanych „Ustawieniami listy”:

Pole wyboru „Użyj pagenavi-css.css” umożliwia wyłączenie lub dołączenie pliku Cascading Style Sheets (CSS) dołączonego do wtyczki. W polu „List style” możesz wybrać jeden z dwóch stylów CSS z rozwijanej listy.

Widziałeś „Normalny” na poprzednich zrzutach ekranu, a wybierając styl „Lista rozwijana”, otrzymasz mniej więcej taki widok panelu WP-PageNavi w WordPress:

Jeśli zaznaczysz pole „Zawsze pokazuj nawigację strony”, to nawet dla stron internetowych, które nie wymagają jeszcze numeracji (powiedzmy, że na stronie głównej nie ma wystarczającej liczby postów, aby dokonać podziału), nawigacja będzie nadal wyświetlana mniej więcej tak :

W "Liczba stron do wyświetlenia" możesz ustawić, ile stron będzie wyświetlanych jako ciągła (kolejna) seria liczb. Przejście do reszty będzie możliwe za pomocą przycisków następny i poprzedni, a także przycisków przejścia do pierwszego i ostatniego. Stawiam tam piątkę, w wyniku czego mam:

W opcji „Liczba większych numerów stron do wyświetlenia” możesz ustawić, ile numerów odległych stron internetowych (większych niż aktualnie wyświetlana wartość numeryczna) zostanie wyświetlonych po naciśnięciu przycisku Dalej.

A w polu „Pokaż większe numery stron w wielokrotnościach” możesz ustawić krok, z jakim będą wyświetlane numery odległych stron internetowych. Powiedzmy, że w pierwszym polu postawiłem trójkę, a w drugim dwa:

W rezultacie panel PageNavi będzie wyglądał następująco:

Te. numery tylko trzech odległych stron internetowych są wyświetlane z interwałem (krokiem) równym dwa (6, 8, 10). Aby nie korzystać z wyświetlania odległych numerów, wystarczy, że wpiszesz zero w kolumnie „Liczba większych numerów stron do pokazania”.

Aby zastosować i wyświetlić wprowadzone zmiany, w ustawieniach wtyczki należy kliknąć znajdujący się na dole przycisk „Zapisz zmiany”.

Zmiana wyglądu paska stronicowania

Aby zmienić schemat kolorów, dopełnienie, czcionki i inne atrybuty wyglądu paska stronicowania wyświetlanego na Twoim blogu, musisz dodać niezbędne właściwości CSS do pliku kaskadowego arkusza stylów tej wtyczki.

To prawda, aby przybrał formę pokazaną na zrzutach ekranu w tym artykule, dodałem dodatkowe właściwości nie do pliku CSS wtyczki (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), ale do pliku motywu, którego używam (wp-content/themes/nazwa folderu motywu/style.css).

W tym pliku właściwości CSS, które definiują wygląd Panele WP-PageNavi wyglądają tak:

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( dopełnienie: 3px 8px 3px 8px; margines: 2px; dekoracja tekstu: brak; kolor: #fff; obramowanie: 0px wysokość linii: 24px; kolor tła: #2b99ff; ) #content .wp-pagenavi a:hover ( kolor: #fff; kolor tła: #154b7d; ) #content .wp-pagenavi span.pages ( dopełnienie: 3px 8px 3px 8px; margines: 2px 2px 2px 2px; ) #content .wp-pagenavi span.current ( dopełnienie: 3px 8px 3px 8px; margines: 2px; wysokość linii: 25px; grubość czcionki: pogrubiony; kolor: #add352; tło:#26343c; )

Zwracam uwagę na fakt, że użyte tutaj nazwy klas i identyfikator () odnoszą się konkretnie do mojego szablonu. Pozwól, że wyjaśnię cel niektórych reguł i właściwości CSS.

#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active ( dopełnienie: 3px 8px 3px 8px; margines: 2px; dekoracja tekstu: brak; kolor: #fff; obramowanie: 0px wysokość linii: 24px; kolor tła: #2b99ff;)

ustawia marginesy zewnętrzne i wewnętrzne (patrz o nich) dla przycisków panelu (właściwie dla linków z tych przycisków, ponieważ te właściwości zostaną zastosowane do linków określonych przez tag A i umieszczonych w kontenerze wp-pagenav).

Reguła ta określa również kolor tekstu linku (biały kolor jest ustawiany we właściwości color: #fff; - ).

Linki nie będą otoczone obramowaniem (właściwość border: 0px), a kolor tła kontenerów z tymi linkami będzie określony przez właściwość background-color: #2b99ff; . To właśnie ten kolor widać na powyższych zrzutach ekranu dla nieaktywnych przycisków panelu stronicowania.

Reguła CSS:

#content .wp-pagenavi a:hover ( color:#fff; background-color: #154b7d; )

ustawia kolor tekstu i tła kontenera (przycisku) z linkiem, nad którym aktualnie znajduje się kursor myszy (właściwości CSS linku hover - a:hover - ).

Kolor tekstu linku jest nadal biały, ale kolor tła (właściwie kolor przycisku) został zmieniony na ciemniejszy (kolor tła: #154b7d;). Te. odwiedzający, przesuwając kursor myszy nad przyciskami paska nawigacyjnego, zobaczy, jak przycisk zmienia kolor, co stwarza wrażenie interaktywności.

Reguła CSS:

#content .wp-pagenavi span.current (wypełnienie: 3px 8px 3px 8px; margines: 2px; wysokość linii: 25px; grubość czcionki: pogrubiona; kolor: #add352; tło:#26343c;)

Ustawia wygląd przycisku z numerem aktualnie otwartej strony bloga (ten link będzie miał w kodzie tag SPAN z klasą CURRENT). Taki przycisk wyglądałby tak samo jak przycisk z numerem jeden na poniższym rysunku:

Ta reguła CSS zmienia kolor tła tego aktywnego przycisku (właściwość background: #26343c), kolor tekstu łącza na tym przycisku (kolor: właściwość #add352), a poza tym czcionka tekstu łącza będzie pogrubiona z powodu do tej właściwości CSS — font-weight :bold().

Ale aby zmienić wygląd panelu stronicowania, możesz dodać niezbędne właściwości CSS do arkusza stylów samej wtyczki. Możesz otworzyć ten kaskadowy plik arkusza stylów do edycji z folderu:

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

Na przykład, aby uzyskać taki panel:

Będziesz musiał pobrać to archiwum, rozpakować je i skopiować folder IMAGES do folderu z wtyczką WP-PageNavi, którą znajdziesz w następującej ścieżce:

/wp-content/plugins/wp-pagenavi

Folder IMAGES zawiera plik graficzny fon.gif , który będzie stanowił tło dla panelu PageNavi. Teraz musisz otworzyć plik /wp-content/plugins/wp-pagenavi/pagenavi-css.css do edycji i zastąpić znajdujący się tam kod następującymi regułami:

wp-pagenavi (szerokość: 100%; przepełnienie: ukryte; dopełnienie: 4px 0px 4px 0px; margines lewy: 0px; obramowanie: 1px solid #00598F; tło: url("images/fon.gif") środkowa lewa powtórz-x ; ) .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited ( dopełnienie: 4px 5px 4px 5px; margines: 2px 0px 2px 0px; kolor: #ffffff; grubość czcionki: pogrubiony; tekst -dekoracja: brak;) .wp-pagenavi a.last (wypełnienie: 4px 5px 4px 5px;) .wp-pagenavi a.first (wypełnienie: 4px 5px 4px 5px;) .wp-pagenavi a:hover (kolor-tła: #00598F; kolor: #FFFFFF; grubość czcionki: pogrubiony; ) .wp-pagenavi span.pages ( dopełnienie: 4px 5px 4px 5px; margines: 2px 0px 2px 0px; kolor: #FFFFFF; tło: url("images/fon .gif") środkowa lewa powtórz-x; kolor tła: #4f4f4f; grubość czcionki: pogrubiona; ) .wp-pagenavi span.current ( dopełnienie: 4px 7px 4px 7px; margines: 2px 0px 2px 0px; grubość czcionki: pogrubiony; górny brzeg: pełny 1 piksel #00598F; dolny brzeg: pełny 1 piksel #00598F; kolor: #FFFFFF; kolor tła: #00598F; grubość czcionki: pogrubiony; .wp-pagenavi span.extend (wypełnienie: 4 piksele) 0px 4px 0px; margines: 2px 0px 2px 0px; prawy margines: 0px; lewy margines: 0px; górna granica: 1 px pełny #00598F; obramowanie na dole: 1 piksel pełny #00598F; kolor: #FFFFFF; tło: url("images/fon.gif") środek lewy powtórz-x; grubość czcionki: pogrubiona; ) .wp-pagenavi span.next-prev ( rodzina czcionek: Arial; /* IE fix */ )

Zapisz zmiany w pagenavi-css.css i odwiedź swojego bloga, aby sprawdzić, czy nawigacja się zmieniła. Jeśli się nie zmieniło, spróbuj odświeżyć zawartość okna w przeglądarce, przytrzymując przycisk SHIFT, a jeśli to nie pomoże, wyczyść pamięć podręczną przeglądarki.

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz być zainteresowany

Easy Social Share Buttons - wtyczka do dodawania przycisków portale społecznościowe w WordPress, w tym Vkontakte i Odnoklassniki
Subskrybuj komentarze do WordPress - subskrypcja komentarzy do artykułów w WordPress
Breadcrumbs w WordPress z wykorzystaniem wtyczki Breadcrumb NavXT (linkowanie wzmacniające)
Proste liczniki oraz ikony kategorii i stron - piękne liczniki RSS i Twitter, a także ikony kategorii i stron w WordPress
Instalowanie i konfigurowanie wtyczek do WordPress, rozwiązanie możliwe problemy
Wszystko w jednym pakiecie SEO i wewnętrzna optymalizacja bloga WordPress pod kątem wyszukiwarek (metatagi kanoniczne, opisu i tytułu)
Galeria dla WordPress oparta na wtyczce NextGEN Gallery - tworzenie i wyświetlanie galerii zdjęć oraz pokazów slajdów w artykułach
Mapy witryn Google XML — Tworzenie mapy witryny dla WordPress
Better Feed for WordPress – jak nie wysyłać pełnych tekstów postów do RSS i zabezpieczyć się przed kradzieżą treści poprzez news feed
Łączenie stron serwisu na przykładzie wtyczki upPrev (ruchomy panel) dla WordPressa

(3)

WordPress to bardzo wszechstronna platforma blogowa, a za pomocą wtyczek można ją uczynić jeszcze bardziej przyjazną dla użytkownika.

Dotyczy to również nawigacji strony (paginacji) stron, która nie jest natywnie dostępna w WordPress. Ale można to łatwo naprawić, wybierając jedną z 10 najlepsze wtyczki.

1.WP-PageNavi

Jedna z najpopularniejszych i najczęściej używanych wtyczek. Z wbudowaną funkcją wp_pagenavi() zwykłe linki ← Wstecz | Dalej → zmieni się na atrakcyjną paginację.

2. Inteligentna paginacja WP

Kolejna przydatna wtyczka, która ma bardzo przydatną funkcję. Możesz przejść do żądanej strony, wpisując jej numer w dodatkowym polu.

3. Prosta paginacja

Jedna z najlepszych i najprostszych wtyczek, która pozwala ustawić dodatkową paginację dla postów i komentarzy, co znacznie ułatwia poruszanie się po witrynie WordPress.

4. Alfabetyczna paginacja

Dzięki tej wtyczce możesz alfabetycznie filtrować posty i strony. Jest nie tylko łatwy w instalacji, ale także łatwy w użyciu.

5. Paginacja jPages dla WordPress

Jest to jedna z najlepszych wtyczek do stronicowania stron galerii, komentarzy itp. Przekształca galerie w galerie z paginacją.

6. Paginacja

Ta wtyczka umożliwia tworzenie stron z podziałem na strony zgodnie z własnymi wymaganiami. Możesz zwiększyć numerację na jednej stronie, wybrać liczbę wyświetlanych jednostek. Wartość domyślna to 10.

7. Następny post Fly Box dla WordPress

Jedna z najlepszych wtyczek tworząca nawigację między następnym a poprzednim postem w postaci popup boxa po lewej lub prawej stronie okna. Gdy użytkownik przewija stronę, pojawia się wyskakujące okienko, w którym można wybrać następny lub poprzedni post.

8. Wtyczka jQuery Paginator

Wtyczka umożliwia wybór pomiędzy 3 rodzajami stronicowania, jeśli ustawisz żądany parametr. Jest to jedna z najbardziej atrakcyjnych wtyczek stronicowania.

9. Inteligentna paginacja

Świetna wtyczka oferująca 11 różnych opcji stronicowania.

Premia. Style CSS dla wtyczki WP-PageNavi

Doskonała kolekcja stylów CSS dla popularnych wtyczek WordPress - WP-PageNavi i WP-Paginate. zawiera strony HTML z demonstracją stylów, a każdy styl zawiera osobny plik CSS.

Cześć wszystkim!

Nadal piszę artykuły na temat nawigacji w witrynie na silniku WordPress.

A w tym artykule pokażę, jak paginacja odbywa się bez wtyczek i przy użyciu dobrze znanego WP-PageNavi. Podobnie jak w przypadku , pokażę implementację na kilka sposobów, abyś mógł wybrać ten, który najbardziej Ci odpowiada. Tak, i są chwile, kiedy jakaś metoda nie działa dla kogoś. Dlatego będzie jakieś ubezpieczenie.

Materiał wyszedł bardzo obszerny i być może najbardziej wyczerpujący w sieci.

Nawigacja strony (paginacja) to podział informacji na strony. Jeśli bierzesz wiele witryn na Wordpresie, to zjawisko to jest wyraźnie wyrażone w filmie z listą numerów stron na dole każdej strony z ogłoszeniami. na moim blogu dana funkcja ma następującą postać.

Projekt może się różnić. Ale jego istota jest taka sama - podział informacji na strony. Jak wiecie, domyślnie na stronie głównej serwisu wyświetlane są zapowiedzi wpisów, które mogą być określoną liczbą (w zależności od ustawień w pozycji „Pisanie”).

Jeśli nie rozbijemy ich liczby, to zostaną one wyświetlone na jednej stronie. A to nie jest dobre, ponieważ korzystanie z witryny i Strona głównaładowanie zajmie dużo czasu, ponieważ z czasem pojawi się ogromna liczba ogłoszeń.

Z reguły paginacja jest już wbudowana w nowoczesne szablony Wodpress. Ale istnieje opcja, gdy nie jest. Następnie musisz wdrożyć. Zamiast tego może dojść do paginacji ogłoszeń w postaci linków do poprzednich i kolejnych wpisów. Jest to wyraźnie wyrażone w standardowych szablonach.

Ta opcja jest również niewygodna, ponieważ cofając się o 3 strony, nie będziemy mogli w jednym kroku wrócić do strony oryginalnej. Będziesz musiał kliknąć 3 razy na poprzednie wpisy lub na następne. Z drugiej strony paginacja pozwala na bardziej elastyczne zarządzanie chwilą.

Ogólnie przejdźmy do jego implementacji i pierwszym krokiem jest osadzenie go w szablonie bez wtyczki. Ta metoda Wyjaśniłem to w samouczku wideo. Polecam najpierw przyjrzeć się temu, a następnie przestudiować tekstową wersję instrukcji.

Robienie tego bez wtyczki

Teraz pokażę ci, jak będziesz mieć dokładnie taką samą paginację WordPress jak ja. Wszystko odbywa się bardzo prosto. Zajmie to 2 fragmenty kodu, które trzeba będzie umieścić w plikach szablonów, a następnie napisać style, aby ustawić wygląd. Zacznijmy!

Oto pierwsza część kodu. Musi być umieszczony w pliku functions.php szablonu projektu.

funkcja wp_corenavi() ( global $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["base "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["całkowity"] = $max; $a["bieżący"] = $bieżący; $całkowity = 0; //1 - wyświetl tekst "Strona N z N", 0 - nie wyświetlaj $a["mid_size"] = 1; //ile linków pokazać po lewej i prawej stronie bieżącego $a["end_size"] = 1; //ile linków pokazać na początku i na końcu $a["prev_text"] = ""; //tekst linku "Poprzednia strona" $a["next_text"] = ""; //tekst linku "Następna strona" if ($max > 1) echo "

Kod umieściłem na samym początku pliku po tagu otwierającym

W tym kodzie możemy dostosować niektóre parametry:

• Linia 10 - jeśli zmienisz wartość z 0 na 1, to obok numerów stron pojawi się napis formularza, np. "Strona 3 z 45". Możesz zrobić tę opcję, ale myślę, że w tym przypadku nie jest to potrzebne, ponieważ numery stron już rozumieją, ile stron znajduje się w witrynie. A aktywna strona jest podświetlona innym kolorem;
• Linie 11 i 12 - odpowiednio po lewej i prawej stronie aktywnego numeru strony powinna być wyświetlona pewna liczba poprzednich lub następnych numerów. Tutaj pokazujemy ich liczbę. W tym kodzie wartość wynosi 1. Możesz umieścić 2 lub 3. Tutaj będziesz musiał trochę poeksperymentować, ponieważ im większa liczba liczb, tym szersza będzie nawigacja. Wszystko zależy od szerokości szablonu.

Ponieważ paginacja powinna być wyświetlana wszędzie tam, gdzie wyświetlana jest lista ogłoszeń, konieczne jest umieszczenie tego kodu we wszystkich plikach, w których ma to miejsce:

• Strona główna - index.php;
• Strony kategorii i archiwum - category.php i archive.php;
• Strona wyszukiwania - search.php.

Nawiasem mówiąc, w niektórych szablonach dane wyjściowe stron kategorii i archiwów można przeprowadzić w jednym pliku. Odpowiada za to mój plik archive.php.

Jeśli Twój szablon nie posiada nawigacji do dzielenia ogłoszeń na strony, to drugi kod umieszczamy po wyświetleniu treści. Jeśli masz poprzednie i następne linki, co jest bardziej prawdopodobne, ta opcja jest łatwiejsza do wdrożenia, ponieważ wystarczy je zastąpić kodem podanym powyżej.

Z reguły standardowa nawigacja ma postać poprzedniego i następnego. linki są wyświetlane przy użyciu podobnego kodu.

Każdy podany kod może być inny, ale jego główne wypełnienie będzie takie samo. Musisz znaleźć kod, który będzie zawierał kod o nazwie next_posts_link i previous_posts_link.

Kiedy go znajdziesz, możesz usunąć tę treść z pliku i skopiować w jego miejsce niezbędny kod, który wyświetla paginację.

Należy więc zastąpić standardową nawigację paginacją we wszystkich plikach, w których jest wyjście komunikatów. Nazwy plików podałem powyżej.

Nawiasem mówiąc, jeśli masz problemy z tym procesem, możesz skontaktować się ze mną w celu uzyskania pomocy w komentarzach. Staram się pomóc.

/* NAVIGATION */ .navigation ( float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px; ) .navigation > a ( float: left; width: 32px; font -waga: 700; wyrównanie tekstu: środek; kolor: #637b93; dekoracja tekstu: brak; margines lewy: 1px; dopełnienie góry: 7px; .navigation > .current ( float: left; font-weight: 700 ; szerokość: 29 pikseli; wyrównanie tekstu: środek; kolor: #c4c8cc; lewy margines: 5 pikseli; dopełnienie góry: 7 pikseli; ) .navigation > .prev ( float: left; width: 32px; height: 34px; background: url ("images/bow_left.png") no-repeat; margin-left: 0; ) .navigation > .next ( float: left; width: 34px; height: 34px; background: url("images/bow_right.png") no-repeat; margin-left: 14px; ) .navigation > .dots ( float: left; font-size: 14px; font-weight: 700; width: 32px; text-align: center; color: #c4c8cc; padding- góra: 7px; )

Musisz także przesłać zdjęcia strzałek do przodu i do tyłu na hosting w folderze obrazów szablonu projektu. . Aby pobrać, możesz użyć standardu menedżer plików dostawca hostingu. Ja robię.

Gdy umieściliśmy kody w plikach functions.php, we wszystkich plikach wyświetlających strony z ogłoszeniami i napisaliśmy style, możemy sprawdzić funkcjonalność nawigacji. U mnie wszystko działa i w standardowym szablonie wygląda to tak.

Przeanalizowaliśmy metodę bez wtyczki. Jestem w 100% pewien, że jeśli wszystko zostanie zrobione tak, jak opisano powyżej, to wszystko powinno działać z hukiem. Była też druga opcja bez wtyczki, ale po jej przejrzeniu zdałem sobie sprawę, że w rzeczywistości jest to ta sama opcja, tylko nieznacznie zmodyfikowana. Dlatego przechodzę do sposobu implementacji paginacji za pomocą wtyczki.

Wtyczka WP-PageNavi

Aby rozpocząć, pobierz wtyczkę z oficjalnej strony i zainstaluj ją na stronie.

Po zainstalowaniu wtyczki konieczne będzie również umieszczenie kodu, który będzie wyświetlał nawigację na dole strony.

Teraz wtyczka wykona swoje zadanie, a numery stron będą miały następujący wygląd.

Z jednej strony design nie jest taki gorący, ale z drugiej strony to nawet nic, bo nie razi w oczy. Użytkownicy kochają prostotę! Dlatego możesz zostawić wszystko tak, jak jest. Jeśli chcesz czegoś bardziej kolorowego, teraz rozważymy kilka opcji. W międzyczasie omówimy coś takiego jak konfiguracja wp pagenavi. Są ustawienia i warto o nich mówić.

Jeśli chodzi o pierwszą pozycję ustawień „Szablony listy stron”, nic nie trzeba w niej zmieniać. jesteśmy zadowoleni. Przechodzimy do „Ustawień listy stron”.

Zauważam, że musisz poeksperymentować ze wszystkimi parametrami w tym akapicie, aby znaleźć optymalną wartość dla siebie. Wyjaśnię tylko pokrótce za co odpowiada każdy parametr.

• Użyj stylu — jeśli ustawione na „Nie”, style wtyczek zostaną usunięte, a numery stron nie zostaną sformatowane;

• Styl listy stron – oprócz zwykłej listy numerów stron, możemy wybrać opcję listy rozwijanej;

• Zawsze pokazuj listę stron — nie włączaj tego ustawienia. Konieczne jest, aby lista była wyświetlana tylko tam, gdzie jest to konieczne;
• Liczba stron do wyświetlenia - odpowiada za liczbę wyświetlanych numerów stron na początku listy. Domyślnie jest to 5 i na powyższych zrzutach ekranu widać, że wyświetlanych jest dokładnie 5 stron;
• Zakres stron do wyświetlenia - jeśli Twoja witryna ma dużo stron, ta funkcja będzie niezwykle przydatna. Wyświetli numery stron po liście głównej z wartościami 10, 20, 30, 40 i tak dalej. Odstęp między tymi wartościami jest określony przez następujący parametr;
• Współczynnik dla zakresów stron - jeśli ustawisz wartość na 5, to zakres stron będzie wyglądał jak - 10, 15, 20, 25 itd. Jeśli 10, to 10, 20, 30, 40 i tak dalej. Wartość 10 jest wystarczająca.

To są wszystkie ustawienia, które musisz ustawić zgodnie ze swoimi potrzebami. Tutaj każdy dostosuje się do siebie.

Najprostszą opcją jest zainstalowanie dodatkowej wtyczki, która ma już przygotowane style, a także pozwala skonfigurować każdy parametr indywidualnie. To się nazywa wtyczka.

Po zainstalowaniu w panelu administratora WordPressa pojawia się nowy element.

Po przełączeniu się na niego możemy od razu wybrać istniejące wykroje projektowe.

Jeśli chcemy dostosować style indywidualnie, to w pierwszej pozycji ustawień „Wybierz arkusz stylów” wybierz opcję „Niestandardowy” i skonfiguruj parametry wszystkich elementów (ramki i ich kolory, kolory i rozmiary czcionek, kolory linków po najechaniu nad myszą itd.).

Przetłumaczę Ci wszystkie parametry.

• Kolor nagłówka - kolor tekstu „Strona 3 z 45”;
• Kolor tła - kolor tła;
• Aktywny/Bieżący kolor tła - kolor tła aktywnego numeru strony;
• Rozmiar czcionki - rozmiar czcionki;
• Kolor łącza - kolor łącza;
• Link Mouse Hover/ Active Hover - kolor linku po najechaniu myszką na numer oraz gdy numer jest aktywny;
• Link Border Color - kolor obramowania;
• Link Border Mouse Hover/Active Color - kolor obramowania po najechaniu myszką i gdy cyfra jest aktywna;
• Wyrównaj nawigację - lokalizacja nawigacji (lewo, prawo, środek).

Możesz wyszukiwać wartości kolorów w Internecie lub w Photoshopie, wybierając żądany kolor do wypełnienia.

Opcja wtyczki nie jest zła, ale zawsze mówię, że trzeba pozbyć się niepotrzebnych wtyczek iw tym przypadku tak jest.

Druga opcja odbywa się poprzez edycję pliku stylu, który znajduje się w folderze z wtyczką Wp-pagenavi na hostingu - pagenavi-css.css.

Ten plik jest dołączany, gdy ustawienie „Użyj stylu pagenavi-css.css” jest aktywne w ustawieniach wtyczki. Dlatego jeśli go edytujemy, to po aktualizacji wtyczki wszystkie style zostaną zastąpione standardowymi. Do wymiany za każdym razem dany plik i nie zmieniać stylu, zalecam wykonanie następującej czynności:

1. Edytuj style w tym pliku na własne, nadając żądany projekt paginacji;
2. Wyłącz ustawienie „Użyj stylu pagenavi-css.css”;
3. Umieść te style w głównym arkuszu stylów szablonu projektu, style.css.

W ten sposób te style będą działać niezależnie od wtyczki. A kiedy zaktualizujesz, nie zbłądzą. To chyba najlepszy projekt nawigacji w tej wtyczce, który sam bym zrobił. Ale na szczęście korzystam z opcji bez wtyczki, co jest moją radą dla ciebie.

Więc przyjaciele. Materiał wyjdzie bardzo dobrze, jak dla mnie. Co o tym myślisz? Mam nadzieję, że wszyscy to zrobiliście. Jeśli coś nie zadziała, postaram się pomóc w komentarzach. Pisz, nie bój się! Ja też kiedyś bardzo cierpiałem i udało mi się to rozgryźć.

W tej notatce chcę już jak najszybciej zakończyć ten post, ponieważ wymagało to dużo siły. Oto, co zrobię. Żegnam się i idę odpocząć, a potem zagłębię się w pisaniu nowych treści.

Z poważaniem, Konstantin Chmielow!

Nawigacja w motywach WordPress realizowana jest najczęściej w standardowy sposób – link do poprzednich postów oraz link do kolejnych postów. To w większości przypadków wystarczy, ale czasami konieczne jest zrobienie nawigacji po stronie w WordPressie, co nam w tym pomoże darmowa wtyczka wp-pagenavi.

Instalacja wtyczki

WP-PageNavi to jedna z najpopularniejszych i najprostszych wtyczek do implementacji nawigacji po stronie lub „paginacji” w WordPress. Jest dostępny w katalogu wtyczek na WordPress.org i można go zainstalować z panelu administracyjnego WordPress w sekcji Wtyczki → Dodaj nowy.

Po zainstalowaniu i aktywacji wtyczki powinieneś wprowadzić pewne zmiany w swoim aktywnym motywie WordPress. Znajduje się w katalogu wp-content/themes. Znajdź w tym katalogu folder z nazwą aktywnego motywu.

Warto zauważyć, że niektóre motywy mają już wbudowaną obsługę Wtyczka WP-PageNavi, a po aktywacji natychmiast wyświetli paginację zamiast standardowej, ale takie motywy są niezwykle rzadkie. W większości przypadków konieczne będzie ręczne wprowadzenie zmian w celu obsługi podziału na strony.

W plikach motywu powinieneś znaleźć wywołania funkcji next_posts_link i previous_posts_link. Mogą znajdować się w wielu miejscach, ale najczęściej można je znaleźć w plikach index.php, archive.php i functions.php.

Te funkcje renderują standardową nawigację, a aby renderować nawigację po stronie za pomocą WP-PageNavi, należy je zastąpić, wywołując jeden Nowa cecha wp_pagenavi .

Weźmy na przykład domyślny motyw Twenty Twelve. W pliku functions.php znajdź następujący kod:

I zamiast wywoływać funkcje next_posts_link i previous_posts_link, wywołaj funkcję wp_pagenavi:

Zwróć uwagę na trzecią linię. Tutaj dodaliśmy również wywołanie funkcji function_exists przed wywołaniem wp_pagenavi . Pomoże to zapobiec wystąpieniu błędu, jeśli wtyczka WP-PageNavi jest dezaktywowana lub jej brakuje.

Po zapisaniu pliku przejdź do dowolnej strony ze swoimi postami, a zobaczysz paginację w deytsivi:

Jeśli nie możesz znaleźć funkcji next_posts_link i previous_posts_link do zastąpienia w swoim motywie, zostaw komentarz z nazwą motywu, a na pewno Ci pomożemy.

Dla bardziej zaawansowanych użytkowników WordPress warto zauważyć, że zastępowanie funkcji i sekcji motywu najlepiej wykonywać za pomocą motywu potomnego, używając oryginalnego motywu jako motywu nadrzędnego. Pomoże to zachować paginację i inne zmiany nawet po aktualizacji motywu.

Ustawienia WP-PageNavi

W sekcji Opcje → PageNavi możesz zmienić szereg ustawień dotyczących nawigacji po stronie, w tym: maksymalną liczbę stron, wyświetlanie jako listę rozwijaną, stosowanie stylów wbudowanych itp.

W ustawieniach możesz również zmienić tekst pojawiający się na linkach, co ułatwia tłumaczenie linków wyświetlanych w nawigacji.

O nawigacji po stronie "bez wtyczek"

Jeśli przeczytałeś artykuł o tym, jak zaimplementować paginację bez wtyczek w WordPress, jesteśmy bardzo nie polecamy tej metody i dotyczy to nie tylko paginacji. Większość artykułów i samouczków z serii bez wtyczek po prostu kopiuje kod z wtyczki i wkleja go w różne części motywu.

Podejście „bez wtyczek” do rozszerzenia WordPress nie ma nic zalet, ale ma znaczną liczbę wad:

• Zawsze musisz zagłębić się w kod
• Jeśli coś poszło nie tak, nie możesz łatwo dezaktywować wtyczki
• Zmiana lub aktualizacja motywu powoduje utratę wszystkich dodatków
• To nie jest bezpieczne i może spowodować włamanie do Twojej witryny.

Wtyczki zostały zaprojektowane specjalnie w celu rozszerzenia funkcjonalności WordPressa, więc nie krępuj się ich używać.

Alternatywy

Jeśli z jakiegoś powodu wtyczka WP-PageNavi nie jest dla Ciebie odpowiednia, jako alternatywę radzimy rozważyć wtyczki WP-Paginate i WP Page Numbers, które implementują podobną funkcjonalność.

Jeśli masz jakiekolwiek pytania dotyczące paginacji WordPress lub wspomnianych wtyczek, możesz zadać nam je za pomocą formularza komentarza lub napisać do nas na adres