Panduan untuk Styling Plugin WP-PageNavi WordPress

Jika Anda tidak terbiasa dengan WP-PageNavi Plugin WordPress, memungkinkan Anda untuk mengganti navigasi normal sebelum / berikutnya dengan navigasi paging yang lebih maju dan bernomor. Ini adalah fitur yang saya sertakan pada sejumlah tema yang saya kembangkan, termasuk RS16, Blogwave, RS17, dan Tempat terang.


RS16 PageNavi

Dalam tutorial ini, saya akan membahas cara:

  • Instal WP-PageNavi dan mengintegrasikannya dengan benar dalam tema Anda.
  • Dua metode untuk menonaktifkan dan / atau mengganti gaya plugin default.
  • Ikhtisar output markup HTML oleh WP-PageNavi
  • Terakhir, cara mengubah tampilan navigasi halaman Anda melalui CSS

Instal Plugin

Anda memiliki dua opsi ketika menginstal plugin WP-PageNavi.

  • Unduh dari WordPress.org, unggah ke direktori / wp-content / plugins /, dan aktifkan (alias, cara kuno).
  • Bergantung pada host Anda, Anda juga dapat menginstal plugin secara otomatis dengan mencari di halaman “Tambah Baru” di bawah Plugin di panel admin WordPress Anda. Cukup cari “pagenavi” dan Anda harus menemukannya.

Oke, itu seharusnya sangat mudah. Sekarang saatnya untuk membuat tangan Anda sedikit kotor dalam kode untuk bagian integrasi.

Integrasi tema

Dalam integrasi tema kami, kami tidak pernah ingin kesalahan ditampilkan jika WP-PageNavi tidak aktif. Sebagai gantinya, kami akan memastikannya kembali pada navigasi gaya sebelumnya / berikutnya. Untuk melakukan ini, kami akan menggunakan a function_exists memeriksa bersyarat.

Katakanlah ini adalah kode navigasi WordPress normal sebelum / berikutnya:

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

Kami akan mengubahnya sebagai berikut:

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

Ini pada dasarnya memeriksa untuk melihat apakah WP-PageNavi aktif dan jika ya, ini akan menampilkan kode navigasi halaman baru. Jika tidak, ini akan kembali ke navigasi normal sebelum / berikutnya.

Tolong dicatat: Bergantung pada bagaimana CSS Anda dikodekan, Anda mungkin ingin meletakkan wp_pagenavi (); bagian di dalam “navigasi” (atau setara) div. Perlu diingat WP-PageNavi memuntahkan kelas baru yang disebut “wp-pagenavi” meskipun yang dapat kita gunakan untuk gaya secara terpisah.

Ganti Gaya Plugin

Secara default, WP-PageNavi secara otomatis memasukkan file CSS yang disebut pagenavi-css.css dari direktori plugin-nya ke dalam header situs Anda. Kami tidak ingin gaya default ini mengganggu gaya buatan kami sendiri yang keren, jadi kami akan sepenuhnya menyingkirkannya, dan ada dua cara sederhana untuk melakukan hal itu.

  • Tambahkan file CSS ke direktori tema Anda – Ini mungkin cara termudah untuk mengganti gaya WP-PageNavi default. Jika Anda memiliki file bernama pagenavi-css.css di direktori tema Anda, WP-PageNavi akan menggunakan ini alih-alih yang default di direktori plugin.
  • Tambahkan snippet ke file functions.php Anda – Cuplikan kode berikut yang saya ambil Resep WP akan sepenuhnya menonaktifkan perilaku di atas dan tidak menyertakan stylesheet apa pun dari plugin (salah satu default atau penggantian dalam direktori tema Anda).

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

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

Cukup masukkan kode itu dalam file functions.php tema Anda dan tambahkan gaya CSS ke stylesheet tema biasa (biasanya style.css).

catatan: Pastikan kode dikelilingi oleh tanda kurung <?php … ?> jika file fungsi Anda saat ini kosong.

WP-PageNavi Markup HTML dan Pemilih CSS

Inilah yang terlihat seperti markup WP-PageNavi. Dalam contoh berikut, ada empat halaman, saat ini di halaman dua.

Sebelumnya1
2
3
Lanjut

Terakhir “

Kita dapat menggunakan penyeleksi CSS berikut untuk menargetkan markup HTML di atas:

  • .wp-pagenavi – Berlaku untuk seluruh div, berguna untuk membersihkan CSS, padding / margin, ukuran dan gaya font (tebal, miring, dll.)
  • .wp-pagenavi a – Menargetkan semua tautan di dalam navigasi halaman, termasuk nomor halaman dan sebelumnya / berikutnya.
  • .wp-pagenavi a.page – Menargetkan nomor halaman secara khusus
  • .wp-pagenavi a.first – Menargetkan tautan “pertama” secara khusus (tidak tercantum di atas)
  • .wp-pagenavi a.last – Menargetkan tautan “terakhir” secara khusus
  • .wp-pagenavi span – Menargetkan nomor halaman saat ini bersama dengan bagian memperpanjang (hal dengan tiga titik)
  • .wp-pagenavi span.current – Secara khusus menargetkan nomor halaman saat ini
  • .wp-pagenavi span.extend – Secara khusus menargetkan perluasan (tiga titik hal)
  • .wp-pagenavi span.pages – Khususnya menargetkan tampilan nomor halaman (mis. Halaman 1 dari 4)

