Przewodnik po stylizacji wtyczki WP-PageNavi WordPress

Jeśli nie znasz WP-PageNavi Wtyczka WordPress pozwala zastąpić normalną poprzednią / następną nawigację bardziej zaawansowaną, numerowaną nawigacją stronicowania. Jest to funkcja, którą opisałem w kilku opracowanych przeze mnie motywach, w tym RS16, Blogwave, RS17, i Jasny punkt.


RS16 PageNavi

W tym samouczku omówię:

  • Zainstaluj WP-PageNavi i odpowiednio zintegruj go ze swoim motywem.
  • Dwie metody wyłączania i / lub zastępowania domyślnych stylów wtyczek.
  • Przegląd danych wyjściowych znaczników HTML autorstwa WP-PageNavi
  • Wreszcie, jak zmienić wygląd nawigacji strony za pomocą CSS

Zainstaluj wtyczkę

Masz dwie możliwości instalacji wtyczki WP-PageNavi.

  • Pobierz z WordPress.org, prześlij go do katalogu / wp-content / plugins / i aktywuj (aka, staroświecki sposób).
  • W zależności od hosta możesz także automatycznie instalować wtyczki, przeszukując je na stronie „Dodaj nowe” w sekcji Wtyczki w panelu administracyjnym WordPress. Po prostu wyszukaj „pagenavi” i powinieneś go znaleźć.

Okej, to powinno być całkiem łatwe. Teraz nadszedł czas, aby zabrudzić sobie ręce w kodzie części integracyjnej.

Integracja motywów

W naszej integracji motywów nigdy nie chcemy, aby wyświetlane były jakiekolwiek błędy, jeśli WP-PageNavi nie jest aktywny. Zamiast tego upewnimy się, że opiera się na starej nawigacji poprzedniego / następnego stylu. Aby to zrobić, użyjemy funkcja_istnieje kontrola warunkowa.

Powiedzmy, że to Twój normalny poprzedni / następny kod nawigacyjny WordPress:

<?php next_posts_link (‘«Starsze wpisy’) ?>
<?php previous_posts_link („Nowsze wpisy» ”) ?>

Zmienimy to na:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } else { ?>
<?php next_posts_link (‘«Starsze wpisy’) ?>
<?php previous_posts_link („Nowsze wpisy» ”) ?>
<?php} ?>

To w zasadzie sprawdza, czy WP-PageNavi jest aktywne, a jeśli tak, wyświetla nowy kod nawigacji strony. Jeśli nie, z wdziękiem powraca do normalnej poprzedniej / następnej nawigacji.

Proszę zanotować: W zależności od sposobu kodowania CSS, możesz chcieć wstawić wp_pagenavi (); część wewnątrz „nawigacji” (lub równoważnej) div. Pamiętaj, że WP-PageNavi wypluwa nową klasę o nazwie „wp-pagenavi”, której możemy użyć do osobnego stylu.

Zastąp style wtyczek

Domyślnie WP-PageNavi automatycznie wstawia plik CSS o nazwie pagenavi-css.css z katalogu wtyczek do nagłówka witryny. Nie chcemy, aby te domyślne style kolidowały z naszymi własnymi fajnymi, niestandardowymi stylami, więc całkowicie się ich pozbywamy i istnieją dwa proste sposoby, aby to zrobić.

  • Dodaj plik CSS do katalogu motywów – Jest to prawdopodobnie najłatwiejszy sposób na przesłonięcie domyślnych stylów WP-PageNavi. Jeśli masz plik o nazwie pagenavi-css.css w katalogu motywów, WP-PageNavi użyje go zamiast domyślnego w katalogu wtyczek.
  • Dodaj fragment kodu do pliku functions.php – Poniższy fragment kodu, który pobrałem Przepisy WP całkowicie wyłączy powyższe zachowanie i nie uwzględni arkusza stylów z wtyczki (domyślnego lub zastąpienia w katalogu motywów).

działanie dodatkowe („wp_print_styles”, „my_deregister_styles”, 100);

funkcja my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

Po prostu umieść ten kod w pliku functions.php swojego motywu i dodaj style CSS do arkusza stylów zwykłego motywu (zwykle style.css).

Uwaga: Upewnij się, że kod jest otoczony nawiasami podobnymi <?php … ?> jeśli plik funkcji jest obecnie pusty.

WP-PageNavi Selektory HTML i selektory CSS

Oto jak wygląda znacznik WP-PageNavi. W poniższym przykładzie są cztery strony, obecnie na stronie drugiej.

Poprzedni1
2)
3)
Kolejny

Ostatni, ubiegły, zeszły “

Możemy użyć następujących selektorów CSS, aby kierować na powyższe znaczniki HTML:

  • .wp-pagenavi – dotyczy całego div, przydatny do czyszczenia CSS, wypełniania / marginesów, rozmiarów i stylów czcionek (pogrubienie, kursywa itp.)
  • .wp-pagenavi a – Kieruje na wszystkie łącza w nawigacji strony, w tym numery stron i poprzednie / następne.
  • .wp-pagenavi a.page – Dotyczy konkretnie numerów stron
  • .wp-pagenavi a.first – konkretnie kieruje na „pierwszy” link (niewymieniony powyżej)
  • .wp-pagenavi a.last – konkretnie kieruje na „ostatni” link
  • .wp-pagenavi span – Kieruje na bieżący numer strony wraz z częścią rozszerzającą (rzecz z trzema kropkami)
  • .wp-pagenavi span.current – W szczególności kieruje na bieżący numer strony
  • .wp-pagenavi span.extend – Specjalnie celuje w rozszerzenie (rzecz z trzema kropkami)
  • .wp-pagenavi span.pages – W szczególności dotyczy wyświetlania numeru strony (tj. Strona 1 z 4)

