به اشتراک بگذارید
آموزش وردپرس | بلاگ وبداده
ساخت تصاویر 360 درجه و تعاملی در وردپرس
تصویری که بازدیدکننده میتواند داخلش بچرخد و کشف کند، تجربهای بهمراتب جذابتر از یک عکس ثابت میسازد. در این راهنما گامبهگام یاد میگیرید چطور این کار را انجام دهید.
تصاویر 360 درجه در وردپرس به بازدیدکننده اجازه میدهند تصویر را با درگ ماوس یا لمس صفحه در همهٔ جهتها بچرخاند؛ درست مثل اینکه وسط آن فضا ایستاده باشد. این قابلیت برای املاک، هتل، رستوران، نمایشگاه و فروشگاه، نرخ تعامل و اعتماد کاربر را بالا میبرد. خبر خوب این است که برای پیادهسازی آن به هیچ کدنویسیای نیاز ندارید؛ چند افزونهٔ رایگان کار را با یک بلاک یا یک شورتکد ساده انجام میدهند. در این مقاله ابتدا تفاوت «تصویر ۳۶۰ تکی» و «تور مجازی تعاملی» را روشن میکنیم و بعد هر دو مسیر را قدمبهقدم میسازیم.
- تصویر ۳۶۰ واقعی: باید عکس پانوراما از نوع equirectangular (کروی/استوانهای) باشد، نه یک عکس پهن معمولی؛ وگرنه تخت نمایش داده میشود.
- دو مسیر اصلی: نمایش یک تصویر ۳۶۰ ساده با افزونهٔ Algori 360 Image، یا ساخت تور مجازی چندصحنهای و تعاملی با افزونهٔ WP VR.
- بدون کدنویسی: کل کار با بلاک گوتنبرگ یا یک شورتکد انجام میشود و نیازی به دانش فنی خاصی ندارد.
- پیشنیاز کلیدی: یک تصویر باکیفیت (توصیهٔ رسمی: بالای 3000×1500 پیکسل) و هاستی با فضا و حافظهٔ کافی برای فایلهای سنگین.
- نکتهٔ صادقانه: فایلهای ۳۶۰ حجیماند و اگر بهینه نشوند یا روی هاست ضعیف اجرا شوند، سرعت صفحه را کاهش میدهند.
در یک نگاه
برای نمایش یک تصویر ۳۶۰ ساده، افزونهٔ Algori 360 Image و بلاک گوتنبرگ کافی است؛ برای ساخت تور مجازی تعاملی با چند صحنه و هاتاسپات (نقاط اطلاعاتی قابلکلیک)، سراغ افزونهٔ WP VR بروید. هر دو نسخهٔ رایگان دارند و تنها به یک عکس ۳۶۰ باکیفیت نیاز دارید.
احتمالاً این مقاله را باز کردهاید چون میخواهید محصول، ملک یا فضای کسبوکارتان را به شکلی زندهتر به مخاطب نشان دهید و شنیدهاید که وردپرس این امکان را میدهد. در ادامه، بدون اصطلاحات پیچیده و با مسیر دقیق هر گزینه، همهچیز را مرور میکنیم تا در پایان بتوانید خودتان یک تصویر یا تور ۳۶۰ کامل بسازید و منتشر کنید.
تصاویر 360 درجه در وردپرس چیست و چه تفاوتی با عکس معمولی دارد؟
یک تصویر ۳۶۰ درجه، برخلاف عکس معمولی که فقط یک قاب ثابت را نشان میدهد، کل محیط اطراف نقطهٔ عکاسی را در خود دارد: جلو، پشت، چپ، راست و حتی سقف و کف. این نوع تصویر که به آن عکس «equirectangular» یا کروی گفته میشود، معمولاً با دوربینهای مخصوص ۳۶۰ یا حالت پانورامای گوشی گرفته میشود. وقتی این عکس را در وردپرس با یک افزونهٔ مناسب نمایش دهید، بازدیدکننده میتواند با ماوس یا انگشتش داخل آن بچرخد و هر گوشه را ببیند.
یک تشبیه ساده کمک میکند: عکس معمولی مثل نگاهکردن از پشت پنجره است؛ فقط چیزی را میبینید که در قاب پنجره جا شده. اما تصویر ۳۶۰ مثل ایستادن وسط همان اتاق است؛ سرتان را که بچرخانید، همهجا را میبینید. حالت «تعاملی» یعنی همین آزادیِ چرخش، و در سطح پیشرفتهتر یعنی امکان کلیک روی نقاط مشخص (هاتاسپات) برای دیدن توضیح، عکس، ویدئو یا جابهجایی به صحنهٔ بعدی.
نکتهٔ کلیدی
همهٔ عکسهای پانوراما «۳۶۰ درجه» نیستند. یک عکس پانورامای افقی معمولی، فقط کشیده و پهن است. تصویر ۳۶۰ واقعی باید کل کره را پوشش دهد (نسبت ۲ به ۱، یعنی عرض دو برابر ارتفاع). اگر عکس درست از این نوع نباشد، افزونه آن را کج یا تخت نشان میدهد.
پیش از شروع، طبیعتاً باید یک سایت وردپرسی فعال داشته باشید؛ اگر هنوز در ابتدای راه هستید، راهنمای نصب وردپرس روی هاست سیپنل نقطهٔ شروع خوبی است. اگر هم میخواهید با مفهوم میزبانی بیشتر آشنا شوید، مقالهٔ هاست چیست را ببینید.
پیشنیازها و ابزارهای موردنیاز پیش از شروع
قبل از اینکه سراغ نصب افزونه برویم، بهتر است سه چیز را آماده داشته باشید. آمادهکردن این پیشنیازها از بیشتر مشکلات رایج بعدی جلوگیری میکند:
۱. تصویر ۳۶۰ باکیفیت
یک عکس equirectangular با کیفیت بالا. طبق توصیهٔ رسمی، رزولوشن بالای 3000×1500 پیکسل نتیجهٔ واضح میدهد. فرمت JPG همهجا پشتیبانی میشود و برخی افزونهها PNG و WebP را هم میپذیرند.
۲. هاست با منابع کافی
فایلهای ۳۶۰ سنگیناند؛ پس به فضای دیسک مناسب، حافظهٔ PHP کافی و محدودیت آپلود (upload_max_filesize) بالاتر نیاز دارید تا تصویر بدون خطا بارگذاری شود.
۳. انتخاب افزونهٔ مناسب
بسته به هدف: برای یک تصویر ساده افزونهٔ Algori 360 Image، و برای تور تعاملی چندصحنهای افزونهٔ WP VR. هر دو رایگان و از مخزن رسمی وردپرس قابل نصباند.
پیش از آپلود حواستان به این باشد
اگر تصویر شما equirectangular نباشد (یعنی نسبت عرض به ارتفاعش دقیقاً ۲ به ۱ نباشد)، افزونه نمیتواند آن را بهدرستی به کره تبدیل کند و خروجی کج یا کشیده میشود. پیش از هر کاری از نوع صحیح عکس مطمئن شوید.
آموزش گامبهگام ساخت تصویر و تور تعاملی 360
حالا که پیشنیازها آماده است، دو روش کاربردی را مرحلهبهمرحله پیش میرویم. توصیه میکنیم پیش از نصب هر افزونهای، یک نسخهٔ پشتیبان کامل از سایت بگیرید تا در صورت نیاز بهراحتی به عقب برگردید.
روش اول: نمایش یک تصویر ۳۶۰ ساده با افزونهٔ Algori 360 Image
این سادهترین راه برای نمایش یک تصویر ۳۶۰ منفرد است و کاملاً روی ویرایشگر بلاک (گوتنبرگ) کار میکند. مراحل به این ترتیب است:
- از مسیر «افزونهها < افزودن»، عبارت Algori 360 Image را جستجو، نصب و فعال کنید.
- نوشته یا برگهٔ موردنظر را با ویرایشگر بلاک باز کنید و روی دکمهٔ افزودن بلاک (+) بزنید.
- بلاک «360 Image» را انتخاب کنید و تصویر equirectangular خود را از کتابخانهٔ رسانه آپلود یا از URL وارد کنید.
- از بخش تنظیمات بلاک در ستون کناری (Inspector)، عرض و ارتفاع تصویر را تنظیم کنید (مقدار پیشفرض 600×300 پیکسل است).
- روی «انتشار» یا «بهروزرسانی» کلیک کنید و صفحه را ببینید؛ حالا کاربر میتواند داخل تصویر بچرخد.
محدودیت مهم افزونهٔ Algori
این افزونه فقط از یک تصویر ۳۶۰ در هر صفحه پشتیبانی میکند، تنها با گوتنبرگ کار میکند و هاتاسپات (نقاط اطلاعاتی) ندارد. برای نمایش ساده عالی است، اما اگر به چند صحنه یا تعامل بیشتر نیاز دارید، سراغ روش دوم بروید.
روش دوم: ساخت تور مجازی تعاملی با افزونهٔ WP VR
اگر میخواهید چند فضا را به هم وصل کنید و نقاط اطلاعاتی قابلکلیک بگذارید، افزونهٔ WP VR گزینهٔ حرفهای و درعینحال سادهای است. این افزونه بر پایهٔ کتابخانهٔ Pannellum و WebGL کار میکند. مراحل کلی چنین است:
- افزونهٔ WP VR را از «افزونهها < افزودن» نصب و فعال کنید؛ سپس از منوی پیشخوان وارد بخش WP VR شوید.
- یک تور جدید بسازید و برای هر فضا یک «صحنه» (Scene) اضافه کنید و تصویر ۳۶۰ آن را آپلود کنید.
- با هاتاسپات از نوع Scene، صحنهها را به هم وصل کنید تا کاربر بتواند بین اتاقها جابهجا شود.
- با هاتاسپات از نوع Info، متن، عکس، ویدئو یا لینک روی نقاط مشخص قرار دهید تا هنگام کلیک نمایش داده شود.
- تور را ذخیره کنید؛ افزونه یک شناسه (id) به آن میدهد که با آن تور را در هر صفحهای منتشر میکنید.
شورتکد نمایش تور
پس از ساختن تور، کافی است شورتکد آن را در هر نوشته یا برگه بگذارید (عدد id را با شناسهٔ تور خودتان جایگزین کنید):
[wpvr id="123"] و برای نمایش تمامعرض صفحه از [wpvr id="123" width="fullwidth"] استفاده کنید. همین تور را میتوانید با بلاک گوتنبرگ «WPVR Tour» یا ویجت المنتور هم قرار دهید.در نسخهٔ رایگان WP VR میتوانید تعداد نامحدودی تور بسازید، اما هر تور تا ۵ صحنه و هر صحنه تا ۵ هاتاسپات را پشتیبانی میکند. برای صحنه و هاتاسپات نامحدود، پشتیبانی ژایروسکوپ موبایل، فلورپلان و شیشهٔ VR باید به نسخهٔ پرو ارتقا دهید.
برای اینکه بین این افزونهها بهتر تصمیم بگیرید، در جدول زیر سه گزینهٔ محبوب را کنار هم گذاشتهایم:
مقایسهٔ سه افزونهٔ محبوب برای تصاویر و تورهای ۳۶۰:
| ویژگی | Algori 360 Image | WP VR | Photo Sphere Viewer |
|---|---|---|---|
| نوع خروجی | یک تصویر ۳۶۰ تکی | تور مجازی چندصحنهای + ۳۶۰ | پانوراما، تور، ویدئو ۳۶۰ و AR |
| روش افزودن | فقط بلاک گوتنبرگ | شورتکد، بلاک، المنتور و… | شورتکد، بلاک و المنتور |
| هاتاسپات تعاملی | ندارد | دارد (رایگان تا ۵ در هر صحنه) | دارد |
| چند تصویر در یک صفحه | فقط یک تصویر | نامحدود (در قالب تور) | چند مورد |
| پشتیبانی VR/موبایل | هدست VR، ماوس و لمس | لمس و موبایل؛ شیشهٔ VR در پرو | ژایروسکوپ در نسخهٔ پرو |
| نسخهٔ رایگان | دارد | دارد | دارد |
جمعبندی جدول: برای نمایش سریع یک تصویر ۳۶۰، Algori؛ برای تور تعاملی چندصحنهای، WP VR؛ و اگر به ویدئوی ۳۶۰ و AR هم نیاز دارید، Photo Sphere Viewer گزینهٔ کاملتری است.
معایب، عیبیابی و نقش هاست در نمایش تصاویر ۳۶۰
تصاویر ۳۶۰ ابزار جذابی برای تعامل بیشترند، اما مثل هر فناوری چند محدودیت واقعی دارند که بهتر است صادقانه بدانید تا با چشم باز تصمیم بگیرید:
- حجم بالای فایل: عکسهای ۳۶۰ باکیفیت چند مگابایتاند و مصرف پهنایباند و فضای دیسک را بالا میبرند.
- احتمال کندی: اگر تصاویر بهینه نشوند یا روی هاست ضعیف اجرا شوند، زمان بارگذاری صفحه افزایش مییابد.
- محدودیت نسخهٔ رایگان: Algori فقط یک تصویر در هر صفحه و بدون هاتاسپات؛ WP VR رایگان محدود به ۵ صحنه و ۵ هاتاسپات.
- وابستگی به افزونه: نمایش ۳۶۰ به افزونهٔ شخصثالث وابسته است؛ در صورت غیرفعالشدن افزونه، تصویر تعاملی از کار میافتد.
در جدول زیر رایجترین مشکلاتی که کاربران هنگام کار با تصاویر ۳۶۰ با آنها روبهرو میشوند و راهحلشان را کنار هم گذاشتهایم:
| مشکل رایج | علت احتمالی | راهحل |
|---|---|---|
| تصویر ۳۶۰ تخت یا کج نمایش داده میشود | عکس از نوع equirectangular نیست | از یک عکس پانورامای ۳۶۰ واقعی با نسبت ۲ به ۱ استفاده کنید |
| خطای «THE FILE COULD NOT BE ACCESSED» | ناسازگاری HTTP و HTTPS در آدرس تصویر | آدرس سایت و تصویر را هماهنگ و روی HTTPS تنظیم کنید |
| تور بارگذاری نمیشود | تداخل افزونهٔ کش یا بهینهسازی | مسیر افزونه (مثل /plugins/wpvr) را از بهینهسازی مستثنا کنید |
| آپلود تصویر بزرگ ناموفق است | کمبود حافظهٔ PHP یا محدودیت حجم آپلود هاست | محدودیت آپلود و حافظه را افزایش دهید یا از پشتیبانی هاست کمک بگیرید |
نقلقول از مستندات رسمی WP VR
مستندات رسمی افزونهٔ WP VR تأکید میکند که برای یک نتیجهٔ واقعگرایانه، «تصویر پانورامای ۳۶۰ به رزولوشن بالا، بیش از 3000×1500 پیکسل نیاز دارد.» همین جمله نشان میدهد چرا کیفیت تصویر و توان هاست در کنار هم اهمیت دارند؛ فایل بزرگتر یعنی نیاز به فضا و منابع بیشتر. منبع: wordpress.org — WP VR.
به همین دلیل، پیش از سرمایهگذاری روی تصاویر ۳۶۰ باکیفیت، ابتدا مطمئن شوید زیرساخت هاست شما آمادهٔ میزبانی فایلهای سنگین و اجرای روان افزونه است.
هاست وردپرس وبداده؛ بستر مناسب تصاویر سنگین ۳۶۰
همانطور که دیدیم، اجرای بیدردسر تصاویر و تورهای ۳۶۰ بیش از هر چیز به فضای دیسک، حافظهٔ کافی و محدودیت آپلود مناسب روی هاست وابسته است. در تجربهٔ پشتیبانی ما در وبداده، بخش بزرگی از مشکلات «آپلود ناموفق تصویر بزرگ» یا «کندی لود تور» کاربران، پس از افزایش محدودیت آپلود و حافظهٔ PHP و تأمین فضای کافی برطرف میشود. به همین دلیل روی این موارد تأکید داریم:
✅ هاست وردپرس وبداده با فضای مناسب و حافظهٔ کافی برای میزبانی فایلهای سنگین ۳۶۰.
✅ زیرساخت نسل جدید HPE (Gen11 و Gen10) برای پایداری و پاسخ سریع سرور.
✅ دیتاسنترهای ایران، هلند و آلمان برای انتخاب نزدیکترین لوکیشن به مخاطبان شما.
✅ پشتیبانی فنی ۲۴ ساعته برای کمک در تنظیم محدودیت آپلود، حافظهٔ PHP و رفع خطاهای احتمالی.
✅ زیرساخت نسل جدید HPE (Gen11 و Gen10) برای پایداری و پاسخ سریع سرور.
✅ دیتاسنترهای ایران، هلند و آلمان برای انتخاب نزدیکترین لوکیشن به مخاطبان شما.
✅ پشتیبانی فنی ۲۴ ساعته برای کمک در تنظیم محدودیت آپلود، حافظهٔ PHP و رفع خطاهای احتمالی.
اگر میخواهید تصاویر و تورهای ۳۶۰ شما سریع و بدون خطا نمایش داده شوند، میتوانید پلنهای هاست سیپنل وبداده را ببینید که برای مدیریت سادهتر فایلها و افزونهها نیز گزینهٔ خوبی است.
پرسشهای پرتکرار دربارهٔ ساخت تصاویر ۳۶۰ در وردپرس
تفاوت تصویر ۳۶۰ درجه با عکس پانورامای معمولی چیست؟
عکس پانورامای معمولی فقط یک تصویر افقیِ کشیده و پهن است که میدان دید بازتری دارد، اما همچنان ثابت است. تصویر ۳۶۰ درجه (equirectangular) کل محیط اطراف، از جمله بالا و پایین را پوشش میدهد و کاربر میتواند داخل آن در همهٔ جهتها بچرخد. نسبت عرض به ارتفاع در تصویر ۳۶۰ واقعی دقیقاً ۲ به ۱ است.
بهترین افزونهٔ رایگان برای تصاویر ۳۶۰ در وردپرس کدام است؟
بستگی به هدف شما دارد. برای نمایش سریع یک تصویر ۳۶۰ ساده، افزونهٔ Algori 360 Image با بلاک گوتنبرگ کافی است. برای ساخت تور مجازی چندصحنهای با نقاط اطلاعاتی قابلکلیک، افزونهٔ WP VR بهترین گزینهٔ رایگان است. اگر به ویدئوی ۳۶۰ و نمایشگر AR هم نیاز دارید، Photo Sphere Viewer را در نظر بگیرید.
آیا برای ساخت تصویر ۳۶۰ به دانش کدنویسی نیاز دارم؟
خیر. تمام مراحلی که در این مقاله گفتیم، از افزودن بلاک ۳۶۰ تا ساخت تور و گذاشتن شورتکد، بهصورت کاملاً بصری و بدون نوشتن کد انجام میشوند. تنها جایی که ممکن است به تنظیمات فنی نیاز پیدا کنید، افزایش محدودیت حجم آپلود یا حافظهٔ PHP است که آن هم معمولاً از طریق پشتیبانی هاست بهسادگی انجام میشود.
چرا تصویر ۳۶۰ من صاف یا کج نمایش داده میشود؟
شایعترین علت این است که عکس شما از نوع equirectangular نیست. اگر یک عکس معمولی یا پانورامای ناقص را آپلود کنید، افزونه نمیتواند آن را بهدرستی به کره تبدیل کند و خروجی تخت یا کشیده میشود. راهحل این است که از یک عکس ۳۶۰ واقعی با نسبت عرض به ارتفاع ۲ به ۱ استفاده کنید.
تصویر ۳۶۰ باید چه ابعاد و کیفیتی داشته باشد؟
طبق توصیهٔ رسمی WP VR، برای یک نتیجهٔ واقعگرایانه بهتر است رزولوشن تصویر بالای 3000×1500 پیکسل باشد. فرمت JPG همهجا پشتیبانی میشود و برخی افزونهها PNG و WebP را هم میپذیرند. توجه کنید که کیفیت بالاتر یعنی فایل حجیمتر، پس بین کیفیت و سرعت تعادل برقرار کنید.
آیا تصاویر ۳۶۰ سرعت سایت را کم میکنند؟
تصاویر ۳۶۰ چون حجیماند میتوانند بر سرعت اثر بگذارند، اما این اثر قابل مدیریت است. با فشردهسازی تصویر، استفاده از افزونهٔ کش، بارگذاری تور فقط در صفحههای موردنیاز و مهمتر از همه اجرای سایت روی هاستی با منابع کافی، میتوانید تجربهای روان داشته باشید بدون اینکه سرعت فدا شود.
خطای THE FILE COULD NOT BE ACCESSED در WP VR یعنی چه؟
این خطا معمولاً بهخاطر ناسازگاری بین HTTP و HTTPS رخ میدهد؛ یعنی سایت شما روی HTTPS اجرا میشود اما آدرس تصویر روی HTTP است یا برعکس. برای رفعش، از بخش «تنظیمات < همگانی» وردپرس مطمئن شوید آدرس سایت و آدرس وردپرس هماهنگ و هر دو روی HTTPS تنظیم شدهاند.
آیا کاربران موبایل هم میتوانند تصاویر ۳۶۰ را ببینند؟
بله. افزونههای امروزی مثل WP VR و Algori از لمس صفحه پشتیبانی میکنند و کاربر موبایل میتواند با انگشتش داخل تصویر بچرخد و زوم کند. در نسخهٔ پرو برخی افزونهها امکان استفاده از ژایروسکوپ را هم میدهند تا با چرخاندن خود گوشی، تصویر بچرخد و تجربهای نزدیک به واقعیت مجازی ایجاد شود.
جمعبندی و قدم بعدی شما
در این راهنما دیدیم که افزودن تصاویر و تورهای ۳۶۰ به وردپرس نهتنها پیچیده نیست، بلکه بدون هیچ کدنویسیای انجام میشود. ابتدا تفاوت تصویر ۳۶۰ واقعی با عکس معمولی را روشن کردیم، سپس سه پیشنیاز اصلی (تصویر باکیفیت، هاست مناسب و افزونهٔ درست) را مرور کردیم. بعد دو مسیر عملی را گامبهگام ساختیم: نمایش یک تصویر ساده با Algori 360 Image و ساخت تور تعاملی چندصحنهای با WP VR، و سه افزونهٔ محبوب را با هم مقایسه کردیم. در پایان هم معایب واقعی و راهحل خطاهای رایج را صادقانه گفتیم. مهمترین توصیه این است: از یک تصویر ۳۶۰ اصولی شروع کنید و آن را روی هاستی با فضا و منابع کافی منتشر کنید تا از سرعت و کیفیت نمایش مطمئن باشید.
جمعبندی سریع
✅ تصویر باید equirectangular با نسبت ۲ به ۱ و رزولوشن بالای 3000×1500 باشد.
✅ برای تصویر تکی از Algori و برای تور تعاملی از WP VR استفاده کنید.
✅ تصاویر ۳۶۰ سنگیناند؛ آنها را فشرده و روی هاست مناسب میزبانی کنید.
✅ خطاهای رایج مثل تصویر تخت یا عدم بارگذاری، راهحل ساده دارند.
✅ برای تصویر تکی از Algori و برای تور تعاملی از WP VR استفاده کنید.
✅ تصاویر ۳۶۰ سنگیناند؛ آنها را فشرده و روی هاست مناسب میزبانی کنید.
✅ خطاهای رایج مثل تصویر تخت یا عدم بارگذاری، راهحل ساده دارند.
در صورتی که سوالی داشتید میتوانید در بخش نظرات با ما در ارتباط باشید.
