Cách tùy chỉnh hiển thị lưu trữ WordPress trong thanh bên

Tác giả Network Engineer, T.Ba 14, 2022, 09:59:20 CHIỀU

« Chủ đề trước - Chủ đề tiếp »

0 Thành viên và 1 Khách đang xem chủ đề.

Cách tùy chỉnh hiển thị lưu trữ WordPress trong thanh bên


Bạn có cần tùy chỉnh cách hiển thị các tập tin lưu trữ WordPress của mình trong thanh bên không?

Tiện ích lưu trữ WordPress mặc định cung cấp khả năng tùy chỉnh hạn chế. Bạn có thể muốn các kho lưu trữ bài đăng của mình sử dụng ít dung lượng hơn, hiển thị nhiều thông tin hơn hoặc có giao diện hấp dẫn hơn.

Trong bài viết này, mình sẽ hướng dẫn bạn cách tùy chỉnh hiển thị các tập tin lưu trữ WordPress trong thanh bên của bạn.

1. Tại sao phải tùy chỉnh hiển thị lưu trữ WordPress trong Thanh bên của bạn?

Trang web WordPress của bạn đi kèm với một tiện ích lưu trữ cho phép bạn hiển thị các liên kết lưu trữ bài đăng blog hàng tháng trong một thanh bên.

Tiện ích có hai tùy chọn tùy chỉnh: bạn có thể hiển thị danh sách lưu trữ dưới dạng menu thả xuống và bạn có thể hiển thị số lượng bài đăng cho mỗi tháng.


Tuy nhiên, bạn có thể muốn hiển thị danh sách lưu trữ thanh bên của mình theo cách khác. Ví dụ: khi trang web của bạn phát triển, danh sách mặc định có thể trở nên quá dài hoặc bạn có thể muốn khách truy cập điều hướng dễ dàng hơn.

Hãy xem một số cách để tùy chỉnh hiển thị các tập tin lưu trữ WordPress trong thanh bên của bạn:

  • Tạo kho lưu trữ nhỏ gọn
  • Hiển thị kho lưu trữ trong một đường viền có thể thu gọn
  • Giới hạn số tháng lưu trữ được hiển thị
  • Lưu trữ danh sách hàng ngày, hàng tuần, hàng tháng hoặc hàng năm
  • Hiển thị kho lưu trữ hàng tháng được sắp xếp theo năm

2. Tạo kho lưu trữ nhỏ gọn

Nếu danh sách lưu trữ của bạn quá dài, thì bạn có thể tạo một kho lưu trữ nhỏ gọn để hiển thị các bài đăng của mình bằng cách sử dụng ít dung lượng hơn.

Bạn sẽ cần cài đặt và kích hoạt plugin Compact Archives do nhóm tác giả phát triển và duy trì. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn có thể thêm các kho lưu trữ nhỏ gọn vào một bài đăng, trang hoặc tiện ích con bằng cách sử dụng khối 'Compact Archives'.


Danh sách lưu trữ nhỏ gọn tiết kiệm không gian theo chiều dọc bằng cách rộng hơn một chút. Điều đó có nghĩa là nó có thể phù hợp hơn trong chân trang hoặc trang lưu trữ hơn là trong thanh bên.

Tuy nhiên, plugin khá dễ cấu hình và bạn có thể thu hẹp nó bằng cách chỉ hiển thị chữ cái đầu tiên hoặc một số cho mỗi tháng. Bạn có thể tìm hiểu thêm trong hướng dẫn của mình về cách tạo tập tin lưu trữ nhỏ gọn trong WordPress.

3. Hiển thị kho lưu trữ trong một đường viền có thể thu gọn

Một cách khác để đối phó với danh sách lưu trữ dài là hiển thị phác thảo có thể thu gọn về năm và tháng khi bạn xuất bản các bài đăng trên blog.

Để thực hiện việc này, bạn cần cài đặt và kích hoạt plugin Collapsing Archives. Sau khi kích hoạt, bạn cần truy cập trang Appearance >> Widgets và thêm widget 'Compact Archives' vào thanh bên của bạn.


Tiện ích Collapsing Archives sử dụng JavaScript để thu gọn kho lưu trữ của bạn theo năm. Người dùng của bạn có thể nhấp vào năm để mở rộng chúng để xem các bản lưu trữ hàng tháng. Bạn thậm chí có thể thu gọn kho lưu trữ hàng tháng và cho phép người dùng xem tiêu đề bài đăng bên dưới.

Bạn có thể tìm hiểu thêm bằng cách tham khảo Phương pháp 1 trong hướng dẫn của mình về cách giới hạn số tháng lưu trữ được hiển thị trong WordPress.

Đây là cách nó trông như thế nào trên trang web demo của mình.


4. Giới hạn số tháng lưu trữ được hiển thị

Cách thứ ba để ngăn danh sách lưu trữ của bạn trở nên quá dài là giới hạn số tháng được hiển thị trong sáu tháng qua.

Để làm điều đó, bạn sẽ phải thêm mã vào các tập tin giao diện WordPress của mình. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của mình về cách sao chép và dán mã trong WordPress.

Bước đầu tiên là thêm đoạn mã sau vào tập tin functions.php của bạn, trong một plugin dành riêng cho trang web hoặc bằng cách sử dụng một plugin đoạn mã.

Mã nguồn [Chọn]
// Function to get archives list with limited months
function wpb_limit_archives() {
 
$my_archives = wp_get_archives(array(
    'type'=>'monthly',
    'limit'=>6,
    'echo'=>0
));
     
return $my_archives;
 
}
 
// Create a shortcode
add_shortcode('wpb_custom_archives', 'wpb_limit_archives');
 
