Algori 360 Image 教學：在 WordPress 輕鬆嵌入 360 度環景圖片與 VR 展示

Facebook Line Messenger Telegram

Algori 360 Image 是一款免費的 WordPress Gutenberg 區塊外掛，讓你在文章或頁面中直接嵌入 360 度環景圖片，不需寫程式碼，安裝後就能使用。截至 2026 年 5 月，它在 WordPress.org 上有 4,000+ 啟用安裝數，測試相容至 WordPress 6.7.5，是入門 360 度圖片展示最簡單的方案之一。

外掛名稱：Algori 360 Image
外掛網址：https://wordpress.org/plugins/360-image/

什麼是 360 度環景圖片？為什麼你的網站需要它

360 度環景圖片（Panoramic Image）是一種讓瀏覽者透過滑鼠拖曳或手指滑動，自由旋轉觀看的互動式圖片格式。跟傳統靜態照片不同，環景圖能呈現完整的空間視角，水準 360 度加上垂直 180 度，讓觀看者彷彿置身現場。

這種圖片的技術基礎是 equirectangular 投影（等距長方投影），將球面上的影像展開成一張 2:1 寬高比的平面圖片。Google 地圖的街景功能就是用同樣的技術實現的。原始的 equirectangular 圖片看起來會有扭曲，但經過播放器渲染後就能還原成正常的 360 度視角。

在網頁設計中，互動式圖片對使用者停留時間有正面影響。能與內容互動的瀏覽者，停留時間通常比單純觀看靜態圖片的使用者高出 30% 到 50%。對 WordPress 網站的 SEO 來說，較長的頁面停留時間會向搜尋引擎傳遞正面的品質訊號。WordPress 作為全球市佔率最高的 CMS 平台，也提供了多種對應的外掛工具來實現這項功能。

哪些產業最適合使用 360 度環景圖片

電商產品展示：服飾、珠寶、3C 產品透過 360 度旋轉展示所有角度，能減少消費者的購買疑慮，實務上這類展示可提升約 20% 以上的轉換率
房地產與室內設計：潛在買家不需親自到場，就能在網站上進行虛擬導覽，節省帶看時間與成本
旅遊與飯店業：景點的 360 度環景讓旅客在預訂前先感受環境氛圍，提高預訂意願
教育與展覽：博物館、藝廊可利用環景圖打造線上展廳，讓無法親臨現場的觀眾也能參觀
汽車與機車展示：車商可讓潛在客戶線上 360 度檢視車款外觀與內裝

只要你的網站需要展示空間、產品或環境的完整樣貌，360 度環景圖片就是值得投資的互動元素。

Algori 360 Image 外掛介紹與核心功能

Algori 360 Image 是一款專門為 Gutenberg 區塊編輯器設計的 360 度圖片展示外掛。核心定位很明確：在不寫程式碼的情況下，將 360 度環景圖片直接嵌入 WordPress 文章或頁面。安裝後，Gutenberg 編輯器會多出一個「360 Image」區塊，拖進文章就能使用。

核心功能一覽

360 度旋轉互動：透過滑鼠拖曳或觸控手勢，自由旋轉觀看圖片每一個角度
自動旋轉功能：可設定圖片自動緩慢旋轉，適合做為產品頁面的被動展示效果
縮放功能：支援滾輪縮放或雙指縮放，讓使用者放大查看細節
多種上傳方式：從電腦直接上傳、從 WordPress 媒體庫選擇，或透過圖片網址嵌入
響應式設計：自動適應各種螢幕尺寸，手機、平板和桌機都能正常顯示

支援的圖片格式

Algori 360 Image 支援 JPG/JPEG、PNG 和 WebP。關鍵不在於檔案格式，而在於圖片的投影方式。這個外掛使用 equirectangular 投影技術，你上傳的圖片必須是 2:1 寬高比的等距長方投影圖片。解析度 4096×2048 或 8192×4096 的圖片能提供清晰的 360 度觀看體驗。

需要注意的限制

這個外掛有幾個明確的限制需要你事先了解：

