NộI Dung
- Vấn đề với WordPress và "hình ảnh linh hoạt"
- Giải pháp không phải jQuery
- Mật mã
- Một lời thú nhận
- Cảnh báo
- Kiến thức cần thiết: PHP và CSS cơ bản
- Đòi hỏi: Cài đặt WordPress, trình soạn thảo văn bản được lựa chọn
- Thời gian dự án: 10 phút
Nếu bạn đăng ký phiên bản in của tạp chí .net (nếu không, tại sao không !?), bạn sẽ thấy rằng ấn bản tháng này có một bài báo xuất sắc về “Thiết kế đáp ứng với WordPress”.
Trong bài viết, tác giả Jesse Friedman đã phác thảo một loạt các kỹ thuật thực sự hữu ích để tận dụng tối đa và khắc phục chức năng vốn có của WordPress để tạo ra một trang web đáp ứng thực sự hiệu quả. Nếu bạn đang nghĩ đến việc tạo ra một trang web đáp ứng với WordPress, bạn chắc chắn nên chọn một bản sao bài viết của anh ấy. Đây là một cuốn sách phải đọc.
Gần đây, tôi đã xây dựng lại blog cá nhân của mình trên WordPress bằng cách sử dụng phương pháp đáp ứng ưu tiên cho thiết bị di động, tôi đã quen thuộc với một số kỹ thuật được đề cập trong bài viết. Tuy nhiên, một điều thực sự nổi bật đối với tôi là cách tiếp cận của Jesse để kích hoạt hình ảnh linh hoạt thông qua jQuery.
Vấn đề với WordPress và "hình ảnh linh hoạt"
Tôi chắc chắn rằng tất cả các bạn đều biết "hình ảnh linh hoạt" - tận dụng chiều rộng tối đa: 100% - yêu cầu rằng hình ảnh không có chiều rộng hoặc chiều cao cố định để chúng có thể chia tỷ lệ với kích thước của vùng chứa. Thật không may, WordPress tự động tính toán kích thước của hình ảnh được tạo từ thư viện Media và thêm các thuộc tính chiều rộng và chiều cao tương ứng vào bất kỳ thẻ img> nào.
Điều này rất tốt cho tốc độ kết xuất trang nhưng nó ném to lớn cờ lê trong hoạt động khi nói đến việc tạo bố cục đáp ứng vì kích thước hình ảnh không còn bị giới hạn bởi kích thước của vùng chứa của chúng.
Đó là một vấn đề.
Giải pháp không phải jQuery
Trong bài viết của mình, Jesse ’đề xuất sử dụng jQuery để xóa các thuộc tính chiều rộng và chiều cao khỏi tất cả các thẻ img> trên trang khi nó đã tải xong. Điều này chắc chắn hiệu quả nhưng khi xây dựng trang web của tôi, tôi không thích ý tưởng dựa vào JavaScript để đạt được điều này, đặc biệt nếu có nhiều hình ảnh trên trang được đề cập.
Đây là nơi các bộ lọc WordPress đã giải cứu.
Codex WordPress định nghĩa một bộ lọc là:
“... hooks mà WordPress khởi chạy để sửa đổi văn bản của nhiều loại khác nhau trước khi thêm nó vào cơ sở dữ liệu hoặc gửi nó đến màn hình trình duyệt.”
Hóa ra đây chính là thứ chúng ta cần. Bằng cách thiết lập bộ lọc để chạy trên tất cả các hình ảnh như là hành động cuối cùng trước khi chúng được hiển thị trên trang, chúng tôi có thể sử dụng PHP để loại bỏ các thuộc tính chiều rộng và chiều cao, do đó tránh được nhu cầu thao tác DOM (có thể) tốn kém thông qua JavaScript.
Mật mã
- /**
- * CÁC CHỨC NĂNG ẢNH HƯỞNG
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (‘image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- function remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (chiều rộng
Trong đoạn mã trên, chúng tôi đang thêm hai bộ lọc bằng cách sử dụng hàm add_filter. Đối số đầu tiên là bộ lọc mà chúng ta muốn nối vào và đối số thứ hai chỉ định chức năng chúng ta muốn chạy khi bộ lọc được gọi.
Trong mã của chúng tôi, chúng tôi nối vào hai hàm ít người biết:
- post_thumbnail_html - hình ảnh được truy xuất với post_thumbnail ()
- image_send_to_editor - hình ảnh được thêm vào trình chỉnh sửa
Sau đó, chúng tôi sử dụng một biểu thức chính quy để xóa cả thuộc tính chiều rộng và chiều cao khỏi thẻ hình ảnh. Giờ đây, khi hình ảnh của chúng tôi được gửi đến trình duyệt, chúng có thể hoàn toàn 'linh hoạt' giống như ông Marcotte đã nói với chúng tôi rằng họ nên làm vậy.
Một lời thú nhận
Tôi phải thú nhận rằng tôi đã có ý tưởng sử dụng add_filter để loại bỏ các thuộc tính mà tôi không thể tìm thấy các bộ lọc WordPress chính xác để kết nối.
Sau rất nhiều tìm kiếm, cuối cùng tôi đã xem được bài đăng cực kỳ hữu ích này trên Wordpress Stack Exchange của Nathaniel Taintor, bài đăng này cung cấp thông tin về hai bộ lọc tôi cần.
Cảnh báo
Theo như tôi biết, điểm hạn chế duy nhất của phương pháp này là nó không xóa các thuộc tính chiều rộng và chiều cao khỏi tất cả các hình ảnh trên trang web của bạn. Tôi thấy đây là một vấn đề, đặc biệt là với hình ảnh Gravatar mà WordPress sử dụng trong các nhận xét.
Nếu bất kỳ ai có giải pháp cho vấn đề này, vui lòng để lại bình luận để tất cả chúng ta đều có thể hưởng lợi.
Tôi hy vọng điều này hữu ích và chứng minh một giải pháp thay thế dựa vào JavaScript để triển khai “hình ảnh linh hoạt” trên các trang web WordPress.
Từ ngữ: David Smith
Dave Smith là nhà thiết kế mặt tiền có trụ sở gần thành phố xinh đẹp Bath, Vương quốc Anh. Khi anh ấy không làm việc trên các dự án web mới và thú vị, anh ấy có thể chơi kèn trumpet trong mọi thứ, từ nhóm nhạc jazz Big Band đến dàn nhạc giao hưởng. Bạn có thể bắt kịp Dave trên Twitter với tên @get_dave.
