Rút gọn miêu tả bài viết trong WordPress bằng jQuery

Trong WordPress để lấy nội dung của bài viết thì tôi thường dùng hàm the_content(), chuyện sẽ chẳng có gì to tát nếu không có một lỗi mà tôi không hiểu nguyên nhân vì sao. Nếu bạn nào sử dụng WordPress, hẳn đều biết khi viết bài mới thì trên khung soạn thảo có nút Insert More Tag (Alt+Shift+T) để hiển thị một đoạn nội dung bài viết đó ra trang chủ. (Xem thêm bài viết này để chèn nút More Tag)

Read More Tag

Tôi đã thêm nút đó vào bài viết nhưng không hiểu sao, trên trang chủ lại xuất hiện toàn bộ nội dung bài viết đó. Tôi thử dùng hàm the_excerpt() thay cho hàm the_content() trong file single.php , kết quả là bài viết đó chỉ xuất hiện 1 đoạn ngắn nội dung. Chưa kịp vui mừng thì tôi lại phát hiện ra 1 lỗi nữa, đó là hàm the_excerpt() chỉ hiển thị 1 đoạn nội dung bài viết chứ nó không giữ lại định dạng của đoạn đó. Hiểu nôm na là, nếu trong bài viết giữa các câu có xuống dòng thì hàm the_excerpt() sẽ hiển thị liên tục các câu mà không xuống dòng, tức là nó bỏ qua tag <br />.

Thành ra tôi băn khoăn giữa 2 cách, nếu dùng hàm the_content() thì sẽ giữ lại định dạng bài viết nhưng lại hiển thị toàn bộ nội dung còn hàm the_excerpt() hiển thị 1 đoạn bài viết với số lượng từ mặc định là 55 và không giữ lại định dạng của nội dung bài viết đó.

Sau một hồi tìm kiếm, cuối cùng tôi cũng khắc phục được lỗi trên, hiển thị 1 đoạn ngắn bài viết mà vẫn giữ lại định dạng. Ban đầu tôi định dùng hàm substring() trong PHP để cắt chuỗi con nhưng không được, sau đó tôi chuyển qua dùng jQuery thì mọi việc đã tốt hơn.

Đầu tiên các bạn mở file single.php trong thư mục theme, tìm đến dòng có chứa lệnh the_content(), thay nó bằng dòng code sau:

<div class="pre_post"></div>

Sau đó các bạn thêm vào một đoạn code jQuery để xử lý

$(document).ready(function() {
$(".pre_post").each(function() {
var text = $(this).html();
if(text.length > 500){
text = text.substring(0,500);
$(this).html(text);
}
});
})

=> Đoạn code trên sẽ lấy 500 kí tự của mỗi bài viết thay vì lấy toàn bộ nội dung bài viết đó.

Lưu ý:

1, Đây là bài viết mô tả một lỗi khá đặc biệt về hàm the_content() và cách giải quyết lỗi đó, thông thường hàm the_content() không hiển thị toàn bộ nội dung bài viết nếu người dùng đã chèn nút Insert More Tag .

2, Các bạn nên kiểm tra file single.php có được hỗ trợ jQuery chưa , nếu chưa thì các bạn hãy mở file header.php và chèn thêm dòng sau :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like…

10 Responses

  1. Minh says:

    Đoạn

    Thay class=”pre-post” bằng class=”pre_post” 😀

    • Tấn Việt says:

      Cảm ơn bạn, mình đã update lại rồi. 🙂

  2. nha dat di an says:

    Sao mình làm mãi không được vậy bạn hay do mình khác của bạn

    • Tấn Việt says:

      Bạn có thể nói rõ hơn vấn đề bạn đang gặp là gì ? Bạn nói thế này thì quá ít thông tin để mình support cho bạn. 🙂

  3. GoD Nguyễn says:

    $(document).ready(function(){
    $(“.pre_post”).each(function(){
    var text = $(this).html();
    if(text.length > 50){
    text = text.substring(0,50);
    $(this).html(text);
    }
    });
    })

    post_content);
    echo ”.$content.”;
    ?>
    Code của mình nè ! sao làm ko dc ta @_@

    • Tấn Việt says:

      Chào bạn,

      Bạn nói bạn không làm được là sao ? Mình chưa hiểu ý của bạn lắm. Dựa theo đoạn code bạn đưa thì mình hiểu đại khái thế này (nếu không đúng mong bạn bỏ qua). Bạn dùng đoạn jQuery mình đưa, sau đó echo biến $content nhưng không hiểu sao nó vẫn không rút gọn miêu tả, đúng không ?

  4. ipman90 says:

    bạn cho mình hỏi cái đoạn code jQuery là mình đặt trong file nào vậy,mình đặt trong file single.php và function đều không được,newbie xin bạn giúp đỡ
    tks rất nhiều 🙂

    • Tấn Việt says:

      Chào bạn,

      Đoạn code đó mình để trong file js chứ mình không chèn trực tiếp vào file single hay function cả. Mình đã kiểm tra và thấy đoạn code trên vẫn ổn. Bạn đã kiểm tra là đã import thư viện jQuery vào chưa ? Hoặc là bạn cũng có thể dùng hàm the_excerpt() xem sao. Thân!

  5. yesyeshvh says:

    Bạn ơi code jquery đặt cụ thể ở đâu vậy mình mowdi học wordpress nên còn kém mong bạn giúp đỡ.

  6. Thương says:

    Mình đã làm thử mãi rồi mà không được nhỉ