返回支援 內容和媒體 區塊 圖片區塊

圖片區塊

你可以使用圖片區塊將圖片插入至頁面或文章。本指南將說明如何插入圖片,以及如何使用所有可用設定來控制圖片的呈現方式。

教學課程影片

影片逐字稿

你可以在 WordPress 中,使用圖片區塊將圖片插入頁面和文章。

若要新增圖片區塊,請按一下「區塊插入」按鈕,然後搜尋圖片區塊。或者,你也可以在新的一行輸入正斜線,後方接著文字 Image。然後,請按 Enter 以新增圖片區塊。

接著,你就可以從電腦將圖片上傳至網站,或是從媒體庫、Google 相簿帳號或 Pexels 免費相片庫選取圖片。若你已經在其他位置託管圖片,則也可從 URL 插入圖片。不過,你也能單純地從桌面直接將圖片拖放至圖片區塊,只需單一步驟即可將圖片上傳至網站並嵌入。

在工具列中,你可選擇在頁面上將圖片拖曳至不同位置,或者使用箭頭按鈕在頁面上將圖片上下移動。

如果你希望替圖片增添一些創意,也能套用雙色調濾鏡,創造雙色的顏色效果。你可選取其中一個預設顏色組合,或者選用陰影和醒目提示的顏色。若要移除效果,請按一下「清除」按鈕。

你可變更圖片寬度,並將圖片靠左、置中或靠右對齊。

你可透過連結設定,選擇訪客按一下此圖片後會發生的事情。你可將 URL 貼上此欄位,建立特定網頁的連結。按一下「套用」按鈕,即可建立連結。或者,你可在自己的網站中,將圖片連結至現有頁面或文章。開始輸入頁面或文章標題,然後從結果選取標題以建立連結。你可依照喜好將圖片連結至其專屬的附件頁面或圖片檔的全尺寸版本。

按一下「裁切」圖示,就會出現數個額外的編輯工具。你可將圖片放大到最大 300%,然後按一下並拖曳以控制圖片顯示的部分。

你也可將長寬比從原始寬度和高度變更為方形、橫向模式或直向模式。接著,你可再按一下並拖曳圖片以變更顯示的區塊。

你可將圖片旋轉 90、180、270 或 360 度。待變更完畢後,便可按一下「套用」按鈕提交圖片的變更;或是按一下「取消」按鈕,離開且不進行變更。

你可依照喜好,在圖片周圍新增文字。按一下此按鈕後,圖片區塊便會變為封面區塊,而該圖片現在會作為背景使用。接著,你可新增喜歡的文字或其他區塊。

若要將封面區塊轉換回圖片區塊,請先選取上層封面區塊。接著,按一下「轉換」按鈕並選取圖片區塊。當然,你可以隨時將此圖片替代為其他圖片。

若要調整圖片大小,請在其中一個控點按一下,然後拖曳圖片直到縮放至想要的大小為止。

調整圖片大小後,你可選擇將圖片靠頁面左側或右側對齊,藉此讓文字和其他內容環繞圖片。

若要將說明文字新增至圖片,請按一下圖片下方的說明文字空間並新增想加入的任何文字。接著,你可將文字格式化或新增連結。

圖片區塊有幾個其他設定。

首先,你可選擇圖片樣式。選擇圓角框架或預設樣式。

新增替代文字說明是很棒的方法,不僅能將圖片的概念提供給搜尋引擎,還能協助有視覺障礙的訪客瞭解圖片代表的涵義。

依系統預設,在你將圖片新增至頁面時,WordPress 會顯示圖片的縮圖版本,藉此讓頁面載入速度更快。不過,你可依照喜好選取解析度較高的較大版本。

而且,你可在「寬度」或「高度」欄位中輸入值來調整圖片尺寸,或者從下方的「預設」選項選取百分比。

最後,你可輸入邊框圓角半徑值,讓圖片的邊角變成圓弧。

圖片區塊的所有這些選項,都可協助你透過彈性十足的方式將圖片新增至頁面和文章。

將圖片新增至網站時,如需更多協助,請造訪 WordPress.com/support。

新增圖片區塊

若要新增圖片區塊,請按一下「+ 區塊插入工具」圖示,並搜尋「圖片」,接著按一下即可將區塊加入文章或頁面。

錄製畫面顯示如何新增圖片區塊。
使用「+ 區塊插入工具」插入圖片區塊

💡

你也可以用鍵盤在新的一行輸入「 /image」,然後按 Enter 鍵或按一下選單中的「圖片」選項,即可快速新增圖片區塊

如何新增圖片區塊。
在新的一行輸入「/image」,即可插入圖片區塊

此處有新增區塊的詳細說明。 

插入圖片

依照先前章節所述新增圖片區塊後,系統將會提供三種選取圖片的方式:

空白的圖片區塊會顯示「上傳」、「選取圖片」和「自 URL 插入」選項。
用於新增圖片的選項

調整圖片大小

