Shortcode trong WordPress là gì?

Shortcode là một đoạn mã nhỏ được sử dụng trong WordPress để thực hiện các chức năng phức tạp một cách đơn giản. Nó thường được đặt trong dấu ngoặc vuông [] và có thể chèn vào bài viết, trang, hoặc widget. Shortcode giúp người dùng không cần phải biết lập trình cũng có thể thực hiện các tác vụ phức tạp như nhúng video, tạo form liên hệ, hoặc hiển thị nội dung động.

Hướng dẫn chi tiết tạo shortcode nhúng link YouTube xem video dạng popup

Dưới đây là hướng dẫn tạo một shortcode để nhúng video YouTube và hiển thị video đó trong một popup, tương thích với tất cả các màn hình.

1. Bước 1: Thêm thư viện cần thiết

Trước tiên, bạn cần đảm bảo rằng trang web của bạn có các thư viện jQuery và Magnific Popup (một thư viện jQuery cho popup). Nếu bạn chưa có, hãy thêm các thư viện này vào tệp functions.php của theme hoặc plugin của bạn.

function enqueue_popup_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('magnific-popup-js', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array('jquery'), null, true);
    wp_enqueue_style('magnific-popup-css', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_popup_scripts');

2. Bước 2: Tạo Shortcode để nhúng video YouTube

Tiếp theo, bạn tạo shortcode trong tệp functions.php để hiển thị video YouTube trong popup.

function youtube_popup_shortcode($atts) {
    // Lấy các tham số truyền vào shortcode
    $atts = shortcode_atts(array(
        'id' => '', // ID video YouTube
        'text' => 'Watch Video', // Văn bản hiển thị
    ), $atts, 'youtube_popup');

    // Tạo HTML cho link video và cấu trúc popup
    $output = '<a href="https://www.youtube.com/watch?v=' . esc_attr($atts['id']) . '" class="popup-youtube">' . esc_html($atts['text']) . '</a>';

    // Thêm script khởi tạo popup
    $output .= '<script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".popup-youtube").magnificPopup({
                type: "iframe",
                mainClass: "mfp-fade",
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false
            });
        });
    </script>';

    return $output;
}
add_shortcode('youtube_popup', 'youtube_popup_shortcode');

3. Bước 3: Sử dụng Shortcode trong bài viết hoặc trang

Sau khi đã tạo shortcode, bạn có thể sử dụng nó trong bài viết hoặc trang của mình bằng cách chèn đoạn mã dưới đây:

[youtube_popup id="YOUR_VIDEO_ID" text="Xem Video"]

Thay YOUR_VIDEO_ID bằng ID của video YouTube mà bạn muốn nhúng.
Thay Xem Video bằng văn bản bạn muốn hiển thị.

Ví dụ, nếu video của bạn có ID là dQw4w9WgXcQ, bạn sẽ sử dụng:

[youtube_popup id="dQw4w9WgXcQ" text="Xem Video"]

4. Tương thích với tất cả các màn hình

Để đảm bảo popup video tương thích với tất cả các màn hình (responsive), Magnific Popup đã tích hợp sẵn khả năng này. Vì vậy, bạn không cần phải làm thêm gì đặc biệt ngoài việc sử dụng đúng cách thư viện và cấu trúc HTML.

5. Lời kết

Sử dụng shortcode để nhúng video YouTube dạng popup giúp bạn dễ dàng quản lý và tích hợp video trên website của mình. Đây là cách tiếp cận tiện lợi, đặc biệt khi bạn cần tích hợp các tính năng nâng cao mà không cần viết quá nhiều mã phức tạp. Với hướng dẫn này, bạn đã có thể tự tạo shortcode để hiển thị video YouTube trong popup một cách chuyên nghiệp và thân thiện với người dùng.