預設情況下，WordPress會自動建立多個不同大小的影象上傳副本。此外，WordPress主題和外掛還可以建立自己的影象大小。
在本教學中，我們將向您展示如何在WordPress中輕鬆建立其他影象尺寸並在您的網站上使用它們。
為什麼要在WordPress中建立額外的影象尺寸？
通常，所有流行的WordPress主題和外掛都能很好地處理影象大小。例如，您的WordPress主題可能會建立其他尺寸以用作存檔頁面上的縮圖。
但是，有時這些影象大小可能不符合您自己的要求。您可能希望在子主題或文章網格佈局中使用不同的影象大小。
您可以通過在WordPress中建立其他影象大小，然後在需要時呼叫這些大小來實現。
話雖如此，讓我們來看看如何在WordPress中建立額外的影象大小。
為您的主題註冊額外的影象尺寸
大多數WordPress主題（包括所有頂級WordPress主題）預設都支援釋出縮圖（特色圖片）功能。
但是，如果您要建立自定義WordPress主題，則需要通過將以下程式碼新增到主題的functions.php檔案來新增對文章縮圖的支援。
add_theme_support( 'post-thumbnails' );
啟用對文章縮圖的支援後，您現在可以使用函式 add_image_size() 來使用註冊附加影象大小的功能。
add_image_size函式按以下格式使用：
add_image_size( 'name-of-size', width, height, crop mode );
示例程式碼如下所示：
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
現在，如果您注意到，我們已經指定了三種不同型別的影象大小。每個都有不同的模式，如硬裁剪、軟裁剪和無限高度。
讓我們介紹每個示例以及如何在您自己的專案中使用它們。
1. 硬裁剪模式
您可能會注意到，在高度之後新增了一個“true”值。這告訴WordPress將影象精確裁剪到我們定義的大小（在本例中為120×120畫素）。
此方法用於確保一切都完全成比例。此功能將根據尺寸自動從側面或從頂部和底部裁剪影象。
2. 軟裁剪模式
預設情況下，軟裁剪模式處於開啟狀態，這就是為什麼您在高度之後看不到任何附加值的原因。此方法按比例調整影象大小而不會使其失真。因此，您可能無法獲得所需的尺寸。通常，它匹配寬度尺寸，高度根據每個影象的比例而不同。示例顯示如下所示：
無限高度模式
有時您想在設計中使用超長影象，但您想確保寬度是有限的。例如，資訊圖影象往往很長，通常比內容寬度更寬。
此模式允許您指定一個不會破壞您的設計同時保持高度不受限制的寬度。
在您的WordPress主題中顯示其他影象大小
現在您已經新增了所需影象大小的功能，讓我們來看看在您的WordPress主題中顯示它們。開啟要顯示影象的主題檔案並貼上以下程式碼：
<?php the_post_thumbnail( 'your-specified-image-size' ); ?>
注意：這段程式碼一定要貼在post loop裡面。
這就是在WordPress主題中顯示額外影象大小所需要做的一切。您可能應該使用適合您需要的樣式將其包裹起來。
重新生成額外的影象尺寸
如果您不是在一個全新的網站上執行此操作，那麼您可能需要重新生成縮圖。
add_image_size() 函式僅從它新增到主題的點生成大小。這意味著在包含此功能之前新增的任何文章影象都不會具有新尺寸。
要解決此問題，您需要為舊影象重新生成新影象大小。這通過名為Regenerate Thumbnails的外掛變得容易。安裝並啟用外掛後，選單下會新增一個新選項：Tools » Regenerate Thumbnails
您將看到為所有影象或僅為特色影象重新生成縮圖的選項。我們建議重新生成所有影象以避免任何意外行為或損壞的影象。
有關更多詳細資訊，請參閱我們關於如何在WordPress中重新生成特色圖片的文章。
為您的文章內容啟用額外的影象尺寸
即使您在主題中啟用了影象大小，但使用僅限於您的主題，這沒有任何意義。
無論如何都會生成所有影象大小，所以為什麼不讓文章作者在帖子內容中使用它。
您可以通過將以下程式碼新增到主題的函式檔案中來完成此操作。
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' );
新增程式碼後不要忘記儲存更改。
您現在可以將影象上傳到WordPress文章或頁面。在影象塊設定中，您將在“影象大小”選項下看到自定義影象大小。
您和在您的網站上工作的其他作者現在可以在將影象新增到帖子和頁面時選擇這些大小選項。
我們希望本文能幫助您瞭解如何在WordPress中建立其他影象大小。您可能還想檢視我們關於WordPress最佳影象壓縮外掛和我們的WordPress效能指南，以提高您的網站速度。
評論留言