Panduan Menggayakan Pemalam WordPress WP-PageNavi

Sekiranya anda tidak biasa dengan WP-HalamanNavi Plugin WordPress, ini membolehkan anda mengganti navigasi sebelumnya / seterusnya yang normal dengan navigasi paging bernombor yang lebih maju. Ini adalah ciri yang saya sertakan pada sejumlah tema yang saya kembangkan, termasuk RS16, Gelombang Blog, RS17, dan Tempat Cerah.


RS16 HalamanNavi

Dalam tutorial ini, saya akan membahas cara:

  • Pasang WP-PageNavi dan gabungkan dengan betul dalam tema anda.
  • Dua kaedah untuk melumpuhkan dan / atau mengatasi gaya pemalam lalai.
  • Gambaran keseluruhan output markup HTML oleh WP-PageNavi
  • Akhirnya, bagaimana mengubah rupa navigasi halaman anda melalui CSS

Pasang Plugin

Anda mempunyai dua pilihan ketika memasang plugin WP-PageNavi.

  • Muat turun dari WordPress.org, muat naik ke direktori / wp-content / plugins / anda, dan aktifkan (aka, cara kuno).
  • Bergantung pada hos anda, anda juga boleh memasang pemalam secara automatik dengan mencarinya di halaman “Tambah Baru” di bawah Pemalam di panel pentadbir WordPress anda. Cari sahaja “pagenavi” dan anda pasti menjumpainya.

Baiklah, semestinya cukup mudah. Sekarang tiba masanya untuk membuat tangan anda sedikit kotor dalam kod untuk bahagian integrasi.

Integrasi Tema

Dalam penggabungan tema kami, kami tidak pernah mahu kesalahan ditunjukkan jika WP-PageNavi tidak aktif. Sebagai gantinya, kami akan memastikannya kembali pada navigasi gaya sebelumnya / lama yang lama. Untuk melakukan ini, kami akan menggunakan function_exists check bersyarat.

Katakan ini adalah kod navigasi WordPress biasa / sebelumnya yang biasa:

<?php next_posts_link (‘«Entri Lama’) ?>
<?php previous_posts_link (‘Entri Baru »’) ?>

Kami akan menukarnya kepada yang berikut:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } lain { ?>
<?php next_posts_link (‘«Entri Lama’) ?>
<?php previous_posts_link (‘Entri Baru »’) ?>
<?php} ?>

Ini pada dasarnya memeriksa untuk melihat apakah WP-PageNavi aktif dan jika ada, ia memaparkan kod navigasi halaman baru. Sekiranya tidak, ia akan kembali ke navigasi sebelumnya / seterusnya yang normal.

Sila ambil perhatian: Bergantung pada bagaimana CSS anda dikodkan, anda mungkin mahu meletakkan wp_pagenavi (); bahagian dalam div “navigasi” (atau setara) Perlu diingat WP-PageNavi melancarkan kelas baru yang disebut “wp-pagenavi” walaupun yang dapat kita gunakan untuk gaya secara terpisah.

Tolak Gaya Plugin

Secara lalai, WP-PageNavi memasukkan fail CSS yang disebut pagenavi-css.css secara automatik dari direktori pemalamnya ke dalam tajuk laman web anda. Kami tidak mahu gaya lalai ini mengganggu gaya buatan kami yang keren, jadi kami akan menyingkirkannya sepenuhnya, dan terdapat dua cara mudah untuk melakukannya.

  • Tambahkan fail CSS ke direktori tema anda – Ini mungkin kaedah termudah untuk mengatasi gaya WP-PageNavi lalai. Sekiranya anda mempunyai fail yang disebut pagenavi-css.css dalam direktori tema anda, WP-PageNavi akan menggunakannya dan bukannya yang default di direktori pemalam.
  • Tambahkan coretan ke fail functions.php anda – Coretan kod berikut yang saya ambil Resipi WP akan melumpuhkan sepenuhnya tingkah laku di atas dan tidak memasukkan helaian gaya dari pemalam (sama ada yang lalai atau penggantian dalam direktori tema anda).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

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

Cukup masukkan kod itu dalam fail functions.php tema anda dan tambahkan gaya CSS ke lembaran gaya tema biasa anda (biasanya style.css).

Nota: Pastikan kod dikelilingi oleh tanda kurung seperti <?php … ?> jika fail fungsi anda kosong sekarang.

Pemilih HTML WP-PageNavi dan Pemilih CSS

Inilah rupa markup WP-PageNavi. Dalam contoh berikut, terdapat empat halaman, saat ini di halaman dua.

Sebelumnya1
2
3
Seterusnya

Terakhir »

Kita boleh menggunakan pemilih CSS berikut untuk menargetkan markup HTML di atas:

  • .wp-pagenavi – Berlaku untuk keseluruhan div, berguna untuk membersihkan CSS, padding / margin, saiz dan gaya fon (tebal, miring, dll.)
  • .wp-pagenavi a – Menyasarkan semua pautan di dalam navigasi halaman, termasuk nombor halaman dan sebelumnya / seterusnya.
  • .wp-pagenavi a.page – Menyasarkan nombor halaman secara khusus
  • .wp-pagenavi a.first – Menyasarkan pautan “pertama” secara khusus (tidak disenaraikan di atas)
  • .wp-pagenavi a.last – Menyasarkan pautan “terakhir” secara khusus
  • .wp-pagenavi span – Menyasarkan nombor halaman semasa bersama dengan bahagian memanjang (perkara dengan tiga titik)
  • .wp-pagenavi span.current – Khususnya menyasarkan nombor halaman semasa
  • .wp-pagenavi span.extend – Secara khusus menyasarkan pemanjangan (perkara tiga titik)
  • .wp-pagenavi span.pages – Secara khusus menyasarkan paparan nombor halaman (iaitu Halaman 1 dari 4)

