Tạo shortcode “Box lưu ý” trong WordPress bằng PHP – Gọn nhẹ, linh hoạt

Đoạn code tạo shortcode box lưu ý

Thêm đoạn mã sau vào file functions.php của theme hoặc child theme:

// Shortcode: [note type="warning"]Nội dung cần lưu ý[/note]
function custom_note_box_shortcode($atts, $content = '') {
    $atts = shortcode_atts([
        'type' => 'info', // Các loại: info, warning, success, tip
    ], $atts, 'note');

    $type = esc_attr($atts['type']);
    $content = do_shortcode($content); // Cho phép lồng shortcode

    $icons = [
        'info' => 'info',
        'warning' => 'alert-triangle',
        'success' => 'check-circle',
        'tip' => 'lightbulb',
    ];

    $icon = isset($icons[$type]) ? $icons[$type] : 'info';
    $class = 'note-box note-' . $type;

    return '
    <div class="' . $class . '">
        <strong><span class="note-icon">' . ucfirst($type) . ':</span></strong>
        <div class="note-content">' . $content . '</div>
    </div>';
}
add_shortcode('note', 'custom_note_box_shortcode');

CSS mẫu cho box lưu ý

Bạn có thể thêm đoạn CSS này vào style.css hoặc thông qua Customizer:

.note-box {
  border-left: 4px solid #ccc;
  padding: 12px 16px;
  margin: 1em 0;
  background: #f9f9f9;
  border-radius: 4px;
}
.note-icon {
  margin-right: 6px;
}
.note-info { border-color: #3498db; background: #eaf4fc; }
.note-warning { border-color: #e67e22; background: #fcf4e3; }
.note-success { border-color: #2ecc71; background: #eafaf1; }
.note-tip { border-color: #9b59b6; background: #f6f0fa; }

Cách sử dụng trong bài viết

Chèn trực tiếp vào trình soạn thảo với cú pháp:

[note type="warning"]Hãy chắc chắn sao lưu trước khi cập nhật.[/note]

Hoặc:

[note type="tip"]Bạn có thể dùng CSS để thay đổi màu nền theo ý thích.[/note]

Gợi ý tuỳ biến nâng cao

• Thêm icon thực sự bằng SVG hoặc font (Font Awesome, UIkit icon…)
• Cho phép tùy chỉnh màu trực tiếp qua thuộc tính shortcode
• Gán class riêng để thêm hiệu ứng động, responsive

Kết luận

Việc tạo shortcode hộp lưu ý giúp bạn dễ dàng làm nổi bật thông tin quan trọng trong bài viết mà vẫn giữ giao diện nhẹ và sạch. Đây là công cụ tuyệt vời cho blog cá nhân, website chia sẻ kiến thức hoặc tài liệu kỹ thuật.