catatan: Tautan sebelumnya dan berikutnya secara default, tidak memiliki kelas CSS. Jika Anda ingin mereka benar-benar dibedakan dari nomor halaman dan tautan pertama / terakhir, mereka harus mengatur ulang gaya apa pun yang ditambahkan ke pemilih .wp-pagenavi. Jika itu tidak masuk akal, lihat contoh berikut (benar-benar disederhanakan).

Sebagai contoh: Katakanlah Anda ingin tautan sebelumnya dan berikutnya dicetak tebal, tetapi setiap tautan lainnya memiliki bobot normal. Anda perlu melakukan hal berikut:

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

Saya menggabungkan tautan nomor halaman, tautan pertama, dan tautan terakhir menjadi satu aturan untuk tujuan contoh. Tentu saja, Anda dapat memisahkannya dan menambahkan gaya yang lebih spesifik untuk masing-masing.

Ini akan jauh lebih mudah jika ada kelas yang ditambahkan ke tautan sebelumnya / berikutnya secara default, tetapi tidak ada. Ini bukan masalah besar karena Anda hanya dapat mengatur ulang mereka.

Pembaruan Penting: Berkat pembaruan dari scribu dalam komentar, ternyata versi terbaru WP-PageNavi memang memiliki kelas sebelumnya / berikutnya (sebagian berkat Yoast).

Anda dapat menggunakan .wp-pagenavi a.previouspostslink dan .wp-pagenavi a.nextpostslink untuk memilih tautan sebelumnya dan berikutnya, masing-masing.

Jadi hampir semua yang ada di atas sampai daftar pemilih yang tidak berurutan tidak relevan lagi, tetapi saya akan menyimpannya hanya karena itu bisa menjadi pelajaran yang berguna dalam menimpa CSS dalam beberapa situasi lain. Contoh CSS di bawah ini masih akan berlaku karena saya tidak menggunakan pemilih tersebut.

Contoh CSS

Berikut adalah contoh gaya PageNavi yang saya buat dari Blogwave tema.

PageNavi yang Diperbarui Blogwave

Ini kode yang saya gunakan untuk mendapatkan tampilan ini, multi-single-line CSS adalah opsional:

.wp-pagenavi a, .wp-pagenavi span {
padding: 5px; margin-right: 10px;
ukuran font: 15px; warna: # 03719c; teks-dekorasi: tidak ada;
perbatasan: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
latar belakang: # 03719c;
warna: #fff;
perbatasan: 3px solid #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

Dan inilah artinya:

Aturan Pertama
Rentang .wp-pagenavi a, .wp-pagenavi memilih semua elemen jangkar dan rentang (hampir semuanya) di dalam div .wp-pagenavi.

  • Baris pertama aturan menetapkan padding 5px sehingga tidak akan dijejalkan ke perbatasan abu-abu terang (didefinisikan di bawah). Ini juga menetapkan margin konsisten 10px di sebelah kanan setiap elemen sehingga ada jarak yang sama di antara masing-masing elemen.
  • Baris kedua menetapkan ukuran font 15px, membuat warna teks menjadi biru, dan memastikan tautan tidak memiliki garis bawah.
  • Baris ketiga menetapkan batas abu-abu 3px yang solid pada semuanya. Kode batas-perbatasan membuat sudut-sudutnya bulat.

Aturan kedua
.Wp-pagenavi a: hover, .wp-pagenavi span.current memilih efek tautan hover serta nomor halaman saat ini, masing-masing.

  • Baris pertama menetapkan warna latar belakang biru gelap.
  • Baris kedua membuat teks putih.
  • Baris ketiga memberi batas yang sedikit lebih gelap.

Aturan Ketiga
Ini memilih nomor halaman saat ini (sekali lagi) tanpa mempengaruhi efek hover tautan (seperti aturan kedua). Ini hanya membuat nomor halaman saat ini menjadi font tebal.

Alasan saya tidak memasukkannya dengan efek hover tautan adalah karena ia memiliki efek yang tidak rata dari normal ke tebal font..

catatan: Bergantung pada bagaimana CSS Anda dikodekan, Anda mungkin harus menggunakan penyeleksi yang lebih spesifik. Misalnya, jika ada gaya untuk #content a dan WP-PageNavi Anda ada di dalam div konten, Anda mungkin harus menulis ulang CSS PageNavi Anda sebagai #content .wp-pagenavi a dan menimpa gaya lain yang kurang spesifik.

Kesimpulan

Saya tahu ini adalah contoh yang relatif sederhana, Anda dapat memiliki banyak aturan CSS lebih maju untuk membedakan berbagai tautan dan elemen lainnya lebih jauh lagi. Semoga Anda mengambil beberapa tips CSS sepanjang jalan juga.

Integrasi WP-PageNavi opsional adalah fitur yang bisa diintegrasikan oleh pengembang tema dalam tema mereka. Dengan metode integrasi yang saya uraikan di atas, pengguna dapat dengan mudah memilih untuk menggunakannya atau tidak, dan itu bisa menjadi pilihan yang bagus untuk banyak blog.

Semoga Anda semua menyukai tutorial ini, dan jika Anda memiliki permintaan untuk tutorial WordPress atau tips CSS di masa depan, beri tahu saya di komentar.

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