Flash Sale TẾT Siêu Rẻ! Source Code Mẫu Website Chỉ Từ 388K. Tặng Kèm Theme Plugin Pro Và Miễn Phí Công Cài Đặt! Hỗ Trợ Tận Tình Nhanh Chóng!

NHẬN ƯU ĐÃI NGAY

Hướng dẫn chỉnh sửa ảnh bất kỳ trên website WordPress bằng CSS đơn giản

Đăng vào bởi Themevip

💡 Trường hợp Áp dụng chỉnh sửa ảnh trên WordPress bằng CSS

1. Trường hợp không tìm thấy chỗ sửa ảnh

  • Không có quyền truy cập: Bạn chỉ có quyền chỉnh sửa giao diện qua Customizer, không vào được trình chỉnh sửa theme.
  • Không biết ảnh ở đâu: Ảnh được thêm qua plugin, shortcode hoặc code phức tạp, không hiển thị trong Thư viện Media của WordPress.
  • Website phức tạp: Website có nhiều lớp CSS hoặc JavaScript ẩn đi vị trí của ảnh, không thể chỉnh sửa từ giao diện quản trị viên.

2. Lợi ích của việc sửa ảnh bằng CSS

  • ✅ Nhanh chóng, không đụng vào code gốc: CSS có thể thêm vào Customizer hoặc plugin CSS mà không cần đụng vào code PHP.
  • ✅ Không ảnh hưởng dữ liệu gốc: Không thay đổi ảnh gốc trong Media, tránh lỗi mất file.
  • ✅ Tùy biến linh hoạt: Có thể chỉnh sửa mọi thuộc tính của ảnh (kích thước, viền, độ mờ, hiệu ứng…) mà không cần sửa ảnh gốc.
  • ✅ Dễ hoàn tác: Nếu không muốn sửa nữa, chỉ cần xóa đoạn CSS đã thêm.

3. Khi nào nên và không nên dùng cách này?

  • Nên dùng khi:
    • Ảnh không tìm thấy trong quản trị viên hoặc Media Library.
    • Không muốn thay đổi code theme gốc.
    • Chỉnh sửa ảnh tạm thời hoặc tạo hiệu ứng.
  • Không nên dùng khi:
    • Có quyền chỉnh sửa trực tiếp ảnh trong Media hoặc trong Elementor (nếu dùng).
    • Cần thay đổi ảnh thực tế, nội dung của ảnh (nên sửa trực tiếp trên file ảnh).

Các bước thực hiện:

🔥 Bước 1: Xác định ảnh cần chỉnh sửa

  • Bước này quan trọng vì giúp bạn biết chính xác cần chỉnh sửa ảnh nào.

👉 Cách làm:

  1. Chuột phải vào ảnh muốn chỉnh sửa trên trang web.
  2. Chọn Inspect hoặc Kiểm tra (nếu dùng Chrome, Firefox) như hình minh họa:

🔎 Bước 2: Xem mã HTML của ảnh

Sau khi chọn Inspect, bạn sẽ thấy một phần như sau:

<img src="https://example.com/path-to-image.jpg" class="featured-image" alt="Ảnh mẫu" />
  • class=”featured-image”: Đây là class CSS của ảnh.
  • src=”…”: Đường dẫn ảnh.
  • alt=”…”: Mô tả ảnh.

👉 Chọn class hoặc đường dẫn ảnh để chỉnh sửa. Trong ví dụ trên, mình sẽ dùng .featured-image.

🔧 Bước 3: Thêm mã CSS tùy chỉnh

Cách 1: Dùng Customizer trên WordPress

  1. Vào Giao diện (Appearance) > Tùy chỉnh (Customize) > CSS bổ sung (Additional CSS).
  2. Dán đoạn mã CSS vào ô trống như sau:
/* Chỉnh sửa ảnh bằng class */
.featured-image {
width: 300px; /* Đặt chiều rộng 300px */
border: 2px solid red; /* Viền đỏ 2px */
filter: grayscale(50%); /* Làm mờ màu 50% */
border-radius: 10px; /* Bo góc ảnh 10px */
opacity: 0.8; /* Độ mờ 80% */
}/* Chỉnh sửa ảnh bằng đường dẫn src */
img[src*=“path-to-image.jpg”] {
border: 3px solid blue;
filter: brightness(1.2);
}
👉 Giải thích:
  • .featured-image: Nhắm vào class của ảnh.
  • img[src*="path-to-image.jpg"]: Nhắm vào ảnh có URL chứa "path-to-image.jpg".
  • Bạn chỉnh các thông số width, border, opacity theo ý mình.

Cách 2: Dùng plugin Custom CSS

Nếu theme không có Customizer, bạn có thể cài plugin:

  • Simple Custom CSS and JS: Tìm và cài trên WordPress.
  • Thêm mã CSS như cách 1.

🔥 Bước 4: Kiểm tra kết quả

  • Nhấn Xuất bản (Publish) để lưu thay đổi.
  • F5 làm mới trang để xem ảnh đã thay đổi chưa.
  • Nếu chưa thấy hiệu lực:
    • Kiểm tra lại class hoặc đường dẫn ảnh.
    • Kiểm tra ảnh có bị CSS khác đè không (có dấu chấm than màu vàng khi inspect là đang bị đè).

💡 Ví dụ thực tế

Giả sử ảnh bạn cần chỉnh sửa có HTML như sau:

<img src="https://example.com/images/product.jpg" class="product-image" />

CSS chỉnh sửa:

/* Dùng class */
.product-image {
width: 200px;
border: 2px dashed green;
filter: sepia(40%);
}/* Dùng src ảnh */
img[src*=“product.jpg”] {
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
Chúc bạn thành công!
Xem thêm:

Bài viết cùng chủ đề: