Tạo Metabox Thêm Slide Hình ảnh Vào Bài Viết Trong WordPress

Mục lục

Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress

Mình chia sẻ cho các bạn một code rất hay, đó là thêm Metabox slide hình ảnh vào bài viết trong WordPress, bạn có thể sử dụng code này để tạo một slide hiển thị hình ảnh cho bài viết bất kỳ.

caodem hinh anh tao metabox slide hinh anh cho bai viet

Code tạo slide hình ảnh cho bài viết

Code để tạo Metabox

Bạn sao chép đoạn code bên dưới dán vào file functions.php trong thư mục theme mà bạn đang sử dụng là xong.

<br />
// Thêm metabox hinh ảnh vào<br />
add_action( ‘add_meta_boxes’, ‘add_hinhanh_metabox_up’ );<br />
function add_hinhanh_metabox_up() {<br />
add_meta_box( ‘my-post-box’, ‘THÊM SLIDE HÌNH ẢNH’, ‘add_hinhanh_metabox_up_post’, ‘post’, ‘normal’, ‘high’ );<br />
}<br />
function add_hinhanh_metabox_up_post($post) {<br />
$banner_img = get_post_meta($post-&gt;ID,’post_hinhanh’,true);<br />
?&gt;<br />
&lt;style type=”text/css”&gt;<br />
.add_hinhanh_class ul li .delete-img { position: absolute; right: 3px; top: 2px; background: #333; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 20px; color: #fff; }<br />
.add_hinhanh_class ul li { width: 120px; display: inline-block; vertical-align: middle; margin: 5px; position: relative; }<br />
.add_hinhanh_class ul li img { width:150px;height:100px;object-fit: cover;object-position: 50% 50%;border-radius:12px;}<br />
.button{margin-right: 10px !important;}<br />
&lt;/style&gt;<br />
&lt;div&gt;&lt;?php echo add_hinhanh_metabox( ‘post_hinhanh’, $banner_img ); ?&gt;&lt;/div&gt;<br />
&lt;script type=”text/javascript”&gt;<br />
jQuery(function($) {<br />
$(‘body’).on(‘click’, ‘.them_hinhanh’, function(e) {<br />
e.preventDefault();<br />
var button = $(this),<br />
custom_uploader = wp.media({<br />
title: ‘Thêm hình ảnh’,<br />
button: { text: ‘Chọn’ },<br />
multiple: true<br />
}).on(‘select’, function() {<br />
var attech_ids=””;<br />
attachments<br />
var attachments = custom_uploader.state().get(‘selection’),<br />
attachment_ids = new Array(),<br />
i = 0;<br />
attachments.each(function(attachment) {<br />
attachment_ids[i] = attachment[‘id’];<br />
attech_ids += ‘,’ + attachment[‘id’];<br />
if (attachment.attributes.type == ‘image’) {<br />
$(button).siblings(‘ul’).append(‘&lt;li data-attechment-id=”‘ + attachment[‘id’] + ‘”&gt;&lt;a href=”‘ + attachment.attributes.url + ‘” target=”_blank”&gt;&lt;img class=”true_pre_image” src=”‘ + attachment.attributes.url + ‘” /&gt;&lt;/a&gt;&lt;i class=” dashicons dashicons-no delete-img”&gt;&lt;/i&gt;&lt;/li&gt;’);<br />
} else {<br />
$(button).siblings(‘ul’).append(‘&lt;li data-attechment-id=”‘ + attachment[‘id’] + ‘”&gt;&lt;a href=”‘ + attachment.attributes.url + ‘” target=”_blank”&gt;&lt;img class=”true_pre_image” src=”‘ + attachment.attributes.icon + ‘” /&gt;&lt;/a&gt;&lt;i class=” dashicons dashicons-no delete-img”&gt;&lt;/i&gt;&lt;/li&gt;’);<br />
}<br />
i++;<br />
});<br />
var ids = $(button).siblings(‘.attechments-ids’).attr(‘value’);<br />
if (ids) {<br />
var ids = ids + attech_ids;<br />
$(button).siblings(‘.attechments-ids’).attr(‘value’, ids);<br />
} else {<br />
$(button).siblings(‘.attechments-ids’).attr(‘value’, attachment_ids);<br />
}<br />
$(button).siblings(‘.xoa_tat_hinhanh’).show();<br />
})<br />
.open();<br />
});<br />
$(‘body’).on(‘click’, ‘.xoa_tat_hinhanh’, function() {<br />
$(this).hide().prev().val(”).prev().addClass(‘button’).html(‘Thêm ảnh’);<br />
$(this).parent().find(‘ul’).empty();<br />
return false;<br />
});<br />
});<br />
jQuery(document).ready(function() {<br />
jQuery(document).on(‘click’, ‘.add_hinhanh_class ul li i.delete-img’, function() {<br />
var ids = [];<br />
var this_c = jQuery(this);<br />
jQuery(this).parent().remove();<br />
jQuery(‘.add_hinhanh_class ul li’).each(function() {<br />
ids.push(jQuery(this).attr(‘data-attechment-id’));<br />
});<br />
jQuery(‘.add_hinhanh_class’).find(‘input[type=”hidden”]’).attr(‘value’, ids);<br />
});<br />
})<br />
&lt;/script&gt;<br />
&lt;?php<br />
}<br />
// Xử lý hình ảnh ở dưới post<br />
function add_hinhanh_metabox($name, $value=””) {<br />
$image=””&gt;Thêm ảnh”;<br />
$image_str=””;<br />
$image_size=”full”;<br />
$display = ‘none’;<br />
$value = explode(‘,’, $value);<br />
if (!empty($value)) {<br />
foreach ($value as $values) {<br />
if ($image_attributes = wp_get_attachment_image_src($values, $image_size)) {<br />
$image_str .= ‘&lt;li data-attechment-id=’ . $values . ‘&gt;&lt;a href=”‘ . $image_attributes[0] . ‘” target=”_blank”&gt;&lt;img src=”‘ . $image_attributes[0] . ‘” /&gt;&lt;/a&gt;&lt;i class=”dashicons dashicons-no delete-img”&gt;&lt;/i&gt;&lt;/li&gt;’;<br />
}<br />
}<br />
}<br />
if($image_str){<br />
$display = ‘inline-block’;<br />
}<br />
return ‘&lt;div class=”add_hinhanh_class”&gt;&lt;ul&gt;’ . $image_str . ‘&lt;/ul&gt;&lt;a href=”#” class=”them_hinhanh button’ . $image . ‘&lt;/a&gt;&lt;input type=”hidden” class=”attechments-ids ‘ . $name . ‘” name=”‘ . $name . ‘” id=”‘ . $name . ‘” value=”‘ . esc_attr(implode(‘,’, $value)) . ‘” /&gt;&lt;a href=”#” class=”xoa_tat_hinhanh button” style=”display:inline-block;display:’ . $display . ‘”&gt;Xoá hêt&lt;/a&gt;&lt;/div&gt;’;<br />
}<br />
// Lưu Metabox hinh anh.<br />
add_action( ‘save_post’, ‘add_hinhanh_save’ );<br />
function add_hinhanh_save( $post_id ) {<br />
if( defined( ‘DOING_AUTOSAVE’ ) &amp;&amp; DOING_AUTOSAVE ) {<br />
return;<br />
}<br />
if( !current_user_can( ‘edit_post’ ) ){<br />
return;<br />
}<br />
if( isset( $_POST[‘post_hinhanh’] ) ){<br />
update_post_meta( $post_id, ‘post_hinhanh’, $_POST[‘post_hinhanh’] );<br />
}<br />
}

100

101

102

103

// Thêm metabox hinh ảnh vào

add_action( ‘add_meta_boxes’, ‘add_hinhanh_metabox_up’ );

function add_hinhanh_metabox_up() {

add_meta_box( ‘my-post-box’, ‘THÊM SLIDE HÌNH ẢNH’, ‘add_hinhanh_metabox_up_post’, ‘post’, ‘normal’, ‘high’ );

}

function add_hinhanh_metabox_up_post($post) {

$banner_img = get_post_meta($post–>ID,‘post_hinhanh’,true);

.add_hinhanh_class ul li .delete–img { position: absolute; right: 3px; top: 2px; background: #333; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 20px; color: #fff; }

.add_hinhanh_class ul li { width: 120px; display: inline–block; vertical–align: middle; margin: 5px; position: relative; }

.add_hinhanh_class ul li img { width:150px;height:100px;object–fit: cover;object–position: 50% 50%;border–radius:12px;}

.button{margin–right: 10px !important;}

</style>

jQuery(function($) {

$(‘body’).on(‘click’, ‘.them_hinhanh’, function(e) {

e.preventDefault();

var button = $(this),

custom_uploader = wp.media({

title: ‘Thêm hình ảnh’,

button: { text: ‘Chọn’ },

multiple: true

}).on(‘select’, function() {

var attech_ids = ”;

attachments

var attachments = custom_uploader.state().get(‘selection’),

attachment_ids = new Array(),

i = 0;

attachments.each(function(attachment) {

attachment_ids[i] = attachment[‘id’];

attech_ids += ‘,’ + attachment[‘id’];

if (attachment.attributes.type == ‘image’) {

$(button).siblings(‘ul’).append(‘<li data-attechment-id=”‘ + attachment[‘id’] + ‘”><a href=”‘ + attachment.attributes.url + ‘” target=”_blank”><img class=”true_pre_image” src=”‘ + attachment.attributes.url + ‘” /></a><i class=” dashicons dashicons-no delete-img”></i></li>’);

} else {

$(button).siblings(‘ul’).append(‘<li data-attechment-id=”‘ + attachment[‘id’] + ‘”><a href=”‘ + attachment.attributes.url + ‘” target=”_blank”><img class=”true_pre_image” src=”‘ + attachment.attributes.icon + ‘” /></a><i class=” dashicons dashicons-no delete-img”></i></li>’);

}

i++;

});

var ids = $(button).siblings(‘.attechments-ids’).attr(‘value’);

if (ids) {

var ids = ids + attech_ids;

$(button).siblings(‘.attechments-ids’).attr(‘value’, ids);

} else {

$(button).siblings(‘.attechments-ids’).attr(‘value’, attachment_ids);

}

$(button).siblings(‘.xoa_tat_hinhanh’).show();

})

.open();

});

$(‘body’).on(‘click’, ‘.xoa_tat_hinhanh’, function() {

$(this).hide().prev().val(”).prev().addClass(‘button’).html(‘Thêm ảnh’);

$(this).parent().find(‘ul’).empty();

return false;

});

jQuery(document).ready(function() {

jQuery(document).on(‘click’, ‘.add_hinhanh_class ul li i.delete-img’, function() {

var ids = [];

var this_c = jQuery(this);

jQuery(this).parent().remove();

jQuery(‘.add_hinhanh_class ul li’).each(function() {

ids.push(jQuery(this).attr(‘data-attechment-id’));

});

jQuery(‘.add_hinhanh_class’).find(‘input[type=”hidden”]’).attr(‘value’, ids);

});

})

</script>

<?php

}

// Xử lý hình ảnh ở dưới post

function add_hinhanh_metabox($name, $value = ”) {

$image = ‘”>Thêm ảnh’;

$image_str = ”;

$image_size = ‘full’;

$display = ‘none’;

$value = explode(‘,’, $value);

if (!empty($value)) {

foreach ($value as $values) {

if ($image_attributes = wp_get_attachment_image_src($values, $image_size)) {

$image_str .= ‘<li data-attechment-id=’ . $values . ‘><a href=”‘ . $image_attributes[0] . ‘” target=”_blank”><img src=”‘ . $image_attributes[0] . ‘” /></a><i class=”dashicons dashicons-no delete-img”></i></li>’;

}

if($image_str){

$display = ‘inline-block’;

}

return ‘<div class=”add_hinhanh_class”><ul>’ . $image_str . ‘</ul><a href=”#” class=”them_hinhanh button’ . $image . ‘</a><input type=”hidden” class=”attechments-ids ‘ . $name . ‘” name=”‘ . $name . ‘” id=”‘ . $name . ‘” value=”‘ . esc_attr(implode(‘,’, $value)) . ‘” /><a href=”#” class=”xoa_tat_hinhanh button” style=”display:inline-block;display:’ . $display . ‘”>Xoá hêt</a></div>’;

}

// Lưu Metabox hinh anh.

add_action( ‘save_post’, ‘add_hinhanh_save’ );

function add_hinhanh_save( $post_id ) {

if( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) {

return;

}

if( !current_user_can( ‘edit_post’ ) ){

return;

}

if( isset( $_POST[‘post_hinhanh’] ) ){

update_post_meta( $post_id, ‘post_hinhanh’, $_POST[‘post_hinhanh’] );

}

Code để hiển thị hình ảnh vào bài viết

Bạn sao chép đoạn code bên dưới dán vào file có chức năng hiển thị bố cục của bài viết (thông thường sẽ là file content.php hoặc content_single.php tuỳ vào mỗi theme mà khác nhau).

<br />
&lt;?php<br />
$id = get_the_ID();<br />
$banner_img = get_post_meta($id, ‘post_hinhanh’, true);<br />
$banner_img = explode(‘,’, $banner_img);<br />
if(!empty($banner_img)) {<br />
?&gt;<br />
&lt;div&gt;<br />
&lt;?php foreach ($banner_img as $attachment_id) { ?&gt;<br />
&lt;img src=”https://blog.az9s.com/tao-metabox-them-slide-hinh-anh-vao-bai-viet-trong-wordpress/&lt;?php echo wp_get_attachment_url( $attachment_id );?&gt;” /&gt;<br />
&lt;?php } ?&gt;<br />
&lt;/div&gt;<br />
&lt;?php } ?&gt;

<?php

$id = get_the_ID();

$banner_img = get_post_meta($id, ‘post_hinhanh’, true);

$banner_img = explode(‘,’, $banner_img);

if(!empty($banner_img)) {

<div>

<?php foreach ($banner_img as $attachment_id) { ?>

<?php } ?>

</div>

<?php } ?>

Làm trang web nhanh hơn với PHP OPcache

Tuỳ chỉnh thẻ Canonical cho WordPress và Woocommerce

Một số hook thông dụng trong woocommerce nên biết

CÁCH NGHIÊN CỨU TỪ KHÓA SEO CHO WEB ON TOP 2025

Code gửi email SMTP từ Gmail cho WordPress

Tin tức

Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress

Tạo Metabox thêm slide hình ảnh vào bài viết trong WordPress

Code tạo slide hình ảnh cho bài viết

Code để tạo Metabox

Code để hiển thị hình ảnh vào bài viết

ĐỌC ĐỂ TỈNH NGHỘ NẾU BẠN ĐANG ĐAU ĐẦU VÌ VẤN ĐỀ KHOÁ TÀI KHOẢN FANPAGE KHÔNG CHO QUẢNG CÁO

Hướng dẫn cài đặt nhiều phiên bản PHP DirectAdmin

5 việc bạn cần thay đổi ngay để bán hàng trên fanpage hiệu quả hơn

Viết Content Bằng AI – Không Cần Phải Ngồi Viết Content Nữa

Quy trình tự động đăng bài nhiều ảnh lên Fanpage Facebook với n8n và AI

SÀI GÒN KINH DOANH GÌ HÁI RA TIỀN