Images · WordPress開發手冊

## 圖片 >[warning] 注意：本節介紹媒體庫中圖像的處理。如果要顯示位于主題目錄中的圖像文件，只需使用img標簽指定位置，并使用CSS進行樣式化。 ``` <img src="<?php echo get_template_directory_uri() . '/images/logo.png'; ?>" /> ``` ## 獲取圖片代碼要在媒體庫中顯示圖像，請使用wp_get_attachment_image()函數。 ``` echo wp_get_attachment_image( $attachment->ID, 'thumbnail' ); ``` 您將獲得具有所選縮略圖大小的以下HTML輸出 ``` <img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... /> ``` 您可以為管理屏幕中的“設置”>“媒體”中設置的尺寸或任何一對寬度和高度指定其他尺寸，例如原始圖像的“full”或“medium”和“large”。您還可以使用add_image_size()設置自定義大小的字符串; ``` echo wp_get_attachment_image( $attachment->ID, Array(640, 480) ); ``` ## 獲取圖像的URL 如果要獲取圖像的URL，請使用wp_get_attachment_image_src()。如果沒有圖像可用，它返回一個數組（URL，width，height，is_intermediate）或false。 ``` $image_attributes = wp_get_attachment_image_src( $attachment->ID ); if ( $image_attributes ) : ?> <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" /> <?php endif; ?> ``` ## 對齊在您的站點中添加圖像時，可以將圖像對齊方式指定為右，左，中心或無。 WordPress核心自動添加CSS類來對齊圖像： - alignright - alignleft - aligncenter - alignnone 這是當選擇中心對齊時的采樣輸出 ``` <img class="aligncenter size-full wp-image-131" src= ... /> ``` 為了利用這些CSS類用于對齊和文本換行，您的主題必須包含樣式表中的樣式，如主樣式表文件。您可以使用與官方主題捆綁的style.css，如Twenty Seventeen為參考。 ## 標題如果在媒體庫中指定了圖像圖像，則HTML img元素由短代碼`[caption]`和`[/ caption]`括起來。 ``` <div class="mceTemp"><dl id="attachment_133" class="wp-caption aligncenter" style="width: 1210px"><dt class="wp-caption-dt"><img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" /></dt><dd class="wp-caption-dd">Sun set over the sea</dd></dl></div> ``` 而且，它將像HTML代碼一樣呈現為圖形標簽： ``` <figure id="attachment_133" style="width: 1200px" class="wp-caption aligncenter"> <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" srcset= ... /> <figcaption class="wp-caption-text">Sun set over the sea</figcaption> </figure> ``` 與排列類似，您的主題必須包含以下樣式。 - wp-caption - wp-caption-text ## 參考文獻 wp_get_attachment_image() wp_get_attachment_image_src()