如何在 WordPress 中更改特色圖片大小

已發表: 2017-04-10
更新於

特色圖片在 WordPress 中以多種不同方式使用,具體取決於您使用的主題。 大多數主題使用特色圖像作為帖子或頁面中圖像之一的縮略圖預覽,通常顯示在主頁和存檔頁面上。

此功能是在 WordPress 2.9 中引入的,最初被稱為“發布縮略圖”。 大多數 WordPress 主題(包括我們自己的)現在都將特色圖像用於許多其他目的,例如圖像庫、功能滑塊和頁眉圖像。 例如,在我們的全幀主題中,特色圖片成為帖子的背景圖片。

特色圖片對於創意人員和任何創建包含大量圖片的 WordPress 網站的人來說當然非常重要。 要在任何 Graph Paper Press 主題中使用特色圖片,您只需從帖子編輯器屏幕右側的鏈接中選擇特色圖片即可。

如果主題中設置的默認特色圖片大小適合您的目的,那就太好了。 如果沒有,可以通過一些代碼編輯來更改大小。

為什麼要更改特色圖像大小? 除了使縮略圖庫更大或更小之外,您可能還需要更改尺寸的縱橫比。 例如,假設您是一名風景攝影師,您的作品集由全景照片組成。 在這種情況下,如果主題的默認特色圖像是方形的,它最終會裁剪掉大部分圖像。 您可以通過手動將尺寸調整為更合適的尺寸來解決此問題。

functions.php中更改特色圖像大小

要從默認值編輯特色圖像大小,您需要更改functions.php文件中的一些代碼。 該文件可以通過 FTP 訪問,也可以直接在 WordPress 儀表板的外觀 > 編輯器下進行編輯。 我總是會推薦前一種方法而不是後一種方法。

在對此文件進行任何更改之前,始終值得確保您有原始版本的備份,以防出現問題。 如果您的計算機上還沒有原始主題文件,請確保至少下載functions.php文件並將其保存到備份文件夾中。

有兩種不同的方式來調整特色圖像的大小。 要按比例調整大小(即避免拉伸或壓縮圖像),請使用以下代碼:

 set_post_thumbnail_size(50, 50); // 50 像素寬 x 50 像素高,調整大小模式

您還可以選擇通過使用以下代碼裁剪圖像來調整圖像大小:

 set_post_thumbnail_size(50, 50, true); // 50 像素寬 x 50 像素高,裁剪模式

這將設置特色圖像的默認大小。

添加其他圖像尺寸

通過為每個圖像尺寸添加額外的代碼行,還可以根據需要添加任意數量的其他圖像尺寸:

 add_image_size('category-thumb', 300, 9999); // 300 像素寬(無限高)

然後,您可以使用以下代碼在主題模板中使用此新尺寸:

 <?php the_post_thumbnail('category-thumb'); ?>

如果您想以多種不同方式顯示特色圖像,此功能非常方便。 例如,您可能希望為您的圖片庫設置一個縮略圖大小,並為您的帖子標題設置一個更大的大小。

請記住,您上傳的圖片必須至少與您為特色圖片設置的尺寸一樣大。 如果您上傳較小的圖像,它們將被放大並最終看起來像素化和模糊。

重建您的特色圖片

更改特色圖片大小只會影響代碼更改後的上傳。 之前上傳的所有內容都將保存為原始尺寸,因此您需要重新生成它們。

如果您只有幾張圖片需要調整大小,您可以手動重新上傳。 如果您有很多,最好使用像 Regenerate Thumbnails 這樣的插件來為您完成所有艱苦的工作。 可以通過您的工具菜單訪問此插件,並將調整您選擇的媒體庫中的一個或多個圖像的大小。

使用兒童主題為您的編輯提供未來證明

直接對您的functions.php文件進行編輯的問題是,如果發布了新版本的主題並且您需要升級它,它們將會丟失。 您可以記下您添加的代碼並將其插入到新的functions.php文件中,但這可能會變得乏味,尤其是在您進行大量編輯或主題的新版本經常出現的情況下。

使用子主題解決了這個問題,因為當父主題更新時,子主題保持不變。 如果您正在對主題代碼進行任何編輯,無論是在functions.php文件中,還是在樣式表或任何其他文件中,使用子主題始終是最佳實踐。

我們已經獲得了在博客上創建子主題的完整指南,但出於我們的目的,您需要了解以下內容。

要創建子主題,請通過 FTP 連接到您的站點並在/wp-content/themes/中為您的新子主題創建一個新文件夾。 通常將文件夾命名為與您要編輯的主題相同的名稱,並在其後附加“-child”。 例如:“awesome-child”,如果您正在製作 Awesome 主題的子主題。

即使您不打算編輯 CSS,也必須在子主題文件夾中創建樣式表。 創建一個名為 style.css 的新文件並粘貼以下代碼:

 /*
主題名稱:真棒孩子
主題 URI:http://example.com/awesome-child/
描述:真棒兒童主題
作者:方格紙出版社
作者 URI:http://example.com
模板:真棒
版本:1.0.0
標籤:淺色、深色、響應式佈局、可訪問性就緒
文本域:awesome-child
*/

@import url("../awesome/style.css");

/* =主題定制從這裡開始
-------------------------------------------------- ------------ */

根據需要更改主題名稱和其他詳細信息。

要添加將特色圖像更改為子主題的功能,您需要創建一個新的functions.php文件,因此請繼續在子主題目錄中執行此操作。 除了父主題的functions.php之外,還將加載此文件。

functions.php的模板如下所示:

 <?php //打開PHP標籤

// 職能

?> // 關閉 PHP 標籤

然後,您可以在 PHP 標記之間添加圖像大小調整代碼,因此您最終會得到如下內容:

 <?php // 打開 PHP 標籤

如果(函數存在('add_theme_support')){
add_theme_support('後縮略圖');
set_post_thumbnail_size(150, 150, 真); // 默認帖子縮略圖尺寸(裁剪)

// 額外的圖像尺寸
// 如果不需要額外的圖像大小,則刪除下一行
add_image_size('category-thumb', 300, 9999); //300 像素寬(無限高)
}

?> // 關閉 PHP 標籤

完成創建子主題的代碼後,您需要激活它。 您可以通過站點儀表板,在Administration Panels > Appearance > Themes下執行此操作。 在列表中找到您的子主題,然後單擊激活。

欣賞您調整後的新特色圖片

更改特色圖像的大小並添加新的圖像大小是一項非常簡單的任務,但確實需要一些代碼編輯。 正因為如此,一些用戶更喜歡使用插件來處理圖像大小調整,但添加額外的插件總是存在安全風險。 深入了解並像這樣對代碼進行一些簡單的更改可以真正幫助您建立使用 WordPress 的信心,並使您更容易自定義主題並真正使它們成為您自己的主題。