每頁只能放一個 360 Image 區塊：免費版不支援同一頁面放置多張 360 度圖片
只支援 Gutenberg 編輯器：不支援 Classic Editor，也沒有提供短代碼（shortcode）嵌入方式
更新頻率偏低：根據 WordPress.org 上的紀錄，外掛最近一次更新距今約一年，建議安裝前先確認是否相容於你目前使用的 WordPress 版本

儘管有這些限制，對於只需要在特定頁面展示一張 360 度圖片的網站來說，Algori 360 Image 的功能已經夠用。它也能與多數 WordPress SEO 外掛良好搭配，不會影響網站的搜尋引擎最佳化設定。對於使用 Elementor 等頁面編輯器的使用者來說，需要透過 HTML 區塊的方式來間接嵌入。

安裝 Algori 360 Image 外掛的完整步驟

安裝 Algori 360 Image 跟安裝其他 WordPress 外掛一樣簡單，從搜尋到啟用大約只需要 2 分鐘。

步驟一：從外掛目錄搜尋並安裝

登入 WordPress 網站後台，在左側選單中找到「外掛」→「安裝外掛」。在右上角的搜尋欄位輸入「360 Image」或「Algori 360 Image」，就能在搜尋結果中看到這個外掛。外掛圖示是帶有 360 字樣的藍色圖標。找到後點擊「立即安裝」，安裝完成後點擊「啟用」。

你也可以直接前往 WordPress.org 外掛頁面下載壓縮檔，然後在後台透過「上傳外掛」的方式安裝。兩種方法效果相同。

步驟二：確認啟用狀態

啟用後不需要任何額外的初始設定。Algori 360 Image 不需要 API 金鑰或連接第三方服務，安裝好就能直接使用。開啟任何一篇文章或建立新文章，在 Gutenberg 編輯器中點擊「+」按鈕，搜尋「360」，如果看到「360 Image」區塊選項就表示安裝成功。

步驟三：確認系統需求

Algori 360 Image 本身不需要特殊的伺服器設定，但為了確保 360 度圖片順利載入，你的 WordPress 網站需要滿足以下條件：

WordPress 5.0 以上版本（需要 Gutenberg 區塊編輯器支援）
PHP 5.6 或更新版本（官方標示需求）
主機的上傳檔案大小限制至少 8MB（360 度圖片檔案通常較大）
瀏覽器需要支援 WebGL（目前主流瀏覽器都支援）

如果你使用的虛擬主機品質不錯，像是 Bluehost 或 Kinsta 這類WordPress 推薦的主機服務，這些條件基本上都能滿足。安裝任何新外掛之前，建議先透過 UpdraftPlus 做好網站備份，避免意外狀況時無法復原。

如何在文章中添加 360 度環景圖片區塊

安裝並啟用後，整個操作流程可以分成「添加區塊」→「上傳圖片」→「調整設定」→「預覽發佈」四個階段。

添加 360 Image 區塊

打開要編輯的文章或頁面，在 Gutenberg 編輯器中點擊左上角的「+」按鈕，在區塊搜尋欄輸入「360 Image」。找到後點擊它，區塊就會被插入文章中。你也可以使用快速鍵：在段落末尾輸入「/360」然後按 Enter，就能快速插入。

上傳你的 360 度圖片

區塊插入後，你會看到三個上傳選項：

上傳：從電腦中選擇圖片檔案直接上傳
媒體庫：從 WordPress 媒體庫中選擇已上傳的圖片
從網址插入媒體：貼上圖片的 URL 網址（適合已託管在 CDN 或其他圖片空間的檔案）

上傳完成後，360 Image 區塊會自動渲染環景圖片。你可以在編輯器中直接看到效果，用滑鼠拖曳就能旋轉查看各個角度。如果你的圖片比例不是 2:1，顯示效果會有明顯的扭曲或拉伸，這時候需要重新準備正確格式的圖片。

調整顯示設定

點擊區塊後，右側的區塊設定面板會出現可調整的選項。你可以設定圖片的顯示寬度、是否啟用自動旋轉（Auto Rotate），以及自動旋轉的速度。建議開啟自動旋轉並設定為中等速度，讓使用者在進入頁面時就能看到圖片緩慢旋轉的效果。

