Cách tạo kích thước hình ảnh bổ sung trong WordPress

Tháng trước, có một lỗ hổng lớn được phát hiện trong một kịch bản thay đổi kích thước hình ảnh nổi tiếng được gọi là TimThumb. Kể từ đó, cộng đồng đã hợp tác và khắc phục các vấn đề. Mặc dù TimThumb là một tùy chọn khả thi, chúng tôi tin rằng các nhà phát triển chủ đề WordPress nên tập trung vào việc sử dụng các chức năng cốt lõi thay vì dựa vào các tập lệnh của bên thứ ba. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm kích thước hình ảnh bổ sung trong WordPress.


WordPress có một tính năng tích hợp Post Thumbnails aka Hình ảnh nổi bật. Ngoài ra còn có một hàm add_image_size () tích hợp cho phép bạn chỉ định kích thước hình ảnh và cung cấp cho bạn tùy chọn để cắt. Sử dụng các chức năng cốt lõi này trong chủ đề của bạn về cơ bản có thể loại bỏ sự cần thiết của tập lệnh bên thứ ba như TimThumb trong hầu hết các trường hợp.

Đăng ký kích thước hình ảnh bổ sung cho chủ đề của bạn

Bạn sẽ cần bắt đầu bằng cách thêm sự hỗ trợ của hình thu nhỏ bài đăng bằng cách đặt đoạn mã sau vào tệp chủ đề của bạn.

add_theme_support (‘hình thu nhỏ’);

Khi bạn kích hoạt hỗ trợ cho hình thu nhỏ của bài đăng, giờ đây bạn có thể sử dụng chức năng đăng ký kích thước hình ảnh bổ sung với chức năng add_image_size (). Việc sử dụng hàm add_image_size là như thế này: add_image_size (‘name-of-size, chiều rộng, chiều cao, chế độ cắt);

Mã ví dụ có thể trông như:

add_image_size (‘sidebar-thumb’, 120, 120, true); // Chế độ cắt cứng
add_image_size (‘trang chủ-ngón tay cái’, 220, 180); // Chế độ cắt mềm
add_image_size (‘singlepost-thumb’, 590, 9999); // Chế độ chiều cao không giới hạn

Bây giờ nếu bạn chú ý, chúng tôi đã chỉ định ba loại kích thước hình ảnh khác nhau. Mỗi loại có các chế độ khác nhau như cắt cứng, cắt mềm và chiều cao không giới hạn. Vì vậy, hãy bao gồm từng ví dụ và cách bạn có thể sử dụng chúng cho lợi ích của bạn.

Chế độ cắt cứng – Như bạn thấy, có một giá trị thật sự được thêm vào sau chiều cao. Giá trị thực sự đó là bảo WordPress cắt hình ảnh theo kích thước mà chúng ta đã xác định (trong trường hợp này là 120 x 120px). Đây là phương pháp chúng tôi sử dụng rất nhiều trong các thiết kế chủ đề của mình để đảm bảo mọi thứ đều cân xứng và thiết kế của chúng tôi không bị phá vỡ. Chức năng này sẽ tự động cắt hình ảnh từ hai bên hoặc từ trên xuống và dưới cùng tùy thuộc vào kích thước. Nhược điểm của cắt xén cứng là bạn không thể kiểm soát phần nào của hình ảnh được hiển thị.

Sửa bởi Mike Little – Khi bạn đã tải lên một hình ảnh và trước khi bạn chèn vào bài đăng, bạn có thể nhấp vào ‘chỉnh sửa hình ảnh’ và từ đó thay đổi hình thu nhỏ hoặc toàn bộ hình ảnh, tỷ lệ, xoay hoặc lật hình ảnh và cho hình thu nhỏ chọn phần chính xác của hình ảnh bạn muốn.

Chế độ cắt mềm – Theo mặc định, chế độ cắt mềm được bật, đây là lý do tại sao bạn không thấy bất kỳ giá trị bổ sung nào được thêm vào sau chiều cao. Phương pháp này thay đổi kích thước hình ảnh theo tỷ lệ mà không làm biến dạng nó. Vì vậy, bạn có thể không có được kích thước mà bạn muốn. Thông thường, nó phù hợp với kích thước chiều rộng và chiều cao khác nhau dựa trên từng tỷ lệ hình ảnh. Một ví dụ hiển thị sẽ như thế này:

Ví dụ về cây trồng mềm

