Thêm widget sau bài viết WordPress

1 ngày ago, WordPress Plugin, Views

Giới Thiệu Widget Sau Bài Viết WordPress

Trong thế giới WordPress, widget là những công cụ nhỏ, linh hoạt giúp bạn thêm nội dung và tính năng vào website một cách dễ dàng. Chúng có thể hiển thị ở nhiều vị trí khác nhau, như sidebar, footer, hoặc thậm chí là sau mỗi bài viết. Việc thêm widget sau bài viết là một cách tuyệt vời để tăng tương tác của người dùng, quảng bá nội dung liên quan, hoặc thu thập địa chỉ email.

Bài viết này sẽ hướng dẫn bạn chi tiết các phương pháp thêm widget sau bài viết WordPress, từ những cách đơn giản nhất sử dụng plugin, đến những phương pháp nâng cao hơn sử dụng code.

Tại Sao Nên Thêm Widget Sau Bài Viết?

Việc thêm widget sau bài viết mang lại nhiều lợi ích cho website của bạn. Dưới đây là một số lý do chính:

Tăng thời gian ở lại trang: Widget có thể hiển thị các bài viết liên quan, giúp người dùng khám phá thêm nội dung trên website của bạn.
Cải thiện tỷ lệ chuyển đổi: Bạn có thể sử dụng widget để quảng bá các sản phẩm, dịch vụ hoặc kêu gọi hành động (CTA), như đăng ký email hoặc theo dõi mạng xã hội.
Nâng cao trải nghiệm người dùng: Widget có thể cung cấp thông tin bổ sung, như thông tin tác giả, bình luận gần đây hoặc các bài viết phổ biến.
Tối ưu hóa SEO: Widget có thể chứa các liên kết nội bộ, giúp cải thiện cấu trúc website và tăng khả năng hiển thị trên các công cụ tìm kiếm.

Các Phương Pháp Thêm Widget Sau Bài Viết

Có nhiều cách để thêm widget sau bài viết WordPress. Dưới đây là một số phương pháp phổ biến:

Sử Dụng Plugin

Đây là cách đơn giản và phổ biến nhất để thêm widget sau bài viết. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện điều này một cách dễ dàng. Một số plugin phổ biến bao gồm:

Ad Inserter: Plugin này cho phép bạn chèn quảng cáo và các loại nội dung khác vào nhiều vị trí khác nhau trên website, bao gồm cả sau bài viết.
Q2W3 Fixed Widget: Plugin này cho phép bạn làm cho widget dính (fixed) khi người dùng cuộn trang, giúp tăng khả năng hiển thị của widget.
Widget Options: Plugin này cho phép bạn kiểm soát widget hiển thị trên các trang và bài viết cụ thể.

Hướng Dẫn Sử Dụng Plugin Ad Inserter

Ad Inserter là một plugin mạnh mẽ và linh hoạt, cho phép bạn chèn code HTML, JavaScript, PHP và các loại nội dung khác vào nhiều vị trí khác nhau trên website. Dưới đây là hướng dẫn sử dụng Ad Inserter để thêm widget sau bài viết:

Cài đặt và kích hoạt plugin: Truy cập vào trang quản trị WordPress, chọn “Plugins” > “Add New”, tìm kiếm “Ad Inserter” và cài đặt, sau đó kích hoạt plugin.
Truy cập vào cài đặt của plugin: Sau khi kích hoạt, bạn sẽ thấy một mục “Ad Inserter” trong menu bên trái. Nhấp vào đó để truy cập vào cài đặt của plugin.
Chọn vị trí chèn: Trong cài đặt của plugin, bạn sẽ thấy nhiều tab với các tùy chọn khác nhau. Để chèn widget sau bài viết, hãy chọn tab “Post Insertion”.
Nhập code widget: Trong tab “Post Insertion”, bạn có thể nhập code HTML của widget mà bạn muốn hiển thị. Ví dụ, bạn có thể chèn code của một form đăng ký email, một banner quảng cáo, hoặc một danh sách các bài viết liênquan.
Chọn vị trí chèn sau bài viết: Trong tab “Post Insertion”, bạn sẽ thấy một tùy chọn để chọn vị trí chèn. Hãy chọn “After Content” để chèn widget sau bài viết.
Lưu cài đặt: Sau khi đã nhập code widget và chọn vị trí chèn, hãy nhấp vào nút “Save Settings” để lưu cài đặt.

Sau khi lưu cài đặt, widget của bạn sẽ được hiển thị sau mỗi bài viết trên website.

Sử Dụng Code (Chỉnh Sửa Theme)

Nếu bạn có kiến thức về code PHP và HTML, bạn có thể thêm widget sau bài viết bằng cách chỉnh sửa file `functions.php` của theme hoặc tạo một child theme để tránh mất các chỉnh sửa khi cập nhật theme.

Tạo Child Theme (Nên Làm)

Việc tạo child theme là một bước quan trọng để đảm bảo rằng các chỉnh sửa của bạn không bị mất khi cập nhật theme. Dưới đây là cách tạo child theme:

Tạo một thư mục mới: Tạo một thư mục mới trong thư mục `wp-content/themes/` và đặt tên cho nó theo cấu trúc `[tên-theme-cha]-child`. Ví dụ, nếu theme cha của bạn là “Twenty Twenty-Three”, thì bạn có thể đặt tên cho thư mục là “twenty-twenty-three-child”.
Tạo file `style.css`: Tạo một file `style.css` trong thư mục child theme và dán đoạn code sau vào:
```
/*
 Theme Name:   Twenty Twenty-Three Child
 Theme URI:    https://example.com/twenty-twenty-three-child/
 Description:  Twenty Twenty-Three Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentythree
 Version:      1.0.0
*/
```
Hãy thay thế các thông tin phù hợp với website của bạn. Quan trọng nhất là dòng `Template: twentytwentythree`, hãy đảm bảo rằng nó khớp với tên thư mục của theme cha.