圖片準備的實用建議

360 度環景圖片的檔案比一般圖片大很多。一張 8192×4096 的 equirectangular 圖片，未壓縮時可能高達 30-50MB。直接上傳到 WordPress 會佔用大量儲存空間，也會嚴重影響頁面載入速度。實務建議：

使用 JPEG 格式，將品質壓縮至 80-85%，通常可以將檔案控制在 3-8MB
如果需要更好的壓縮效果，使用 Imagify 等圖片壓縮工具進行最佳化
解析度建議至少 4096×2048，在手機上觀看也有不錯的清晰度
如果檔案實在太大，可用 Compressor.io 或 Squoosh 進一步壓縮

完成設定後，點擊「預覽」按鈕在前台查看實際效果。確認 360 度旋轉和縮放功能正常後，就可以發佈頁面。如果你需要高品質的環景圖素材來測試，可以從免費圖庫搜尋「panorama」或「equirectangular」關鍵字，找到不少免費的測試素材。也可以用 Optimizilla 批次調整圖片大小和壓縮品質。

如何拍攝與製作 360 度環景圖片

很多人卡在「有 Algori 360 Image 外掛，但不知道怎麼準備 360 度圖片」這一步。其實製作環景圖的門檻沒有想像中高，從專用設備到手機 App 都有不同的解決方案。

方法一：使用專用 360 相機拍攝

購買一台消費級的 360 度相機是最省事的方式。市面上主流的選擇包括 Insta360 X 系列、Ricoh Theta 系列和 GoPro MAX，售價大約在新台幣 8,000 到 25,000 元之間。一次按下快門就能拍攝完整的 360 度環景照片，附帶的手機 App 通常內建 equirectangular 格式的匯出功能，拍完就能直接上傳到 WordPress。

方法二：使用智慧型手機拍攝

不想花錢買專用設備，智慧型手機也能拍出不錯的全景照片。iPhone 使用者可直接使用內建的「全景」模式，由左向右緩慢移動拍攝。Android 使用者可下載 Google Street View App，它提供完整的 360 度拍攝功能，操作方式是站在定點，對準畫面中出現的圓點依序拍攝，App 會自動將多張照片拼接成完整的環景圖。

要注意的是，手機拍攝的全景照片跟真正的 equirectangular 360 度照片有差異。全景照片通常只涵蓋水準方向 360 度，垂直方向視角有限。如果你需要真正的上下左右都能看的 360×180 度環景，還是建議使用 360 專用相機或透過後製軟體拼接。

方法三：使用後製軟體拼接多張照片

如果你手上已經有用一般相機或手機拍攝的多張照片，可以透過全景拼接軟體將它們合併成一張 360 度環景圖。免費的選擇有 Hugin（開源全景拼接工具），付費的則有 PTGui。操作邏輯都差不多：匯入一系列重疊拍攝的照片，軟體會自動偵測對應點並進行拼接，輸出成 equirectangular 格式的圖片。

後製處理與圖片最佳化

不管用哪種方式拍攝，輸出的圖片通常都需要後製處理。最常見的問題是拼接接縫處的色差或模糊，這時候可以用 AI Image Enhancer 或 Fotor 進行色彩修正和銳化處理。如果圖片解析度不夠，使用 AI Image Enlarger 或 Clipdrop Image Upscaler 進行無損放大。照片中有雜訊或顆粒感，AI Image Denoiser 能有效清除這些干擾，讓 360 度圖片在各個角度都保持清晰。

關於圖片最佳化的幾個實用技巧：輸出格式選擇 JPEG 而非 PNG，因為 360 度圖片的檔案通常很大，JPEG 的壓縮效果能讓檔案小很多。壓縮品質設定在 80-85% 是視覺品質和檔案大小的最佳平衡點。如果原始圖片太大，先縮放到 8192×4096 或 6144×3072，這在大多數使用場景下已經足夠清晰，也能有效控制檔案大小。

Algori 360 Image 與其他 WordPress 360 外掛比較

