Hướng dẫn tạo kiểu cho plugin WP-PageNavi WordPress

Nếu bạn không quen thuộc với WP-PageNavi Plugin WordPress, nó cho phép bạn thay thế điều hướng thông thường trước đó / tiếp theo bằng điều hướng phân trang được đánh số cao cấp hơn. Đây là một tính năng mà tôi đã đưa vào một số chủ đề mà tôi đã phát triển, bao gồm RS16, Blogwave, RS17, và Điểm sáng.


Trang RS16 RSNavi

Trong hướng dẫn này, tôi sẽ tìm hiểu thêm về cách:

  • Cài đặt WP-PageNavi và tích hợp đúng vào chủ đề của bạn.
  • Hai phương pháp để vô hiệu hóa và / hoặc ghi đè các kiểu plugin mặc định.
  • Tổng quan về đầu ra đánh dấu HTML của WP-PageNavi
  • Cuối cùng, làm thế nào để thay đổi giao diện điều hướng trang của bạn thông qua CSS

Cài đặt Plugin

Bạn có hai tùy chọn khi cài đặt plugin WP-PageNavi.

  • Tải xuống từ WordPress.org, tải nó lên thư mục / wp-content / plugins / của bạn và kích hoạt (aka, cách thức cũ).
  • Tùy thuộc vào máy chủ lưu trữ của bạn, bạn cũng có thể tự động cài đặt các plugin bằng cách tìm kiếm chúng trong trang Thêm Thêm New Mới trong phần bổ trợ trong bảng quản trị WordPress của bạn. Chỉ cần tìm kiếm trên pagenavi và bạn sẽ tìm thấy nó.

Được rồi, điều đó nên khá dễ dàng. Bây giờ đã đến lúc để có được một chút mã bẩn cho phần tích hợp.

Tích hợp chủ đề

Trong tích hợp chủ đề của chúng tôi, chúng tôi không bao giờ muốn bất kỳ lỗi nào được hiển thị nếu WP-PageNavi không hoạt động. Thay vào đó, chúng tôi sẽ đảm bảo rằng nó rơi trở lại vào điều hướng kiểu cũ / tiếp theo cũ. Để làm điều này, chúng tôi sẽ sử dụng một function_exists kiểm tra có điều kiện.

Hãy nói rằng đây là mã điều hướng WordPress bình thường / trước đó của bạn:

<?php next_posts_link (‘«Mục nhập cũ’) ?>
<?php trước_posts_link (‘Mục nhập mới hơn »’) ?>

Chúng tôi sẽ thay đổi nó như sau:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } khác { ?>
<?php next_posts_link (‘«Mục nhập cũ’) ?>
<?php trước_posts_link (‘Mục nhập mới hơn »’) ?>
<?php} ?>

Điều này về cơ bản kiểm tra xem WP-PageNavi có hoạt động không và nếu có, nó sẽ hiển thị mã điều hướng trang mới. Nếu không, nó duyên dáng rơi trở lại điều hướng bình thường trước đó / tiếp theo.

Xin lưu ý: Tùy thuộc vào cách CSS của bạn được mã hóa, bạn có thể muốn đặt wp_pagenavi (); một phần bên trong div navigation điều hướng (hoặc tương đương). Hãy ghi nhớ WP-PageNavi tạo ra một lớp mới có tên là wp-pagenavi, mặc dù chúng ta có thể sử dụng để tạo kiểu riêng.

Ghi đè kiểu plugin

Theo mặc định, WP-PageNavi tự động chèn một tệp CSS có tên pagenavi-css.css từ thư mục plugin của nó vào tiêu đề của trang web của bạn. Chúng tôi không muốn các kiểu mặc định này can thiệp vào các kiểu tùy chỉnh thú vị của riêng chúng tôi, vì vậy chúng tôi sẽ hoàn toàn loại bỏ chúng và có hai cách đơn giản để làm điều đó.

  • Thêm một tệp CSS vào thư mục chủ đề của bạn – Đây có lẽ là cách dễ nhất để ghi đè các kiểu WP-PageNavi mặc định. Nếu bạn có một tệp có tên pagenavi-css.css trong thư mục chủ đề của mình, WP-PageNavi sẽ sử dụng tệp này thay vì tệp mặc định trong thư mục plugin.
  • Thêm một đoạn mã vào tệp tin.php. – Đoạn mã sau tôi đã chọn từ Bí quyết WP sẽ vô hiệu hóa hoàn toàn hành vi trên và không bao gồm bất kỳ biểu định kiểu nào từ plugin (có thể là mặc định hoặc ghi đè trong thư mục chủ đề của bạn).

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

