Hướng dẫn thêm khung quảng cáo sau mỗi bài viết

// Đăng ký metabox quảng cáo
function webdy_ads_metabox() {
    add_meta_box(
        'webdy_ads_metabox',
        'Quảng Cáo Dịch Vụ',
        'webdy_render_ads_metabox',
        ['post', 'page'],
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'webdy_ads_metabox');

// Hiển thị metabox
function webdy_render_ads_metabox($post) {
    $ads = get_post_meta($post->ID, '_webdy_ads', true);
    $ads = is_array($ads) ? $ads : [
        ['title' => 'Thiết Kế Website', 'description' => 'Dịch vụ thiết kế website chuyên nghiệp.', 'url' => 'https://webdy.vn', 'image' => ''],
        ['title' => 'SEO Website', 'description' => 'Tăng thứ hạng từ khóa, tối ưu SEO.', 'url' => 'https://seomaster.com', 'image' => ''],
    ];
    wp_nonce_field('webdy_save_ads', 'webdy_ads_nonce');
    
    echo '<div id="webdy-ads-container">';
    foreach ($ads as $index => $ad) {
        echo '<div class="webdy-ad-item" style="margin-bottom: 10px;">
                <input type="text" name="webdy_ads[' . $index . ']
Lorem ipsum dolor sit amet...
" value="' . esc_attr($ad['title']) . '" placeholder="Tiêu đề" style="width: 20%; margin-right: 5%;">
                <input type="text" name="webdy_ads[' . $index . '][description]" value="' . esc_attr($ad['description']) . '" placeholder="Mô tả" style="width: 30%; margin-right: 5%;">
                <input type="url" name="webdy_ads[' . $index . '][url]" value="' . esc_url($ad['url']) . '" placeholder="URL" style="width: 20%; margin-right: 5%;">
                <input type="text" name="webdy_ads[' . $index . '][image]" value="' . esc_url($ad['image']) . '" placeholder="Hình ảnh (URL)" style="width: 20%;">
                <button type="button" class="remove-ad button" style="margin-left: 10px;">Remove</button>
              </div>';
    }
    echo '</div><button type="button" id="add-ad" class="button">Thêm Quảng Cáo</button>';
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const container = document.getElementById('webdy-ads-container');
            const addButton = document.getElementById('add-ad');

            addButton.addEventListener('click', function () {
                const index = document.querySelectorAll('.webdy-ad-item').length;
                const newField = `<div class="webdy-ad-item" style="margin-bottom: 10px;">
                        <input type="text" name="webdy_ads[${index}]
Lorem ipsum dolor sit amet...
" placeholder="Tiêu đề" style="width: 20%; margin-right: 5%;">
                        <input type="text" name="webdy_ads[${index}][description]" placeholder="Mô tả" style="width: 30%; margin-right: 5%;">
                        <input type="url" name="webdy_ads[${index}][url]" placeholder="URL" style="width: 20%; margin-right: 5%;">
                        <input type="text" name="webdy_ads[${index}][image]" placeholder="Hình ảnh (URL)" style="width: 20%;">
                        <button type="button" class="remove-ad button" style="margin-left: 10px;">Remove</button>
                    </div>`;
                container.insertAdjacentHTML('beforeend', newField);
            });

            container.addEventListener('click', function (e) {
                if (e.target.classList.contains('remove-ad')) {
                    e.target.parentElement.remove();
                }
            });
        });
    </script>
    <?php
}

// Lưu dữ liệu quảng cáo
function webdy_save_ads($post_id) {
    if (!isset($_POST['webdy_ads_nonce']) || !wp_verify_nonce($_POST['webdy_ads_nonce'], 'webdy_save_ads')) return;
    if (!current_user_can('edit_post', $post_id)) return;

    if (isset($_POST['webdy_ads']) && is_array($_POST['webdy_ads'])) {
        $cleaned_ads = array_map(function ($ad) {
            return [
                'title' => sanitize_text_field($ad['title']),
                'description' => sanitize_text_field($ad['description']),
                'url' => esc_url_raw($ad['url']),
                'image' => esc_url_raw($ad['image']),
            ];
        }, $_POST['webdy_ads']);
        update_post_meta($post_id, '_webdy_ads', $cleaned_ads);
    } else {
        delete_post_meta($post_id, '_webdy_ads');
    }
}
add_action('save_post', 'webdy_save_ads');

// Hiển thị quảng cáo trên frontend
function webdy_display_ads($content) {
    if (is_single() || is_page()) {
        global $post;
        $ads = get_post_meta($post->ID, '_webdy_ads', true);

        if (!empty($ads) && is_array($ads)) {
            $output = '<div class="webdy-ads-container">';
            foreach ($ads as $ad) {
                if (!empty($ad['title']) && !empty($ad['url'])) {
                    $output .= '<div class="webdy-ad">';
                    if (!empty($ad['image'])) {
                        $output .= '<a href="' . esc_url($ad['url']) . '" target="_blank"><img src="' . esc_url($ad['image']) . '" style="max-width: 100px; display: block;"></a>';
                    }
                    $output .= '<a href="' . esc_url($ad['url']) . '" target="_blank"><strong>' . esc_html($ad['title']) . '</strong></a>';
                    $output .= '<p>' . esc_html($ad['description']) . '</p>';
                    $output .= '</div>';
                }
            }
            $output .= '</div>';
            $content .= $output;
        }
    }
    return $content;
}
add_filter('the_content', 'webdy_display_ads');

// Thêm CSS
function webdy_ads_styles() {
    echo '<style>
        .webdy-ads-container {
            border: 2px dotted #4CAF50;
            background-color: #e8f5e9;
            padding: 15px;
            margin-top: 20px;
            font-family: Arial, sans-serif;
            border-radius: 10px;
            position: relative;
        }
        .webdy-ad {
            margin-bottom: 15px;
        }
        .webdy-ad a {
            color: #2E7D32;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
        }
        .webdy-ad p {
            margin: 5px 0;
            color: #333;
            font-size: 14px;
        }
        .webdy-ad img {
            max-width: 100px;
            border-radius: 5px;
            margin-bottom: 5px;
        }
    </style>';
}
add_action('wp_head', 'webdy_ads_styles');