Hình thu nhỏ trong wordpress là gì?

Hình thu nhỏ có ích ở mọi nơi trong Wordpress. Dưới đây là hướng dẫn về các cách khác nhau để cắt hình ảnh trong Wordpress

1. Trang Chủ
2. Chia sẻ, Bán và Xuất bản Ảnh
3. Wordpress cho các nhiếp ảnh gia
4. Hướng Dẫn Cắt Thumbnail Trong Wordpress

Bởi David Coleman

Cập nhật mới nhất. Ngày 27 tháng 6 năm 2022

Đã nộp theo. Wordpress dành cho Nhiếp ảnh gia

Chủ đề. Thủ thuật Wordpress

Bài đăng này có thể bao gồm các liên kết liên kết. Đọc thêm

Hình thu nhỏ có ích ở mọi nơi trong Wordpress. Rõ ràng nhất là trên trang chủ với danh sách các bài đăng trên blog. Bạn cũng có thể sử dụng chúng trong nội dung của một bài viết. Và tùy thuộc vào chủ đề của bạn, chúng cũng có thể được sử dụng trên danh sách danh mục, danh sách thẻ, kết quả tìm kiếm hoặc thậm chí là các tiện ích con. Wordpress cung cấp cho bạn một số tùy chọn cơ bản được đưa vào bảng điều khiển quản trị viên, nhưng bạn cũng có thể chỉ định kích thước hình ảnh thu nhỏ bổ sung. Đây là một hướng dẫn để làm điều đó

Khi bạn đang đặt kích thước hình thu nhỏ, bạn có thể chọn cách cắt hình thu nhỏ của mình. Có lẽ bạn muốn phù hợp với một phần cụ thể của trang của bạn. Có lẽ bạn muốn hình vuông hoặc hình thu nhỏ rất rộng nhưng hẹp. Hoặc có thể bạn muốn đảm bảo rằng toàn bộ hình ảnh luôn hiển thị. Vì vậy, đây là hướng dẫn về các chế độ cắt khác nhau cho hình thu nhỏ có sẵn trong Wordpress

Đối với ví dụ này, tôi sẽ sử dụng đồ họa đơn giản này để bạn có thể dễ dàng xem phần nào của hình ảnh đang được cắt bằng các chế độ cắt khác nhau. Vì ảnh ngang (ngang) và ảnh dọc (dọc) không phải lúc nào cũng được xử lý theo cùng một cách với cùng một chức năng nên tôi đã bao gồm cả hai ở đây. Đây là những tập tin gốc được tải lên. Cả hai đều được tải lên dưới dạng hình ảnh jpg 1024px x 600px

cây trồng mềm

Soft Crop trong Wordpress giống như cái thường được gọi là Fit crop và là thứ mà chúng ta thường nghĩ là thay đổi kích thước thuần túy. Nó tỷ lệ thuận, vì vậy toàn bộ diện tích của hình ảnh được giữ lại. Toàn bộ hình ảnh sẽ nằm vừa trong một hộp có kích thước bạn chỉ định mà không cần cắt bất kỳ hình ảnh nào. Vì vậy, nếu hình dạng của hình ảnh không hoàn toàn giống với hình dạng của hộp, bạn sẽ có khoảng trống

Có hai cách bạn có thể chỉ định cắt cứng. Một trong số chúng nằm trong bảng điều khiển Wordpress trong Cài đặt> Phương tiện. Khi bạn đặt kích thước hình thu nhỏ trên trang đó, bạn có một hộp kiểm cho “Cắt hình thu nhỏ theo kích thước chính xác (thông thường hình thu nhỏ có tỷ lệ thuận)”. Không chọn hộp kiểm đó đang thiết lập một cây trồng mềm

Nếu bạn đã thêm kích thước hình ảnh bổ sung thông qua chức năng của mình. php với chức năng add_image_size, bạn chỉ định cắt mềm với thuộc tính FALSE, như thế này

add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );

Với điều đó, bạn kết thúc với điều này cho hình ảnh phong cảnh

và cái này cho ảnh chân dung

Trong ví dụ này (và những ví dụ bên dưới), bạn sẽ thay đổi tên, chiều rộng và chiều cao thành bất kỳ thứ gì bạn muốn. Nếu bạn muốn biết thêm thông tin về cách sử dụng add_image_size trong hàm. php, hãy xem bài đăng của tôi về Cách thay đổi kích thước hình thu nhỏ của Wordpress

cây trồng cứng

Cắt cứng sẽ lấp đầy một hộp có bất kỳ kích thước nào bạn chỉ định và cắt bỏ bất kỳ phần nào khác của hình ảnh không vừa với hộp đó. Nếu bạn muốn tạo hình thu nhỏ hình vuông từ hình chữ nhật, hãy đặt chiều rộng và chiều cao giống nhau. Bạn có thể xem các loại cây trồng cứng hình vuông và hình chữ nhật khác nhau có sẵn trên trang chủ của tôi. Nó có ưu điểm là đảm bảo tất cả các hình thu nhỏ đều có hình dạng giống nhau, điều mà tôi thích vì sự gọn gàng của nó

