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
- Trang Chủ
- Chia sẻ, Bán và Xuất bản Ảnh
- Wordpress cho các nhiếp ảnh gia
- 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