// Enable shortcode execution in text widget
add_filter('widget_text', 'do_shortcode');

Bạn có thể thay đổi số tháng được hiển thị bằng cách chỉnh sửa số trên dòng 6. Ví dụ: nếu bạn thay đổi số thành '12' thì nó sẽ hiển thị 12 tháng lưu trữ.

Bây giờ bạn có thể truy cập trang Appearance >> Widgets và thêm tiện ích 'Custom HTML' vào thanh bên của bạn. Sau đó, bạn nên dán mã sau vào hộp tiện ích:

Mã nguồn [Chọn]
<ul>
[wpb_custom_archives]
</ul>


Khi bạn nhấp vào nút 'Update', thanh bên của bạn sẽ chỉ hiển thị sáu tháng lưu trữ.

Để biết thêm chi tiết, hãy xem Phương pháp 3 trong hướng dẫn của mình về cách giới hạn số tháng lưu trữ được hiển thị trong WordPress.

5. Lưu trữ danh sách hàng ngày, hàng tuần, hàng tháng hoặc hàng năm

Nếu bạn muốn kiểm soát nhiều hơn cách các kho lưu trữ của mình được liệt kê, thì plugin Lưu trữ hàng năm sẽ giúp ích. Nó cho phép bạn liệt kê các kho lưu trữ của mình hàng ngày, hàng tuần, hàng tháng, hàng năm hoặc theo thứ tự bảng chữ cái và có thể nhóm các danh sách theo thập kỷ.

Bắt đầu bằng cách cài đặt và kích hoạt plugin Annual Archive. Sau đó, bạn có thể đi tới trang Appearance >> Widgets và kéo tiện ích Lưu trữ hàng năm vào thanh bên của bạn.


Bạn có thể đặt tiêu đề cho tiện ích con rồi chọn hiển thị danh sách ngày, tuần, tháng, năm, thập kỷ hoặc bài đăng. Bạn có thể cuộn xuống các tùy chọn khác để giới hạn số lượng lưu trữ được hiển thị, chọn một tùy chọn sắp xếp và thêm văn bản bổ sung.

Nếu bạn điều hướng đến Settings >> Annual Archive, thì bạn có thể tùy chỉnh thêm danh sách lưu trữ bằng cách sử dụng CSS tùy chỉnh.

6. Hiển thị kho lưu trữ hàng tháng được sắp xếp theo năm

Khi mình đang làm việc trên một thiết kế trang web của khách hàng cần các bản lưu trữ hàng tháng được sắp xếp theo năm trong thanh bên. Điều này rất khó mã hóa vì khách hàng này chỉ muốn hiển thị năm một lần ở bên trái.


Mình đã có thể sửa đổi một số mã bởi Andrew Appleton. Mã của Andrew không có tham số giới hạn cho các kho lưu trữ, vì vậy danh sách sẽ hiển thị tất cả các tháng lưu trữ. Mình đã thêm một thông số giới hạn cho phép mình chỉ hiển thị 18 tháng tại bất kỳ thời điểm nào.

Những gì bạn cần làm là dán mã sau vào tập tin sidebar.php giao diện của bạn hoặc bất kỳ tập tin nào khác mà bạn muốn hiển thị các tập tin lưu trữ WordPress tùy chỉnh:

Mã nguồn [Chọn]
<?php
global $wpdb;
$limit 0;
$year_prev null;
$months $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month ,  YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC");
foreach(
$months as $month) :
    
$year_current $month->year;
    if (
$year_current != $year_prev){
        if (
$year_prev != null){?>

         
        <?php ?>
     
    <li class="archive-year"><a href="<?php bloginfo('url'?>/<?php echo $month->year?>/"><?php echo $month->year?></a></li>
     
    <?php ?>
    <li><a href="<?php bloginfo('url'?>/<?php echo $month->year?>/<?php echo date("m"mktime(000$month->month1$month->year)) ?>"><span class="archive-month"><?php echo date_i18n("F"mktime(000$month->month1$month->year)) ?></span></a></li>
<?php $year_prev $year_current;
  
if(++
$limit >= 18) { break; }
  
endforeach; 
?>

Nếu bạn muốn thay đổi số tháng được hiển thị, thì bạn cần chỉnh sửa dòng 19 trong đó giá trị $limit hiện tại được đặt thành 18.

Bạn cũng có thể hiển thị số lượng bài đăng trong mỗi tháng bằng cách thêm bit mã này vào bất kỳ vị trí nào giữa các dòng 12–16 của đoạn mã trên:

Mã nguồn [Chọn]
<?php echo $month->post_count?>
Bạn sẽ cần sử dụng CSS tùy chỉnh để hiển thị chính xác danh sách lưu trữ trên trang web của mình. CSS mình sử dụng trên trang web của khách hàng trông giống như sau:

Mã nguồn [Chọn]
.widget-archive{padding: 0 0 40px 0; float: left; width: 235px;}
.widget-archive ul {margin: 0;}
.widget-archive li {margin: 0; padding: 0;}
.widget-archive li a{ border-left: 1px solid #d6d7d7; padding: 5px 0 3px 10px; margin: 0 0 0 55px; display: block;}
li.archive-year{float: left; font-family: Helvetica, Arial, san-serif; padding: 5px 0 3px 10px; color:#ed1a1c;}
li.archive-year a{color:#ed1a1c; margin: 0; border: 0px; padding: 0;}

Mình hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách tùy chỉnh hiển thị các tập tin lưu trữ WordPress trong thanh bên của mình. Bạn cũng có thể muốn tìm hiểu cách cài đặt Google Analytics trong WordPress hoặc xem danh sách các cách đã được chứng minh của mình để kiếm tiền bằng blog WordPress.