Thủ thuật wordpress

Hướng Dẫn Tạo Hệ Thống Quản Lý Video Giống Youtube trên WordPress Bằng Mã PHP

Đăng vào Tháng chín 27, 2024Tháng chín 27, 2024 bởi admin

admin

27/09/2024

9 Phút đọc

85 Lượt xem

Đánh giá

4.2/5 - (100 bình chọn)

Để tạo một danh sách phát video giống như YouTube, bạn sẽ cần xây dựng một hệ thống với một số thành phần cơ bản, bao gồm: giao diện người dùng (UI), xử lý logic danh sách phát, và phần phát video. Dưới đây là cách tiếp cận toàn diện cho việc này:

1. Tạo Custom Post Type cho Video

Đoạn mã sau giúp bạn tạo một Custom Post Type (CPT) mới trong WordPress để quản lý các video.

function muathemewpgiare001_register_video_post_type() {
    $labels = array(
        'name' => 'Videos',
        'singular_name' => 'Video',
        'menu_name' => 'Videos',
        'name_admin_bar' => 'Video',
        'add_new' => 'Add New',
        'add_new_item' => 'Add New Video',
        'new_item' => 'New Video',
        'edit_item' => 'Edit Video',
        'view_item' => 'View Video',
        'all_items' => 'All Videos',
        'search_items' => 'Search Videos',
        'parent_item_colon' => 'Parent Videos:',
        'not_found' => 'No videos found.',
        'not_found_in_trash' => 'No videos found in Trash.',
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'videos'),
        'capability_type' => 'post',
        'has_archive' => true,
        'hierarchical' => false,
        'menu_position' => 5,
        'supports' => array('title', 'editor', 'thumbnail', 'comments'),
    );

    register_post_type('video', $args);
}
add_action('init', 'muathemewpgiare001_register_video_post_type');

function muathemewpgiare001_register_video_post_type() {

$labels = array(

'name' => 'Videos',

'singular_name' => 'Video',

'menu_name' => 'Videos',

'name_admin_bar' => 'Video',

'add_new' => 'Add New',

'add_new_item' => 'Add New Video',

'new_item' => 'New Video',

'edit_item' => 'Edit Video',

'view_item' => 'View Video',

'all_items' => 'All Videos',

'search_items' => 'Search Videos',

'parent_item_colon' => 'Parent Videos:',

'not_found' => 'No videos found.',

'not_found_in_trash' => 'No videos found in Trash.',

);

$args = array(

'labels' => $labels,

'public' => true,

'publicly_queryable' => true,

'show_ui' => true,

'show_in_menu' => true,

'query_var' => true,

'rewrite' => array('slug' => 'videos'),

'capability_type' => 'post',

'has_archive' => true,

'hierarchical' => false,

'menu_position' => 5,

'supports' => array('title', 'editor', 'thumbnail', 'comments'),

);

register_post_type('video', $args);

}

add_action('init', 'muathemewpgiare001_register_video_post_type');

Giải Thích:

register_post_type('video', $args);: Tạo một Custom Post Type có tên là “video”.
$labels: Các nhãn được sử dụng trong phần quản trị WordPress cho loại bài viết “video”.
$args: Định nghĩa các thuộc tính của loại bài viết như:
- public: Cho phép bài viết loại này hiển thị công khai.
- supports: Các thành phần hỗ trợ (tiêu đề, nội dung, hình ảnh, bình luận).
- rewrite: Tùy chỉnh URL slug thành videos.

Sau khi tạo xong, sẽ có giao diện dạng như sau:

Huong Dan Tao He Thong Quan Ly Video Giong Youtube tren WordPress

2. Thêm Meta Box Để Nhập URL Video YouTube

Đoạn mã này thêm một ô tùy chỉnh (meta box) trong trang quản lý video để nhập URL của video YouTube.

function muathemewpgiare001_add_video_url_meta_box() {
    add_meta_box(
        'muathemewpgiare001_video_url',
        'YouTube Video URL',
        'muathemewpgiare001_video_url_callback',
        'video',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'muathemewpgiare001_add_video_url_meta_box');

function muathemewpgiare001_video_url_callback($post) {
    wp_nonce_field('muathemewpgiare001_save_video_url', 'muathemewpgiare001_video_url_nonce');
    $value = get_post_meta($post->ID, '_muathemewpgiare001_video_url', true);
    echo '<label for="muathemewpgiare001_video_url">Video URL: </label>';
    echo '<input type="text" id="muathemewpgiare001_video_url" name="muathemewpgiare001_video_url" value="' . esc_attr($value) . '" size="25" />';
}

function muathemewpgiare001_add_video_url_meta_box() {

add_meta_box(

'muathemewpgiare001_video_url',

'YouTube Video URL',

'muathemewpgiare001_video_url_callback',

'video',

'normal',

'high'

);

}

add_action('add_meta_boxes', 'muathemewpgiare001_add_video_url_meta_box');

function muathemewpgiare001_video_url_callback($post) {

wp_nonce_field('muathemewpgiare001_save_video_url', 'muathemewpgiare001_video_url_nonce');

$value = get_post_meta($post->ID, '_muathemewpgiare001_video_url', true);

echo '<label for="muathemewpgiare001_video_url">Video URL: </label>';

echo '<input type="text" id="muathemewpgiare001_video_url" name="muathemewpgiare001_video_url" value="' . esc_attr($value) . '" size="25" />';

}

Giải Thích:

add_meta_box: Thêm một meta box vào trang chỉnh sửa video.
muathemewpgiare001_video_url_callback: Hàm hiển thị trường nhập URL cho video.
wp_nonce_field: Tạo nonce để xác thực khi lưu dữ liệu, giúp bảo mật.

3. Lưu URL Video YouTube

Đoạn mã này lưu URL video vào cơ sở dữ liệu khi bạn cập nhật hoặc đăng bài viết video.

function muathemewpgiare001_save_video_url($post_id) {
    if (!isset($_POST['muathemewpgiare001_video_url_nonce']) || !wp_verify_nonce($_POST['muathemewpgiare001_video_url_nonce'], 'muathemewpgiare001_save_video_url')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['muathemewpgiare001_video_url'])) {
        $video_url = sanitize_text_field($_POST['muathemewpgiare001_video_url']);
        update_post_meta($post_id, '_muathemewpgiare001_video_url', $video_url);
    }
}
add_action('save_post', 'muathemewpgiare001_save_video_url');

