Bài Viết, Tất cả bài viết, Thủ thuật wordpress

Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Đăng vào Tháng 4 3, 2025 bởi admin

03/04/2025

3 Phút đọc

28 Lượt xem

Đánh giá

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này giúp quản trị viên hoặc người dùng dễ dàng nhận biết kích thước ảnh mà không cần tải về kiểm tra. Bài viết này sẽ hướng dẫn bạn cách thực hiện điều đó bằng cách chỉnh sửa file functions.php trong theme WordPress của bạn.

Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

1. Lợi Ích Của Việc In Kích Thước Lên Ảnh

Dễ dàng kiểm tra kích thước ảnh mà không cần mở trình chỉnh sửa.
Tự động hóa quá trình hiển thị kích thước mà không cần nhập tay.
Giúp quản lý ảnh dễ dàng hơn, đặc biệt với các website có nhiều hình ảnh.

2. Cách Thực Hiện

Bước 1: Thêm Code Vào File `functions.php`

Mở file functions.php của theme đang sử dụng và chèn đoạn code sau:

function add_permanent_watermark($file) {
    // Kiểm tra nếu không phải ảnh thì bỏ qua
    $file_type = wp_check_filetype($file);
    if (!in_array($file_type['type'], ['image/jpeg', 'image/png', 'image/gif'])) {
        return $file;
    }

    // Lấy kích thước ảnh
    list($width, $height) = getimagesize($file);
    $text = "{$width}x{$height}"; // Tạo chữ đóng dấu

    // Mở ảnh
    $image = imagecreatefromstring(file_get_contents($file));
    if (!$image) return $file;

    // Màu chữ (trắng) và font
    $text_color = imagecolorallocate($image, 255, 255, 255);
    $font_size = 15; // Kích thước font chữ
    $margin = 20; // Khoảng cách lề

    // Xác định vị trí text (góc phải)
    $text_x = $width - (strlen($text) * 9) - $margin;
    $text_y = $height - $margin;

    // Thêm chữ vào ảnh
    imagestring($image, $font_size, $text_x, $text_y, $text, $text_color);

    // Ghi đè ảnh GỐC
    if ($file_type['type'] == 'image/jpeg') {
        imagejpeg($image, $file, 100);
    } elseif ($file_type['type'] == 'image/png') {
        imagepng($image, $file);
    } elseif ($file_type['type'] == 'image/gif') {
        imagegif($image, $file);
    }

    // Giải phóng bộ nhớ
    imagedestroy($image);

    return $file;
}

// Hook vào khi ảnh được tải lên
add_filter('wp_handle_upload', function ($upload) {
    add_permanent_watermark($upload['file']);
    return $upload;
});

function add_permanent_watermark($file) {

// Kiểm tra nếu không phải ảnh thì bỏ qua

$file_type = wp_check_filetype($file);

if (!in_array($file_type['type'], ['image/jpeg', 'image/png', 'image/gif'])) {

return $file;

}

// Lấy kích thước ảnh

list($width, $height) = getimagesize($file);

$text = "{$width}x{$height}"; // Tạo chữ đóng dấu

// Mở ảnh

$image = imagecreatefromstring(file_get_contents($file));

if (!$image) return $file;

// Màu chữ (trắng) và font

$text_color = imagecolorallocate($image, 255, 255, 255);

$font_size = 15; // Kích thước font chữ

$margin = 20; // Khoảng cách lề

// Xác định vị trí text (góc phải)

$text_x = $width - (strlen($text) * 9) - $margin;

$text_y = $height - $margin;

// Thêm chữ vào ảnh

imagestring($image, $font_size, $text_x, $text_y, $text, $text_color);

// Ghi đè ảnh GỐC

if ($file_type['type'] == 'image/jpeg') {

imagejpeg($image, $file, 100);

} elseif ($file_type['type'] == 'image/png') {

imagepng($image, $file);

} elseif ($file_type['type'] == 'image/gif') {

imagegif($image, $file);

}

// Giải phóng bộ nhớ

imagedestroy($image);

return $file;

}

// Hook vào khi ảnh được tải lên

add_filter('wp_handle_upload', function ($upload) {

add_permanent_watermark($upload['file']);

return $upload;

});

