[WordPress] Xóa các thẻ rỗng trong WordPress

Xóa các thẻ rỗng trong WordPress? Như mọi người đã biết, WordPress có tính năng tự động thêm thẻ <p></p> vào các đoạn được xem như một đoạn văn. Nhưng trong một số trường hợp chúng thật sự gây cho bạn nhiều phiền phức. Đó là một tính năng và chúng ta có thể remove. Remove empty tag added by WordPress.

Worpress in phamtuantech

WordPress có tính năng tự thêm cặp thẻ <p>…</p> vào mỗi dòng nội dung văn bản. Nghĩa là cứ mỗi lần bạn nhấn [Enter] thì wordpress sẽ hiểu bạn vừa kết thúc một đoạn và chúng sẽ tự chèn cặp thẻ <p>…</p> thay vì <br/> vào đoạn văn bạn vừa viết xong. Việc này sẽ không được thấy trên Editor dù bạn đang xem ở html-mode. Đôi khi việc này đem đến sự thuận tiện, việc hiển thị các bài blog sẽ rõ ràng hơn khi bạn viết theo cách mà wordpress muốn.

Xong ở những bài viết nâng cao như những bài viết sắp tới của tôi, đa phần đều sẽ có nhúng thêm html để phục vụ trình bày theo hướng trực quan hơn; khi đó việc can thiệp một cách tự động của wordpress sẽ làm mất đi format mà tôi muốn.

Ví dụ: Khi tôi sử dụng đoạn code sau đây.

<div class="panel panel-green">
  <div class="panel-heading">
    <h3 class="panel-title">Khuyến khích</h3>
  </div>
  <div class="panel-body">Điều nên làm hay tham khảo</div>
</div>

Khi hiển thị ở client thì sẽ là:

<div class="panel panel-green">
  <div class="panel-heading">
    <h3 class="panel-title">Khuyến khích<p></p></h3>
  </div>
  <div class="panel-body">Điều nên làm hay tham khảo</div>
</div>

Sẽ có thêm một cặp thẻ <p></p>, cặp thẻ này được thêm vào bởi tính năng wpautop cửa wordpress nhưng lại không theo quy tắc đã nói ở trên (chắc là bug). Nên một thẻ empty vô nghĩa sẽ được tạo ra làm cho phần panel-title không còn được canh giữa nữa.

Để tránh việc này. Hãy dùng đoạn code sau thêm vào file functions.php của theme bạn đang dùng để Diable tính năng wpautop.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Nhưng việc Disable tính năng trên đôi khi lại gây phiền. Vì khi bạn Enable tính năng trên những bài viết có ảnh sẽ tránh được tình trạng ảnh và chữ quá cạnh nhau. Không đẹp.

Vậy thì hãy giữ tính năng này lại và thêm một đoạn Script sau để chỉ xóa những thẻ p bị rỗng hay xóa tất cả các thẻ html rỗng mà thôi.

Đoạn mã chỉ xóa thẻ p rỗng:

add_filter('the_content', 'remove_empty_p', 20, 1);
function remove_empty_p( $content ) {
    $content = force_balance_tags( $content );
    $content = preg_replace( '#<p>\s*+(<br\s*/*>)?\s*</p>#i', '', $content );
    $content = preg_replace( '~\s?<p>(\s|&nbsp;)+</p>\s?~', '', $content );
    return $content;
}

Đoạn mã xóa tất cả các thẻ html rỗng:

add_filter('the_content', 'remove_empty_tags_recursive', 20, 1);
function remove_empty_tags_recursive ($str, $repto = NULL) {
         $str = force_balance_tags($str);
         //** Return if string not given or empty.
         if (!is_string ($str)
         || trim ($str) == '')
        return $str;

        //** Recursive empty HTML tags.
       return preg_replace (

              //** Pattern written by Junaid Atari.
              '/<([^<\/>]*)>([\s]*?|(?R))<\/\1>/imsU',

             //** Replace with nothing if string empty.
             !is_string ($repto) ? '' : $repto,

            //** Source string
           $str
);}

Bạn chỉ cần chọn một trong ba giải pháp trên thôi, không cần cả ba cùng lúc. Đoạn code bạn chọn ở trên nên được thêm vào file functions.php của theme bạn đang dùng.

Nguồn tham khảo từ internet.
Phạm Tuân

Visual Studio Code - Bộ text-editor đa năng
Preprocessor Directives trong C# là gì?
Tạo ChatBot đơn giản hơn với Dialogflow – Phần 2
Hãy bình luận trực tiếp ở đây để được trả lời nhanh hơn. 3 bình luận.
  1. Pingback: Google

Trả lời