function muathemewpgiare001_save_video_url($post_id) {

if (!isset($_POST['muathemewpgiare001_video_url_nonce']) || !wp_verify_nonce($_POST['muathemewpgiare001_video_url_nonce'], 'muathemewpgiare001_save_video_url')) {

return;

}

if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {

return;

}

if (!current_user_can('edit_post', $post_id)) {

return;

}

if (isset($_POST['muathemewpgiare001_video_url'])) {

$video_url = sanitize_text_field($_POST['muathemewpgiare001_video_url']);

update_post_meta($post_id, '_muathemewpgiare001_video_url', $video_url);

}

add_action('save_post', 'muathemewpgiare001_save_video_url');

Giải Thích:

sanitize_text_field: Lọc đầu vào để loại bỏ các ký tự không an toàn.
update_post_meta: Lưu URL video vào cơ sở dữ liệu.

4. Tạo Shortcode Hiển Thị Danh Sách Phát Video

Shortcode này cho phép bạn hiển thị danh sách các video với trình phát video tùy chỉnh.

function muathemewpgiare001_video_shortcode($atts) {
    $atts = shortcode_atts(array('category' => ''), $atts, 'youtube_playlist');

    ob_start();

    $args = array(
        'post_type' => 'video',
        'posts_per_page' => 10,
    );

    if (!empty($atts['category'])) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'video_category',
                'field' => 'slug',
                'terms' => $atts['category'],
            ),
        );
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<div class="muathemewpgiare001-container">';
        echo '<div class="muathemewpgiare001-video-player">';
        echo '<iframe id="muathemewpgiare001-main-video" width="100%" height="400" src="" frameborder="0" allowfullscreen></iframe>';
        echo '<div class="muathemewpgiare001-video-info">';
        echo '<h2 id="muathemewpgiare001-video-title"></h2>';
        echo '<p id="muathemewpgiare001-video-description"></p>';
        echo '</div></div>';

        echo '<div class="muathemewpgiare001-playlist">';
        echo '<h3>Up Next</h3>';
        echo '<ul id="muathemewpgiare001-playlist">';

        while ($query->have_posts()) {
            $query->the_post();
            $video_url = get_post_meta(get_the_ID(), '_muathemewpgiare001_video_url', true);
            $title = get_the_title();
            $description = get_the_excerpt();
            $thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail');
            $embed_url = muathemewpgiare001_convert_to_embed_url($video_url);

            echo '<li data-src="' . esc_url($embed_url) . '" data-title="' . esc_html($title) . '" data-description="' . esc_html($description) . '">';
            echo '<img src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . ' Thumbnail">';
            echo '<div class="muathemewpgiare001-video-meta">';
            echo '<h4>' . esc_html($title) . '</h4>';
            echo '<p>' . esc_html($description) . '</p>';
            echo '</div></li>';
        }

        echo '</ul></div></div>';
    }

    wp_reset_postdata();

    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        var playlistItems = document.querySelectorAll('#muathemewpgiare001-playlist li');
        var mainVideo = document.getElementById('muathemewpgiare001-main-video');
        var videoTitle = document.getElementById('muathemewpgiare001-video-title');
        var videoDescription = document.getElementById('muathemewpgiare001-video-description');