Bước 2: Kiểm Tra Kết Quả

Tải một hình ảnh mới lên WordPress.
Kích thước ảnh sẽ hiển thị trên chính bức ảnh đó.

3. Kết Luận

Với đoạn code trên, bạn đã có thể tự động in kích thước lên ảnh khi upload lên WordPress. Điều này giúp bạn dễ dàng quản lý ảnh hơn mà không cần sử dụng thêm phần mềm chỉnh sửa ảnh. Nếu bạn muốn tùy chỉnh thêm, hãy điều chỉnh các thông số trong code để phù hợp với nhu cầu của bạn.

Chúc bạn thành công!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Mục Lục1. Lợi Ích Của Việc In Kích Thước Lên Ảnh2. Cách Thực HiệnBước 1: Thêm Code Vào File functions.phpBước 2: Kiểm Tra Kết Quả3....
Thủ thuật Css Tạo Hiệu Ứng Line Effect Khi Rê Chuột Vào Bài Viết WordPress

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một hiệu ứng line effect độc đáo và bắt mắt khi rê chuột...
1001 Lưu Ý Cẩn Thận Trong SEO 2025 Trên Google

SEO (Search Engine Optimization) luôn là một lĩnh vực không ngừng thay đổi, và vào năm 2025, Google đã có những cập nhật quan trọng...
Tối Ưu Hóa SEO Cho Các Doanh Nghiệp Nhỏ Năm 2025 Mới Nhất

Trong kinh doanh hiện đại, sự hiện diện trực tuyến không chỉ là một lợi thế mà còn là điều cần thiết cho sự thành...
Code chức năng wordpress yêu cầu thay đổi mật khẩu định kỳ

Dưới đây là code hoàn chỉnh để yêu cầu người dùng WordPress thay đổi mật khẩu định kỳ mỗi 6 tháng. Chức năng chính của...
Hướng Dẫn Làm Sạch Header WordPress Để Tăng Tốc Độ Tải Trang Và Cải Thiện SEO

Khi sử dụng WordPress, nhiều người dùng không để ý rằng phần Header của website chứa rất nhiều mã không cần thiết. Những đoạn mã...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

Mục Lục1. Lợi Ích Của Việc In Kích Thước Lên Ảnh2. Cách Thực HiệnBước 1: Thêm Code Vào File functions.phpBước 2: Kiểm Tra Kết Quả3....
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...
Hướng Dẫn Chi Tiết Viết Bài Chuẩn SEO Từ A Đến Z Dễ Hiểu Và Hiệu Quả

SEO có thể là một thế giới rộng lớn với vô vàn thuật ngữ và chiến lược, nhưng đừng lo! Nếu bạn muốn bài viết...
Hướng Dẫn Cách Thiết Kế Giao Diện Người Dùng (UI) Hiệu Quả

Trong thời đại số hóa mạnh mẽ hiện nay, thiết kế giao diện người dùng (UI) không chỉ đơn thuần là việc trang trí một...
Tại Sao Tối Ưu Hóa Tìm Kiếm Giọng Nói Là Một Xu Hướng Mới?

Ngày nay, việc tìm kiếm thông tin qua giọng nói đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của nhiều...
Tại Sao Tốc độ Tải Trang Lại Quan Trọng Cho SEO?

Tốc độ tải trang không chỉ là một yếu tố kỹ thuật mà còn ảnh hưởng trực tiếp đến thành công của một website trong...
Hướng dẫn mã hóa code khi người dùng viewsource

Khi phát triển ứng dụng web, bảo mật luôn là một yếu tố quan trọng cần được chú trọng. Một trong những vấn đề phổ...
Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử...
Những Lợi Ích Của Việc Sử Dụng Hình Ảnh Trong Nội Dung Website

Việc sử dụng hình ảnh trong nội dung không chỉ đơn thuần là một lựa chọn mà đã trở thành một yêu cầu thiết yếu....
Thông tin cần thiết để thiết kế website cá nhân hiệu quả

Trong thế giới số hóa hiện nay, sở hữu một website cá nhân là một trong những cách tốt nhất để xây dựng thương hiệu...