你可在將圖片新增至圖片區塊後,變更圖片大小。只要按一下圖片,圖片周圍就會出現看起來像圓點的調整大小控點。接著按住調整大小控點,將圖片拖曳到所需大小:

Resize an image by dragging its handles.

若要微調圖片大小和長寬比,請跳到此區段

區塊工具列

按一下區塊會出現選項工具列:

圖片區塊工具列
圖片區塊工具列

圖片區塊工具列上的圖示,從左至右分別是:

對齊圖片

你可以使用對齊選項讓圖片靠左、靠右或置中顯示。此外,若佈景主題支援的話,可能還會有寬幅和全幅選項。

進一步閱讀:將圖片與文字對齊

說明文字

若要新增說明文字,請在區塊工具列按一下「說明文字」圖示,啟用該圖片的說明文字。接著,在圖片下方的「新增說明文字」方塊中輸入說明文字:

第一個箭頭指工具列中的說明文字圖示,第二個箭頭指圖片下方輸入說明文字的地方。
先啟用 (1),然後將圖片的說明文字輸入於 (2)。

若你先為媒體庫中的圖片撰寫說明文字後再新增圖片區塊,則該圖片區塊將顯示你撰寫的說明文字。不過,如果你在新增圖片區塊之後才新增媒體庫圖片的說明文字,則該說明文字不會在圖片區塊中顯示。這種情況下,你可以手動在圖片區塊輸入說明文字,或者移除該區塊後再重新新增,就可以在區塊中使用媒體庫的說明文字。

連結設定

如果要將連結新增至圖片,請按一下工具列中的連結圖示 (連結圖示看起來像一條鏈子):

連結圖示。

接著你將會看到數個選項,如下所述:

連結按鈕已按下,且圖片上出現新增連結的選項。
你的圖片可以連結到自訂 URL、附件頁面或媒體檔案。

文字方塊會隨即出現,你可在此執行下列動作:

按下鍵盤上的箭頭圖示,或者 returnenter 鍵以儲存連結。按一下方塊旁的向下箭頭,即可選擇是否在新分頁中開啟連結。

你也可選擇以將圖片連結至下列位置:

裁切和其他圖片編輯工具

按一下工具列中的「裁切」圖示,將出現一系列編輯工具:

圖片區塊編輯工具上顯示縮放、長寬比、旋轉、套用和取消選項。

從左到右依序是:

你對圖片所做的編輯將在媒體庫中建立新的圖片副本,確保圖片用於網站其他位置時不會受到影響。這也表示你仍保有原始圖片,能以備不時之需。

取代圖片

你可透過區塊工具列中的「取代」→「選取圖片」選項,取代圖片區塊上的圖片:

Replacing an image.

區塊設定

選取區塊時,右側邊欄會出現其他區塊設定。如果沒有出現側邊欄,請按一下右上角的「設定」圖示叫出設定。此圖示外觀為正方形中有兩個大小不同的欄位:

編輯器中的「設定」圖示,下方顯示「設定」的工具提示。
按一下「設定」圖示即可開啟區塊設定

圖片區塊」設定包括「設定」選單和「樣式」選單。選取「圖片區塊」資訊下方的對應按鈕,以便開啟該選項。

區塊設定選單
區塊設定選單
圖片設定

使用「替代文字」欄位說明圖片用途。此文字會由搜尋引擎和畫面閱讀器使用。

圖片區塊設定側邊欄的圖片設定區段顯示替代文字長寬比和圖片尺寸選項。
長寬比

長寬比為圖片寬度和高度的相對大小。例如,長寬比 1:2 表示圖片寬度為圖片高度的一半。

將長寬比變更為標準:4:3,然後傳統直向:2:3,顯示圖片的變更狀況。

你可從下列常見圖片尺寸選擇:

若你選取原始尺寸以外的長寬比,將可使用「縮放」選項。縮放指如何透過下列選項,讓你的圖片符合所選取的長寬比:

透過在「寬度」和「高度」方塊中輸入像素值,設定自訂寬度和高度。若你使用拖放控點調整圖片大小,這些方塊將會自動使用圖片的新寬度和高度更新值。若清除這些方塊的數字,圖片就會回到自動大小。

區塊設定中的圖片大小控制
區塊設定中的圖片大小控制
進階

若要瞭解詳情,請參閱我們關於進階設定的詳細說明。

樣式

在區塊設定側邊欄按一下「樣式」圖示,即可存取區塊的設計設定。「樣式」圖示的形狀是圓形,其中有半圓已填滿:

箭頭指向「樣式」圖示,只要你按一下圖示即可開啟區塊樣式區段。

選擇圖片的樣式,可設定為:

  • 預設:使圖片顯示為插入時的原狀。
  • 圓形:使圖片顯示為圓形 (若圖片原先是方形) 或膠囊/橢圓形 (若圖片原先是矩形)。

使用雙色調濾鏡設定新增雙色的顏色效果。

圖片區塊設定側邊欄的樣式區段,包含篩選、邊框和圓角半徑。
邊框和圓角半徑

若要瞭解詳情,請參閱我們關於邊框設定的詳細說明。

Copied to clipboard!