if (playlistItems.length > 0) {
            var firstItem = playlistItems[0];
            mainVideo.src = firstItem.getAttribute('data-src');
            videoTitle.textContent = firstItem.getAttribute('data-title');
            videoDescription.textContent = firstItem.getAttribute('data-description');
        }

        playlistItems.forEach(function (item) {
            item.addEventListener('click', function () {
                var videoSrc = item.getAttribute('data-src');
                var title = item.getAttribute('data-title');
                var description = item.getAttribute('data-description');

                mainVideo.src = videoSrc;
                videoTitle.textContent = title;
                videoDescription.textContent = description;
            });
        });
    });
    </script>
    <?php

    return ob_get_clean();
}
add_shortcode('youtube_playlist', 'muathemewpgiare001_video_shortcode');            var firstItem = playlistItems[0];
            mainVideo.src = firstItem.getAttribute('data-src');
            videoTitle.textContent = firstItem.getAttribute('data-title');
            videoDescription.textContent = firstItem.getAttribute('data-description');
        }

        playlistItems.forEach(function (item) {
            item.addEventListener('click', function () {

function muathemewpgiare001_video_shortcode($atts) {

$atts = shortcode_atts(array('category' => ''), $atts, 'youtube_playlist');

ob_start();

$args = array(

'post_type' => 'video',

'posts_per_page' => 10,

);

if (!empty($atts['category'])) {

$args['tax_query'] = array(

array(

'taxonomy' => 'video_category',

'field' => 'slug',

'terms' => $atts['category'],

);

}

$query = new WP_Query($args);

if ($query->have_posts()) {

echo '<div class="muathemewpgiare001-container">';

echo '<div class="muathemewpgiare001-video-player">';

echo '<iframe id="muathemewpgiare001-main-video" width="100%" height="400" src="" frameborder="0" allowfullscreen></iframe>';

echo '<div class="muathemewpgiare001-video-info">';

echo '<h2 id="muathemewpgiare001-video-title"></h2>';

echo '<p id="muathemewpgiare001-video-description"></p>';

echo '</div></div>';

echo '<div class="muathemewpgiare001-playlist">';

echo '<h3>Up Next</h3>';

echo '<ul id="muathemewpgiare001-playlist">';

while ($query->have_posts()) {

$query->the_post();

$video_url = get_post_meta(get_the_ID(), '_muathemewpgiare001_video_url', true);

$title = get_the_title();

$description = get_the_excerpt();

$thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail');

$embed_url = muathemewpgiare001_convert_to_embed_url($video_url);

echo '<li data-src="' . esc_url($embed_url) . '" data-title="' . esc_html($title) . '" data-description="' . esc_html($description) . '">';

echo '<img src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . ' Thumbnail">';

echo '<div class="muathemewpgiare001-video-meta">';

echo '<h4>' . esc_html($title) . '</h4>';

echo '<p>' . esc_html($description) . '</p>';

echo '</div></li>';

}

echo '</ul></div></div>';

}

wp_reset_postdata();

document.addEventListener('DOMContentLoaded', function () {

var playlistItems = document.querySelectorAll('#muathemewpgiare001-playlist li');

var mainVideo = document.getElementById('muathemewpgiare001-main-video');

var videoTitle = document.getElementById('muathemewpgiare001-video-title');

var videoDescription = document.getElementById('muathemewpgiare001-video-description');

if (playlistItems.length > 0) {

var firstItem = playlistItems[0];

mainVideo.src = firstItem.getAttribute('data-src');

videoTitle.textContent = firstItem.getAttribute('data-title');

videoDescription.textContent = firstItem.getAttribute('data-description');

}

playlistItems.forEach(function (item) {

item.addEventListener('click', function () {

var videoSrc = item.getAttribute('data-src');

var title = item.getAttribute('data-title');

var description = item.getAttribute('data-description');

mainVideo.src = videoSrc;

videoTitle.textContent = title;

videoDescription.textContent = description;

});

</script>

<?php

return ob_get_clean();

}

add_shortcode('youtube_playlist', 'muathemewpgiare001_video_shortcode'); var firstItem = playlistItems[0];

mainVideo.src = firstItem.getAttribute('data-src');

videoTitle.textContent = firstItem.getAttribute('data-title');

videoDescription.textContent = firstItem.getAttribute('data-description');

}

playlistItems.forEach(function (item) {

item.addEventListener('click', function () {

Giải Thích:

shortcode_atts: Lấy các thuộc tính từ shortcode để lọc video theo danh mục.
WP_Query: Truy vấn các video dựa trên loại bài viết và danh mục nếu có.
ob_start(): Bắt đầu lưu trữ đầu ra HTML vào bộ đệm để trả về cuối cùng.
JavaScript: Tạo sự kiện cho danh sách video. Khi người dùng nhấp vào một video, iframe sẽ cập nhật để phát video đó.

5. Thêm Tính Năng Duplicate Video

Tính năng này cho phép bạn sao chép một video hiện có.

// Thêm tùy chọn 'Duplicate' vào danh sách các hành động của bài viết
function muathemewpgiare001_duplicate_video_link($actions, $post) {
    if ($post->post_type == 'video') {
        $actions['duplicate'] = '<a href="' . wp_nonce_url('admin.php?action=muathemewpgiare001_duplicate_video&post=' . $post->ID, basename(__FILE__), 'duplicate_nonce') . '" title="Duplicate this video" rel="permalink">Duplicate</a>';
    }
    return $actions;
}
add_filter('post_row_actions', 'muathemewpgiare001_duplicate_video_link', 10, 2);

// Xử lý hành động duplicate video
function muathemewpgiare001_duplicate_video() {
    if (!isset($_GET['post']) || !isset($_GET['duplicate_nonce']) || !wp_verify_nonce($_GET['duplicate_nonce'], basename(__FILE__))) {
        return;
    }

    $post_id = absint($_GET['post']);
    $post = get_post($post_id);

    if (isset($post) && $post != null) {
        $new_post = array(
            'post_title'    => $post->post_title . ' (Copy)',
            'post_content'  => $post->post_content,
            'post_status'   => 'draft',
            'post_type'     => $post->post_type,
        );

        $new_post_id = wp_insert_post($new_post);

        // Copy meta dữ liệu
        $meta_data = get_post_meta($post_id);
        foreach ($meta_data as $key => $values) {
            foreach ($values as $value) {
                add_post_meta($new_post_id, $key, $value);
            }
        }

        // Copy danh mục
        $taxonomies = get_object_taxonomies($post->post_type);
        foreach ($taxonomies as $taxonomy) {
            $post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));
            wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
        }

        wp_redirect(admin_url('post.php?action=edit&post=' . $new_post_id));
        exit;
    } else {
        wp_die('Post duplication failed, could not find original post: ' . $post_id);
    }
}
add_action('admin_action_muathemewpgiare001_duplicate_video', 'muathemewpgiare001_duplicate_video');

// Thêm tùy chọn 'Duplicate' vào danh sách các hành động của bài viết

function muathemewpgiare001_duplicate_video_link($actions, $post) {

if ($post->post_type == 'video') {

$actions['duplicate'] = '<a href="' . wp_nonce_url('admin.php?action=muathemewpgiare001_duplicate_video&post=' . $post->ID, basename(__FILE__), 'duplicate_nonce') . '" title="Duplicate this video" rel="permalink">Duplicate</a>';

}

return $actions;

}

add_filter('post_row_actions', 'muathemewpgiare001_duplicate_video_link', 10, 2);

// Xử lý hành động duplicate video

function muathemewpgiare001_duplicate_video() {

if (!isset($_GET['post']) || !isset($_GET['duplicate_nonce']) || !wp_verify_nonce($_GET['duplicate_nonce'], basename(__FILE__))) {

return;

}

$post_id = absint($_GET['post']);

$post = get_post($post_id);

if (isset($post) && $post != null) {

$new_post = array(

'post_title' => $post->post_title . ' (Copy)',

'post_content' => $post->post_content,

'post_status' => 'draft',

'post_type' => $post->post_type,

);

$new_post_id = wp_insert_post($new_post);

// Copy meta dữ liệu

$meta_data = get_post_meta($post_id);

foreach ($meta_data as $key => $values) {

foreach ($values as $value) {

add_post_meta($new_post_id, $key, $value);

}

// Copy danh mục

$taxonomies = get_object_taxonomies($post->post_type);

foreach ($taxonomies as $taxonomy) {

$post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));

wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);

}

wp_redirect(admin_url('post.php?action=edit&post=' . $new_post_id));

exit;

} else {

wp_die('Post duplication failed, could not find original post: ' . $post_id);

}

add_action('admin_action_muathemewpgiare001_duplicate_video', 'muathemewpgiare001_duplicate_video');

Giải Thích:

muathemewpgiare001_duplicate_video_link: Thêm tùy chọn “Duplicate” vào danh sách các bài viết trong admin.
muathemewpgiare001_duplicate_video: Xử lý hành động khi người dùng nhấp vào “Duplicate”. Hàm này sao chép tất cả các thuộc tính của video, bao gồm tiêu đề, nội dung, meta dữ liệu và taxonomy, sau đó tạo một video mới.

6. Thêm Danh Mục Video

Thêm taxonomy (danh mục) cho video giúp tổ chức và quản lý video một cách hiệu quả.

// Đăng ký taxonomy (Danh mục) cho Custom Post Type video
function muathemewpgiare001_register_video_taxonomy() {
    $labels = array(
        'name'              => _x('Danh mục Video', 'taxonomy general name', 'textdomain'),
        'singular_name'     => _x('Danh mục Video', 'taxonomy singular name', 'textdomain'),
        'search_items'      => __('Tìm kiếm Danh mục Video', 'textdomain'),
        'all_items'         => __('Tất cả Danh mục Video', 'textdomain'),
        'parent_item'       => __('Danh mục cha', 'textdomain'),
        'parent_item_colon' => __('Danh mục cha:', 'textdomain'),
        'edit_item'         => __('Sửa Danh mục Video', 'textdomain'),
        'update_item'       => __('Cập nhật Danh mục Video', 'textdomain'),
        'add_new_item'      => __('Thêm mới Danh mục Video', 'textdomain'),
        'new_item_name'     => __('Tên Danh mục Video mới', 'textdomain'),
        'menu_name'         => __('Danh mục Video', 'textdomain'),
    );

    $args = array(
        'hierarchical'      => true,
        'labels'            => $labels,
        'show_ui'           => true,
        'show_admin_column' => true,
        'query_var'         => true,
        'rewrite'           => array('slug' => 'video-category'),
    );

    register_taxonomy('video_category', array('video'), $args);
}
add_action('init', 'muathemewpgiare001_register_video_taxonomy');

// Đăng ký taxonomy (Danh mục) cho Custom Post Type video

function muathemewpgiare001_register_video_taxonomy() {

$labels = array(

'name' => _x('Danh mục Video', 'taxonomy general name', 'textdomain'),

'singular_name' => _x('Danh mục Video', 'taxonomy singular name', 'textdomain'),

'search_items' => __('Tìm kiếm Danh mục Video', 'textdomain'),

'all_items' => __('Tất cả Danh mục Video', 'textdomain'),

'parent_item' => __('Danh mục cha', 'textdomain'),

'parent_item_colon' => __('Danh mục cha:', 'textdomain'),

'edit_item' => __('Sửa Danh mục Video', 'textdomain'),

'update_item' => __('Cập nhật Danh mục Video', 'textdomain'),

'add_new_item' => __('Thêm mới Danh mục Video', 'textdomain'),

'new_item_name' => __('Tên Danh mục Video mới', 'textdomain'),

'menu_name' => __('Danh mục Video', 'textdomain'),

);

$args = array(

'hierarchical' => true,

'labels' => $labels,

'show_ui' => true,

'show_admin_column' => true,

'query_var' => true,

'rewrite' => array('slug' => 'video-category'),

);

register_taxonomy('video_category', array('video'), $args);

}

add_action('init', 'muathemewpgiare001_register_video_taxonomy');

Giải Thích:

register_taxonomy: Tạo một taxonomy mới có tên là “video_category” cho loại bài viết “video”.
$labels: Định nghĩa các nhãn cho taxonomy.
$args: Các tham số như khả năng hiển thị trong admin, URL slug và cấu trúc phân cấp.

7. Thêm CSS cho Giao Diện Video

Đoạn mã CSS sau đây sẽ giúp cải thiện giao diện cho danh sách video, giúp nó dễ nhìn và thân thiện với người dùng.

function muathemewpgiare001_enqueue_styles() {
    echo '
    <style>
    /* Container tổng cho trình phát video và danh sách phát */
    .muathemewpgiare001-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 1200px;
        margin: 20px auto;
    }

    /* Khung phát video */
    .muathemewpgiare001-video-player {
        width: 70%;
        background-color: #000;
        padding: 10px;
        border-radius: 5px;
    }

    .muathemewpgiare001-video-player iframe {
        width: 100%;
        height: 400px;
        border-radius: 5px;
    }

    /* Thông tin video */
    .muathemewpgiare001-video-info {
        margin-top: 15px;
        color: #333;
    }

    .muathemewpgiare001-video-info h2 {
        font-size: 24px;
        margin: 0;
        padding: 0;
    }

    .muathemewpgiare001-video-info p {
        font-size: 14px;
        color: #666;
    }

    /* Khung danh sách phát */
    .muathemewpgiare001-playlist {
        width: 28%;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-height: 450px;
        overflow-y: auto;
    }

    .muathemewpgiare001-playlist h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* Danh sách các video */
    #muathemewpgiare001-playlist {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #muathemewpgiare001-playlist li {
        display: flex;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
        transition: background-color 0.3s ease;
    }

    #muathemewpgiare001-playlist li:hover {
        background-color: #f0f0f0;
    }

    /* Thumbnail của video trong danh sách phát */
    #muathemewpgiare001-playlist img {
        width: 120px;
        height: 80px;
        margin-right: 10px;
        border-radius: 5px;
    }

    /* Thông tin video trong danh sách phát */
    .muathemewpgiare001-video-meta h4 {
        margin: 0;
        font-size: 16px;
        color: #000;
    }

    .muathemewpgiare001-video-meta p {
        margin: 5px 0 0;
        font-size: 12px;
        color: #666;
    }

    /* Làm cho khung phát video và danh sách phát thích ứng với màn hình nhỏ hơn */
    @media (max-width: 768px) {
        .muathemewpgiare001-container {
            flex-direction: column;
            padding: 10px;
        }

        .muathemewpgiare001-video-player {
            width: 100%;
        }

        .muathemewpgiare001-playlist {
            width: 100%;
            margin-top: 20px;
        }

        .muathemewpgiare001-playlist h3 {
            text-align: center;
        }
    }
    </style>';
}
add_action('wp_head', 'muathemewpgiare001_enqueue_styles');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

function muathemewpgiare001_enqueue_styles() {

echo '

<style>

/* Container tổng cho trình phát video và danh sách phát */

.muathemewpgiare001-container {

display: flex;

flex-direction: row;

justify-content: space-between;

background-color: #f9f9f9;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

max-width: 1200px;

margin: 20px auto;

}

/* Khung phát video */

.muathemewpgiare001-video-player {

width: 70%;

background-color: #000;

padding: 10px;

border-radius: 5px;

}

.muathemewpgiare001-video-player iframe {

width: 100%;

height: 400px;

border-radius: 5px;

}

/* Thông tin video */

.muathemewpgiare001-video-info {

margin-top: 15px;

color: #333;

}

.muathemewpgiare001-video-info h2 {

font-size: 24px;

margin: 0;

padding: 0;

}

.muathemewpgiare001-video-info p {

font-size: 14px;

color: #666;

}

/* Khung danh sách phát */

.muathemewpgiare001-playlist {

width: 28%;

padding: 20px;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

max-height: 450px;

overflow-y: auto;

}

.muathemewpgiare001-playlist h3 {

font-size: 18px;

margin-bottom: 15px;

}

/* Danh sách các video */

#muathemewpgiare001-playlist {

list-style: none;

padding: 0;

margin: 0;

}

#muathemewpgiare001-playlist li {

display: flex;

align-items: center;

padding: 10px;

cursor: pointer;

border-bottom: 1px solid #ddd;

transition: background-color 0.3s ease;

}

#muathemewpgiare001-playlist li:hover {

background-color: #f0f0f0;

}

/* Thumbnail của video trong danh sách phát */

#muathemewpgiare001-playlist img {

width: 120px;

height: 80px;

margin-right: 10px;

border-radius: 5px;

}

/* Thông tin video trong danh sách phát */

.muathemewpgiare001-video-meta h4 {

margin: 0;

font-size: 16px;

color: #000;

}

.muathemewpgiare001-video-meta p {

margin: 5px 0 0;

font-size: 12px;

color: #666;

}

/* Làm cho khung phát video và danh sách phát thích ứng với màn hình nhỏ hơn */

@media (max-width: 768px) {

.muathemewpgiare001-container {

flex-direction: column;

padding: 10px;

}

.muathemewpgiare001-video-player {

width: 100%;

}

.muathemewpgiare001-playlist {

width: 100%;

margin-top: 20px;

}

.muathemewpgiare001-playlist h3 {

text-align: center;

}

</style>';

}

add_action('wp_head', 'muathemewpgiare001_enqueue_styles');

Giải Thích:

Responsive Design: Đoạn mã CSS sử dụng media queries để đảm bảo rằng giao diện video có thể hiển thị tốt trên các thiết bị di động bằng cách thay đổi bố cục từ hàng (row) sang cột (column) khi màn hình nhỏ hơn 768px.
Giao Diện Hiện Đại: Các thuộc tính như bo góc, màu nền, và đổ bóng giúp tạo cảm giác hiện đại và thân thiện cho người dùng.

8. Chuyển Đổi URL Video sang Dạng Nhúng

Hàm sau đây giúp chuyển đổi URL video từ YouTube sang định dạng nhúng, đảm bảo video có thể được phát trong iframe.

function muathemewpgiare001_convert_to_embed_url($url) {
    if (strpos($url, 'youtube.com/watch?v=') !== false) {
        $video_id = explode('v=', $url)[1];
        $ampersand_position = strpos($video_id, '&');
        if ($ampersand_position !== false) {
            $video_id = substr($video_id, 0, $ampersand_position);
        }
        return 'https://www.youtube.com/embed/' . $video_id;
    } elseif (strpos($url, 'youtu.be/') !== false) {
        $video_id = explode('youtu.be/', $url)[1];
        return 'https://www.youtube.com/embed/' . $video_id;
    }
    // Nếu không phải là URL YouTube, trả về nguyên bản
    return $url;
}

function muathemewpgiare001_convert_to_embed_url($url) {

if (strpos($url, 'youtube.com/watch?v=') !== false) {

$video_id = explode('v=', $url)[1];

$ampersand_position = strpos($video_id, '&');

if ($ampersand_position !== false) {

$video_id = substr($video_id, 0, $ampersand_position);

}

return 'https://www.youtube.com/embed/' . $video_id;

} elseif (strpos($url, 'youtu.be/') !== false) {

$video_id = explode('youtu.be/', $url)[1];

return 'https://www.youtube.com/embed/' . $video_id;

}

// Nếu không phải là URL YouTube, trả về nguyên bản

return $url;

}

Giải Thích:

Xử lý URL: Hàm kiểm tra xem URL có phải là URL YouTube không và trích xuất video_id để tạo ra URL nhúng (embed).
Hỗ trợ Nhiều Định Dạng URL: Hàm hỗ trợ cả hai định dạng URL youtube.com và youtu.be.

Huong Dan Tao He Thong Quan Ly Video Giong Youtube tren WordPress Bang Ma PHP

9. Kết Luận

Bằng cách thực hiện các bước trên, bạn đã tạo ra một hệ thống quản lý video mạnh mẽ trên WordPress, cho phép bạn:

Tạo và quản lý video thông qua một loại bài viết tùy chỉnh.
Nhập và lưu URL video YouTube.
Tạo danh mục cho video để dễ dàng phân loại và tìm kiếm.
Hiển thị danh sách video trong một giao diện tương tự như YouTube, với chức năng phát video mượt mà.
Sao chép video dễ dàng với tính năng duplicate.

Dưới đây là toàn bộ code hoàn chỉnh nhé, các bạn về có thể cải tiến thêm để hoàn thiện theo nhu cầu của mọi người nhé:

function muathemewpgiare001_register_video_post_type() {
    $labels = array(
        'name' => 'Videos',
        'singular_name' => 'Video',
        'menu_name' => 'Videos',
        'name_admin_bar' => 'Video',
        'add_new' => 'Add New',
        'add_new_item' => 'Add New Video',
        'new_item' => 'New Video',
        'edit_item' => 'Edit Video',
        'view_item' => 'View Video',
        'all_items' => 'All Videos',
        'search_items' => 'Search Videos',
        'parent_item_colon' => 'Parent Videos:',
        'not_found' => 'No videos found.',
        'not_found_in_trash' => 'No videos found in Trash.',
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'query_var' => true,
        'rewrite' => array('slug' => 'videos'),
        'capability_type' => 'post',
        'has_archive' => true,
        'hierarchical' => false,
        'menu_position' => 5,
        'supports' => array('title', 'editor', 'thumbnail', 'comments'),
    );

    register_post_type('video', $args);
}
add_action('init', 'muathemewpgiare001_register_video_post_type');
function muathemewpgiare001_add_video_url_meta_box() {
    add_meta_box(
        'muathemewpgiare001_video_url',
        'YouTube Video URL',
        'muathemewpgiare001_video_url_callback',
        'video',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'muathemewpgiare001_add_video_url_meta_box');

function muathemewpgiare001_video_url_callback($post) {
    wp_nonce_field('muathemewpgiare001_save_video_url', 'muathemewpgiare001_video_url_nonce');
    $value = get_post_meta($post->ID, '_muathemewpgiare001_video_url', true);
    echo '<label for="muathemewpgiare001_video_url">Video URL: </label>';
    echo '<input type="text" id="muathemewpgiare001_video_url" name="muathemewpgiare001_video_url" value="' . esc_attr($value) . '" size="25" />';
}

function muathemewpgiare001_save_video_url($post_id) {
    if (!isset($_POST['muathemewpgiare001_video_url_nonce'])) {
        return;
    }
    if (!wp_verify_nonce($_POST['muathemewpgiare001_video_url_nonce'], 'muathemewpgiare001_save_video_url')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['muathemewpgiare001_video_url'])) {
        $video_url = sanitize_text_field($_POST['muathemewpgiare001_video_url']);
        update_post_meta($post_id, '_muathemewpgiare001_video_url', $video_url);
    }
}
add_action('save_post', 'muathemewpgiare001_save_video_url');
function muathemewpgiare001_video_shortcode($atts) {
    // Lấy giá trị thuộc tính 'category' từ shortcode
    $atts = shortcode_atts(
        array(
            'category' => '', // Danh mục cần hiển thị (slug)
        ),
        $atts,
        'youtube_playlist'
    );

    ob_start();

    // Lấy danh mục nếu có
    $args = array(
        'post_type' => 'video',
        'posts_per_page' => 10,
    );

    if (!empty($atts['category'])) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'video_category',
                'field'    => 'slug',
                'terms'    => $atts['category'],
            ),
        );
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<div class="muathemewpgiare001-container">';
        echo '<div class="muathemewpgiare001-video-player">';
        echo '<iframe id="muathemewpgiare001-main-video" width="100%" height="400" src="" frameborder="0" allowfullscreen></iframe>';
        echo '<div class="muathemewpgiare001-video-info">';
        echo '<h2 id="muathemewpgiare001-video-title"></h2>';
        echo '<p id="muathemewpgiare001-video-description"></p>';
        echo '</div></div>';

        echo '<div class="muathemewpgiare001-playlist">';
        echo '<h3>Up Next</h3>';
        echo '<ul id="muathemewpgiare001-playlist">';

        while ($query->have_posts()) {
            $query->the_post();
            $video_url = get_post_meta(get_the_ID(), '_muathemewpgiare001_video_url', true);
            $title = get_the_title();
            $description = get_the_excerpt();
            $thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail');

            // Chuyển đổi URL video thành dạng nhúng
            $embed_url = muathemewpgiare001_convert_to_embed_url($video_url);

            echo '<li data-src="' . esc_url($embed_url) . '" data-title="' . esc_html($title) . '" data-description="' . esc_html($description) . '">';
            echo '<img src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . ' Thumbnail">';
            echo '<div class="muathemewpgiare001-video-meta">';
            echo '<h4>' . esc_html($title) . '</h4>';
            echo '<p>' . esc_html($description) . '</p>';
            echo '</div></li>';
        }

        echo '</ul></div></div>';
    }

    wp_reset_postdata();

    // Nhúng JavaScript vào shortcode
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        var playlistItems = document.querySelectorAll('#muathemewpgiare001-playlist li');
        var mainVideo = document.getElementById('muathemewpgiare001-main-video');
        var videoTitle = document.getElementById('muathemewpgiare001-video-title');
        var videoDescription = document.getElementById('muathemewpgiare001-video-description');

        if (playlistItems.length > 0) {
            var firstItem = playlistItems[0];
            mainVideo.src = firstItem.getAttribute('data-src');
            videoTitle.textContent = firstItem.getAttribute('data-title');
            videoDescription.textContent = firstItem.getAttribute('data-description');
        }

        playlistItems.forEach(function (item) {
            item.addEventListener('click', function () {
                var videoSrc = item.getAttribute('data-src');
                var title = item.getAttribute('data-title');
                var description = item.getAttribute('data-description');

                mainVideo.src = videoSrc;
                videoTitle.textContent = title;
                videoDescription.textContent = description;
            });
        });
    });
    </script>
    <?php

    return ob_get_clean();
}
add_shortcode('youtube_playlist', 'muathemewpgiare001_video_shortcode');
// Thêm tùy chọn 'Duplicate' vào danh sách các hành động của bài viết
function muathemewpgiare001_duplicate_video_link($actions, $post) {
    if ($post->post_type == 'video') {
        $actions['duplicate'] = '<a href="' . wp_nonce_url('admin.php?action=muathemewpgiare001_duplicate_video&post=' . $post->ID, basename(__FILE__), 'duplicate_nonce') . '" title="Duplicate this video" rel="permalink">Duplicate</a>';
    }
    return $actions;
}
add_filter('post_row_actions', 'muathemewpgiare001_duplicate_video_link', 10, 2);

