VietNetwork.Vn

Bạn có muốn tạo thêm kích thước hình ảnh trong WordPress không?

Theo mặc định, WordPress tự động tạo một số bản sao tải lên hình ảnh ở các kích thước khác nhau. Ngoài ra, các giao diện và plugin WordPress cũng có thể tạo kích thước hình ảnh của riêng chúng.

Trong bài viết này, mình sẽ hướng dẫn bạn cách dễ dàng tạo các kích thước hình ảnh bổ sung trong WordPress và sử dụng chúng trên trang web của bạn.

1. Tại sao phải tạo kích thước hình ảnh bổ sung trong WordPress?

Thông thường, tất cả các giao diện và plugin WordPress phổ biến đều xử lý kích thước hình ảnh rất tốt. Ví dụ: giao diện WordPress của bạn có thể tạo các kích thước bổ sung để sử dụng làm hình thu nhỏ trên các trang lưu trữ.

Tuy nhiên, đôi khi những kích thước hình ảnh này có thể không phù hợp với yêu cầu của riêng bạn. Bạn có thể muốn sử dụng kích thước hình ảnh khác trong giao diện con hoặc bố cục lưới bài đăng.

Bạn có thể làm điều này bằng cách tạo các kích thước hình ảnh bổ sung trong WordPress và sau đó gọi các kích thước này bất cứ khi nào bạn cần.

Chúng ta hãy xem cách tạo kích thước hình ảnh bổ sung trong WordPress.

2. Đăng ký kích thước hình ảnh bổ sung cho giao diện của bạn

Hầu hết các giao diện WordPress bao gồm tất cả các giao diện WordPress hàng đầu đều hỗ trợ tính năng hình thu nhỏ bài đăng (hình ảnh nổi bật) theo mặc định.

Tuy nhiên, nếu bạn đang tạo một giao diện WordPress tùy chỉnh thì bạn sẽ cần thêm hỗ trợ cho hình thu nhỏ của bài đăng bằng cách thêm mã sau vào tập tin functions.php của giao diện.

add_theme_support( 'post-thumbnails' );
Sau khi bạn bật hỗ trợ cho hình thu nhỏ của bài đăng, bây giờ bạn có thể sử dụng chức năng đăng ký kích thước hình ảnh bổ sung bằng cách sử dụng hàm add_image_size ().

Hàm add_image_size được sử dụng ở định dạng sau:

add_image_size( 'name-of-size', width, height, crop mode );
Mã ví dụ có thể giống như sau:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
Bây giờ nếu bạn để ý, mình đã 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.

Chúng ta hãy xem trình bày từng ví dụ và cách bạn có thể sử dụng chúng trong các dự án của riêng mình.

2.1. Chế độ cắt cứng

Như bạn có thể nhận thấy, có một giá trị "true" được thêm vào sau chiều cao. Điều này yêu cầu WordPress cắt hình ảnh chính xác với kích thước mà mình đã xác định (trong trường hợp này là 120 x 120px).

Phương pháp này được sử dụng để đảm bảo rằng mọi thứ đều tương xứng chính xác. 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 dưới tùy thuộc vào kích thước.


2.2. Chế độ cắt mềm

Theo mặc định, chế độ cắt xén 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 hình ảnh. Vì vậy, bạn có thể không nhận được kích thước mà bạn muốn. Thông thường, nó khớp với kích thước chiều rộng và chiều cao khác nhau dựa trên tỷ lệ của từng hình ảnh. Một màn hình ví dụ sẽ như thế này:


2.3. Chế độ chiều cao không giới hạn

Đôi khi, bạn có những hình ảnh siêu dài muốn sử dụng trong thiết kế của mình, nhưng bạn muốn đảm bảo rằng chiều rộng bị hạn chế. Ví dụ, hình ảnh đồ họa thông tin có xu hướng rất dài và thường rộng hơn chiều rộng nội dung.

Chế độ này cho phép bạn chỉ định chiều rộng sẽ không phá vỡ thiết kế của bạn trong khi vẫn để chiều cao là không giới hạn.


3. Hiển thị các kích thước hình ảnh bổ sung trong giao diện WordPress của bạn

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

<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
Lưu ý: Đoạn mã này phải được dán bên trong vòng lặp đăng 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 giao diện WordPress của mình. Bạn có thể nên quấn nó với kiểu dáng phù hợp với nhu cầu của bạn.

4. Tạo lại 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ó thể bạn sẽ phải tạo lại hình thu nhỏ.

Hàm add_image_size () chỉ tạo kích thước từ thời điểm nó được thêm vào giao diện. Điều này có nghĩa là 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.

Để khắc phục điều này, bạn cần tạo lại kích thước ảnh mới cho các ảnh cũ hơn. Điều này được thực hiện dễ dàng bởi plugin có tên là Regenerate Thumbnails. Sau khi bạn cài đặt và kích hoạt plugin, một tùy chọn mới sẽ được thêm vào trong menu: Tools >> Regenerate Thumbnails


Bạn sẽ thấy tùy chọn tạo lại hình thu nhỏ cho tất cả hình ảnh hoặc chỉ những hình ảnh nổi bật. Mình khuyên bạn nên tạo lại tất cả hình ảnh để tránh bất kỳ hành vi không mong muốn nào hoặc hình ảnh bị hỏng.

Để biết thêm chi tiết, hãy xem bài viết của mình về cách dễ dàng tạo lại kích thước hình ảnh mới trong WordPress.

5. Bậ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 đã bật kích thước hình ảnh trong giao diện của mình, việc sử dụng chỉ giới hạn ở giao diện của bạn, điều này 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 cung cấp nó cho tác giả bài đăng để sử dụng trong nội dung bài đăng.

Bạn có thể thực hiện việc này bằng cách thêm mã sau vào tập tin chức năng của giao diện.

function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        'homepage-thumb' => 'Homepage Thumbmail',
        'singlepost-thumb' => 'Infographic Single Post'
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );
Đừng quên lưu các thay đổi của bạn sau khi thêm mã.

Bây giờ bạn có thể truy cập và tải một hình ảnh lên một bài đăng hoặc trang WordPress. Trong cài đặt khối hình ảnh, bạn sẽ thấy các kích thước hình ảnh tùy chỉnh của mình trong tùy chọn 'Image size'.


Bạn và các tác giả khác làm việc trên trang web của bạn hiện có thể chọn các tùy chọn kích thước này khi thêm hình ảnh vào các bài đăng và trang.

Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo kích thước hình ảnh bổ sung trong WordPress. Bạn cũng có thể muốn xem bài viết của mình về các plugin nén hình ảnh tốt nhất cho WordPress và hướng dẫn hiệu suất WordPress của mình để cải thiện tốc độ trang web của bạn.