hàm my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

Chỉ cần nhập mã đó vào tệp chủ đề của tệp. Chức năng của bạn và thêm các kiểu CSS vào biểu định kiểu chủ đề thông thường của bạn (thường là style.css).

Ghi chú: Đảm bảo mã được bao quanh bởi dấu ngoặc như <?php … ?> nếu tập tin chức năng của bạn hiện đang trống.

Bộ đánh dấu HTML và Bộ chọn CSS của WP-PageNavi

Đây là những gì đánh dấu WP-PageNavi trông như thế nào. Trong ví dụ sau, có bốn trang, hiện ở trang hai.

Trước1
2
3
Kế tiếp

Cuối cùng “

Chúng tôi có thể sử dụng các bộ chọn CSS sau để nhắm mục tiêu đánh dấu HTML ở trên:

  • .wp-pagenavi – Áp dụng cho toàn bộ div, hữu ích cho việc xóa CSS, đệm / lề, kích thước phông chữ và kiểu (đậm, in nghiêng, v.v.)
  • .wp-pagenavi a – Nhắm mục tiêu tất cả các liên kết bên trong điều hướng trang, bao gồm số trang và trước đó / tiếp theo.
  • .wp-pagenavi a.page – Nhắm mục tiêu số trang cụ thể
  • .wp-pagenavi a.first – Nhắm mục tiêu liên kết đầu tiên trên đường sắt (không được liệt kê ở trên)
  • .wp-pagenavi a.last – Nhắm mục tiêu vào liên kết cuối cùng của Bỉ
  • .nhịp wp-pagenavi – Nhắm mục tiêu số trang hiện tại cùng với phần mở rộng (điều có ba dấu chấm)
  • .wp-pagenavi span.cản – Cụ thể nhắm mục tiêu số trang hiện tại
  • .wp-pagenavi span.extend – Cụ thể nhắm mục tiêu mở rộng (điều ba chấm)
  • .wp-pagenavi span.pages – Hiển thị mục tiêu số trang cụ thể (ví dụ: Trang 1/4)

Ghi chú: Các liên kết trước và tiếp theo theo mặc định, không có lớp CSS trên chúng. Nếu bạn muốn chúng phân biệt hoàn toàn với số trang và liên kết đầu tiên / cuối cùng, những kiểu đó sẽ cần đặt lại bất kỳ kiểu nào được thêm vào .wp-pagenavi một bộ chọn. Nếu điều đó không có ý nghĩa, hãy xem ví dụ sau (thực sự đơn giản hóa).

Ví dụ: Hãy nói rằng bạn muốn các liên kết trước và tiếp theo được in đậm, nhưng mọi liên kết khác đều có trọng lượng bình thường. Bạn sẽ cần phải làm như sau:

.wp-pagenavi a {font-weight: bold; } / * Chỉ các liên kết Trước và Tiếp theo * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: bình thường; } / * Các liên kết khác * /

Tôi đã kết hợp các liên kết số trang, liên kết đầu tiên và liên kết cuối cùng thành một quy tắc cho các mục đích ví dụ. Tất nhiên, bạn có thể tách chúng và thêm các kiểu cụ thể hơn cho từng kiểu.

Điều này sẽ dễ dàng hơn nhiều nếu có một lớp được thêm vào các liên kết trước đó / tiếp theo theo mặc định, nhưng không có. Nó không phải là một vấn đề lớn vì dù sao bạn cũng có thể đặt lại chúng.

Cập nhật quan trọng: Nhờ một bản cập nhật từ scribu trong các nhận xét, hóa ra phiên bản mới nhất của WP-PageNavi có các lớp trước đó / tiếp theo về chúng (một phần nhờ vào Yoast).

Bạn có thể sử dụng .wp-pagenavi a.preinglypostslink và .wp-pagenavi a.nextpostslink để chọn các liên kết trước đó và tiếp theo, tương ứng.

