Khi xây dựng theme hoặc website cho khách hàng, chúng ta thường cần những hình ảnh giữ chỗ (placeholder) để lấp đầy thiết kế. Nhiều người trong chúng ta dựa vào các dịch vụ tuyệt vời như placehold.co hay via.placeholder.com.
Nhưng điều gì xảy ra nếu một ngày dịch vụ đó “die” (ngừng hoạt động)? Toàn bộ website của bạn sẽ đầy ắp những ảnh hỏng.
Trong bài viết này, chúng ta sẽ tự xây dựng một plugin WordPress gọn nhẹ của riêng mình. Plugin này sẽ “bắt” các URL như /placeholder/400x300/ và tự động tạo ra một ảnh PNG với kích thước đó ngay lập tức.
Mục tiêu
Plugin của chúng ta sẽ có thể xử lý các URL sau:
/placeholder/500x300/(Ảnh xám, chữ “500×300”)/placeholder/500x300/FFD700/(Ảnh nền vàng)/placeholder/500x300/FFD700/8B0000/(Ảnh nền vàng, chữ đỏ)/placeholder/500x300/?text=Hello+World(Ảnh xám, chữ “Hello World”)
Bước 1: Tạo file Plugin
Đầu tiên, hãy vào thư mục wp-content/plugins/ của bạn, tạo một thư mục mới tên là happy-placeholder.
Bên trong thư mục đó, tạo một file mới tên là happy-placeholder.php và dán phần “header” của plugin vào:
/**
* Plugin Name: Happy Placeholder Image
* Plugin URI: [https://hoinguoinuoiyen.vn](https://hoinguoinuoiyen.vn)
* Description: Tự động tạo ảnh placeholder (ảnh giữ chỗ) giống placehold.co.
* Version: 1.0
* Author: Happy House Team
*/
// Chặn truy cập trực tiếp
if ( ! defined( 'ABSPATH' ) ) {
exit;
}Bước 2: “Dạy” WordPress hiểu URL mới
Chúng ta cần “dạy” WordPress rằng các URL bắt đầu bằng /placeholder/ là hợp lệ. Chúng ta làm điều này bằng cách sử dụng “Rewrite Rules” (Quy tắc viết lại) và “Query Vars” (Biến truy vấn).
Dán code sau vào file happy-placeholder.php của bạn:
// --- BƯỚC 1: ĐĂNG KÝ ĐƯỜNG DẪN MỚI (/placeholder/) ---
// Thêm các biến tùy chỉnh (width, height, v.v.) vào WordPress
function happy_placeholder_query_vars( $vars ) {
$vars[] = 'happy_placeholder'; // Biến kích hoạt
$vars[] = 'happy_width';
$vars[] = 'happy_height';
$vars[] = 'happy_bg'; // Biến cho màu nền
$vars[] = 'happy_txt'; // Biến cho màu chữ
return $vars;
}
add_filter( 'query_vars', 'happy_placeholder_query_vars' );
// Tạo quy tắc đường dẫn (Rewrite Rule)
function happy_placeholder_rewrite_rules() {
// Quy tắc cho URL đầy đủ (có cả màu nền và màu chữ)
add_rewrite_rule(
'^placeholder/([0-9]+)x([0-9]+)/([a-fA-F0-9]{3,6})/([a-fA-F0-9]{3,6})/?$',
'index.php?happy_placeholder=true&happy_width=$matches[1]&happy_height=$matches[2]&happy_bg=$matches[3]&happy_txt=$matches[4]',
'top'
);
// Quy tắc chỉ có màu nền
add_rewrite_rule(
'^placeholder/([0-9]+)x([0-9]+)/([a-fA-F0-9]{3,6})/?$',
'index.php?happy_placeholder=true&happy_width=$matches[1]&happy_height=$matches[2]&happy_bg=$matches[3]',
'top'
);
// Quy tắc gốc (chỉ kích thước)
add_rewrite_rule(
'^placeholder/([0-9]+)x([0-9]+)/?$',
'index.php?happy_placeholder=true&happy_width=$matches[1]&happy_height=$matches[2]',
'top'
);
}
add_action( 'init', 'happy_placeholder_rewrite_rules' );
Bước 3: Tạo hàm xử lý và xuất ảnh
Đây là “bộ não” của plugin. Chúng ta sẽ “treo” một hàm vào template_redirect. Hàm này sẽ kiểm tra xem URL có phải là của chúng ta không, nếu đúng, nó sẽ tạo ảnh và exit (dừng WordPress) ngay lập tức.
// --- BƯỚC 2: TẠO ẢNH KHI ĐƯỜNG DẪN ĐƯỢC GỌI ---
// Hàm này sẽ "bắt" truy cập và tạo ảnh
function happy_generate_placeholder_image() {
global $wp_query;
// Kiểm tra xem biến kích hoạt của chúng ta có tồn tại không
if ( ! isset( $wp_query->query_vars['happy_placeholder'] ) ) {
return;
}
// 1. Lấy thông số từ URL
$width = (int) $wp_query->query_vars['happy_width'];
$height = (int) $wp_query->query_vars['happy_height'];
// Giới hạn kích thước để tránh bị tấn công (tạo ảnh quá lớn)
$width = max(1, min($width, 2000)); // Tối thiểu 1px, tối đa 2000px
$height = max(1, min($height, 2000));
// 2. Lấy thông số tùy chọn (màu sắc, văn bản)
$text = isset($_GET['text']) ? esc_html($_GET['text']) : "{$width}x{$height}";
// Hàm kiểm tra mã màu Hex (hỗ trợ 3 hoặc 6 ký tự)
$validate_hex = function($hex) {
if (preg_match('/^[a-fA-F0-9]{6}$/', $hex)) {
return $hex; // Trả về 6 ký tự
}
if (preg_match('/^[a-fA-F0-9]{3}$/', $hex)) {
// Chuyển F00 thành FF0000
return $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
}
return null;
};
// Ưu tiên lấy từ query var (URL đẹp) trước, sau đó mới lấy từ $_GET
$bg_from_url = $wp_query->query_vars['happy_bg'] ?? null;
$txt_from_url = $wp_query->query_vars['happy_txt'] ?? null;
$bg_from_get = $_GET['bg'] ?? null;
$txt_from_get = $_GET['txt'] ?? null; // Sửa lỗi: Lấy từ $_GET['txt']
$bg_hex = $validate_hex($bg_from_url) ?? $validate_hex($bg_from_get) ?? 'cccccc'; // Màu nền xám
// Sửa lỗi: Lấy màu chữ từ query var hoặc $_GET['color'] (hoặc txt)
$txt_hex = $validate_hex($txt_from_url) ?? $validate_hex($_GET['color'] ?? $txt_from_get) ?? '969696';
// 3. Tạo ảnh bằng thư viện GD
$image = imagecreatetruecolor( $width, $height );
// 4. Chuyển đổi mã Hex (VD: 'ffffff') sang RGB (255, 255, 255)
list($r_bg, $g_bg, $b_bg) = sscanf("#$bg_hex", "#%02x%02x%02x");
list($r_txt, $g_txt, $b_txt) = sscanf("#$txt_hex", "#%02x%02x%02x");
// 5. Cấp phát màu cho ảnh
$bg_color = imagecolorallocate( $image, $r_bg, $g_bg, $b_bg );
$txt_color = imagecolorallocate( $image, $r_txt, $g_txt, $b_txt );
// 6. Vẽ nền
imagefill( $image, 0, 0, $bg_color );
// 7. Vẽ chữ (Dùng font có sẵn của PHP)
$font_size = 5;
// Tự động giảm kích thước font nếu text quá dài
if ( (imagefontwidth($font_size) * strlen($text)) > ($width - 20) ) { $font_size = 4; }
if ( (imagefontwidth($font_size) * strlen($text)) > ($width - 20) ) { $font_size = 3; }
if ( (imagefontwidth($font_size) * strlen($text)) > ($width - 20) ) { $font_size = 2; }
if ( (imagefontwidth($font_size) * strlen($text)) > ($width - 20) ) { $font_size = 1; }
$text_width = imagefontwidth($font_size) * strlen($text);
$text_height = imagefontheight($font_size);
// Tính toán vị trí để căn giữa chữ
$x = ( $width - $text_width ) / 2;
$y = ( $height - $text_height ) / 2;
if ($text_width > $width) { $x = 5; } // Căn lề nếu vẫn quá dài
imagestring( $image, $font_size, $x, $y, $text, $txt_color );
// 8. Xuất ảnh ra trình duyệt
header( 'Content-Type: image/png' );
imagepng( $image );
// 9. Dọn dẹp bộ nhớ
imagedestroy( $image );
// Rất quan trọng: Dừng WordPress lại, chỉ xuất ảnh
exit;
}
add_action( 'template_redirect', 'happy_generate_placeholder_image' );
Bước 4: Kích hoạt và Hủy kích hoạt
Cuối cùng, chúng ta cần “dọn dẹp” các quy tắc đường dẫn khi plugin bị tắt.
// --- BƯỚC 3: DỌN DẸP KHI TẮT PLUGIN ---
// Xóa quy tắc của chúng ta khi tắt plugin
function happy_placeholder_deactivation() {
flush_rewrite_rules();
}
register_deactivation_hook( __FILE__, 'happy_placeholder_deactivation' );
Bước 5: Kích hoạt và Sử dụng
Bây giờ, hãy vào Admin > Plugins và Kích hoạt plugin “Happy Placeholder Image”.
BƯỚC QUAN TRỌNG NHẤT: Sau khi kích hoạt, hãy vào Admin > Cài đặt (Settings) > Đường dẫn tĩnh (Permalinks) và nhấn nút “Lưu thay đổi” (Save Changes) một lần.
Xong! Giờ bạn có thể truy cập https://your-domain.com/placeholder/500x300/ để xem kết quả.
