Nội dung mã hướng dẫn này cho phép bạn thêm hình ảnh nổi bật mặc định vào trước tiêu đề ở bất kỳ bài viết nào cho genesis framework, nó sẽ hiển thị hình ảnh với kích thước đầy đủ được bắt sát vào 2 bên lề trên div content tạo nên hiệu ứng tuyệt đẹp cho trang web của bạn.
Dưới đây là hình ảnh đặc trưng hiển thị trên tiêu đề bài viết được thực hiện trên sample, trong danh sách child theme tốt nhất của genesis framework.
Để thực hiện việc này chúng ta sẽ thực hành qua 2 bước cơ bản bên dưới, chú ý lên sử dụng hình ảnh với kích thước chiều rộng trên 850px để đảm bảo nội dung được hiển thị tốt nhất.
Thêm hình ảnh nổi bật trên tiêu đề Genesis Framework
Nhược điểm của bài hướng dẫn này là khi sử dụng ảnh vưới kích thước lớn sẽ ảnh hưởng đến tốc độ load trang của bạn, vì thế hãy cân nhắc trước quyết định của mình.
1. Thêm chức năng
Sao chép toàn bộ mã bên dưới đây và dán vào functions.php trong thư mục child theme của bạn, mặc định ở you/contents/themes//functions.php.
2. Thêm thuộc tính CSS
Thêm đoạn CSS sau vào phần cuối của tệp tin style.css trong thư mục chủ đề con của bạn.
3. Ảnh mặc định
Bạn có thể sử dụng mã sau để thay thế mã PHP ở trên. Đoạn thứ 2 này cho phép bạn hiển thị hình ảnh dự phòng nếu không có gì được thêm vào hộp hình ảnh đặc trưng trên màn hình chỉnh sửa bài viết.
Trong ví dụ này, một ảnh mặc định có tên default.png được tải lên thư mục images trong chủ đề con. Và giờ đây hãy lưu lại toàn bộ thay đổi của bạn, và tải lên ảnh mặc định với tên default.png upload vào thư mục images của bạn. Hãy xem kết quả ngay.
Lời kết
Trên đây là bài hướng dẫn bạn cách làm thế nào để thêm ảnh đại diện vào tiêu đề bài viết theme genesis framework, hy vọng bài viết này sẽ hữu ích cho bạn, đừng quên để lại nhận xét của bạn bên dưới nhé.
Trả lời