Có hai cách bạn có thể chỉ định cắt cứng. Một trong số chúng nằm trong bảng điều khiển Wordpress trong Cài đặt> Phương tiện. Khi bạn đặt kích thước hình thu nhỏ trên trang đó, bạn có một hộp kiểm cho “Cắt hình thu nhỏ theo kích thước chính xác (thông thường hình thu nhỏ có tỷ lệ thuận)”. Kiểm tra xem có đang thiết lập một cây trồng cứng không

Nếu bạn chỉ định nó trong hàm. php, nó trông giống như thế này

add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );

Cùng với đó, bạn thiết lập điều này cho hình ảnh phong cảnh

Và cái này cho ảnh chân dung

Sử dụng cây trồng mảng

Cắt cứng và cắt mềm là các loại cắt phổ biến nhất được sử dụng cho hình thu nhỏ Wordpress. Theo mặc định, phần cắt cứng tập trung vào giữa hình ảnh và cắt đều từ mỗi bên đối với hình ảnh ở chế độ ngang (ngang) hoặc bằng nhau từ trên xuống dưới đối với hình ảnh ở hướng dọc (dọc)

Nhưng nếu bạn muốn tập trung vào một phần khác của hình ảnh thì sao? . Với những thứ này, bạn chỉ định trục x (trái, giữa, phải) và trục y (trên, giữa, dưới). Đây là những hương vị khác nhau của cây trồng cứng

Từ đó, có vẻ như hình ảnh nên được chia thành 9 phần (ví dụ:. góc trên bên trái, góc dưới bên phải, v.v.). Nhưng đó không phải là cách nó hoạt động trong thực tế. Do cách Wordpress xử lý cắt xén và cố gắng lấp đầy ít nhất một thứ nguyên, nên không phải tất cả các hướng dẫn trục x và trục y này đều phù hợp với tất cả các hình ảnh. Nghĩa là, các hướng dẫn liên quan cho hình ảnh ngang (ngang) khác với hướng dẫn cho hình ảnh dọc (dọc). Ví dụ, mặc dù nghe có vẻ như 'trên cùng bên trái' chỉ là một góc, nhưng nó không hoạt động theo cách đó. Trong thực tế, thay vì 9 phần, hình ảnh được chia thành 3 phần. Các hướng dẫn trục x hoặc y có phù hợp hay không tùy thuộc vào việc hình ảnh ở hướng ngang hay dọc

Để minh họa, tôi đã bao gồm những gì xảy ra theo cả hai hướng bên dưới

Cắt mảng không có sẵn thông qua bảng điều khiển Wordpress thông thường. Để sử dụng chúng, bạn chỉ định chúng trong các chức năng của mình. php bằng hàm add_image_size. [Đây là thông tin thêm về điều đó. ]

Trên cùng bên trái

Đây là cách bạn tập trung phần cắt cứng ở trên cùng bên trái

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'top' ) );

Đây là những gì xảy ra với một hình ảnh theo hướng ngang (ngang). Như bạn có thể thấy, đó là chức năng tương đương với việc chỉ sử dụng phía bên trái

Và đây là những gì xảy ra với một hình ảnh theo hướng dọc (dọc). Nó chỉ mất hàng đầu

Trung tâm hàng đầu

Đây là cách bạn tập trung phần cắt cứng vào trung tâm trên cùng

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'top' ) );

Đây là những gì bạn nhận được với một hình ảnh phong cảnh. Nó chiếm giữa hình ảnh, giống như phần cắt cứng mặc định

Và đây là những gì bạn nhận được với một hình ảnh chân dung. Nó chiếm phần trên cùng của hình ảnh

Trên cùng bên phải

Đây là cách bạn tập trung phần cắt cứng ở trên cùng bên phải

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'top' ) );

Đây là những gì bạn nhận được với một hình ảnh phong cảnh. Nó chiếm phía bên phải của hình ảnh

Và điều này với một hình ảnh chân dung. Nó chiếm phần trên cùng của hình ảnh

Trung tâm bên trái

Đây là cách bạn tập trung phần cắt cứng vào giữa bên trái

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'center' ) );

Đây là những gì bạn nhận được với một hình ảnh phong cảnh. Nó đi bên trái

Và điều này với một hình ảnh chân dung. Nó tập trung vào giữa, làm cho nó giống như cây trồng cứng mặc định

Trung tâm

Điều này sẽ tập trung vào trung tâm tuyệt đối. Trên thực tế, nó thừa vì nó hoàn toàn giống với hard crop mặc định ở trên

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'center' ) );

Đây là những gì bạn nhận được với một hình ảnh phong cảnh

Và điều này với một hình ảnh chân dung

Trung tâm bên phải

Đây là cách bạn tập trung vùng cắt cứng vào giữa bên phải

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'right', 'center' ) );

