Tạo chức năng quản lý banner slider và hiển thị banner silder ra ngoài giao diện người dùng trong wordpress

I. TẠO 1 POST TYPE ĐỂ QUẢN LÝ CÁC BANNER SLIDER

Trước tiên chúng ta sẽ tạo 1 class để tạo 1 post type, ở đây tôi đặt post type có tên là custom_post, ta tạo nó bằng phương thức sau: 

public function create_custom_post_type() {
    register_post_type('custom_post', [
        'labels' => [
            'name' => 'Slider',
            'singular_name' => 'Slider',
        ],
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
        'has_archive' => true,
    ]);
}

Sau đó ở phương thức contructor của class ta gọi hook như sau : 

add_action('init', [$this, 'create_custom_post_type']);

Ta khai báo các meta box cho trang thêm mới của post type, dưới đây là phương thức hiển thị ô nhập link và phương thức để xử lý dữ liệu khi người dùng lưu bài viết

// Hàm hiển thị nội dung của meta box (ô nhập liệu cho link)
    public function display_custom_link_meta_box($post) {
        // Lấy giá trị link đã lưu nếu có
        $custom_link = get_post_meta($post->ID, '_custom_link_meta_key', true);

        // Hiển thị ô nhập liệu
        echo '<label for="custom_link_field">Nhập liên kết:</label>';
        echo '<input type="url" id="custom_link_field" name="custom_link_field" value="' . esc_url($custom_link) . '" style="width:100%;" />';
    }

    // Lưu giá trị của ô nhập liệu khi bài viết được lưu
    public function save_custom_link_meta_box($post_id) {
        // Kiểm tra nếu dữ liệu tồn tại trong ô nhập liệu
        if (isset($_POST['custom_link_field'])) {
            update_post_meta($post_id, '_custom_link_meta_key', sanitize_text_field($_POST['custom_link_field']));
        }
    }

Dưới đây là class sau khi viết xong của tôi, bạn cũng có thể tham khảo :

<?php

class SliderMain 
{
    public function __construct() {
        add_action('init', [$this, 'create_custom_post_type']);
        add_action('restrict_manage_posts', [$this, 'custom_post_type_dropdown']);
        add_action('add_meta_boxes', [$this, 'add_custom_link_meta_box']);
        add_action('save_post', [$this, 'save_custom_link_meta_box']);
    }


    public function create_custom_post_type() {
    register_post_type('custom_post', [
        'labels' => [
            'name' => 'Slider',
            'singular_name' => 'Slider',
        ],
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
        'has_archive' => true,
    ]);
}



    public function custom_post_type_dropdown() {
        global $typenow;
        
        // Kiểm tra nếu là trang 'post' (Thêm bài viết)
        if ($typenow == 'post') {
            $args = [
                'public' => true, // Lọc các post type công khai
            ];

            // Lấy tất cả các post type công khai
            $post_types = get_post_types($args, 'objects');
            
            echo '<select name="post_type" id="post_type" class="postform">';
            
            // Lặp qua các post type và tạo các tùy chọn trong dropdown
            foreach ($post_types as $post_type) {
                printf(
                    '<option value="%s"%s>%s</option>',
                    $post_type->name,
                    selected($post_type->name, $_GET['post_type'], false),
                    $post_type->label
                );
            }
            
            echo '</select>';
        }
    }

    // Đăng ký meta box cho Custom Post Type
    public function add_custom_link_meta_box() {
        add_meta_box(
            'custom_link_meta_box',         // ID của meta box
            'Link Liên Kết',                // Tiêu đề của meta box
            [$this, 'display_custom_link_meta_box'], // Hàm hiển thị nội dung của meta box
            'custom_post',                  // Loại post type (ở đây là 'custom_post' - CPT tùy chỉnh)
            'normal',                       // Vị trí của meta box ('normal', 'side', 'advanced')
            'high'                          // Độ ưu tiên của meta box ('low', 'default', 'high')
        );
    }


    // Hàm hiển thị nội dung của meta box (ô nhập liệu cho link)
    public function display_custom_link_meta_box($post) {
        // Lấy giá trị link đã lưu nếu có
        $custom_link = get_post_meta($post->ID, '_custom_link_meta_key', true);

        // Hiển thị ô nhập liệu
        echo '<label for="custom_link_field">Nhập liên kết:</label>';
        echo '<input type="url" id="custom_link_field" name="custom_link_field" value="' . esc_url($custom_link) . '" style="width:100%;" />';
    }

    // Lưu giá trị của ô nhập liệu khi bài viết được lưu
    public function save_custom_link_meta_box($post_id) {
        // Kiểm tra nếu dữ liệu tồn tại trong ô nhập liệu
        if (isset($_POST['custom_link_field'])) {
            update_post_meta($post_id, '_custom_link_meta_key', sanitize_text_field($_POST['custom_link_field']));
        }
    }


}

Sau khi có class hãy chèn nó vào file function và gọi class của bạn.

require_once ZENDVN_THEME_INC_DIR . '/slider-main.php';
new SliderMain();

Kết quả chúng ta sẽ có 1 menu ở trang admin là slider như hình 

Trang Thêm banner slider  

II. HIỂN THỊ HÌNH ẢNH RA NGOÀI GIAO DIỆN NGƯỜI DÙNG 

Tìm đến vị trí thẻ html của banner cần hiển thị và tham khảo mã php cuả mình như sau để đưa vào dự án cua bạn 

<div class="vhn-wraper-slider">
        <?php
            $args = array(
                'post_type' => 'custom_post', // CPT của bạn
                'posts_per_page' => -1,       // Lấy tất cả các bài viết
                'post_status' => 'publish',   // Chỉ lấy bài viết đã được công khai
            );
            
            $query = new WP_Query($args);

            if ($query->have_posts()) :
                while ($query->have_posts()) : $query->the_post();
                // Kiểm tra xem bài viết có featured image không
                if (has_post_thumbnail()) :
                    $thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full'); 
                    $link = get_post_meta(get_the_ID(), '_custom_link_meta_key', true);
                ?>
        <div>
            <a href="<?=@$link?>" target="_blank">
                <img src="<?php echo $thumbnail_url?>"alt="">
            </a>
        </div>
        <?php

            endif;
            endwhile;
            endif;
        ?>
    </div>

Kết quả như sau :