Nota: Pautan sebelumnya dan seterusnya secara lalai, tidak mempunyai kelas CSS. Sekiranya anda mahu mereka dibezakan sepenuhnya dari nombor halaman dan pautan pertama / terakhir, mereka perlu menetapkan semula gaya yang ditambahkan ke pemilih .wp-pagenavi. Sekiranya tidak masuk akal, perhatikan contoh (benar-benar dipermudah) berikut.

Sebagai contoh: Katakan anda mahu pautan sebelumnya dan seterusnya menjadi berani, tetapi setiap pautan lain mempunyai berat badan yang normal. Anda perlu melakukan perkara berikut:

.wp-pagenavi a {font-weight: bold; } / * Pautan sebelumnya dan Seterusnya sahaja * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: normal; } / * Pautan lain * /

Saya menggabungkan pautan nombor halaman, pautan pertama, dan pautan terakhir menjadi satu peraturan untuk tujuan contoh. Sudah tentu, anda boleh memisahkannya dan menambahkan gaya yang lebih spesifik untuk masing-masing.

Ini akan menjadi lebih mudah jika ada kelas yang ditambahkan ke pautan sebelumnya / seterusnya secara lalai, tetapi tidak ada. Bukan masalah besar kerana anda boleh menetapkannya semula.

Kemas kini Penting: Terima kasih kepada kemas kini dari scribu dalam komen, ternyata versi terbaru WP-PageNavi memang mempunyai kelas sebelumnya / seterusnya (terima kasih sebahagiannya untuk Yoast).

Anda boleh menggunakan pautan .wp-pagenavi a.pre sebelumnyapostslink dan .wp-pagenavi a.nextpostslink untuk memilih pautan sebelumnya dan seterusnya..

Begitu banyak perkara di atas sehingga senarai pemilih yang tidak tersusun tidak relevan lagi, tetapi saya akan menyimpannya hanya kerana ia boleh menjadi pelajaran berguna untuk mengatasi CSS dalam situasi lain. Contoh CSS di bawah akan tetap berlaku kerana saya tidak menggunakan pemilih tersebut.

Contoh CSS

Berikut adalah contoh gaya PageNavi yang saya buat Gelombang Blog tema.

PageNavi Dikemas kini Blogwave

Inilah kod yang saya gunakan untuk mendapatkan penampilan ini, CSS pelbagai baris adalah pilihan:

.wp-pagenavi a, .wp-pagenavi span {
pembalut: 5px; margin-right: 10px;
saiz fon: 15px; warna: # 03719c; hiasan teks: tiada;
sempadan: 3cc padu #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; sempadan-jejari: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
latar belakang: # 03719c;
warna: #fff;
sempadan: 3AF padu #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

Inilah maksudnya:

Peraturan Pertama
Span .wp-pagenavi a, .wp-pagenavi memilih semua elemen jangkar dan span (hampir semuanya) di dalam div .wp-pagenavi.

  • Baris pertama peraturan menetapkan padding 5px sehingga tidak akan dijejalkan pada sempadan kelabu muda (ditakrifkan di bawah). Ia juga menetapkan margin konsisten 10px di sebelah kanan setiap elemen sehingga terdapat jarak yang sama antara masing-masing.
  • Baris kedua menetapkan ukuran fon 15px, menjadikan warna teks menjadi biru, dan memastikan pautan tidak mempunyai garis bawah.
  • Baris ketiga menetapkan sempadan kelabu 3px padat pada segalanya. Kod radius sempadan menjadikan sudut menjadi bulat.

Peraturan Kedua
The .wp-pagenavi a: hover, .wp-pagenavi span.current masing-masing memilih kesan hover pautan dan juga nombor halaman semasa..

  • Baris pertama menetapkan warna latar belakang biru gelap.
  • Baris kedua menjadikan teks menjadi putih.
  • Baris ketiga memberikan sempadan yang sedikit lebih gelap.

Peraturan Ketiga
Ini memilih nombor halaman semasa (sekali lagi) tanpa mempengaruhi kesan hover pautan juga (seperti peraturan kedua). Ini hanya menjadikan nombor halaman semasa menjadi berat huruf tebal.

Sebab saya tidak menyertakannya dengan kesan hover pautan adalah kerana ia mempunyai kesan yang tidak rata dari berat font yang normal hingga tebal.

Nota: Bergantung pada bagaimana CSS anda dikodkan, anda mungkin harus menggunakan pemilih yang lebih khusus. Contohnya, jika ada gaya untuk #content a dan WP-PageNavi anda ada di dalam isi kandungan, anda mungkin perlu menulis semula PageNavi CSS anda sebagai #content .wp-pagenavi a dan menimpa gaya lain yang kurang spesifik.

Kesimpulannya

Saya tahu ini adalah contoh yang agak mudah, anda mungkin mempunyai peraturan CSS yang jauh lebih maju untuk membezakan lebih banyak pautan dan elemen lain. Semoga anda juga mendapat beberapa petua CSS.

Pilihan WP-PageNavi pilihan adalah ciri tema yang cukup hebat yang dapat disatukan oleh pembangun dalam tema mereka. Dengan kaedah penyatuan yang saya gariskan di atas, pengguna dapat dengan mudah memilihnya atau tidak, dan itu boleh menjadi pilihan yang bagus untuk banyak blog.

Harap anda semua menyukai tutorial, dan jika anda mempunyai permintaan untuk tutorial WordPress atau petua CSS di masa depan, beritahu saya di komen.

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