Phân trang chỉ mục & Điều hướng bài viết liền kề

Màn hình quản trị Cài đặt là một trong những màn hình đầu tiên, trên bản cài đặt WordPress mới, mà người dùng sẽ truy cập trước khi họ mở cửa trang web của họ cho công chúng. Trong Settings > Reading màn hình, người dùng có thể điều chỉnh tùy chọn “Các trang blog hiển thị nhiều nhất”. Mặc định là 10 bài đăng trên mỗi trang, bên trái là bài tập cho nhà thiết kế chủ đề để triển khai các liên kết phân trang thực tế, mặt trước. tức là, từ trang bài viết số 1 đến trang bài viết số 2. Ngoài ra, bởi vì UX tuyệt vời của nó, đáng để chúng ta suy nghĩ về điều hướng post-to-post (điều hướng bài liền kề). Có nghĩa là, từ bất kỳ mục nhập nhất định nào, người dùng sẽ có thể điều hướng đến các bài đăng liền kề ngay lập tức ở hai bên (nếu được sắp xếp theo thứ tự thời gian, bài đăng trước đó hoặc bài đăng trước đó).Trừ khi bạn đang triển khai cuộn vô hạn hoặc thứ gì đó tương tự (và thậm chí sau đó), chế độ xem blog / chỉ mục mặc định của bạn sẽ cần được phân trang.

Xác định chức năng

Nếu bạn đã theo đuổi chủ đề một thời gian, có thể bạn đã quen với việc xác định thủ công trực tiếp trong mẫu chỉ mục của chủ đề của mình. Không sai chút nào khi làm điều này, chỉ là không hiệu quả. Sẽ có ý nghĩa hơn nhiều khi KHÔ mã mẫu của bạn và xác định chức năng này trong . Bằng cách này, khi chủ đề cụ thể của bạn phát triển để bao gồm nhiều mẫu hơn, bạn chỉ cần sử dụng một chức năng đã được xác định một lần và điều chỉnh nó cho phù hợp.<?php next_posts_link(); ?><?php previous_posts_link(); ?>functions.php

Đối với chế độ xem chỉ mục trung bình, bạn sẽ muốn một hàm thực hiện một số điều sau:

  1. Không xuất ra bất cứ thứ gì nếu chỉ có một trang bài đăng
  2. Thêm một lớp CSS vào phần tử mẹ (ví dụ <ul>) nếu một lớp được xác định. Nếu không, mặc định là một lớp CSS đã đặt.
  3. Ngoài ra, vì thực tiễn tốt của nó, bạn sẽ muốn làm cho chức năng này có thể cắm được. tức là có thể ghi đè từ một chủ đề con.
Để thực hiện điều trên, chúng tôi xác định một hàm phân trang chỉ mục như sau:functions.php
// make function pluggable
if ( ! function_exists( 'butter_index_paging' ) ) :

// define the actual function AND set a default
// $index_paging_class value (our default CSS class)
function butter_index_paging($index_paging_class =default-paging-css-class") {

// make sure there’s more than 1 index page otherwise show nothing
if ( $GLOBALS[‘wp_query’]->max_num_pages < 2 ) {
return;
}

// if there’s more than 1 page print out the pagination links
<ul class="<?php echo $index_paging_class; ?>">
<?php if ( get_next_posts_link() ) : ?>
<li class=nav-previous>
<?php next_posts_link( __( ‘← Older Entries’, ‘butter’ ) ); ?>
</li>
<?php endif; ?>

<?php if ( get_previous_posts_link() ) : ?>
<li class=nav-next>
<?php previous_posts_link( __( ‘Newer Entries →’, ‘_s’ ) ); ?>
</li>
<?php endif; ?>
</ul>

<?php
}
endif;


Lưu ý rằng mặc dù chúng tôi đang chạy kiểm tra để xem liệu chúng tôi có nên xuất toàn bộ các liên kết điều hướng của mình hay không, chúng tôi vẫn đang kiểm tra xem chúng tôi có thực sự có các bài đăng tiếp theo và trước đó hay không và quyết định có xuất các liên kết đó riêng lẻ hay không bằng cách gói liên kết của chúng tôi trong tương ứng.<?php if ( get_next_posts_link() ) : ?><?php if ( get_previous_posts_link() ) : ?>

Sử dụng chức năng

Để xuất các liên kết bài đăng trước đó và tiếp theo, trong mẫu của bạn hoặc bất cứ nơi nào bạn xuất phân trang, sau đó bạn sẽ gọi:index.php
<?php butter_index_paging(); ?>
từ trong vòng lặp chỉ mục. Với một vòng lặp tiêu chuẩn, bạn sẽ có một cái gì đó như thế này:
<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<span class="token php"><span class="token delimiter">&lt;?php</span> <span class="token function">get_template_part<span class="token punctuation">(</span></span> <span class="token string">'content'</span><span class="token punctuation">,</span> <span class="token function">get_post_format<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter">?&gt;</span></span>

<?php endwhile; ?>

<?php butter_index_paging(); ?>

<?php else : ?>

<?php get_template_part( ‘content’, ‘none’ ); ?>

<?php endif; ?>

Như được định nghĩa trong , điều này sẽ xuất ra một danh sách không có thứ tự các liên kết bài viết tiếp theo / trước đó. Phần tử sẽ có một lớp là “ “. Để cung cấp cho phần tử một lớp khác, ví dụ: “im-in-a-new-class”, chỉ cần thực hiện như sau:functions.php<ul>default-paging-css-class
<?php butter_index_paging('im-in-a-new-class'); ?>

Bài đăng liền kề (get_adjacent_post)

Trong các mục đăng bài đơn lẻ của mình, bạn sẽ muốn người dùng có cùng khả năng trang qua lại các bài viết liền kề.

Một lần nữa, như với phân trang chỉ mục, bạn có thể sử dụng “thủ công” trực tiếp trong các mẫu bài đăng đơn lẻ của mình để xuất ra các liên kết có liên quan, tuy nhiên, việc xác định một chức năng cho điều này mang lại cho bạn sự linh hoạt hơn vô cùng.<?php previous_post_link(); ?><?php next_post_link(); ?>

Đối với điều hướng bài viết liền kề, bạn muốn đảm bảo rằng thực sự có bài đăng trước đó hoặc tiếp theo trước khi xuất đánh dấu. Để kết thúc, chúng tôi định nghĩa một hàm như sau:

// make the function pluggable
if ( ! function_exists( 'butter_adjacent_post_nav' ) ) :

function butter_adjacent_post_nav() {
  
  // define the variables for use in the function
  $previous = get_adjacent_post( false, '', true );
  $next     = get_adjacent_post( false, '', false );
  
  // confirm that an adjacent post (previous or next) actually exists. otherwise do nothing
  if ( ! $next && ! $previous ) {
    return;
  }
  ?>
  
  // if an adjacent post is present, output the following markup
  <nav class="adjacent-post-nav">
  <?php
  previous_post_link( '%link', __( 'Previous Post: %title', 'butter' ) );
  next_post_link( '%link', __( 'Next Post: %title', 'butter' ) );
  ?>
  </nav>
  <?php
}
endif;

Để sử dụng điều hướng bài viết liền kề được xác định ở trên, từ bên trong vòng lặp, ví dụ: thực hiện lệnh gọi hàm như sau:single.php

<?php butter_adjacent_post_nav(); ?>