// Xử lý hành động duplicate video
function muathemewpgiare001_duplicate_video() {
    if (!isset($_GET['post']) || !isset($_GET['duplicate_nonce']) || !wp_verify_nonce($_GET['duplicate_nonce'], basename(__FILE__))) {
        return;
    }

    $post_id = absint($_GET['post']);
    $post = get_post($post_id);

    if (isset($post) && $post != null) {
        $new_post = array(
            'post_title'    => $post->post_title . ' (Copy)',
            'post_content'  => $post->post_content,
            'post_status'   => 'draft',
            'post_type'     => $post->post_type,
        );

        $new_post_id = wp_insert_post($new_post);

        // Copy meta dữ liệu
        $meta_data = get_post_meta($post_id);
        foreach ($meta_data as $key => $values) {
            foreach ($values as $value) {
                add_post_meta($new_post_id, $key, $value);
            }
        }

        // Copy danh mục
        $taxonomies = get_object_taxonomies($post->post_type);
        foreach ($taxonomies as $taxonomy) {
            $post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));
            wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);
        }

        wp_redirect(admin_url('post.php?action=edit&post=' . $new_post_id));
        exit;
    } else {
        wp_die('Post duplication failed, could not find original post: ' . $post_id);
    }
}
add_action('admin_action_muathemewpgiare001_duplicate_video', 'muathemewpgiare001_duplicate_video');