Tạo file `functions.php`: Tạo một file `functions.php` trong thư mục child theme và dán đoạn code sau vào:


<?php
function twenty_twenty_three_child_enqueue_styles() {

 $parent_style = 'twenty-twenty-three-style';

 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'twenty-twenty-three-child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style ),
 wp_get_theme()->get('Version')
 );
}
add_action( 'wp_enqueue_scripts', 'twenty_twenty_three_child_enqueue_styles' );

Kích hoạt child theme: Truy cập vào trang quản trị WordPress, chọn “Appearance” > “Themes” và kích hoạt child theme của bạn.

Chỉnh Sửa File `functions.php` (Trong Child Theme)

Sau khi đã tạo và kích hoạt child theme, bạn có thể chỉnh sửa file `functions.php` để thêm widget sau bài viết. Dưới đây là ví dụ về code PHP bạn có thể sử dụng:


<?php
function add_widget_after_post($content) {
  if (is_single()) {
    ob_start();
    dynamic_sidebar('after-post-widget');
    $widget_content = ob_get_clean();
    $content .= $widget_content;
  }
  return $content;
}
add_filter('the_content', 'add_widget_after_post');

function register_after_post_widget() {
  register_sidebar(array(
    'name'          => 'Widget Sau Bài Viết',
    'id'            => 'after-post-widget',
    'description'   => 'Widget này sẽ hiển thị sau mỗi bài viết.',
    'before_widget' => '<div class="after-post-widget">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ));
}
add_action('widgets_init', 'register_after_post_widget');

Giải thích code:

`add_widget_after_post()`: Hàm này sẽ chèn widget sau nội dung của bài viết.
`is_single()`: Kiểm tra xem trang hiện tại có phải là một bài viết hay không.
`dynamic_sidebar(‘after-post-widget’)`: Hiển thị widget được gán cho sidebar có id là `after-post-widget`.
`register_sidebar()`: Đăng ký một sidebar mới với tên “Widget Sau Bài Viết” và id là `after-post-widget`.
`add_filter(‘the_content’, ‘add_widget_after_post’)`: Lọc nội dung của bài viết và chèn widget sau nội dung.
`add_action(‘widgets_init’, ‘register_after_post_widget’)`: Chạy hàm `register_after_post_widget()` khi WordPress khởi tạo widget.

Sau khi thêm code này vào file `functions.php`, bạn sẽ thấy một sidebar mới với tên “Widget Sau Bài Viết” trong trang “Appearance” > “Widgets”. Bạn có thể kéo và thả các widget vào sidebar này để hiển thị chúng sau mỗi bài viết.

Sử Dụng Action Hook (Nâng Cao)

Một phương pháp nâng cao hơn là sử dụng action hook. Phương pháp này cho phép bạn chèn widget sau bài viết mà không cần chỉnh sửa file `functions.php` trực tiếp. Bạn có thể sử dụng plugin như “Code Snippets” để thêm code PHP.

Ví dụ:

Cài đặt và kích hoạt plugin “Code Snippets”.

Tạo một snippet mới với code PHP sau:


<?php
add_action( 'genesis_after_entry', 'add_custom_widget_area' );
function add_custom_widget_area() {
    if ( is_singular( 'post' ) ) {
        dynamic_sidebar( 'after-post-widget' );
    }
}

add_action( 'widgets_init', 'register_custom_widget_area' );
function register_custom_widget_area() {
    genesis_register_sidebar( array(
        'id'          => 'after-post-widget',
        'name'        => __( 'After Post Widget', 'your-theme' ),
        'description' => __( 'This is the widget area that appears after a post.', 'your-theme' ),
    ) );
}

Lưu ý: Đoạn code này sử dụng action hook `genesis_after_entry`, chỉ có sẵn trong Genesis Framework. Bạn cần thay đổi action hook này cho phù hợp với theme bạn đang sử dụng. Ví dụ: `the_content` hoặc các hook tương tự khác.

Kích hoạt snippet.

Sau khi kích hoạt snippet, bạn sẽ thấy một sidebar mới trong trang “Appearance” > “Widgets”. Bạn có thể kéo và thả các widget vào sidebar này để hiển thị chúng sau mỗi bài viết.

Lời Khuyên Khi Thêm Widget Sau Bài Viết

Chọn widget phù hợp: Hãy chọn những widget có liên quan đến nội dung của bài viết hoặc mục tiêu của website.
Thiết kế hấp dẫn: Đảm bảo rằng widget được thiết kế đẹp mắt và phù hợp với giao diện tổng thể của website.
Tối ưu hóa tốc độ tải trang: Widget có thể ảnh hưởng đến tốc độ tải trang, vì vậy hãy sử dụng các widget nhẹ và tối ưu hóa chúng để giảm thiểu ảnh hưởng đến tốc độ tải trang.
Kiểm tra trên nhiều thiết bị: Đảm bảo rằng widget hiển thị tốt trên tất cả các thiết bị, từ máy tính để bàn đến điện thoại di động.

Kết Luận

Thêm widget sau bài viết là một cách hiệu quả để tăng tương tác của người dùng, quảng bá nội dung liên quan và cải thiện tỷ lệ chuyển đổi. Bằng cách sử dụng các phương pháp được trình bày trong bài viết này, bạn có thể dễ dàng thêm widget sau bài viết WordPress và tận dụng tối đa lợi ích mà chúng mang lại.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa