Hướng dẫn thêm khung quảng cáo sau mỗi bài viết
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
// Đă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 . '][title]" 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}][title]" 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'); |
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
