Hình ảnh WordPress không hiển thị kích thước đầy đủ

Jonathon. Lời chào từ Locked-Down Vương quốc Anh. Hướng dẫn rất hữu ích. Cảm ơn bạn. Tôi đã lo lắng về những hình ảnh trên trang web của mình trong 2 năm. Tôi bán bản in nên hình ảnh rất quan trọng (đó là thứ tôi bán) nhưng kích thước cũng quan trọng vì tất cả các lý do bạn giải thích. Tôi có hơn 600 hình ảnh (bản in) với các kích cỡ vật lý khác nhau trên trang web của mình. Tôi hiện đang ở chế độ sửa chữa trong khi tôi làm lại tất cả các hình ảnh (Tôi đã ngừng sửa chữa trong 24 giờ nếu bạn muốn xem hình ảnh và hiểu rõ vấn đề của tôi – chúng vẫn như cũ – tôi chưa thay đổi bất kỳ – . Bước 1 là quét tất cả (những gì bạn có thể thấy là ảnh). Bước 2 là dọn dẹp chúng bằng Photoshop Elements 2020. Bước 3 là những gì tôi đang bắt tay vào – lấy png lớn (sạch) thành jpg nhỏ nhưng hấp dẫn để bán. Lời giải thích đơn giản của bạn giúp ích rất nhiều - và dễ làm theo hơn rất nhiều thứ ngoài kia. Cảm ơn bạn

Show

Kích thước hình ảnh WordPress phức tạp hơn bạn mong đợi. Điều cần thiết là phải hiểu cách kích thước hình ảnh hoạt động trong WordPress, kích thước hình ảnh mặc định là gì và cách xác định kích thước hình ảnh tùy chỉnh để quản lý trang web của bạn một cách hiệu quả

Có kiến ​​thức này trong vành đai của bạn sẽ đảm bảo bạn có loại hình ảnh phù hợp với kích thước phù hợp ở đúng vị trí để bạn có thể tận dụng tối đa chiến lược nội dung trực quan của mình

Những chiến thuật này cũng sẽ cải thiện mức độ xứng đáng được chia sẻ của các bài đăng của bạn, điều này sẽ chuyển thành khả năng hiển thị và lưu lượng truy cập nhiều hơn. Thống kê tiết lộ rằng người đọc chỉ nhớ 10% nội dung văn bản họ đọc sau ba ngày, nhưng con số này tăng lên tới 65% nếu bạn thêm hình ảnh trực quan hấp dẫn vào nội dung của mình

Trong hướng dẫn mở rộng này, bạn sẽ tìm hiểu mọi thứ bạn cần biết về kích thước hình ảnh WordPress

Bị kích thích?

Thích xem phiên bản video?

Cách WordPress quản lý hình ảnh bạn tải lên

Tải hình ảnh lên WordPress khá đơn giản, nhưng có rất nhiều thứ xảy ra trong phần phụ trợ của WordPress khi nó xử lý chúng

Xem cách Kinsta chống lại đối thủ. Đối chiếu

Điều đầu tiên WordPress thực hiện khi bạn tải lên một hình ảnh là tạo ba kích cỡ khác nhau cho hình ảnh của bạn. Điều đó có nghĩa là bạn sẽ có bốn hình ảnh cho mỗi hình ảnh bạn tải lên

  • Hình nhỏ
  • Trung bình
  • Lớn
  • Kích thước nguyên mẫu

WordPress tạo tất cả các kích thước khác nhau này để phục vụ hình ảnh của bạn ở kích thước phù hợp nhất cho mỗi khách truy cập. Trang web của bạn sẽ luôn hiển thị hình ảnh chính xác cho người đọc dựa trên thiết bị họ đang sử dụng, tăng tốc và nâng cao trải nghiệm của họ

Bạn luôn có thể chỉnh sửa hình ảnh của mình theo cách thủ công để cung cấp các kích thước bổ sung này, nhưng để thực hiện điều đó một cách chính xác trong một công cụ như Photoshop là một công việc không hề nhỏ. Nó sẽ liên quan đến rất nhiều công việc tẻ nhạt, đó là lý do tại sao WordPress giúp bạn tránh được rắc rối

Hiểu kích thước hình ảnh WordPress có vẻ đơn giản, nhưng nếu không có kiến ​​thức phù hợp, bạn có thể bỏ lỡ khách truy cập và cơ hội chia sẻ nội dung. Nhấp để Tweet

Kích thước hình ảnh WordPress. Những điều cần thiết cần ghi nhớ

Trước khi chúng tôi đi sâu vào các khía cạnh kỹ thuật hơn của kích thước hình ảnh WordPress, bạn nên biết một số lưu ý quan trọng

Chúng tôi đã thảo luận về cách WordPress tạo ba kích thước hình ảnh mặc định cho bạn, nhưng nếu bạn cần một kích thước khác với kích thước mặc định của WordPress thì sao?

Tin tốt. Bạn có thể làm điều đó một cách dễ dàng. WordPress cho phép bạn thay đổi kích thước hình ảnh mặc định và thêm bao nhiêu kích thước bổ sung tùy thích. Chúng tôi sẽ giải thích điều này chi tiết hơn một chút

Nhưng trước khi chúng ta hiểu điều đó, bạn nên biết rằng có những yêu cầu cụ thể để điều này hoạt động như bạn muốn

Một trong số đó là bạn nên bạn sẽ cần. Mặc dù WordPress sẽ làm cho nó nhỏ hơn cho các thiết bị nhỏ hơn, nhưng nó sẽ sử dụng kích thước đầy đủ (kích thước gốc) khi hình ảnh cần ở mức lớn nhất

Giả sử bạn tải lên một hình ảnh nhỏ hơn kích thước lớn nhất mà bạn đã xác định trong WordPress. Trong trường hợp đó, WordPress sẽ không hiển thị chính xác hình ảnh cụ thể đó ở kích thước lớn nhất. Ngoài ra, sẽ có sự giảm chất lượng rõ rệt

Điều đó nói rằng, bạn cũng phải đảm bảo rằng bạn không tải lên hình ảnh lớn hơn kích thước lớn nhất cần có. WordPress sẽ không bao giờ sử dụng những hình ảnh như vậy vì chúng quá lớn và sẽ ăn vào không gian không cần thiết trên máy chủ của bạn

Vì vậy, bạn nên kiểm tra kích thước của hình ảnh bạn đang tải lên và đảm bảo rằng đó là kích thước lớn nhất cần thiết trước khi bạn tải nó lên WordPress, nhưng không lớn hơn kích thước đó

WordPress lưu trữ hình ảnh của bạn ở đâu và như thế nào?

Đối với bảng quản trị của bạn, WordPress lưu trữ hình ảnh tải lên của bạn trong Thư viện phương tiện. Bạn có thể xem tất cả các hình ảnh đã tải lên của mình bằng cách di chuột vào tùy chọn Phương tiện và nhấp vào Thư viện

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Thư viện phương tiện WordPress

Bạn có thể sắp xếp chúng theo loại phương tiện (hình ảnh, video, âm thanh, v.v. ) và ngày. Tuy nhiên, xin lưu ý rằng bạn sẽ chỉ có thể sắp xếp ảnh theo ngày nếu bạn chưa tắt chức năng này trong Cài đặt

Ngoài ra còn có một hộp tìm kiếm ở bên phải để giúp bạn theo dõi hình ảnh đã tải lên của mình. Chỉ cần nhập một từ bạn đã sử dụng trong tiêu đề, chú thích hoặc mô tả hình ảnh của bạn để xác định vị trí của nó

Hình ảnh của bạn được lưu trữ trong các thư mục tải lên của trang web của bạn (wp-content/uploads/). Để truy cập thư mục này, bạn sẽ cần sử dụng ứng dụng khách FTP/SFTP. Sẽ có nhiều thư mục con trong thư mục tải lên của trang web chứa hình ảnh của bạn theo ngày tải lên (giả sử bạn đã bật tùy chọn sắp xếp theo ngày trong Cài đặt của mình)

Bạn cũng có thể tạo các thư mục tùy chỉnh cho các tệp phương tiện của mình, nhưng chúng tôi khuyên bạn chỉ nên thực hiện việc này nếu bạn coi mình là người dùng nâng cao

Kích thước hình ảnh mặc định của WordPress là gì?

Khi nói đến kích thước hình ảnh và WordPress, chúng tôi luôn xem xét bốn kích thước khác nhau, với tệp hình ảnh gốc của bạn và ba kích thước khác nhau mà WordPress tạo theo mặc định

  • Kích thước thu nhỏ. 150px (hình vuông)
  • Kích thước trung bình. Chiều rộng và chiều cao tối đa là 300px
  • Kích thước lớn. Chiều rộng và chiều cao tối đa là 1024px
  • kích thước đầy đủ. Kích thước ban đầu của hình ảnh của bạn

Một lần nữa, như chúng tôi đã đề cập trước đó, bạn sẽ muốn tải lên hình ảnh của mình ở 1024px nếu bạn định chỉ sử dụng các kích thước hình ảnh mặc định này. Điều đó sẽ cho phép hình ảnh của bạn được phân phối chính xác ngay cả ở kích thước lớn nhất, điều này có thể không thực hiện được nếu hình ảnh của bạn có kích thước nhỏ hơn kích thước lớn nhất mà WordPress đang sử dụng (theo mặc định là 1024px)

Kích thước hình ảnh nổi bật lý tưởng của WordPress là gì?

Hình ảnh nổi bật của WordPress rất quan trọng đối với sự tham gia của người đọc. Giống như trang bìa của một cuốn sách, hình ảnh nổi bật cung cấp bản xem trước nội dung sẽ xuất hiện

Chúng thường xuất hiện cùng với các bài đăng trên WordPress, nhưng chúng cũng có thể được đưa vào các trang và loại bài đăng tùy chỉnh. Và vì hình ảnh nổi bật cuối cùng có thể được hiển thị bởi các công cụ tìm kiếm và các trang web truyền thông xã hội, điều quan trọng là phải chọn kích thước phù hợp

Mặc dù có nhiều ý kiến ​​khác nhau về chủ đề này, nhưng sự đồng thuận chung cho rằng kích thước hình ảnh nổi bật lý tưởng của WordPress là khoảng 1200 × 630 pixel. Hình ảnh có các kích thước này phải phù hợp với trang web của bạn, bất kể kích thước màn hình của người đọc lớn hay nhỏ

Cũng đáng lưu ý rằng để làm cho các trang của bạn đủ điều kiện cho nguồn cấp dữ liệu Google Discover (một nguồn lưu lượng truy cập bổ sung lớn từ Google), Google nhấn mạnh rằng kích thước hình ảnh nổi bật trên WordPress của bạn phải rộng ít nhất 1.200 pixel

Nhưng đây có phải là kích thước hình ảnh nổi bật mặc định của WordPress không?

Nó có thể gây ngạc nhiên, nhưng WordPress không thực sự bao gồm cài đặt kích thước hình ảnh nổi bật. Thay vào đó, các hình ảnh nổi bật sẽ mặc định ở kích thước tải lên ban đầu trừ khi bị hạn chế bởi thiết kế của trang web hoặc trừ khi bạn chọn một trong các kích thước mặc định khác của WordPress (như “Trung bình” hoặc “Lớn”)

Tuy nhiên, nhiều chủ đề WordPress — bao gồm chủ đề mặc định của WordPress, Twenty Twenty-One — đặt kích thước hình ảnh tùy chỉnh của riêng chúng cho các hình ảnh nổi bật, vì vậy hãy đảm bảo kiểm tra cài đặt chủ đề của bạn trước

Kích thước hình ảnh tiêu đề WordPress lý tưởng là gì?

Tương tự như hình ảnh nổi bật, hình ảnh tiêu đề có thể giúp độc giả của bạn xem trước chủ đề và tâm trạng của trang. Mặc dù chúng không có xu hướng được chia sẻ trên các trang kết quả tìm kiếm hoặc nguồn cấp dữ liệu truyền thông xã hội, nhưng điều quan trọng đối với tốc độ và tính toàn vẹn của trang web của bạn là chúng phải có kích thước phù hợp

Bởi vì hình ảnh tiêu đề thường phụ thuộc vào thiết kế của trang web nên chúng có thể có nhiều kích thước khác nhau. Không có kịch bản “một kích thước phù hợp với tất cả”, vì vậy, tốt nhất bạn nên cân nhắc thiết kế và khả năng phản hồi của trang web trước khi chọn kích thước hình ảnh tiêu đề WordPress của mình

Điều đó nói rằng, các nhà phát triển chủ đề khuyên rằng hình ảnh tiêu đề WordPress nên dính vào 16. 9 tỷ lệ, chẳng hạn như

  • 1920 × 1080 pixel
  • 1280 × 720 điểm ảnh
  • 1152 × 648 điểm ảnh

Cũng như hình ảnh nổi bật, WordPress không đặt kích thước mặc định cho hình ảnh tiêu đề. Tuy nhiên, chủ đề của bạn có thể đi kèm với một tùy chọn để tùy chỉnh kích thước tiêu đề thông qua cài đặt của chủ đề, trong menu Giao diện

Nếu chủ đề bạn chọn không cung cấp cho bạn tùy chọn thay đổi kích thước hình ảnh tiêu đề WordPress, bạn vẫn có thể tự điều chỉnh nó. Chúng tôi sẽ đề cập đến cách tiếp theo

Cách thay đổi kích thước hình ảnh mặc định (và khi nào bạn cần)

Mặc dù kích thước hình ảnh mặc định của WordPress phù hợp với hầu hết người dùng, nhưng một số người dùng có thể có các yêu cầu khác nhau. Bạn có thể thích kích thước lớn hơn một chút cho hình thu nhỏ của mình hoặc kích thước nhỏ hơn cho hình ảnh lớn

Thay đổi kích thước hình ảnh mặc định trong WordPress sẽ có ý nghĩa khi bạn thấy mình đang chỉnh sửa hầu hết các hình ảnh mà bạn đang tải lên vì kích thước hình ảnh mặc định của WordPress không phù hợp với trường hợp sử dụng của bạn

Trước khi thêm các kích thước hình ảnh tùy chỉnh mới lên trên các kích thước hình ảnh mặc định, hãy lưu ý rằng bạn sẽ lưu trữ nhiều tệp hình ảnh trên cơ sở dữ liệu của trang web hơn mức cần thiết. Điều đó có thể dẫn đến các vấn đề về hiệu suất cho trang web của bạn và tiêu tốn nhiều dung lượng hơn mức cần thiết

Điều tương tự cũng xảy ra với các trang web dựa trên hình ảnh cần tuân theo các kích thước hình ảnh cụ thể. Các nhiếp ảnh gia, nhà thiết kế và những người khác cung cấp hình ảnh nặng muốn có kích thước nhất quán ở mọi nơi trên trang web để đảm bảo tính đồng nhất

Tương tự, một số trang đích cũng cần hiển thị kích thước hình ảnh cụ thể và kích thước hình ảnh mặc định của WordPress có thể không phù hợp. Và một cửa hàng thương mại điện tử thường cần sử dụng hình thu nhỏ lớn hơn, hiển thị chi tiết hơn

Có rất nhiều lý do khác khiến bạn có thể muốn thay đổi kích thước hình ảnh mặc định, nhưng bạn hiểu

WordPress cũng hiểu điều đó nên nó cho phép bạn thay đổi các giá trị mặc định này

Các bước để thay đổi kích thước hình ảnh mặc định của WordPress

Đây là quy trình từng bước cho

Bước 1. Di chuột qua Cài đặt và nhấp vào tùy chọn Phương tiện xuất hiện

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Cài đặt phương tiện WordPress để thay đổi kích thước hình ảnh mặc định

Bước 2. Thay đổi kích thước thành những gì bạn muốn bằng cách chỉnh sửa các số liệu như chúng tôi đã làm bên dưới

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Ví dụ về kích thước hình ảnh được cập nhật trong Cài đặt phương tiện

Bước 3. Nhấp vào nút Lưu thay đổi ở dưới cùng

Bây giờ, tất cả hình ảnh bạn tải lên từ thời điểm này sẽ ở các kích thước mặc định mới này

Một số hướng dẫn ngoài kia sẽ đề nghị bạn nhập “0” cho kích thước hình ảnh mặc định. Tuy nhiên, chúng tôi khuyên bạn không nên làm điều này, ngay cả khi nó có thể giúp bạn tiết kiệm dung lượng

Nếu bạn thay đổi các giá trị này thành “0”, thì WordPress sẽ sử dụng hình ảnh có kích thước đầy đủ (gốc) của bạn ở tất cả các vị trí và trên tất cả các thiết bị, điều này sẽ dẫn đến việc sử dụng băng thông trên trang web của bạn tăng đột biến. Hơn nữa, điều này gần như chắc chắn sẽ làm chậm thời gian tải trang đối với các phần hiển thị nhiều hình ảnh này

Cách thêm kích thước hình ảnh tùy chỉnh vào WordPress

Nếu bạn cần thay đổi tất cả các hình ảnh WordPress trước đây của mình sang các kích thước mới này, bạn có thể sử dụng một số plugin tuyệt vời mà chúng tôi sẽ trình bày chi tiết bên dưới

Đối với người dùng có xu hướng sử dụng nhiều loại hình ảnh khác nhau, có thể cần phải có nhiều kích thước hình ảnh hơn ba kích thước mặc định mà WordPress cung cấp

Kích thước hình ảnh mặc định có thể đủ cho các loại hình ảnh tiêu chuẩn, nhưng đối với những thứ như đồ họa bật lên, tiện ích con hoặc ảnh thanh trượt, có thể bạn sẽ cần nhiều kích thước hình ảnh hơn

Kích thước hình ảnh tùy chỉnh mang lại cho bạn sự linh hoạt để cải thiện chức năng của trang web WordPress của bạn và tiết kiệm rất nhiều thời gian để thay đổi kích thước từng hình ảnh của bạn

Bây giờ chúng tôi đã thiết lập điều đó làm cơ sở của mình, hãy xem xét kỹ hơn quy trình liên quan đến việc thêm các kích thước hình ảnh tùy chỉnh này vào trang web WordPress của bạn

Bạn có hai lựa chọn ở đây. Đầu tiên là sử dụng plugin xử lý mọi thứ cho bạn chỉ với vài cú nhấp chuột. Thứ hai là cách thủ công để thêm các chuỗi mã cần thiết vào tệp trang web của bạn

Trước tiên hãy đến với phương pháp plugin

Thêm kích thước hình ảnh tùy chỉnh bằng cách sử dụng Tạo lại hình ảnh & Chọn cắt

Plugin Image Regenerate & Select Crop vượt xa (thảo luận thêm bên dưới), cho phép tùy chỉnh và chức năng nhiều hơn

Ngoài việc cho phép bạn thay đổi kích thước hình ảnh mặc định, nó còn cho phép bạn tạo lại bất kỳ hình ảnh hiện có nào để phù hợp với kích thước hình ảnh ưa thích của bạn, đặt tùy chọn cắt xén mặc định cho ảnh và tạo lại hình thu nhỏ

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Tùy chọn kích thước hình ảnh tùy chỉnh thông qua plugin Image Regenerate & Select Crop

Sau khi cài đặt và kích hoạt, bạn có thể tạo bao nhiêu kích thước hình ảnh tùy chỉnh mới tùy thích thông qua trang Cài đặt> Phương tiện WordPress tiêu chuẩn

Thêm kích thước hình ảnh tùy chỉnh theo cách thủ công

Mặc dù đây là một quy trình tương đối đơn giản và dễ dàng, nhưng điều đầu tiên bạn nên làm là tạo bản sao lưu trang web của mình phòng trường hợp xảy ra sự cố trong khi thực hiện các điều chỉnh này. Khi quá trình sao lưu hoàn tất, hãy truy cập bảng điều khiển quản trị viên cho trang web WordPress của bạn

Triển khai ứng dụng của bạn lên Kinsta - Bắt đầu với Khoản tín dụng $20 ngay bây giờ

Chạy nút của bạn. js, Python, Go, PHP, Ruby, Java và Scala, (hoặc hầu hết mọi ứng dụng khác nếu bạn sử dụng Dockerfiles tùy chỉnh của riêng mình), trong ba bước đơn giản

Triển khai ngay bây giờ và nhận $20 giảm giá

Khi đó, hãy di chuột qua tùy chọn menu Giao diện và chọn Trình chỉnh sửa (tùy chọn này có thể được đặt tên là Trình chỉnh sửa chủ đề trong một số trường hợp)

Tiếp theo, tìm các chức năng. php và kiểm tra xem mã sau đã có chưa (sử dụng chức năng tìm kiếm để xác định vị trí nhanh chóng). Nếu nó đã ở đó, bạn không cần phải làm gì cả

Nếu không có, bạn cần thêm chuỗi này vào tệp

add_theme_support( 'post-thumbnails' );
Hình ảnh WordPress không hiển thị kích thước đầy đủ
Thêm móc cho kích thước hình ảnh tùy chỉnh vào chức năng. php.

Sau khi thêm mã này vào, bạn bấm vào nút Cập nhật tệp ở phía dưới để kích hoạt chức năng cho phép bạn tạo các kích thước hình ảnh tùy chỉnh

Bây giờ là lúc thêm mã cho các kích thước hình ảnh tùy chỉnh cụ thể mà bạn muốn. Tìm chuỗi “add_image_size” trong hàm của bạn. php vì đó là nơi bạn sẽ cần thực hiện các chỉnh sửa của mình

add_image_size( 'my-custom-image-size', 800, 640 );

Cụ thể, bạn nên cập nhật nội dung bên trong dấu nháy đơn với tên mà bạn muốn đặt tên cho kích thước hình ảnh tùy chỉnh mới của mình. Chúng tôi đề nghị giữ cho nó đơn giản và mô tả (e. g. “chính-bài-hình ảnh”)

Sau khi bạn chăm sóc tên, bạn sẽ cần tự khai báo kích thước hình ảnh. Giá trị số đầu tiên là chiều rộng hình ảnh, trong khi giá trị thứ hai là chiều cao hình ảnh

Đây là một ảnh chụp màn hình hiển thị mã mẫu của chúng tôi được thêm vào các chức năng. tập tin php

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Thêm thứ nguyên kích thước hình ảnh tùy chỉnh vào chức năng. php

Hiểu cắt xén

Khi một hình ảnh được làm nhỏ hơn mà không cắt xén, nó chỉ là phiên bản thu nhỏ của hình ảnh gốc. Tuy nhiên, khi nó được "cắt" hoặc cắt, phần đã cắt sẽ bị xóa khỏi ảnh hoàn thiện

Nó chính xác giống như việc cắt một bức tranh. Nếu bạn lấy kéo của mình đến một bức chân dung và cắt bỏ mọi thứ bên dưới vai của người đó, bạn đã “cắt xén” bức ảnh đó. Nó hoạt động theo cùng một cách kỹ thuật số

Mục đích là để giảm kích thước tệp của hình ảnh, vì cắt xén không phải là lựa chọn phù hợp. Bạn sẽ xóa các phần tử mà bạn có thể muốn giữ lại trong khi duy trì kích thước tệp lớn. Điều đó nói rằng, cắt xén có thể có ý nghĩa đối với kích thước hình ảnh phải phù hợp hoàn hảo với một kích thước cụ thể, chẳng hạn như hình ảnh nổi bật hoặc ảnh hồ sơ

Các đối tượng chính có thể trở nên quá nhỏ so với những thứ như hình ảnh nổi bật. Chúng vẫn có được độ phơi sáng cần thiết khi thay đổi kích thước mà không cắt xén. Vì vậy, hãy tìm ra những gì hoạt động tốt nhất cho các loại hình ảnh khác nhau mà bạn sử dụng và đặt tính năng cắt xén cho phù hợp

Khi thêm kích thước hình ảnh tùy chỉnh, bạn có thể làm cho WordPress tự động cắt hình ảnh dựa trên kích thước bạn đặt và kích thước ban đầu. Bạn cần thêm “true” vào cuối mã

Một lần nữa, đây là ví dụ trên của chúng tôi với tính năng cắt xén được bật

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Tuy nhiên, nếu bạn không muốn cắt ảnh, bạn có thể đặt “false” thay vì “true” hoặc bỏ cả hai. Không đặt một trong hai sẽ khiến mã tự động nhận tùy chọn “false”. Bằng cách đó, WordPress sẽ không cắt hình ảnh của bạn

Thêm kích thước hình ảnh tùy chỉnh vào chủ đề của bạn

Sau khi bạn đã tạo kích thước hình ảnh tùy chỉnh mà mình cần, bạn cũng cần cập nhật mã trong chủ đề của mình. Làm điều này sẽ làm cho chủ đề của bạn hiển thị các kích thước hình ảnh tùy chỉnh này như bạn mong muốn

Nếu bạn là người hoàn toàn mới bắt đầu chỉnh sửa mã, vui lòng tạo lại bản sao lưu trang web của bạn trước khi thực hiện việc này

Bây giờ, bạn cần tìm tệp chủ đề của mình trong vòng lặp bài đăng và thêm đoạn mã sau vào đó

the_post_thumbnail( 'your-specified-image-size' );

Để tìm tệp này, nhấp vào Trình chỉnh sửa chủ đề trong cài đặt Giao diện. Tìm kiếm chỉ số. php ở đây — đây là tệp chủ đề chứa vòng lặp bài đăng mà bạn cần chỉnh sửa

Khi bạn đã tìm thấy nó, hãy thêm mã được đề cập ở trên, như trong hình bên dưới

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Thêm móc cho kích thước hình ảnh tùy chỉnh vào chức năng. php

Một lần nữa, sẽ tốt nhất nếu bạn thay thế phần “new-homepage-feature” bằng tên của kích thước hình ảnh tùy chỉnh mà bạn đã tạo

Mệt mỏi với hỗ trợ lưu trữ WordPress cấp 1 mà không có câu trả lời? . Kiểm tra kế hoạch của chúng tôi

Khi bạn đã thêm mã này và cập nhật tệp, bạn sẽ thấy kích thước hình ảnh tùy chỉnh trong thư viện phương tiện của mình. Tải lên một hình ảnh mới để dùng thử

Cập nhật hình thu nhỏ cũ

Mặc dù việc tạo và thêm các kích thước hình ảnh tùy chỉnh mang lại cảm giác tuyệt vời, nhưng nó lại khiến bạn phải thực hiện một nhiệm vụ mở khác. còn tất cả những hình ảnh cũ mà bạn đã tải lên thì sao?

Đừng lo lắng về điều đó — một số plugin WordPress tuyệt vời rất hữu ích cho nhiệm vụ này. Hãy xem cách họ có thể giúp bạn xử lý các hình thu nhỏ cũ của mình

Tạo lại plugin hình thu nhỏ

cho phép bạn tự động tải lên lại hình ảnh ở các kích thước mới, bao gồm mọi kích thước hình ảnh tùy chỉnh mà bạn đã thêm

Để cài đặt nó, hãy di chuột qua tùy chọn menu Plugins và nhấp vào Thêm mới. Sau đó nhập "Tạo lại hình thu nhỏ" vào hộp tìm kiếm

Cài đặt plugin Tạo lại hình thu nhỏ bằng cách nhấp vào nút Cài đặt ngay

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Cài đặt plugin Tạo lại hình thu nhỏ

Sau khi cài đặt xong, click vào nút Kích hoạt để bắt đầu sử dụng

Tiếp theo, di chuột qua menu Công cụ ở bên trái và nhấp vào Tạo lại hình thu nhỏ

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Trang cài đặt cho plugin Tạo lại hình thu nhỏ

Bạn có thể nhấp vào Tạo lại hình thu nhỏ cho tất cả [#] Tệp đính kèm để tạo kích thước hình ảnh mới cho tất cả các hình ảnh cũ của bạn

Thông tin

Hãy cẩn thận khi chọn hộp kiểm để xóa các tệp hình thu nhỏ đối với các kích thước cũ chưa đăng ký của bạn, vì bạn có thể nhận được các hình ảnh bị hỏng trên trang web của mình nếu trang web vẫn còn các hình ảnh cũ có kích thước mà bạn không còn sử dụng nữa

Như bạn có thể thấy từ hình trên, Tạo lại hình thu nhỏ cũng sẽ liệt kê tất cả các kích thước hình ảnh hiện đang hoạt động trên trang web của bạn

Bạn có thể tìm thấy một số kích thước hình ảnh mà bạn không biết. Thông thường, chúng được tạo bởi plugin, đặc biệt nếu chúng dùng để cải thiện giao diện, thiết kế hoặc chức năng của trang web của bạn

Sử dụng Trình chỉnh sửa kích thước hình ảnh tích hợp trong WordPress

Như chúng tôi đã nhấn mạnh trước đây, bạn chỉ nên tạo các kích thước hình ảnh tùy chỉnh mà bạn thường sử dụng. Đối với kích thước hình ảnh mà bạn dự định chỉ sử dụng trong những trường hợp hiếm hoi, bạn nên chỉnh sửa kích thước hình ảnh theo cách thủ công bằng trình chỉnh sửa kích thước hình ảnh tích hợp sẵn của WordPress

Chúng tôi sẽ cung cấp cho bạn hướng dẫn nhanh giải thích cách bạn có thể sử dụng trình chỉnh sửa tích hợp để chỉnh sửa kích thước hình ảnh một cách nhanh chóng và dễ dàng

Đầu tiên, nhấp vào menu Phương tiện để được đưa đến Thư viện phương tiện. Tiếp theo, nhấp vào hình ảnh có kích thước bạn muốn điều chỉnh

Sau đó click vào nút Edit Image ngay bên dưới ảnh

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Nút Chỉnh sửa hình ảnh

Bạn sẽ thấy kích thước hình ảnh hiện tại và có thể điều chỉnh nó tại đây. Chỉ cần đặt kích thước hình ảnh bạn muốn và sau đó nhấp vào nút Tỷ lệ, và bạn đã sẵn sàng để sử dụng

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Chỉnh sửa kích thước hình ảnh

Điều chỉnh kích thước sẽ tự động lưu ngay khi bạn nhấn Tỷ lệ. Nếu bạn không thích kích thước hình ảnh mới vì bất kỳ lý do gì, bạn luôn có thể hoàn nguyên về kích thước ban đầu bằng cách sử dụng tùy chọn Khôi phục hình ảnh gốc (ngay bên dưới trường kích thước hình ảnh)

Chỉnh sửa hình ảnh trong WordPress Gutenberg

Nếu bạn đang sử dụng Gutenberg, bạn có thể nhanh chóng chỉnh sửa kích thước hình ảnh của hình ảnh khi bạn thêm chúng trong quá trình tạo bài đăng

Hình ảnh WordPress không hiển thị kích thước đầy đủ
Thay đổi kích thước hình ảnh qua Gutenberg

Như bạn có thể thấy trong hình trên, khi bạn tải lên một hình ảnh khi tạo bài đăng trong Gutenberg, bạn có thể chọn kích thước hình ảnh hiện có hoặc thay đổi kích thước hình ảnh ngay trong tùy chọn bài đăng

Nếu bạn đã thêm kích thước hình ảnh tùy chỉnh mới vào tệp chủ đề của mình, bạn sẽ tìm thấy tất cả chúng trong menu thả xuống Kích thước hình ảnh

Bạn cũng có thể thay đổi kích thước hình ảnh bằng cách sử dụng trường ngay bên dưới nó. Tất cả những gì bạn cần làm là nhập kích thước mong muốn vào các trường và hình ảnh sẽ tự động thay đổi kích thước theo thông số kỹ thuật mới của bạn

Tối ưu hóa hình ảnh của bạn

Không có hướng dẫn liên quan đến hình ảnh nào hoàn chỉnh mà không đề cập đến việc tối ưu hóa hình ảnh. Mặc dù chúng tôi đã thảo luận rất chi tiết về việc tối ưu hóa hình ảnh, nhưng việc đề cập đến một số mẹo nhanh chắc chắn sẽ không gây hại gì

Rốt cuộc, khi bạn thêm kích thước hình ảnh tùy chỉnh, bạn sẽ cần biết cách tối ưu hóa hình ảnh của mình để đảm bảo chúng không ảnh hưởng đến hiệu suất trang web của bạn hoặc tiêu tốn nhiều tài nguyên máy chủ hơn mức cần thiết.

Như đã nói, đây là một số mẹo nhanh để giúp bạn bắt đầu với việc tối ưu hóa hình ảnh

Quyết định loại tệp

Chỉ cần chọn đúng loại tệp cho hình ảnh của bạn có thể giảm đáng kể kích thước của chúng. Mặc dù có nhiều loại tệp hình ảnh khác nhau, nhưng phần lớn là JPEG hoặc PNG

JPEG chiến thắng khi nói đến hình ảnh đầy màu sắc. Ngoài ra, bạn có thể nén thêm các tệp JPEG để giảm kích thước tệp của chúng mà chất lượng chỉ giảm một chút (nếu bạn làm đúng)

Mặt khác, PNG thường trở thành một lựa chọn tốt hơn cho hình vẽ, văn bản, hầu hết các ảnh chụp màn hình và đồ họa

Thay đổi kích thước hình ảnh

Thay đổi kích thước hình ảnh là một cách nhanh chóng và dễ dàng để giảm kích thước tệp hình ảnh của bạn. Theo nguyên tắc thông thường, bạn nên đảm bảo rằng tất cả các hình ảnh trên trang web của mình chỉ lớn ở mức cần thiết.

Nếu chiều rộng tối đa của trang web của bạn là 1200px, thì không có nghĩa là có một hình ảnh trên trang web của bạn với chiều rộng lớn hơn chiều rộng tối đa 1200px đó

Chúng tôi cũng đã đề cập đến tầm quan trọng của việc không tạo kích thước hình ảnh tùy chỉnh mới trừ khi bạn cần, vì vậy hãy ghi nhớ điều đó

Tận dụng lợi thế của nén mất dữ liệu

Nén mất dữ liệu là một cách tuyệt vời để giảm thêm kích thước tệp sau khi bạn đã tối ưu hóa hình ảnh của mình bằng các phương pháp khác

Điều đó có nghĩa là loại bỏ một số dữ liệu hình ảnh, loại bỏ những dữ liệu này sẽ không tạo ra nhiều sự khác biệt đối với chất lượng hình ảnh nhưng có thể giúp giảm đáng kể kích thước tệp

Sử dụng Lazy Loading

Lazy loading giúp bạn ưu tiên tải hình ảnh trên các trang của trang web của bạn. Nó tải hình ảnh kịp thời khi khách truy cập cuộn trang. Điều đó có nghĩa là hình ảnh ở trên cùng sẽ tải ngay lập tức, nhưng mọi thứ bên dưới màn hình đầu tiên sẽ không tải cho đến khi người dùng cuộn qua màn hình đầu tiên

Còn nhiều điều nữa, nhưng bạn sẽ tìm thấy tất cả trong hướng dẫn tối ưu hóa hình ảnh của chúng tôi, vì vậy, thay vào đó, hãy chuyển thẳng đến một số plugin tối ưu hóa hình ảnh mà bạn có thể sử dụng

Plugin chỉnh sửa hình ảnh cho WordPress

Cái hay của việc sử dụng các plugin này là bạn có thể thực hiện tối ưu hóa hình ảnh nâng cao chỉ bằng một vài cú nhấp chuột mà không phải loay hoay với bất kỳ công cụ hoặc mã nâng cao nào. Hơn nữa, hầu hết các plugin này đều miễn phí, đặc biệt là để tối ưu hóa một số hình ảnh nhất định hoặc sử dụng một số tính năng tối ưu hóa cơ bản

  • tưởng tượng. Mức độ nén tùy chỉnh ấn tượng và các tính năng tối ưu hóa hình ảnh khác
  • Kraken. Plugin nén không mất dữ liệu hữu ích, nhưng chỉ khi bạn mua phiên bản cao cấp
  • nhỏPNG. Hỗ trợ cả nén mất dữ liệu và hoạt động với nhiều loại hình ảnh
  • tối ưu. Đối với CDN và lazy loading, đây là những cách hiệu quả cao để tối ưu hóa hình ảnh của bạn
Thống kê cho thấy người đọc ghi nhớ nhiều hơn 55% khi bạn thêm hình ảnh trực quan hấp dẫn vào nội dung của mình. Tìm hiểu cách xử lý kích thước hình ảnh WordPress và làm cho bài đăng của bạn đáng nhớ. Nhấp để Tweet

Tóm lược

Bây giờ bạn đã biết mọi thứ về kích thước hình ảnh WordPress và cách tận dụng tối đa các tính năng và tùy chỉnh mà WordPress cung cấp trong bộ phận đó. Bạn sẽ thấy việc tối ưu hóa hiệu suất và chức năng của trang web dễ dàng hơn nhiều khi bạn biết cách xử lý hình ảnh WordPress của mình từ trong ra ngoài

Bạn có thể tạo kích thước hình ảnh tùy chỉnh và quản lý chúng trực tiếp thông qua mã của chủ đề hoặc sử dụng plugin được tạo cho tác vụ cụ thể đó. Hãy nhớ cập nhật hình thu nhỏ cũ của bạn bất cứ khi nào bạn định cập nhật hình ảnh — đây cũng là một nhiệm vụ dễ dàng nhờ các plugin hữu ích mà chúng tôi đã liệt kê ở trên

Chúng tôi đã để lại bất cứ điều gì ra?


Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

  • Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
  • Hỗ trợ chuyên gia 24/7
  • Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
  • Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
  • Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn