Thêm cột ảnh đại diện trong trang quản trị danh sách bài viết

Ngày đăng: 28 - 04 - 2022 Lượt xem: 56 lượt

Bạn có muốn hiển thị ảnh đại diện ra ngoài trang danh sách bài viết không?

Hôm nay mình sẽ hướng dẫn bạn cách để thực hiện điều đó. Nhưng trước tiên, hãy xem qua kết quả mà bạn sẽ đạt được.

Thêm cột mới cho ảnh đại diện

Bạn hãy sao chép đoạn code dưới đây vào file functions.php của theme đang sử dụng nhé.

add_filter('manage_post_posts_columns', 'hk_featured_image_column');
function hk_featured_image_column( $column_array ) {

	$column_array = array_slice( $column_array, 0, 1, true )
	+ array('featured_image' => 'Ảnh đại diện')
	+ array_slice( $column_array, 1, NULL, true );
 
	return $column_array;
}

add_action('manage_posts_custom_column', 'hk_render_the_column', 10, 2);
function hk_render_the_column( $column_name, $post_id ) {

	if( $column_name == 'featured_image' ) {

		if( has_post_thumbnail( $post_id ) ) {
			
			$thumb_id = get_post_thumbnail_id( $post_id );
			echo '<img data-id="' . $thumb_id . '" src="' . wp_get_attachment_url( $thumb_id ) . '" />';
			
		} else {
			
			echo '<img data-id="-1" src="' . get_stylesheet_directory_uri() . '/placeholder.png" />';
			
		}
		
	}

}

Ở đoạn code trên mình có sử dụng đến 2 hook. Thứ nhất là hook manage_post_posts_columns, hook này sẽ cho phép bạn thêm một cột mới vào table Bài viết. Hook thứ hai là manage_posts_custom_column, hook này sẽ đổ dữ liệu vào cột của bạn.

Sau khi bạn thực hiện xong bước trên, bạn sẽ nhận được kết quả như thế này.

Hiển thị ảnh đại diện bước 1

Vì với mỗi bài viết, hình ảnh đại diện có kích thước khác nhau nhau gây ra vỡ giao diện quản trị. Hãy cũng mình đến bước tiếp theo để xử lý điều này nhé.

Thêm code CSS vào trang quản trị

Tiếp tục thêm đoạn code ở bên dưới vào file functions.php nhé.

add_action( 'admin_head', 'hk_custom_css' );
function hk_custom_css(){

	echo '<style>
		#featured_image{
			width:120px;
		}
		td.featured_image.column-featured_image img{
			max-width: 100%;
			height: auto;
		}
	</style>';

}

Vậy là đã xong. Bạn sẽ nhận được kết quả như hình ảnh ở đầu bài viết này.

Lời kết

Mình hi vọng bài viết trên sẽ hỗ trợ các bạn quản lý các bài viết tốt hơn.

Nếu bài viết này hữu ích và giúp tiết kiệm được thời gian của bạn, hãy giúp mình chia sẻ nó. Ngoài ra nếu bạn quan tâm đến các chủ đề tương tự như vậy, hãy đọc các bài viết Thủ thuật WordPress khác và follow Fanpage để không bỏ lỡ bài viết mới từ mình nhé.

0 0 votes
Đánh giá bài viết

guest
0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Hướng dẫn custom Bảng tin trong admin WordPress

Hướng dẫn custom Bảng tin trong admin WordPress

11 - 05 - 2022

Bạn có nghĩ rằng bảng tin trong admin WordPress thật lộn xộn và có nhiều phần không cần thiết...

Cách đặt hình ảnh đại diện mặc định trong WordPress

Cách đặt hình ảnh đại diện mặc định trong WordPress

08 - 05 - 2022

Bạn có muốn đặt hình ảnh đại diện mặc định trong WordPress không? Nhiều theme sử dụng hình ảnh đại...

Hiển thị ngày đăng ký của người dùng vào trang tất cả người dùng

Hiển thị ngày đăng ký của người dùng vào trang tất cả người dùng

06 - 05 - 2022

Giả sử rằng có một cuộc tấn công spam vào trang web của bạn. Có gần 50 người dùng...

Làm việc với DateTime trong WordPress

Làm việc với DateTime trong WordPress

04 - 05 - 2022

Một năm trước, mình phát triển một plugin liên quan đến thời gian biểu. Và mình sớm nhận ra...

Tạo form tìm kiếm bằng shortcode trong WordPress

Tạo form tìm kiếm bằng shortcode trong WordPress

02 - 05 - 2022

Bạn muốn thêm form tìm kiếm vào bài viết, trang, hoặc sidebar của website? Thêm form tìm kiếm vào nội...

Làm thế nào để chuyển hướng URL trong WordPress?

Làm thế nào để chuyển hướng URL trong WordPress?

20 - 04 - 2022

Chuyển hướng URL, là một cách để làm cho một đường dẫn có thể truy cập được dưới nhiều...

0
Would love your thoughts, please comment.x