WordPress 的 360 度圖片展示外掛不只 Algori 360 Image 一款。如果你正在考慮不同方案，下面這個比較表格能幫你快速了解各個外掛的功能差異。

功能項目	Algori 360 Image	WP VR	Panorama Viewer	Jetpack 360
價格	免費	免費 + Pro 版	免費	免費（需安裝 Jetpack）
Gutenberg 支援	原生區塊	支援	短代碼為主	區塊支援
Classic Editor 支援	不支援	支援	支援	支援
每頁區塊數量	僅 1 個	無限制	無限制	無限制
自動旋轉	支援	支援	不支援	不支援
縮放功能	支援	支援	支援	有限支援
熱點（Hotspot）	不支援	Pro 版支援	不支援	不支援
虛擬導覽	不支援	Pro 版支援	不支援	不支援
設定難度	非常簡單	中等	簡單	中等
安裝數量	4,000+	20,000+	1,000+	隨 Jetpack 安裝

不同使用情境的推薦

如果你只需要在一個頁面展示一張 360 度環景圖，像是餐廳的空間展示或單一產品的 360 度照片，Algori 360 Image 是最佳選擇。設定過程最簡單，不需要任何技術背景就能上手。

如果你的需求比較複雜，例如同一頁面展示多張 360 度圖片、需要虛擬導覽功能（讓使用者從一個場景跳到另一個場景），或者在圖片中加入互動熱點，那麼 WP VR 的 Pro 版本會更適合。雖然需要付費，但功能完整度遠高於其他同類外掛。

選擇外掛時不要只看功能多寡，還要考慮它跟你現有網站環境的相容性。有些外掛可能會跟特定的 WordPress 快取外掛產生衝突。建議在正式環境安裝之前，先用 DemosWP 這類免費測試網站工具建立測試環境，確認所有功能正常後再部署到正式網站。

就 SEO 角度來看，Algori 360 Image 表現不錯。它的 360 度圖片區塊不會產生多餘的 JavaScript 錯誤或影響頁面的 Core Web Vitals 分數，搭配 SG Optimizer 或其他圖片最佳化外掛使用也沒有相容性問題。如果你的網站需要更進階的互動功能，像是 AI 客服聊天外掛之類的整合方案，就需要更仔細評估各個外掛之間的相容性。

360 度環景圖片的實際應用場景與案例

了解外掛的操作方式後，來看看 360 度環景圖片在實際商業場景中能帶來什麼效果。

電商產品 360 度展示

電子商務網站是 360 度圖片最直接的應用場景。想像你在 WooCommerce 購物網站上瀏覽一雙球鞋，一般情況下只能看到幾張從不同角度拍攝的靜態照片。但如果賣家使用了 360 度環景展示，你可以自己旋轉球鞋，從任何角度檢視外觀、縫線、鞋底紋路。這種「看得到全貌」的購物體驗，能大幅降低消費者收到商品後發現「跟想像中不一樣」的退貨率。

有些網站還會搭配 ProductShot 這類的圖片局部放大工具，讓消費者不僅能 360 度旋轉觀看，還能放大檢視特定細節。對於珠寶、手錶這類高單價商品來說，全方位展示特別有說服力。

房地產虛擬導覽

房地產仲介網站是大量使用 360 度環景圖片的領域。透過虛擬導覽，潛在買家可以在電腦或手機上「走進」每一個房間，觀看客廳、廚房、浴室的空間格局和裝潢狀況。對於跨縣市甚至跨國的房地產銷售尤其有幫助，買家不需要親自飛到現場就能進行初步篩選，節省大量時間和交通成本。

旅遊景點與飯店展示

飯店和民宿業者可以在訂房頁面嵌入 360 度的房間環景照片，讓旅客在預訂前就能清楚了解房間的空間大小、窗外景觀和設備配置。這種透明的呈現方式反而能增加旅客的信任感，因為他們知道自己即將入住的環境長什麼樣子。旅遊景點網站也可以用同樣的方式展示觀光地的美景，吸引更多遊客造訪。

室內設計與裝修展示