function muathemewpgiare001_enqueue_styles() {
    echo '
    <style>
    /* Container tổng cho trình phát video và danh sách phát */
    .muathemewpgiare001-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 1200px;
        margin: 20px auto;
    }

    /* Khung phát video */
    .muathemewpgiare001-video-player {
        width: 70%;
        background-color: #000;
        padding: 10px;
        border-radius: 5px;
    }

    .muathemewpgiare001-video-player iframe {
        width: 100%;
        height: 400px;
        border-radius: 5px;
    }

    /* Thông tin video */
    .muathemewpgiare001-video-info {
        margin-top: 15px;
        color: #333;
    }

    .muathemewpgiare001-video-info h2 {
        font-size: 24px;
        margin: 0;
        padding: 0;
    }

    .muathemewpgiare001-video-info p {
        font-size: 14px;
        color: #666;
    }

    /* Khung danh sách phát */
    .muathemewpgiare001-playlist {
        width: 28%;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-height: 450px;
        overflow-y: auto;
    }

    .muathemewpgiare001-playlist h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* Danh sách các video */
    #muathemewpgiare001-playlist {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #muathemewpgiare001-playlist li {
        display: flex;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
        transition: background-color 0.3s ease;
    }

    #muathemewpgiare001-playlist li:hover {
        background-color: #f0f0f0;
    }

    /* Thumbnail của video trong danh sách phát */
    #muathemewpgiare001-playlist img {
        width: 120px;
        height: 80px;
        margin-right: 10px;
        border-radius: 5px;
    }

    /* Thông tin video trong danh sách phát */
    .muathemewpgiare001-video-meta h4 {
        margin: 0;
        font-size: 16px;
        color: #000;
    }

    .muathemewpgiare001-video-meta p {
        margin: 5px 0 0;
        font-size: 12px;
        color: #666;
    }

    /* Làm cho khung phát video và danh sách phát thích ứng với màn hình nhỏ hơn */
    @media (max-width: 768px) {
        .muathemewpgiare001-container {
            flex-direction: column;
            padding: 10px;
        }

        .muathemewpgiare001-video-player {
            width: 100%;
        }

        .muathemewpgiare001-playlist {
            width: 100%;
            margin-top: 20px;
        }

        .muathemewpgiare001-playlist h3 {
            text-align: center;
        }
    }
    </style>';
}
add_action('wp_head', 'muathemewpgiare001_enqueue_styles');
function muathemewpgiare001_convert_to_embed_url($url) {
    if (strpos($url, 'youtube.com/watch?v=') !== false) {
        $video_id = explode('v=', $url)[1];
        $ampersand_position = strpos($video_id, '&');
        if ($ampersand_position !== false) {
            $video_id = substr($video_id, 0, $ampersand_position);
        }
        return 'https://www.youtube.com/embed/' . $video_id;
    } elseif (strpos($url, 'youtu.be/') !== false) {
        $video_id = explode('youtu.be/', $url)[1];
        return 'https://www.youtube.com/embed/' . $video_id;
    }
    // Nếu không phải là URL YouTube, trả về nguyên bản
    return $url;
}
// Đăng ký taxonomy (Danh mục) cho Custom Post Type video
function muathemewpgiare001_register_video_taxonomy() {
    $labels = array(
        'name'              => _x('Danh mục Video', 'taxonomy general name', 'textdomain'),
        'singular_name'     => _x('Danh mục Video', 'taxonomy singular name', 'textdomain'),
        'search_items'      => __('Tìm kiếm Danh mục Video', 'textdomain'),
        'all_items'         => __('Tất cả Danh mục Video', 'textdomain'),
        'parent_item'       => __('Danh mục cha', 'textdomain'),
        'parent_item_colon' => __('Danh mục cha:', 'textdomain'),
        'edit_item'         => __('Sửa Danh mục Video', 'textdomain'),
        'update_item'       => __('Cập nhật Danh mục Video', 'textdomain'),
        'add_new_item'      => __('Thêm mới Danh mục Video', 'textdomain'),
        'new_item_name'     => __('Tên Danh mục Video mới', 'textdomain'),
        'menu_name'         => __('Danh mục Video', 'textdomain'),
    );

    $args = array(
        'hierarchical'      => true,
        'labels'            => $labels,
        'show_ui'           => true,
        'show_admin_column' => true,
        'query_var'         => true,
        'rewrite'           => array('slug' => 'video-category'),
    );

    register_taxonomy('video_category', array('video'), $args);
}
add_action('init', 'muathemewpgiare001_register_video_taxonomy');

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

