Tích hợp sidebar chèn văn bản, banner quảng cáo vào giữa nội dung trong WordPress?

Tích hợp hiển thị nội dung/ quảng cáo tại các vị trí đặc biệt trong bài viết WordPress là tính năng có thể bạn cần trong quá trình phát triển plugins. Cụ thể là trong trường hợp bạn muốn vị trí sidebar hỗ trợ người dùng chèn nội dung/ banner quảng cáo hay shortcode vào vị trí giữa nội dung bài viết thì chia sẻ code mẫu này là hướng dẫn bạn cần.

Sử dụng và chèn thế nào là hợp lý?

Đầu tiên cần làm rõ là không phải bài viết nào cũng kích hoạt sidebar này vì những bài viết quá ngắn mà nhiều nội dung quảng cáo quá sẽ mang lại trải nghiệm không tốt. Vậy với quan điểm cá nhân mình sẽ liệt kê tiêu chí các bài viết để đáp ứng điều kiện hiển thị như sau:

• Nội dung phải từ 4.000 ký tự trở lên (dĩ nhiên không tính các thẻ HTML định dạng). Bạn có thể tùy biến con số này tùy vào mục đích riêng khi phát triển nội dung.
• Nội dung phải tồn tại từ 8 thẻ <p> (phân đoạn) trở lên. Mặc định trong WordPress khi soạn thảo nội dung các đoạn văn sẽ phân chia nhau bằng thẻ <p>. Tiêu chí 8 phân đoạn này mục đích là để tính toán hiển thị nội dung sidebar ở phân đoạn thứ 4 (8/2 – tức là ở giữa nội dung). Con số 8 chỉ là tiêu chí, nếu nội dung bạn nhiều hơn con số này thì tức vị trí hiển thị nội dung sẽ ở phân đoạn n/2.

Cơ bản bạn có thể dùng song song 2 điều kiện trên hoặc thêm nhiều điều kiện khác tùy vào tiêu chí riêng. Mình sẽ dụng 2 điều kiện là vì có thể trong một số trường hợp thể phân đoạn WordPress đã được cấu hình thay đổi từ tính năng của plugins hoặc themes khác.

Các tiêu chí này hiện tại vẫn được mình áp dụng và dùng cho plugin PXG Utilities để hiển thị quảng cáo ở giữa trang.

Viết code xử lý chèn nội dung vào giữa bài viết

Đăng ký sidebar

Để hiển thị vị trí sidebar trong WordPress/ Widget bạn khai báo hàm sau ở nơi khởi tạo các phương thức chung, thường là tập tin function.php. Đoạn mã này khai báo và đăng ký với WordPress 1 vị trí sidebar mới có id là pxg-utilities-between-details.

add_action( 'widgets_init', 'pxg_utilities_register_sidebars' );
function pxg_utilities_register_sidebars() {
register_sidebar(
        array(
            'id' => 'pxg-utilities-between-details',/*Id sidebar*/
            'name' => __('[PXG] Between details', 'pxg_ultilities' ),/*Tên vị trí sidebar*/
            'description' => __( 'Add content to between details type: page/ post', 'pxg_ultilities' ),/*Mô tả thêm thông tin về sidebar*/
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget' => '</div>'
        )
  );
}

Bước tiếp theo bạn cần khai báo một hàm để lấy nội dung từ sidebar sau đó sử dụng ở hàm hiển thị nội dung. Ở đây mình thêm hàm này vào 1 action để tiện sử dụng cũng như cho phép các thao tác hook vào hàm này từ các bên phát triển plugin, theme khác.

Cụ thể là trong hàm xử lý tiếp theo bạn sẽ thấy mình gọi action này để hiển thị nội dung sidebar qua lệnh do_action('pxg_utilities_content_between_details');

add_action( 'pxg_utilities_content_between_details', 'pxg_utilities_content_between_details');
function pxg_utilities_content_between_details(){
   if(is_active_sidebar( 'pxg-utilities-between-details' ) ){
     dynamic_sidebar( 'pxg-utilities-between-details' );
    }
}

Hiển thị nội dung vào giữa bài viết

Tính năng của đoạn mã cơ như sau: đầu tiên sẽ kiểm tra bài viết hiện tại có phải là is_single không? và không phải là trang chủ. Tiếp theo kiểm tra các tiêu chí cần để hiển thị nội dung. Sau đó sẽ lấy nội dung sidebar đã khởi tạo trước đó nếu có nội dung thì lấy ra hiển thị.

Ở trong ví dụ này mình có viết thêm tùy biến để kiểm tra việc chủ động không hiển thị nội dung sidebar giữa trang là $is_active_between_content, vì thực tế có những trang mình không muốn hiển thị quảng cáo hay các nội dung khác. Bạn có thể xóa biến số này.