Quá nhiều thứ ở trên cho đến khi danh sách các bộ chọn không có thứ tự không còn phù hợp nữa, nhưng tôi sẽ giữ nó chỉ vì nó có thể là một bài học hữu ích trong việc ghi đè CSS trong một số tình huống khác. Ví dụ CSS dưới đây vẫn sẽ được áp dụng vì dù sao tôi cũng đã sử dụng các bộ chọn đó.

Một ví dụ CSS

Dưới đây, một ví dụ về kiểu dáng PageNavi mà tôi đã tạo ra từ Blogwave chủ đề.

Blogwave Cập nhật PageNavi

Đây là mã tôi đã sử dụng để có được giao diện này, CSS đa dòng Là tùy chọn:

.wp-pagenavi a, .wp-pagenavi span {
phần đệm: 5px; lề phải: 10px;
cỡ chữ: 15px; màu: # 03719c; trang trí văn bản: không có;
viền: 3px solid #ccc; -moz-viền-bán kính: 5px; -webkit-Border-radius: 5px; bán kính đường viền: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.cản {
nền: # 03719c;
màu: #fff;
viền: 3px solid #AFAFAF;
}
.wp-pagenavi span.cản {font-weight: bold; }

Và đây, ý nghĩa của nó là gì:

Quy tắc đầu tiên
Khoảng .wp-pagenavi a, .wp-pagenavi chọn tất cả các yếu tố neo và span (khá nhiều thứ) bên trong div .wp-pagenavi.

  • Dòng đầu tiên của quy tắc đặt phần đệm là 5px để nó giành chiến thắng được nhồi nhét vào viền màu xám nhạt (được xác định bên dưới). Nó cũng đặt lề nhất quán 10px ở bên phải của mỗi phần tử để có khoảng cách bằng nhau giữa mỗi phần tử.
  • Dòng thứ hai đặt kích thước phông chữ là 15px, làm cho màu văn bản thành màu xanh lam và đảm bảo các liên kết không có gạch chân.
  • Dòng thứ ba đặt đường viền màu xám 3px chắc chắn trên mọi thứ. Mã bán kính đường viền làm cho các góc được làm tròn.

Quy tắc thứ hai
.Wp-pagenavi a: hover, .wp-pagenavi span.c hiện chọn hiệu ứng di chuột liên kết cũng như số trang hiện tại, tương ứng.

  • Dòng đầu tiên đặt màu nền xanh đậm.
  • Dòng thứ hai làm cho văn bản màu trắng.
  • Dòng thứ ba cho đường viền hơi tối hơn.

Quy tắc thứ ba
Điều này chọn số trang hiện tại (một lần nữa) mà không ảnh hưởng đến hiệu ứng di chuột liên kết (như quy tắc thứ hai). Điều này chỉ làm cho số trang hiện tại có trọng lượng phông chữ đậm.

Lý do tôi đã bao gồm nó với hiệu ứng di chuột liên kết là bởi vì nó có hiệu ứng không đồng đều đi từ trọng lượng phông chữ bình thường đến đậm.

Ghi chú: Tùy thuộc vào cách CSS của bạn được mã hóa, bạn có thể phải sử dụng các bộ chọn cụ thể hơn. Ví dụ: nếu có các kiểu cho #content a và WP-PageNavi của bạn nằm trong div nội dung, bạn có thể phải viết lại CSS PageNavi của bạn dưới dạng #content .wp-pagenavi a và ghi đè mọi kiểu khác ít cụ thể hơn.

Phần kết luận

Tôi biết đây là một ví dụ tương đối đơn giản, bạn có thể có nhiều quy tắc CSS nâng cao hơn để phân biệt các liên kết khác nhau và các yếu tố khác hơn nữa. Hy vọng rằng bạn cũng đã chọn một vài mẹo CSS.

Tích hợp WP-PageNavi tùy chọn là một nhà phát triển chủ đề tính năng khá thú vị có thể tích hợp trong các chủ đề của họ. Với phương pháp tích hợp tôi đã nêu ở trên, người dùng có thể dễ dàng chọn sử dụng hay không và nó có thể là một lựa chọn tốt cho nhiều blog.

Hy vọng tất cả các bạn thích hướng dẫn này và nếu bạn có bất kỳ yêu cầu nào về hướng dẫn WordPress hoặc mẹo CSS trong tương lai, hãy cho tôi biết trong các nhận xét.

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