function muathemewpgiare001_register_video_post_type() {

$labels = array(

'name' => 'Videos',

'singular_name' => 'Video',

'menu_name' => 'Videos',

'name_admin_bar' => 'Video',

'add_new' => 'Add New',

'add_new_item' => 'Add New Video',

'new_item' => 'New Video',

'edit_item' => 'Edit Video',

'view_item' => 'View Video',

'all_items' => 'All Videos',

'search_items' => 'Search Videos',

'parent_item_colon' => 'Parent Videos:',

'not_found' => 'No videos found.',

'not_found_in_trash' => 'No videos found in Trash.',

);

$args = array(

'labels' => $labels,

'public' => true,

'publicly_queryable' => true,

'show_ui' => true,

'show_in_menu' => true,

'query_var' => true,

'rewrite' => array('slug' => 'videos'),

'capability_type' => 'post',

'has_archive' => true,

'hierarchical' => false,

'menu_position' => 5,

'supports' => array('title', 'editor', 'thumbnail', 'comments'),

);

register_post_type('video', $args);

}

add_action('init', 'muathemewpgiare001_register_video_post_type');

function muathemewpgiare001_add_video_url_meta_box() {

add_meta_box(

'muathemewpgiare001_video_url',

'YouTube Video URL',

'muathemewpgiare001_video_url_callback',

'video',

'normal',

'high'

);

}

add_action('add_meta_boxes', 'muathemewpgiare001_add_video_url_meta_box');

