[Thủ Thuật WP] Hướng Dẫn Thêm Tùy Chỉnh Kích Thước ảnh Trong ...

Nếu bạn muốn thêm tủy chỉnh kích thước ảnh trên website của bạn thì bài viết này sẽ dành riêng cho bạn.

Các kích thước ảnh mặc định trong WordPress ?

WordPress có 3 loại kích thước ảnh mặc định gồm:

+ Thumbnail: 150 x 150 + Medium: 300 x 300 + Large: 1024 x 1024

Vậy nên mỗi lần bạn upload một ảnh lên WordPress sẽ tự động tạo 3 kích thước ảnh như trên dù bạn có dùng hay không dùng chúng.

Tại sao phải thay đổi kích thước ảnh mặc định

Kích thước ảnh mặc định của WordPress là tiêu chuẩn nhưng đôi khi bạn cần có những kích thước khác nhau để sử dụng trong Plugin hoặc Theme của mình.

Mặc khác việc thay đổi kích thước ảnh mặc định cũng góp phần giúp bạn giảm bớt dung lượng của server với những ảnh không cần thiết.

Chính vì lý trên, WordPress cũng đã hỗ trợ cho phép các lập trình viên thay đổi giá trị mặc định kích thước của ảnh.

Hướng dẫn thay đổi kích thước ảnh mặc định trong WordPress bằng Media

Chúng ta có thể thay đổi kích thước ảnh mặc định WordPress bằng Media Setting có sẵn trong WordPress. Trong trang quản trị vào Settings -> Media. Ở đây bạn có thể thay đổi 3 giá trị mặc định của WordPress dễ dàng. Sau đó Save lại

Image

Hướng dẫn thay đổi kích thước ảnh mặc định trong WordPress

Thay vì sử dụng các tính năng mặc định của WordPress chúng ta còn có 2 cách khác

1- Thêm code để thay đổi giá trị mặc định

2- Sử dụng Plugin có sẵn

1. Thay đổi kích thước ảnh mặc định bằng code

Vào trong file functions.php trong theme và thêm đoạn code dưới :

// bật hỗ trợ add_image_size (enable the add_image_size function) add_theme_support( 'post-thumbnails' ); add_image_size( 'post-thumbnail size', 800, 240 ); add_image_size( 'homepage-thumb size', 220, 180 ); add_image_size( 'fullpage-thumb size', 590, 790 );

Bây giờ mỗi lần upload ảnh, WordPress sẽ tự tạo các bản sao kích thước ảnh tùy chỉnh mới.

Image

Để hiển thị ảnh có kích thước tùy chỉnh mới bạn sử dụng function.

the_post_thumbnail( 'post-thumbnail' );

2. Thay đổi kích thước ảnh mặc định bằng Plugin

Ở đây có 2 plugin để làm được việc này:

1. Code Snippets

2. Image Regenerate & Select Crop

Method 1: Code Snippets

1.1. Cài đặt plugin Code Snippets

1.2. Tạo một custom Code Snippet và thêm đoạn code tương tự trên vào

1.3. Sau đó Save lại là xong.

Image

Cách này thực chât vẫn là sử dụng code, nhưng thông qua một plugin thay vì viết code trực tiếp vào file functions.php.

Method 2: Image Regenerate & Select Crop

2.1. Cài đặt Image Regenerate & Selected Crop

2.2. Vào Settings > Media

2.3. Thêm kich thước tùy chỉnh mà bạn muốn và Save lại

Image