室內設計師可以在作品集網站中使用 360 度環景圖來展示完工案例。相較於平面照片只能呈現局部的空間感，環景圖能讓觀看者完整感受整體的設計氛圍、色彩搭配和空間動線。如果你是接案的設計師，這種展示方式對於說服客戶非常有幫助。搭配 3D 書本展示效果產生器之類的視覺工具，能讓作品集呈現更豐富的視覺層次。

教育與展覽的互動展示

學校、博物館和藝廊也在積極採用 360 度環景技術。教師可以拍攝歷史遺跡的環景照片，讓學生在課堂上就能「置身」於古蹟現場。博物館可以建立線上虛擬展廳，讓無法親自到場的民眾也能參觀展覽。這種互動式的學習體驗比單純觀看圖片或文字說明更加生動。攝影相關的教學網站也可以考慮搭配攝影主題或 Mora 攝影作品集主題來建構更完整的展示平台。

透過響應式文章輪播外掛搭配使用，還能進一步提升網站的視覺呈現效果。如果你有在經營電商網站，也可以把 360 度展示跟產品的圖片輪播結合在一起，打造更豐富的購物體驗。

Algori 360 Image 使用常見問題與排解指南

使用 Algori 360 Image 的過程中，你可能會遇到一些技術問題。以下整理幾個最常見的狀況和對應的解決方式。

問題一：上傳圖片後無法顯示 360 度效果

這是最多人遇到的問題，原因通常出在圖片格式上。Algori 360 Image 需要的圖片是 equirectangular 投影格式，寬高比必須是 2:1。如果你上傳的是一張普通的 16:9 或 4:3 比例的照片，它看起來會變成一張被拉伸的平面圖片，無法正確渲染 360 度效果。

解決方法：確認你的圖片寬度是高度的兩倍，例如 4096×2048。如果圖片不符合這個比例，需要回到後製軟體中重新匯出。另一個可能的問題是檔案大小超過主機的上傳限制，這時可以調整 php.ini 中的 upload_max_filesize 設定，或者壓縮圖片後再上傳。如果不確定該怎麼調整主機設定，可以參考我們的 500 Internal Server Error 排解教學，裡面有關於 PHP 設定的詳細說明。

問題二：頁面載入速度明顯變慢

360 度圖片的檔案通常都比較大，沒有經過適當的最佳化很容易拖慢頁面載入速度。改善方法有幾個：第一，壓縮圖片檔案大小，建議使用 JPEG 格式並將品質控制在 80-85%。第二，啟用網站的快取機制，搭配 WordPress 快取外掛來加速靜態資源的載入。第三，使用 Cloudflare CDN 來分擔圖片的傳輸負載，透過全球分散式的伺服器節點加快圖片載入速度。

如果要從根本提升 WordPress 網站的整體速度，可以考慮啟用 GZIP 壓縮功能，搭配 WP Rocket 快取外掛一起使用，能明顯縮短頁面的首次載入時間。選擇一台穩定快速的主機也很關鍵，像是 A2 Hosting 或 FastComet 都是不錯的選擇。

問題三：行動裝置上顯示異常或無法互動

某些 WordPress 佈景主題的 CSS 可能會跟 360 Image 區塊產生衝突，導致在行動裝置上無法正常顯示或無法使用觸控手勢旋轉圖片。可以先切換到 WordPress 預設的 Twenty Twenty-Four 主題測試，如果切換後問題消失，就表示是佈景主題造成了衝突，需要調整相關的 CSS 樣式或聯繫主題開發者處理。

問題四：想在同一頁面放多張 360 度圖片

Algori 360 Image 免費版的硬性限制是每個頁面只能放置一個 360 Image 區塊。如果你確實需要在一個頁面上展示多張 360 度圖片，有幾個替代方案：第一，使用分頁或輪播方式，讓使用者在同一個位置切換不同圖片。第二，改用 WP VR 等支援多圖展示的替代外掛。第三，使用 HTML5 的 iframe 嵌入方式，在不同的文章中分別建立 360 度圖片頁面，然後用 iframe 嵌到同一個頁面中。

