Zmień wygląd paginacji w WordPressie łatwo

Jak zmienić styl paginacji w WordPressieDostosować wygląd paginacji w WordPressieZmodyfikować wygląd paginacji w WordPressieZmienić projekt paginacji w WordPressieEdytować styl paginacji w WordPressieUstawienia wyglądu paginacji w WordPressieDostosować układ paginacji w WordPressieStylizować linki paginacji w WordPressieOpcje dostosowywania paginacji w WordPressieZmienić wygląd paginacji w WordPressie

Objaśnienie

Aby nadać swojej paginacji w WordPressie nowy wygląd, możesz użyć podanego kodu, aby stylizować ją według własnego projektu. Oto jak to działa:

Style niestandardowe: Kod dodaje blok stylów do nagłówka Twojej witryny, który definiuje, jak będą wyglądać linki paginacji. Centruje paginację, usuwa punkty wypunktowania i dodaje trochę odstępu między linkami.
Wygląd linków: Każdy link paginacji jest stylizowany na niebiesko, z zaokrąglonymi krawędziami oraz płynny efekt przejścia po najechaniu. Link bieżącej strony jest wyróżniony niebieskim tłem i białym tekstem.
Funkcjonalność: Funkcja wp_dudecom_custom_pagination generuje linki paginacji. Wykorzystuje funkcję paginate_links WordPressa do stworzenia tablicy linków, które następnie są wyświetlane jako lista.
Użycie: Aby wyświetlić paginację na swojej stronie, wystarczy wywołać funkcję wp_dudecom_custom_pagination() w pętli, w której chcesz, aby paginacja się pojawiła.

To podejście pozwala na łatwe dostosowanie wyglądu i stylu Twojej paginacji bez zagłębiania się w skomplikowane kodowanie. Wystarczy dostosować style CSS, aby pasowały do projektu Twojej witryny, a będziesz gotowy do działania!

Kod
<?php
// Add custom styles to WordPress pagination
function wp_dudecom_custom_pagination_styles() {
    ?>
    <style>
        .wp-dudecom-pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
        }
        .wp-dudecom-pagination li {
            margin: 0 5px;
        }
        .wp-dudecom-pagination a {
            color: #0073aa;
            text-decoration: none;
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s;
        }
        .wp-dudecom-pagination a:hover {
            background-color: #0073aa;
            color: #ffffff;
        }
        .wp-dudecom-pagination .current {
            background-color: #0073aa;
            color: #ffffff;
            border: 1px solid #0073aa;
        }
    </style>
    <?php
}
add_action('wp_head', 'wp_dudecom_custom_pagination_styles');

// Custom pagination function
function wp_dudecom_custom_pagination($query = null) {
    global $wp_query;
    $query = $query ? $query : $wp_query;

    $big = 999999999; // need an unlikely integer
    $pagination_links = paginate_links(array(
        'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format'    => '?paged=%#%',
        'current'   => max(1, get_query_var('paged')),
        'total'     => $query->max_num_pages,
        'type'      => 'array',
        'prev_text' => __('« Previous', 'textdomain'),
        'next_text' => __('Next »', 'textdomain'),
    ));

    if (is_array($pagination_links)) {
        echo '<ul class="wp-dudecom-pagination">';
        foreach ($pagination_links as $link) {
            echo '<li>' . $link . '</li>';
        }
        echo '</ul>';
    }
}

// Usage: Call wp_dudecom_custom_pagination() within the loop where you want the pagination to appear.
?>

Instrukcja

Aby zmodyfikować wygląd paginacji w WordPressie za pomocą podanego kodu, wykonaj następujące kroki:

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne: Upewnij się, że masz dostęp do plików motywu WordPress oraz podstawową wiedzę na temat ich edytowania.

Kroki wdrożenia:

Dostęp do plików motywu:
- Zaloguj się do panelu administracyjnego WordPress.
- Przejdź do Wygląd > Edytor motywu.
- W prawym pasku bocznym znajdź i kliknij na functions.php.
Dodaj kod:
- Skopiuj podany fragment kodu.
- Wklej go na końcu pliku functions.php.
- Kliknij Aktualizuj plik, aby zapisać zmiany.
Wdrożenie paginacji w szablonie:
- Otwórz plik szablonu, w którym chcesz, aby paginacja się pojawiła (np. index.php, archive.php).
- W obrębie pętli WordPressa wywołaj funkcję: wp_dudecom_custom_pagination();
- Zapisz zmiany w pliku szablonu.
Przetestuj swoją stronę:
- Odwiedź swoją stronę i przejdź do strony z paginacją.
- Upewnij się, że paginacja wyświetla się z nowymi stylami.

Postępując zgodnie z tymi krokami, możesz łatwo dostosować wygląd swojej paginacji, aby lepiej pasowała do projektu Twojej strony. Jeśli potrzebujesz dalszej pomocy lub chcesz zbadać bardziej zaawansowane funkcje, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.