Cara Menambah Numerik Pagination dalam Tema WordPress Anda

Salah seorang pembaca kami baru-baru ini bertanya kepada kami bagaimana kami menambah penomboran angka di halaman blog WPBeginner. Tema WordPress lalai dan banyak tema lain memaparkan pautan penomboran dengan menambahkan pautan Older dan Newer Posts di bahagian bawah halaman arkib WordPress anda. Walau bagaimanapun, terdapat banyak laman web WordPress yang menggunakan penomboran angka, seperti WPBeginner. Dari pengalaman kami, penomboran angka lebih mesra pengguna, menarik, dan mesra SEO. Kerangka tema WordPress yang paling maju seperti Genesis dilengkapi dengan fungsi terbina dalam untuk menambahkan penomboran angka. Dalam artikel ini kami akan menunjukkan kepada anda cara menambahkan penomboran angka dalam tema WordPress anda. Tujuannya adalah untuk menggantikan pautan penomboran Lama dan Baru yang lalai di bahagian bawah halaman arkib dengan nombor halaman yang mudah dinavigasi.


Perbezaan antara navigasi WordPress lalai dan Numeric Pagination

Terdapat dua kaedah untuk menambahkan penomboran angka dalam tema WordPress anda. Kaedah pertama adalah menambahkan penomboran angka secara manual tanpa bergantung pada pemalam pihak ketiga. Oleh kerana artikel ini berada dalam kategori tema dan ditujukan untuk pereka tema baru, kami akan menunjukkan kaedah manual terlebih dahulu. Kaedah kedua adalah menggunakan plugin pihak ketiga yang ada untuk menambahkan penomboran angka. Kami mengesyorkan kaedah itu untuk semua pengguna DIY kami.

Menambah Numerik Pagination secara manual dalam Tema WordPress Anda

Pertama, kami akan menunjukkan kepada anda cara menambahkan penomboran angka secara manual dalam tema WordPress anda. Ini akan menguntungkan pengguna lanjutan kami, dan pengguna yang sedang mempelajari pengembangan tema, atau ingin melakukannya tanpa bergantung pada pemalam pihak ketiga. Mari mulakan dengan menambahkan kod berikut dalam fail functions.php tema anda.

Catatan: Kod ini berasal dari Genesis Framework yang kami gunakan di laman web kami. Sekiranya anda menggunakan Genesis, anda tidak memerlukan kod atau pemalam ini.

fungsi wpbeginner_numeric_posts_nav () {

jika (is_singular ())
kembali;

$ wp_query global;

/ ** Hentikan pelaksanaan jika hanya ada 1 halaman * /
jika ($ wp_query->maksimum_num_pages <= 1)
kembali;

$ paged = get_query_var (‘paged’)? absint (get_query_var (‘paged’)): 1;
$ max = intval ($ wp_query->max_num_pages);

/ ** Tambahkan halaman semasa ke array * /
jika ($ muka surat) >= 1)
$ pautan [] = $ muka surat;

/ ** Tambahkan halaman di sekitar halaman semasa ke array * /
jika ($ muka surat) >= 3) {
$ pautan [] = $ muka surat – 1;
$ pautan [] = $ muka surat – 2;
}

jika (($ di muka + 2) <= $ maksimum) {
$ pautan [] = $ halaman + 2;
$ pautan [] = $ halaman + 1;
}

gema ‘

    ‘ . "\ n";

    / ** Pautan Catatan Sebelumnya * /
    jika (get_previous_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_previous_posts_link ());

    / ** Pautan ke halaman pertama, tambah elips jika perlu * /
    jika (! in_array (1, $ link)) {
    $ class = 1 == $ halaman? ‘kelas ="aktif"’:’ ‘;

    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link (1)), ‘1’);

    jika (! in_array (2, $ link))
    gema ‘

  • ‘;
    }

    / ** Pautan ke halaman semasa, tambah 2 halaman ke arah mana pun jika perlu * /
    urutkan ($ pautan);
    foreach ((array) $ link sebagai $ link) {
    $ class = $ paged == $ pautan? ‘kelas ="aktif"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link ($ link)), $ link);
    }

    / ** Pautan ke halaman terakhir, tambah elips jika perlu * /
    jika (! in_array ($ max, $ link)) {
    jika (! in_array ($ max – 1, $ link))
    gema ‘

  • ‘ . "\ n";

    $ class = $ paged == $ maks? ‘kelas ="aktif"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link ($ max)), $ maks);
    }

    / ** Pautan Catatan Seterusnya * /
    jika (get_next_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_next_posts_link ());

    gema ‘

‘ . "\ n";

}

Di WPBeginner, kami menggunakan kod yang sama untuk penomboran angka di halaman arkib kami (contohnya blog kami, atau halaman kategori tutorial WordPress). Apa yang dilakukan oleh kod ini ialah mendapatkan kembali bilangan halaman dan menyiapkan senarai pautan bernombor. Untuk menambahkannya dalam templat anda, anda perlu menambahkan tag templat berikut di index.php, archive.php, category.php tema anda, dan templat halaman arkib yang lain.