add_filter('the_content', 'pxg_ultilities_add_to_between_content',999);
function pxg_ultilities_add_to_between_content($content)
{ 
       if (is_single()&&!is_front_page()) {
         $is_active_between_content=get_post_meta(get_the_ID(),'pxg_legend_is_deactive_between_sidebar',true);
         if (pxg_content_exist_tag('<table>',$content)==false && $is_active_between_content!=='1'){
                    $content_block = explode('</p>',$content);
                    $characterCount=strlen(strip_tags($content));
                    $idxBlockPutSidebar=round(count($content_block)/2);
                    if($idxBlockPutSidebar>=4 && $characterCount>=4000){
                    if(!empty($content_block[$idxBlockPutSidebar]))
                    {   
                        ob_start();
                        do_action('pxg_utilities_content_between_details'); 
                        $output = ob_get_contents();
                        ob_end_clean();
                        $content_block[$idxBlockPutSidebar] .=$output;
                    }
                    for($i=1;$i<count($content_block);$i++)
                    {   $content_block[$i] =$content_block[$i].'</p>';
                    }
                    $content = implode('',$content_block);
                    }
           }
        }
        return '<div class="pxg_thanks_reader">'.$content.'</div>'; 
}

Hàm kiểm tra nội dung có thẻ HTML cụ thể nào không? Hàm này có thể không hoàn toàn chính xác với các bài viết hướng dẫn liên quan tới lập trình và có HTML encode, có thẻ tag: <table>, <tr>, <td>,… trong hướng dẫn (ví dụ là dạng bài giống bài này). Tuy nhiên, ở mức tương đối chúng ta tạm chấp nhận điều này. Ngược lại bạn có thể tùy biến hàm này để kiểm tra thẻ tag chính xác hơn.

function pxg_content_exist_tag($tagHTML,$theContent){
        if(substr_count($theContent,$tagHTML)==0){
            return false;
        }
        else {
           return true;
        }
}

Cơ bản vậy là bạn đã có sidebar đáp ứng việc hiển thị nội dung tùy chỉnh vào giữa bài viết. Dựa vào cấu trúc này bạn có thể tùy biến xây dựng thêm nhiều vị trí sidebar khác để hiển thị dữ liệu.

Đối với những bài viết có sự can thiệp vào nội dung rồi có thể bạn sẽ gặp phải vấn đề về tương thích, khi đó tùy vào từng trường hợp mà bạn điều chỉnh lại hàm pxg_ultilities_add_to_between_contentcho phù hợp.

Một số lỗi thường gặp

Lỗi không thể explode được thẻ <p>

Ở một số Themes, plugins có thể thứ tự hook của hàm the_content sẽ ảnh hưởng tới hàm của bạn, khi đó bạn có thể thử bằng cách thêm index hook của bạn giá trị lớn hơn, ví dụ mình hay đặt 999 như trong code trên add_filter('the_content', 'pxg_ultilities_add_to_between_content',999);

Lỗi vỡ giao diện khi nội dung có thẻ <table>

Cấu trúc HTML của thẻ <table> và các thẻ con sẽ không hỗ trợ việc chèn thẻ khác bất thường vào trong, do đó sẽ phát sinh lỗi nếu nội dung bạn có thẻ <table>.

Giải pháp để xử lý trong trường hợp này là:

• Kiểm tra thêm điều kiện không xử lý sidebar khi nội dung có thẻ <table>. Như bạn thấy trong code mẫu mình có dùng hàm pxg_content_exist_tag để kiểm tra nếu có thẻ <table> thì không xử lý chèn nội dung.
• Viết mã xử lý hiển thị nội dung sau hoặc trước thẻ <table>.

Kiểm chứng kết quả hiển thị đáp ứng

Bạn có thể kiểm tra kết quả hiển thị quảng cáo Google AdSense, nội dung tùy chỉnh đáp ứng tại blog giảm giá polyxgo hoặc blog này sẽ thấy các bài viết đáp ứng các tiêu chí đều hiển thị nội dung, banner quảng cáo ở giữa trang.

Lời kết

Qua chia sẻ trên bạn đã dễ dàng chèn nội dung văn bản (quảng cáo/ văn bản ghi chú) vào giữa bài viết mà không cần sử dụng bất cứ plugin nào khác. Việc tích hợp áp dụng nó sao cho hiệu quả thì còn tuỳ vào tiêu chí của bạn, lúc này bạn có thể tùy biến các điều kiện ở hàm hiển thị. Với mình hiện tại do cần hiển thị nội dung banner quảng cáo của Google AdSense và một số nội dung khác nên mình chỉ kiểm tra điều kiện là độ dài văn bản là tiêu chí chính của mình.

Chúc bạn tích hợp tính năng này hiệu quả. Trong trường hợp cần giải đáp, thắc mắc gì cứ liên hệ mình hỗ trợ nhé!