Đây là những gì bạn nhận được với một hình ảnh phong cảnh. Nó chiếm phía bên phải

Và điều này với một hình ảnh chân dung. Nó lấy trung tâm, giống như hard crop mặc định

Dưới cùng bên trái

Đây là cách bạn tập trung phần cắt cứng ở phía dưới bên trái

________số 8

Đây là những gì bạn nhận được với một hình ảnh phong cảnh. Nó rẽ trái

Và điều này với một hình ảnh chân dung. Nó chiếm đáy

Trung tâm trên

Đây là cách bạn tập trung phần cắt cứng vào trung tâm dưới cùng

add_image_size( 'wordpress-thumbnail', 200, 200, array( 'center', 'bottom' ) );

Đây là những gì bạn nhận được với một hình ảnh phong cảnh. Nó tập trung vào trung tâm, giống như cắt cứng mặc định

Và điều này với một hình ảnh chân dung. Nó chiếm đáy

Góc phải ở phía dưới

Đây là cách bạn tập trung phần cắt cứng ở phía dưới bên phải

add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );0

Đây là những gì bạn nhận được với một hình ảnh phong cảnh. Nó có quyền

Và điều này với một hình ảnh chân dung. Nó chiếm đáy

Thêm vào chức năng của bạn. tệp php

Các lệnh này đi trong chức năng của bạn. php, tệp này sẽ nằm trong thư mục chủ đề của bạn. Dưới đây là một số mã ví dụ, nhưng trước tiên hãy cẩn thận

Nếu bạn làm hỏng các chức năng của mình. chỉnh sửa php, bạn có thể kết thúc bằng một màn hình trắng trống khiến trang web của bạn không thể truy cập được. Vì lý do đó, tôi ngần ngại khuyên bạn nên làm điều đó nếu bạn chưa cảm thấy thoải mái với nó

Vì vậy, hãy luôn lưu một bản sao lưu để bạn có thể khôi phục nếu cần. Chỉ cần thay thế phiên bản mới, bị lỗi bằng phiên bản cũ, đang hoạt động và trang web sẽ hoạt động trở lại như bình thường. Nếu bạn gặp sự cố khi làm cho các đoạn mã hoạt động, đây là một số mẹo hữu ích giúp bạn khắc phục sự cố. Trước tiên, hãy kiểm tra xem bạn có đang sử dụng dấu ngoặc kép thẳng chứ không phải dấu ngoặc kép không–đó là sự cố phổ biến

Thường nên thêm các đoạn mã này vào cuối tệp trong trường hợp nhà phát triển chủ đề đã thêm một số chức năng. Nhưng những ký tự cuối cùng trong một hàm. php phải là “?>”, vì vậy hãy đảm bảo đoạn mã nằm trước chúng

Một tùy chọn khác nếu bạn không muốn loay hoay với việc chỉnh sửa các chức năng. php trực tiếp là sử dụng một plugin. Đây là một ví dụ về một ví dụ bổ sung chức năng đó

Vật mẫu

add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );1

Ngoài ra, cần lưu ý rằng các chức năng. php là một phần của chủ đề của bạn, vì vậy nếu bạn thay đổi chủ đề, những thay đổi bạn đã thực hiện này sẽ không còn hoạt động trừ khi bạn sao chép chúng vào chức năng của chủ đề mới. tập tin php

Lời khuyên

Nếu bạn thử sử dụng nhiều loại cây trồng có cùng kích thước, bạn sẽ gặp sự cố. Tên tệp cho hình thu nhỏ mới sử dụng kích thước để phân biệt chúng với các kích thước khác của cùng một hình ảnh. Nhưng họ không sử dụng loại cây trồng. Vì vậy, nếu bạn cố gắng thêm kích thước hình thu nhỏ với phần cắt xén 200×200, chẳng hạn như phần cắt xén cứng và một kích thước hình thu nhỏ khác với phần cắt xén ở dưới cùng bên phải cũng ở 200×200, thì bạn sẽ chỉ nhận được một . Đó là bởi vì tên tệp cho cả hai sẽ trở thành như thế này

add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );2

Như bạn có thể thấy, không có gì trong tên tệp chỉ định chế độ cắt nào. Khi bạn nhúng hình thu nhỏ qua Thư viện phương tiện, nó sẽ chèn một đoạn mã chỉ định chế độ cắt, nhưng thông tin đó về cơ bản là thông tin lịch sự và không kiểm soát tệp thực tế nào được hiển thị trên trang

Nếu bạn thấy rằng các hình thu nhỏ đã cắt của mình tiếp tục cắt xén khỏi đầu mọi người, hãy xem plugin nhận diện khuôn mặt My Eyes Are Up Here

Mục đích của hình thu nhỏ là gì?

Sự khác biệt giữa hình ảnh và hình thu nhỏ là gì?

Hình thu nhỏ trong bài đăng là gì?

Ý nghĩa của chế độ xem hình thu nhỏ là gì?