<?php wpbeginner_numeric_posts_nav (); ?>

Setelah mendapat senarai halaman bernombor, kita perlu menggayakan senarai ini. Kami ingin menjadikan senarai itu muncul dalam sebaris blok di mana halaman aktif diserlahkan dengan warna latar yang berbeza. Untuk mencapainya, mari teruskan dan tambahkan yang berikut dalam fail style.css tema anda:

.pelayaran li a,
.navigasi li a: hover,
.pelayaran li.aktif a,
.navigasi li dilumpuhkan {
warna: #fff;
hiasan teks: tiada;
}

.pelayaran li {
paparan: sebaris;
}

.pelayaran li a,
.navigasi li a: hover,
.pelayaran li.aktif a,
.navigasi li dilumpuhkan {
warna latar: # 6FB7E9;
sempadan-jejari: 3px;
kursor: penunjuk;
pembalut: 12px;
pelapik: 0.75rem;
}

.navigasi li a: hover,
.navigasi li.aktif a {
warna latar: # 3C8DC5;
}

Di sana anda memilikinya. Kami mempunyai senarai penomboran angka dalam tema kami yang kelihatan hebat.

Menambah penomboran angka secara manual ke tema WordPress tanpa pemalam

Menambah Numeric Pagination di WordPress menggunakan WP-PageNavi

Sekarang mari kita lihat bagaimana menambahkan penomboran angka dalam tema WordPress anda dengan menggunakan plugin yang ada yang disebut WP-PageNavi. Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan plugin WP-PageNavi. Selepas mengaktifkan plugin, pergi ke Tetapan »PageNavi untuk mengkonfigurasi tetapan pemalam.

Mengkonfigurasi tetapan WP-PageNavi

Pada halaman tetapan pemalam, anda boleh mengganti tetapan teks lalai dan penomboran angka dengan yang anda sendiri jika anda mahu. Walau bagaimanapun, tetapan lalai harus berfungsi untuk kebanyakan laman web.

Pada langkah seterusnya, anda perlu menambahkan tag templat dalam Tema WordPress anda. Pergi ke folder tema anda dan cari baris untuk penomboran yang lebih lama dan lebih baru di templat halaman arkib anda: index.php, archive.php dan fail templat arkib yang lain. Tambahkan tag templat berikut untuk menggantikan tag_posting_link sebelumnya dan next_posts_link yang lama.

<?php wp_pagenavi (); ?>

Setelah anda menambahkan coretan wp_pagenavi, begini rupa penomboran berangka:

Pandangan lalai dari penomboran angka wp-pagenavi

Sekiranya anda ingin mengubah warna dan gaya penomboran angka dalam wp-pagenavi, maka anda perlu pergi ke Tetapan »PageNavi. Nyahtanda pilihan untuk menggunakan Use pagenavi-css.css dan simpan perubahan. Sekarang pergi ke Pemalam »Penyunting. Dari Pilih plugin untuk mengedit menu tarik turun, pilih WP-PageNavi dan klik pada butang Pilih. Editor akan memuatkan fail pemalam di bar sisi kanan. Klik pada pagenavi-css.css untuk membukanya di editor dan kemudian salin kandungan fail.

Salin kandungan fail pagenavi-css

Seterusnya, anda perlu pergi ke Penampilan »Penyunting dan tampalkan kandungan pagenavi-css.css ke dalam fail style.css tema anda. Sekarang anda boleh mengubah skema warna dan gaya dari sini. Sebab mengapa kami menyalin kandungan css plugin ke helaian gaya tema adalah untuk mengelakkan kehilangan gaya perubahan sekiranya anda mengemas kini plugin. Berikut adalah versi penomboran angka yang sedikit diubah suai, jangan ragu untuk menggunakannya dan ubah suai dalam tema anda.

.wp-pagenavi {
jelas: kedua-duanya;
}

.wp-pagenavi a, .wp-pagenavi span {
warna: #FFF;
hiasan teks: tiada;
warna latar: # 6FB7E9;
sempadan: 1px pepejal # B2D1E5;
pembalut: 5px 5px;
margin: 2 piksel;
}

.wp-pagenavi a: hover, .wp-pagenavi span.current {
warna sempadan: # E9F2F9;
warna latar: # 6FB7E9;
}

.wp-pagenavi span.current {
font-weight: tebal;
warna latar: # 3C8DC5;
}

Beginilah rupa:

CSN PageNavi yang disesuaikan

Seperti biasa anda harus bereksperimen dengan CSS. Tujuannya adalah untuk memadankan penomboran angka dengan rupa dan nuansa warna laman web anda, sehingga menyatu dengan baik dan tidak kelihatan seperti item yang ditempatkan secara aneh.

Kami berharap artikel ini dapat membantu anda menambah dan memaparkan penomboran angka dalam tema WordPress anda. Kaedah mana yang lebih anda gemari? Adakah anda menyukai penomboran angka atau adakah anda lebih suka navigasi terdahulu / seterusnya yang dibina? Beritahu kami dalam komen di bawah.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me