function muathemewpgiare001_video_url_callback($post) {

wp_nonce_field('muathemewpgiare001_save_video_url', 'muathemewpgiare001_video_url_nonce');

$value = get_post_meta($post->ID, '_muathemewpgiare001_video_url', true);

echo '<label for="muathemewpgiare001_video_url">Video URL: </label>';

echo '<input type="text" id="muathemewpgiare001_video_url" name="muathemewpgiare001_video_url" value="' . esc_attr($value) . '" size="25" />';

}

function muathemewpgiare001_save_video_url($post_id) {

if (!isset($_POST['muathemewpgiare001_video_url_nonce'])) {

return;

}

if (!wp_verify_nonce($_POST['muathemewpgiare001_video_url_nonce'], 'muathemewpgiare001_save_video_url')) {

return;

}

if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {

return;

}

if (!current_user_can('edit_post', $post_id)) {

return;

}

if (isset($_POST['muathemewpgiare001_video_url'])) {

$video_url = sanitize_text_field($_POST['muathemewpgiare001_video_url']);

update_post_meta($post_id, '_muathemewpgiare001_video_url', $video_url);

}

add_action('save_post', 'muathemewpgiare001_save_video_url');

function muathemewpgiare001_video_shortcode($atts) {

// Lấy giá trị thuộc tính 'category' từ shortcode

$atts = shortcode_atts(

array(

'category' => '', // Danh mục cần hiển thị (slug)

$atts,

'youtube_playlist'

);

ob_start();

// Lấy danh mục nếu có

$args = array(

'post_type' => 'video',

'posts_per_page' => 10,

);

if (!empty($atts['category'])) {

$args['tax_query'] = array(

array(

'taxonomy' => 'video_category',

'field' => 'slug',

'terms' => $atts['category'],

);

}

$query = new WP_Query($args);

if ($query->have_posts()) {

echo '<div class="muathemewpgiare001-container">';

echo '<div class="muathemewpgiare001-video-player">';

echo '<iframe id="muathemewpgiare001-main-video" width="100%" height="400" src="" frameborder="0" allowfullscreen></iframe>';

echo '<div class="muathemewpgiare001-video-info">';

echo '<h2 id="muathemewpgiare001-video-title"></h2>';

echo '<p id="muathemewpgiare001-video-description"></p>';

echo '</div></div>';

echo '<div class="muathemewpgiare001-playlist">';

echo '<h3>Up Next</h3>';

echo '<ul id="muathemewpgiare001-playlist">';

while ($query->have_posts()) {

$query->the_post();

$video_url = get_post_meta(get_the_ID(), '_muathemewpgiare001_video_url', true);

$title = get_the_title();

$description = get_the_excerpt();

$thumbnail = get_the_post_thumbnail_url(get_the_ID(), 'thumbnail');

// Chuyển đổi URL video thành dạng nhúng

$embed_url = muathemewpgiare001_convert_to_embed_url($video_url);

echo '<li data-src="' . esc_url($embed_url) . '" data-title="' . esc_html($title) . '" data-description="' . esc_html($description) . '">';

echo '<img src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . ' Thumbnail">';

echo '<div class="muathemewpgiare001-video-meta">';

echo '<h4>' . esc_html($title) . '</h4>';

echo '<p>' . esc_html($description) . '</p>';

echo '</div></li>';

}

echo '</ul></div></div>';

}

wp_reset_postdata();

// Nhúng JavaScript vào shortcode

document.addEventListener('DOMContentLoaded', function () {

var playlistItems = document.querySelectorAll('#muathemewpgiare001-playlist li');

var mainVideo = document.getElementById('muathemewpgiare001-main-video');

var videoTitle = document.getElementById('muathemewpgiare001-video-title');

var videoDescription = document.getElementById('muathemewpgiare001-video-description');

if (playlistItems.length > 0) {

var firstItem = playlistItems[0];

mainVideo.src = firstItem.getAttribute('data-src');

videoTitle.textContent = firstItem.getAttribute('data-title');

videoDescription.textContent = firstItem.getAttribute('data-description');

}

playlistItems.forEach(function (item) {

item.addEventListener('click', function () {

var videoSrc = item.getAttribute('data-src');

var title = item.getAttribute('data-title');

var description = item.getAttribute('data-description');

mainVideo.src = videoSrc;

videoTitle.textContent = title;

videoDescription.textContent = description;

});

</script>

<?php

return ob_get_clean();

}

add_shortcode('youtube_playlist', 'muathemewpgiare001_video_shortcode');

// Thêm tùy chọn 'Duplicate' vào danh sách các hành động của bài viết

function muathemewpgiare001_duplicate_video_link($actions, $post) {

if ($post->post_type == 'video') {

}

return $actions;

}

add_filter('post_row_actions', 'muathemewpgiare001_duplicate_video_link', 10, 2);

// Xử lý hành động duplicate video

function muathemewpgiare001_duplicate_video() {

if (!isset($_GET['post']) || !isset($_GET['duplicate_nonce']) || !wp_verify_nonce($_GET['duplicate_nonce'], basename(__FILE__))) {

return;

}

$post_id = absint($_GET['post']);

$post = get_post($post_id);

if (isset($post) && $post != null) {

$new_post = array(

'post_title' => $post->post_title . ' (Copy)',

'post_content' => $post->post_content,

'post_status' => 'draft',

'post_type' => $post->post_type,

);

$new_post_id = wp_insert_post($new_post);

// Copy meta dữ liệu

$meta_data = get_post_meta($post_id);

foreach ($meta_data as $key => $values) {

foreach ($values as $value) {

add_post_meta($new_post_id, $key, $value);

}

// Copy danh mục

$taxonomies = get_object_taxonomies($post->post_type);

foreach ($taxonomies as $taxonomy) {

$post_terms = wp_get_object_terms($post_id, $taxonomy, array('fields' => 'slugs'));

wp_set_object_terms($new_post_id, $post_terms, $taxonomy, false);

}

wp_redirect(admin_url('post.php?action=edit&post=' . $new_post_id));

exit;

} else {

wp_die('Post duplication failed, could not find original post: ' . $post_id);

}

add_action('admin_action_muathemewpgiare001_duplicate_video', 'muathemewpgiare001_duplicate_video');

function muathemewpgiare001_enqueue_styles() {

echo '

<style>

/* Container tổng cho trình phát video và danh sách phát */

.muathemewpgiare001-container {

display: flex;

flex-direction: row;

justify-content: space-between;

background-color: #f9f9f9;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

max-width: 1200px;

margin: 20px auto;

}

/* Khung phát video */

.muathemewpgiare001-video-player {

width: 70%;

background-color: #000;

padding: 10px;

border-radius: 5px;

}

.muathemewpgiare001-video-player iframe {

width: 100%;

height: 400px;

border-radius: 5px;

}

/* Thông tin video */

.muathemewpgiare001-video-info {

margin-top: 15px;

color: #333;

}

.muathemewpgiare001-video-info h2 {

font-size: 24px;

margin: 0;

padding: 0;

}

.muathemewpgiare001-video-info p {

font-size: 14px;

color: #666;

}

/* Khung danh sách phát */

.muathemewpgiare001-playlist {

width: 28%;

padding: 20px;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

max-height: 450px;

overflow-y: auto;

}

.muathemewpgiare001-playlist h3 {

font-size: 18px;

margin-bottom: 15px;

}

/* Danh sách các video */

#muathemewpgiare001-playlist {

list-style: none;

padding: 0;

margin: 0;

}

#muathemewpgiare001-playlist li {

display: flex;

align-items: center;

padding: 10px;

cursor: pointer;

border-bottom: 1px solid #ddd;

transition: background-color 0.3s ease;

}

#muathemewpgiare001-playlist li:hover {

background-color: #f0f0f0;

}

/* Thumbnail của video trong danh sách phát */

#muathemewpgiare001-playlist img {

width: 120px;

height: 80px;

margin-right: 10px;

border-radius: 5px;

}

/* Thông tin video trong danh sách phát */

.muathemewpgiare001-video-meta h4 {

margin: 0;

font-size: 16px;

color: #000;

}

.muathemewpgiare001-video-meta p {

margin: 5px 0 0;

font-size: 12px;

color: #666;

}

/* Làm cho khung phát video và danh sách phát thích ứng với màn hình nhỏ hơn */

@media (max-width: 768px) {

.muathemewpgiare001-container {

flex-direction: column;

padding: 10px;

}

.muathemewpgiare001-video-player {

width: 100%;

}

.muathemewpgiare001-playlist {

width: 100%;

margin-top: 20px;

}

.muathemewpgiare001-playlist h3 {

text-align: center;

}

</style>';

}

add_action('wp_head', 'muathemewpgiare001_enqueue_styles');

function muathemewpgiare001_convert_to_embed_url($url) {

if (strpos($url, 'youtube.com/watch?v=') !== false) {

$video_id = explode('v=', $url)[1];

$ampersand_position = strpos($video_id, '&');

if ($ampersand_position !== false) {

$video_id = substr($video_id, 0, $ampersand_position);

}

return 'https://www.youtube.com/embed/' . $video_id;

} elseif (strpos($url, 'youtu.be/') !== false) {

$video_id = explode('youtu.be/', $url)[1];

return 'https://www.youtube.com/embed/' . $video_id;

}

// Nếu không phải là URL YouTube, trả về nguyên bản

return $url;

}

// Đăng ký taxonomy (Danh mục) cho Custom Post Type video

function muathemewpgiare001_register_video_taxonomy() {

$labels = array(

'name' => _x('Danh mục Video', 'taxonomy general name', 'textdomain'),

'singular_name' => _x('Danh mục Video', 'taxonomy singular name', 'textdomain'),

'search_items' => __('Tìm kiếm Danh mục Video', 'textdomain'),

'all_items' => __('Tất cả Danh mục Video', 'textdomain'),

'parent_item' => __('Danh mục cha', 'textdomain'),

'parent_item_colon' => __('Danh mục cha:', 'textdomain'),

'edit_item' => __('Sửa Danh mục Video', 'textdomain'),

'update_item' => __('Cập nhật Danh mục Video', 'textdomain'),

'add_new_item' => __('Thêm mới Danh mục Video', 'textdomain'),

'new_item_name' => __('Tên Danh mục Video mới', 'textdomain'),

'menu_name' => __('Danh mục Video', 'textdomain'),

);

$args = array(

'hierarchical' => true,

'labels' => $labels,

'show_ui' => true,

'show_admin_column' => true,

'query_var' => true,

'rewrite' => array('slug' => 'video-category'),

);

register_taxonomy('video_category', array('video'), $args);

}

add_action('init', 'muathemewpgiare001_register_video_taxonomy');

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee

Nếu bạn là một người bán hàng trực tuyến trên muathemewpgiare.com và muốn tăng cường sự uy tín của cửa hàng mình, chắc chắn bạn...
Hướng Dẫn Cách Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi

Nếu bạn đang tìm kiếm một giải pháp dễ dàng để ẩn sản phẩm khi hết thời gian khuyến mãi trên website của mình, bài...
Code thêm SKU tự động vào đường dẫn của sản phẩm trong WordPress

Trong bài viết này, muathemewpgiare sẽ cùng tìm hiểu cách tự động thêm SKU vào đường dẫn sản phẩm trong WordPress, code thêm SKU tự...
Thêm trường số điện thoại, xoá trường email, website và chống spam bình luận bài viết

Trong quá trình phát triển website, việc quản lý bình luận từ người dùng là một phần quan trọng để duy trì tính tương tác...
Cách Code Fake Số Lượng Hàng Đã Bán Trong Woocommerce (Không Cần Plugin)

Khi phát triển trang thương mại điện tử với Woocommerce trên nền tảng WordPress, ngoài việc cung cấp đầy đủ thông tin sản phẩm như...
Sharecode chức năng đăng nhập gần nhất và cột ngày đăng ký tài khoản

Mục Lục1. Tạo Custom Post Type cho Video2. Thêm Meta Box Để Nhập URL Video YouTube3. Lưu URL Video YouTube4. Tạo Shortcode Hiển Thị Danh...
Sharecode HTML và CSS Bảng Báo Giá

DEMO: Thiết kế Website Cơ bản 5,000,000đ Thiết kế website chuẩn SEO Giao diện responsive Tích hợp cơ bản (Form liên hệ, Bản đồ) Tư...
Sharecode plugin bộ lọc khoảng giá cho wordpress không cần plugin

Khi xây dựng một website WordPress, việc cung cấp công cụ tìm kiếm hiệu quả cho người dùng là rất quan trọng, đặc biệt là...
Sharecode slider sản phẩm đã xem wordpress

Mục Lục1. Tạo Custom Post Type cho Video2. Thêm Meta Box Để Nhập URL Video YouTube3. Lưu URL Video YouTube4. Tạo Shortcode Hiển Thị Danh...
Tự Động Cập Nhật Hình Đại Diện Cho Bài Viết Trong WordPress

Hình đại diện (thumbnail) cho bài viết trong WordPress là yếu tố quan trọng giúp tăng tính thẩm mỹ và tạo điểm nhấn trực quan...
Share code hiển thị bài viết theo danh mục trong widget

Hướng dẫn chi tiết tạo Widget hiển thị bài viết theo danh mục trong WordPress là một phần quan trọng giúp tối ưu hóa trải...
Cách Thêm Ô Tìm Kiếm Danh Mục (Category) Trong WordPress

Bạn đã bao giờ cảm thấy mệt mỏi khi phải lục tung hàng tá danh mục trong WordPress mỗi khi đăng bài hay sản phẩm...
[Thủ thuật wordpress] Hướng dẫn code chức năng tạo và gửi mã giảm giá tự động khi người dùng đăng ký tài khoản không dùng plugin

Việc tạo mã giảm giá tự động cho người dùng khi đăng ký tài khoản trên website WooCommerce có thể giúp bạn tăng tỷ lệ...
Hướng Dẫn Code Chức Năng Xác Thực Số Điện Thoại Người Dùng Trong WordPress Từ A Đến Z

Xác thực số điện thoại người dùng là một bước quan trọng để bảo vệ tính toàn vẹn của trang web và đảm bảo chỉ...
Sharecode chức năng hiển thị top 10 sản phẩm bán chạy wordpress

Bạn đang tìm kiếm một giải pháp để hiển thị top 10 sản phẩm bán chạy trên website WordPress? Dưới đây, mình sẽ chia sẻ...
Hướng Dẫn Tự Code Tạo Chức Năng “Vòng Quay May Mắn” WordPress

Chào mọi người, hôm nay mình sẽ hướng dẫn mọi người code chức năng vòng quay may mắn trong wordpress nhé! Mọi người biết đấy,...