Uwaga: Domyślnie poprzednie i następne łącza nie mają żadnej klasy CSS. Jeśli chcesz, aby całkowicie odróżniały się od numerów stron i pierwszych / ostatnich linków, będą musiały zresetować wszystkie style dodane do selektora .wp-pagenavi. Jeśli to nie ma sensu, spójrz na następujący (naprawdę uproszczony) przykład.

Na przykład: Załóżmy, że chcesz, aby poprzednie i następne linki były pogrubione, ale każdy inny link ma normalną wagę. Musisz wykonać następujące czynności:

.wp-pagenavi a {font-weight: bold; } / * Tylko poprzednie i następne linki * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: normal; } / * Inne linki * /

Łączę numery stron, pierwszy i ostatni link w jedną regułę, na przykład dla celów. Oczywiście możesz je rozdzielić i dodać do każdego bardziej specyficzne style.

Byłoby to znacznie łatwiejsze, gdyby do poprzednich / następnych linków była dodana klasa, ale nie ma. To nie jest wielka sprawa, ponieważ i tak możesz je zresetować.

Ważna aktualizacja: Dzięki aktualizacji z scribu w komentarzach okazuje się, że najnowsza wersja WP-PageNavi ma na nich poprzednie / następne klasy (częściowo dzięki Yoast).

Możesz użyć .wp-pagenavi a.previouspostslink i .wp-pagenavi a.nextpostslink, aby wybrać odpowiednio poprzednie i następne linki.

Tak więc prawie wszystko powyżej, aż lista nieuporządkowanych selektorów nie jest już istotna, ale zatrzymam ją tylko dlatego, że może to być przydatna lekcja na temat nadpisywania CSS w niektórych innych sytuacjach. Poniższy przykład CSS nadal będzie obowiązywał, ponieważ i tak nie korzystałem z tych selektorów.

Przykład CSS

Oto przykład stylu PageNavi, które zbudowałem z Blogwave motyw.

Blogwave Zaktualizowano PageNavi

Oto kod, którego użyłem, aby uzyskać ten wygląd, wieloliniowy CSS jest opcjonalny:

.wp-pagenavi a, .wp-pagenavi span {
wypełnienie: 5 pikseli; margines z prawej: 10 pikseli;
rozmiar czcionki: 15px; kolor: # 03719c; dekoracja tekstu: brak;
border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; promień obramowania: 5 pikseli;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
tło: # 03719c;
kolor: #fff;
obramowanie: stały 3px #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

A oto co to wszystko znaczy:

Pierwsza reguła
Zakres .wp-pagenavi a, .wp-pagenavi wybiera wszystkie elementy zakotwiczenia i zakresu (prawie wszystko) wewnątrz div .wp-pagenavi.

  • W pierwszym wierszu reguły znajduje się wypełnienie o wartości 5 pikseli, dzięki czemu nie będzie stłoczona na jasnoszarym obramowaniu (zdefiniowanym poniżej). Ustawia również stały margines 10 pikseli po prawej stronie każdego elementu, dzięki czemu między nimi jest równy odstęp.
  • Drugi wiersz ustawia rozmiar czcionki na 15px, kolor tekstu jest niebieski, a linki nie mają podkreślenia.
  • Trzecia linia ustawia solidne szare obramowanie o wielkości 3 pikseli na wszystkim. Kod promienia granicy powoduje, że rogi są zaokrąglone.

Druga reguła
.Wp-pagenavi a: hover, .wp-pagenavi span.current wybiera odpowiednio efekt najechania linkiem oraz bieżący numer strony.

  • Pierwsza linia ustawia ciemnoniebieski kolor tła.
  • Drugi wiersz sprawia, że ​​tekst jest biały.
  • Trzecia linia daje nieco ciemniejsze obramowanie.

Trzecia reguła
Spowoduje to wybranie bieżącego numeru strony (ponownie) bez wpływu na efekt najechania linkiem (podobnie jak druga reguła). To sprawia, że ​​bieżący numer strony jest pogrubioną czcionką.

Powodem, dla którego nie umieściłem go z efektem najechania linkiem jest to, że ma nierównomierny efekt przechodzenia z normalnej do pogrubionej grubości czcionki.

Uwaga: W zależności od sposobu kodowania CSS może być konieczne użycie bardziej szczegółowych selektorów. Na przykład, jeśli istnieją style dla #content a, a twoja WP-PageNavi znajduje się wewnątrz div treści, być może będziesz musiał przepisać swój PageNavi CSS jako #content .wp-pagenavi a i zastąpić wszelkie inne mniej szczegółowe style.

Wniosek

Wiem, że był to stosunkowo prosty przykład, możesz mieć znacznie bardziej zaawansowane reguły CSS, aby jeszcze bardziej różnicować różne linki i inne elementy. Mam nadzieję, że po drodze wybrałeś kilka wskazówek CSS.

Opcjonalna integracja WP-PageNavi to całkiem fajna funkcja, którą programiści mogliby zintegrować w swoich motywach. Dzięki opisanej powyżej metodzie integracji użytkownicy mogą łatwo zdecydować, czy z niej korzystać, czy też nie, i może być dobrą opcją dla wielu blogów.

Mam nadzieję, że wszystkim się podobał samouczek, a jeśli masz jakieś prośby o przyszłe samouczki WordPress lub wskazówki CSS, daj mi znać w komentarzach.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map