Dodanie nawigacji do WordPress – lekcja 20
Aby rozwinąć nawigację, musimy dodać min 15 protokoły z testów i sprawdź, do panelu administratora, został określony w ustawieniach. 10 wpisów na stronę. Ustawienia -> Ustawienia czytania -> Wyświetlaj na stronach bloga już nie 10 dokumentacja.
Jeśli masz więcej wpisów niż 10, wtedy użytkownik zobaczy tylko najnowsze 10 dodane wpisy. Aby umożliwić użytkownikowi przeglądanie wszystkich wpisów, możemy dodać do serwisu nawigację.
Najpierw musisz dodać funkcję paginacji do pliku archive.php po pętli().
Dopóki nie zostanie wyświetlona paginacja, od funkcji paginacji() jeszcze nie stworzyliśmy. Teraz musimy utworzyć tę funkcję.
Aby dodać nawigację, dodaj nowy folder o nazwie functions do folderu szablonów. W folderze funkcji dodaj nowy plik o nazwie pagination.php.
Dodaj kod do pliku pagination.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php /** * @package WordPress * @subpackage my_theme_tmp */ //pagination function function pagination($pages = '', $range = 4) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=\"page-pagination clearfix\">"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>"; if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>"; echo "</div>\n"; } } ?> |
Przejdź do pliku functions.php i połącz tam plik z funkcją nawigacji, jak pokazano na poniższym obrazku:
|
1 |
require('functions/pagination.php'); |
Na razie, kiedy funkcja jest tworzona i wywoływana w pliku archive.php, na stronie możemy zobaczyć nawigację.
Nawigacja działa, ale nie wygląda zbyt ładnie, aby zaprojektować nawigację proponuję dodać style na końcu pliku /wp-content/themes/my_theme_tmp/css/style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/* pagination */ .page-pagination { padding: 10px 20px 10px !important; display:block !important; clear:both !important; } .page-pagination a ,.page-pagination span.pages, .page-pagination span.extend { color:#707070 !important; background:#FFFFFF !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; border:solid 1px #DCDCDC !important; padding:6px 9px 6px 9px !important; margin-right:3px !important; text-decoration:none !important; font-size:12px !important; } .page-pagination a:hover { border-color:#202020 !important; background:#525252 !important; color:#fff !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } .page-pagination span.current{ padding: 0px 9px 4px 9px !important; border:solid 1px #DCDCDC !important; border-color:#3390CA !important; border-radius:3px !important; -moz-border-radius:3px !important; -webkit-border-radius:3px !important; color:#fff !important; margin-right:3px !important; border-color:#202020 !important; background:#525252 !important; background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252) !important; background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252)) !important; } /* pagination */ |
Po niezbyt trudnej pracy mamy znakomitą nawigację.
Dałem ci podstawową funkcję nawigacji i powiedziałem ci, jak to wkleić, ktokolwiek tego potrzebuje, może zmodyfikować funkcję dla twojego szablonu. Powodzenia w nauce WordPressa, i jak zawsze naprawiam dla Was pliki bieżącej lekcji.
W następnej lekcji nauczymy się, jak zrobić nawigację w pliku single.php.
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.