如果遇到頁面出現白屏或錯誤訊息，可能跟 PHP 記憶體限制有關，可以參考 502 Bad Gateway 或 503 Service Unavailable 的排解方式。這類問題有時跟伺服器資源不足有關，良好的主機環境能減少大部分這類狀況。

總結：Algori 360 Image 適合你嗎

回顧 Algori 360 Image 的核心定位和適用場景，幫你快速判斷這個外掛是否適合你的需求。

它最適合的使用者

如果你是 WordPress 網站站長，需要在特定頁面（產品頁、服務介紹頁或不動產展示頁）嵌入一張 360 度環景圖片，而且不想花錢購買付費外掛，Algori 360 Image 就是為你量身打造的。安裝簡單、設定直覺，不需要技術背景就能把 360 度圖片放到網站上。特別是如果你使用的是 Bluehost、SiteGround 等主流 WordPress 主機，整個流程從安裝到發佈大約只要 5 到 10 分鐘。

你可能需要考慮其他方案的時機

如果你的需求超出「單頁單圖」的範圍，例如同一頁面放置多張 360 度圖片、需要虛擬導覽的場景切換功能，或者在圖片上加入互動熱點，那 Algori 360 Image 的免費版就力有未逮了。這時候可以考慮升級到付費方案，或改用 WP VR Pro 等功能更完整的外掛。

常見問題 FAQ

Algori 360 Image 支援哪些圖片格式？

Algori 360 Image 支援 JPG/JPEG、PNG 和 WebP 三種圖片格式。重點在於圖片的投影方式必須是 equirectangular（等距長方投影），寬高比需為 2:1。如果上傳了一張 16:9 或其他比例的圖片，不會自動產生 360 度效果，只會呈現一張被拉伸的平面圖片。

可以在同一頁面放多個 360 度圖片嗎？

Algori 360 Image 免費版每個頁面只能放置一個 360 Image 區塊，這是它最明顯的功能限制。如果確實需要多張 360 度圖片，可以考慮將不同圖片放在不同文章頁面中，透過連結或分頁讓使用者切換觀看，或者改用 WP VR 等支援多圖展示的替代外掛。

行動裝置上能正常顯示和互動嗎？

可以。Algori 360 Image 支援行動裝置的觸控手勢操作，使用者可透過單指滑動旋轉 360 度圖片，也可以使用雙指縮放來放大或縮小畫面。在 iOS 和 Android 系統的主流瀏覽器上都能正常運作。如果你需要為網站添加更多互動效果，像是自訂捲軸樣式之類的功能，也可以參考我們的相關教學。

360 度圖片的建議解析度和檔案大小是多少？

解析度建議至少 4096×2048 像素，手機上觀看也能維持一定的清晰度。如果追求更高品質，8192×4096 會是更好的選擇。檔案大小建議控制在 5MB 以內，太大的圖片會嚴重影響頁面載入速度。使用 JPEG 格式、壓縮品質 80-85%，通常就能在畫質和檔案大小之間取得不錯的平衡。想進一步了解如何提升網站速度，可以參考我們的 WordPress 速度最佳化教學。

如何讓 360 圖片自動旋轉？

在 Gutenberg 編輯器中點擊 360 Image 區塊，右側的區塊設定面板中有「Auto Rotate」（自動旋轉）的開關選項。開啟後可以進一步設定旋轉速度。建議使用中等速度，太快會讓使用者來不及觀看細節，太慢則可能讓使用者忽略這個互動功能。

可以在 Elementor 或其他頁面編輯器中使用嗎？

Algori 360 Image 原生只支援 Gutenberg 區塊編輯器。如果你使用 Elementor、Divi 等第三方頁面編輯器，可以嘗試透過「HTML 區塊」或「短代碼區塊」的方式間接嵌入。不過由於外掛本身沒有提供獨立的短代碼，你可能需要自行將 360 圖片的渲染代碼提取出來，放入 HTML 區塊中。如果你還在考慮怎麼挑選 WordPress 主題，可以選擇原生支援 Gutenberg 的主題來減少相容性問題。