Chế độ chiều cao không giới hạn – Có những lúc bạn có những hình ảnh siêu dài mà bạn muốn sử dụng trong thiết kế của mình, nhưng bạn muốn chắc chắn rằng chiều rộng bị giới hạn. Việc sử dụng chính mà chúng tôi tìm thấy cho loại kích thước hình ảnh này là trên các bài đăng đồ họa thông tin. Infographics có xu hướng rất dài và đầy đủ thông tin. Cắt xén hình ảnh như vậy trên một trang bài đăng không phải là một ý tưởng tuyệt vời. Nhưng bản chất infographics rộng hơn chiều rộng nội dung. Vì vậy, những gì bạn có thể làm là chỉ định chiều rộng sẽ không phá vỡ thiết kế của bạn trong khi để chiều cao không giới hạn, vì vậy tất cả các đồ họa thông tin có thể được hiển thị mà không có bất kỳ biến dạng nào. Một ví dụ hiển thị sẽ như thế này:

Ví dụ chế độ chiều cao không giới hạn

Hiển thị kích thước hình ảnh bổ sung trong chủ đề WordPress của bạn

Bây giờ bạn đã thêm chức năng cho kích thước hình ảnh mong muốn, hãy xem hiển thị chúng trong chủ đề WordPress của bạn. Mở tệp chủ đề nơi bạn muốn hiển thị hình ảnh và dán đoạn mã sau:

<?php the_post_thumbnail (‘kích thước hình ảnh được chỉ định của bạn’); ?>

Lưu ý: Bit mã này phải được dán bên trong vòng lặp bài.

Đó là tất cả những gì bạn thực sự phải làm để hiển thị các kích thước hình ảnh bổ sung trong chủ đề WordPress của bạn. Bạn có lẽ nên bọc nó xung quanh với kiểu dáng phù hợp với nhu cầu của bạn.

Tái tạo kích thước hình ảnh bổ sung

Nếu bạn không làm điều này trên một trang web hoàn toàn mới, thì có lẽ bạn sẽ phải tạo lại hình thu nhỏ. Cách hoạt động của hàm add_image_size () là nó chỉ tạo các kích thước từ điểm được thêm vào chủ đề. Vì vậy, bất kỳ hình ảnh bài đăng nào được thêm vào trước khi đưa vào chức năng này sẽ không có kích thước mới. Vì vậy, những gì chúng ta cần làm là tái tạo kích thước hình ảnh mới cho hình ảnh bài cũ hơn. Điều này được thực hiện dễ dàng bởi plugin có tên Regenerate Thumbnails. Khi bạn cài đặt và kích hoạt plugin này, một tùy chọn mới sẽ được thêm vào trong menu: Công cụ »Regen. Hình thu nhỏ

Tái tạo màn hình Plugin Thumbnail

Nhấp vào Tạo lại biểu tượng hình thu nhỏ và để plugin thực hiện công việc của nó.

Một plugin khác có thể thực hiện công việc này là Kích thước hình ảnh đơn giản.

Kích hoạt kích thước hình ảnh bổ sung cho nội dung bài đăng của bạn

Mặc dù bạn đã kích hoạt kích thước hình ảnh trong chủ đề của mình, việc sử dụng chỉ giới hạn ở chủ đề của bạn mà không có ý nghĩa gì. Tất cả các kích thước hình ảnh đang được tạo ra bất kể, vậy tại sao không làm cho tác giả bài đăng có thể sử dụng nó trong nội dung bài đăng. Bạn có thể làm điều này bằng cách sử dụng một plugin có tên Kích thước hình ảnh đơn giản.

Khi bạn cài đặt và kích hoạt plugin này, các tùy chọn mới sẽ được thêm vào trang Cài đặt »Phương tiện. Bạn sẽ thấy một danh sách các kích thước mà bạn đã xác định trong chủ đề của mình. Tất cả những gì bạn phải làm là đánh dấu vào ô có nội dung Hiển thị trong bài chèn chèn.

Đăng bài cho kích thước hình ảnh bổ sung

Khi bạn chọn hộp này, các kích thước bổ sung sẽ có sẵn để tác giả của bạn sử dụng trong nội dung bài đăng.

Kích thước hình ảnh bổ sung cho bài viết

Lưu ý trong hình trên, chúng tôi có tất cả các kích thước hình ảnh mà chúng tôi đã xác định trong chủ đề của mình có sẵn cho các tác giả của chúng tôi sử dụng trong nội dung bài đăng nếu họ muốn.

Plugin Simple Image Size cũng cho phép bạn tạo kích thước hình ảnh tùy chỉnh trực tiếp từ bảng điều khiển WordPress.

Chúng tôi tin rằng phương pháp này nên được thêm vào theo các thực tiễn tốt nhất cho tất cả các nhà phát triển chủ đề WordPress. Quan điểm của bạn là gì?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map