سبد خرید شما خالی است.
آموزش اضافه‌کردن موشن به سایت با ChatGPT؛ عکس سه‌حالته در وردپرس
10دقیقه
آنچه در این مقاله می‌خوانید [پنهان‌سازی]
برای اضافه‌کردن موشن به سایت با ChatGPT، ابتدا تصاویر و رفتار موردنظر را مشخص کنید، سپس از هوش مصنوعی کد HTML، CSS و JavaScript بگیرید و آن را در بخش مناسب سایت اجرا کنید. اگر اتصال وردپرس ابزارهای لازم برای ویرایش صفحه را داشته باشد، همین تغییرات می‌توانند از داخل گفت‌وگو روی سایت اعمال شوند؛ در غیر این صورت، کد را به‌صورت دستی در المنتور قرار می‌دهید.
در این آموزش، نمونه‌ای را بررسی می‌کنیم که روی صفحه اصلی پلی‌مدیا اجرا کردیم: عکس اعضای تیم با ورود به محدوده نمایش به نسخه انیمه تبدیل می‌شود و با لمس عکس، نسخه Arcane نمایش داده می‌شود. عکس ابتدای صفحه نیز یک موشن کوتاه سه‌حالته دارد. هدف، ساخت یک رابط جذاب با تغییرات کوچک و قابل کنترل است.
مشاهده نمونه واقعی در بخش اعضای تیم پلی‌مدیا
این افکت چگونه کار می‌کند؟
مرورگر عکس را در لحظه به انیمه تبدیل نمی‌کند. برای هر شخص، سه فایل آماده داریم: تصویر اصلی، نسخه انیمه و نسخه‌ای با ظاهر نقاشی‌گونه و سینمایی الهام‌گرفته از Arcane. کد صفحه این تصاویر را در یک قاب مشترک قرار می‌دهد و شفافیت لایه‌ها را تغییر می‌دهد. بنابراین، بعد از آماده‌شدن فایل‌ها، نمایش افکت به درخواست دوباره از مدل تصویرساز نیاز ندارد.
| بخش سایت | رویداد | رفتار اجراشده |
|---|---|---|
| عکس اعضای تیم | ورود به محدوده نمایش با اسکرول | نمایش نسخه انیمه؛ خروج از محدوده، بازگشت به اصلی در صورت انتخاب‌نشدن Arcane |
| عکس اعضای تیم | لمس یا کلیک | فعال یا غیرفعال‌کردن نسخه Arcane |
| عکس ابتدای صفحه | اولین ورود عکس به محدوده نمایش، پس از بارگذاری تصاویر | نمایش کوتاه انیمه و Arcane با گذر نور بنفش، سپس بازگشت به اصلی |
| عکس ابتدای صفحه | لمس یا کلیک بعدی | جابه‌جایی بین اصلی، انیمه و Arcane |
در نمونه عکس ابتدای صفحه، تغییر حالت‌ها از حدود ۰٫۶ ثانیه شروع می‌شود و نزدیک ۲٫۷ ثانیه به تصویر اصلی برمی‌گردد؛ محوشدن لایه‌ها کمی پس از آن کامل می‌شود. این زمان‌بندی یک انتخاب طراحی برای همین صفحه است.
پیش‌نیازهای ساخت موشن سایت با هوش مصنوعی
- دسترسی ویرایش به سایت وردپرسی و صفحه موردنظر.
- عکس اصلی با کیفیت مناسب و اجازه استفاده از تصویر افراد.
- محیطی با قابلیت ساخت یا ویرایش تصویر برای تولید نسخه‌های جدید.
- محل مجاز اجرای کد؛ در این آموزش ویجت HTML المنتور.
- نسخه پشتیبان یا نسخه آزمایشی صفحه برای بازگشت به وضعیت قبلی.
داشتن گفت‌وگوی ChatGPT به‌تنهایی به معنی دسترسی به مدیریت سایت نیست. اتصال باید احراز هویت شده باشد و ابزارهای لازم را ارائه کند. دسترسی به اپ‌های MCP و حالت توسعه‌دهنده نیز به محیط، حساب و تنظیمات سازمان وابسته است؛ شرایط فعلی را در مستندات رسمی OpenAI بررسی کنید. اگر اتصال ندارید، مسیر دستی این مقاله همچنان قابل اجراست.
مرحله ۱: رفتار موشن را قبل از تولید عکس مشخص کنید
به‌جای درخواست کلی «سایتم را جذاب کن»، نام بخش، رویداد شروع و حالت پایان را بنویسید. برای عکس تیم، اسکرول و لمس دو رفتار جدا هستند. در موبایل نمی‌توانید فقط به حرکت نشانگر موس تکیه کنید؛ لمس و کلیک باید تعریف شوند.
در بخش اعضای تیم، تصویر اصلی هر شخص را نگه دار. وقتی عکس وارد محدوده قابل مشاهده صفحه شد، نسخه انیمه را با محوشدن نرم نمایش بده. با لمس یا کلیک همان عکس، نسخه Arcane فعال شود و تا لمس مجدد باقی بماند. با لمس دوم، حالت مناسب اسکرول برگردد. اندازه کارت‌ها، نام اعضا و لینک‌های صفحه تغییر نکند.
خروجی قابل قبول این مرحله، شرح رفتاری است که بتوانید آن را آزمایش کنید: مثلاً «لمس دوم Arcane را خاموش می‌کند». اگر این جزئیات را مشخص نکنید، ممکن است کد هر بار اسکرول، انتخاب کاربر را بازنشانی کند.
مرحله ۲: از همان عکس، نسخه انیمه و Arcane بسازید
تصویر اصلی را ارسال کنید و هر سبک را جداگانه بسازید. در هر دو درخواست، حفظ چهره، ژست، لباس، زاویه دوربین و قاب را تاکید کنید. برای یک عکس دوربری‌شده، پس‌زمینه شفاف بخواهید؛ برای پرتره با پس‌زمینه سفید، همان زمینه سفید را حفظ کنید. یکسان‌بودن ابعاد به‌تنهایی کافی نیست؛ جای چشم‌ها، سر و شانه‌ها هم باید نزدیک باشد.
پرامپت آماده تبدیل عکس به انیمه
این عکس را به یک تصویر انیمه با خطوط تمیز و سایه‌پردازی سل‌شید تبدیل کن. هویت قابل تشخیص فرد، فرم صورت، مو، ریش، حالت چهره، لباس، ژست، جهت نگاه، زاویه دوربین و ترکیب‌بندی حفظ شود. فقط سبک تصویر تغییر کند. شخص یا شیء جدید اضافه نکن. اندازه بوم و جای سوژه مانند مرجع باشد. پس‌زمینه را مطابق تصویر اصلی حفظ کن؛ اگر مرجع دوربری‌شده است، خروجی واقعاً شفاف بده.
پرامپت آماده نسخه الهام‌گرفته از Arcane
همین عکس اصلی را به تصویر انیمیشنی نقاشی‌گونه با ظاهر ترکیبی دوبعدی و سه‌بعدی، بافت قلم‌مو، فرم‌های زاویه‌دار و نورپردازی سینمایی الهام‌گرفته از Arcane تبدیل کن. هویت فرد، مو، ریش، ژست، لباس، جهت نگاه، قاب و محل تمام اجزای تصویر حفظ شود. فقط سبک رندر تغییر کند. نوشته، واترمارک یا شیء اضافه نکن. پس‌زمینه و ابعاد مانند مرجع بماند.
هر خروجی را با عکس اصلی مقایسه کنید. مدل ممکن است لوگوی لباس، فرم دست یا جزئیات چهره را تغییر دهد؛ حفظ صددرصدی هویت و هم‌ترازی را تضمین‌شده فرض نکنید. اگر هنگام جابه‌جایی، صورت ناگهان بزرگ‌تر می‌شود، ابتدا عکس را اصلاح کنید.
مرحله ۳: تصاویر را برای وب آماده کنید
فایل‌های تاییدشده را با نام‌های واضح مانند farshad-original.webp، farshad-anime.webp و farshad-arcane.webp در کتابخانه رسانه وردپرس بارگذاری کنید. ابعاد خروجی را متناسب با اندازه نمایش انتخاب کنید. در اجرای پلی‌مدیا، پرتره‌های تیم با ابعاد ۵۰۰ در ۵۰۰ پیکسل و نسخه‌های اضافه عکس ابتدای صفحه با ابعاد ۹۰۰ در ۹۰۰ پیکسل آماده شدند؛ این اندازه‌ها برای همه سایت‌ها نسخه ثابت نیستند.
حجم، شفافیت زمینه و کیفیت صورت را پس از فشرده‌سازی بررسی کنید. برای عکس اصلی، متن جایگزین توصیفی بنویسید؛ لایه‌های تزئینی تکراری باید از خواندن دوباره همان تصویر توسط صفحه‌خوان جلوگیری کنند. ابعاد قاب نیز باید از ابتدا مشخص باشد تا بارگذاری تصاویر جای محتوا را جابه‌جا نکند.
مرحله ۴: پرامپت دقیق ساخت کد را به ChatGPT بدهید
سه آدرس تصویر، نام بخش و محدودیت‌های طراحی را همراه درخواست ارسال کنید. برای تشخیص ورود تصویر به محدوده نمایش، IntersectionObserver مناسب است؛ این API تغییر تقاطع عنصر با محدوده نمایش را به‌صورت غیرهم‌زمان گزارش می‌کند. توضیح رسمی MDN
برای یک تصویر سه‌حالته در سایت وردپرس با المنتور، کد کامل HTML، CSS و JavaScript بساز. آدرس اصلی: [URL اصلی]، انیمه: [URL انیمه] و Arcane: [URL آرکین]. سه تصویر در یک قاب هم‌اندازه روی هم باشند. عکس اصلی بدون JavaScript هم دیده شود. با ورود قاب به محدوده نمایش، انیمه نمایش داده شود؛ با خروج، اصلی برگردد، مگر Arcane با لمس فعال شده باشد. لمس یا کلیک Arcane را روشن و خاموش کند. Enter و Space هم قابل استفاده باشند. تغییر تصویر فقط بعد از بارگذاری موفق لایه جدید انجام شود؛ در خطای بارگذاری، عکس اصلی باقی بماند. CSS فقط روی همین بخش اثر بگذارد. از کتابخانه سنگین و ویدیو استفاده نکن. prefers-reduced-motion را رعایت کن و روش نصب و حذف کد را توضیح بده.
برای موشن عکس ابتدای صفحه، این بخش را جایگزین رفتار اسکرول کنید:
بعد از بارگذاری موفق تصاویر و اولین ورود عکس به محدوده نمایش، فقط یک‌بار یک توالی حدود سه‌ثانیه‌ای اجرا کن: اصلی، انیمه، Arcane و بازگشت به اصلی. در تغییر حالت، گذر کوتاه نور بنفش اضافه کن. لمس کاربر، توالی خودکار را متوقف کند و بین سه حالت جابه‌جا شود. هنگام مخفی‌شدن تب، زمان‌سنج‌ها متوقف شوند. برای کاربران دارای تنظیم کاهش حرکت، توالی خودکار اجرا نشود و تغییر دستی بدون انیمیشن باشد.
مرحله ۵: کد را در المنتور یا از طریق اتصال سایت اجرا کنید
روش دستی با ویجت HTML المنتور
- یک نسخه آزمایشی از صفحه بسازید و با المنتور باز کنید.
- ویجت HTML را در محل تصویر یا کنار بخش هدف قرار دهید.
- اگر کد شامل قاب و هر سه تصویر است، آن را جایگزین ویجت تصویر همان بخش کنید؛ تصویر اصلی را دوبار نمایش ندهید.
- اگر کد برای تغییر ویجت موجود نوشته شده، شناسه یا کلاس همان ویجت را به ChatGPT بدهید و کد را کنار آن قرار دهید.
- آدرس‌های نمونه را با آدرس واقعی فایل‌ها جایگزین کنید.
- صفحه را ذخیره کنید و خروجی عمومی را خارج از ویرایشگر آزمایش کنید.
طبق راهنمای رسمی المنتور، ویجت HTML می‌تواند HTML، CSS و اسکریپت JavaScript را در صفحه قرار دهد. دسترسی به این ویجت ممکن است بر اساس نقش کاربری محدود باشد. اگر سایت اسکریپت را حذف می‌کند، مسیر اجرای مجاز قالب یا افزونه را بررسی کنید.
روش اجرای مستقیم با اتصال وردپرس
ابتدا آموزش اتصال ChatGPT به وردپرس با MCP را بخوانید. پس از اتصال، از ایجنت بخواهید صفحه و ابزارهای در دسترس را بررسی کند؛ فقط داشتن ابزار انتشار نوشته به معنی امکان ویرایش المنتور نیست.
صفحه اصلی و بخش تصویر مشخص‌شده را بررسی کن. قبل از ویرایش، نسخه فعلی تنظیمات را نگه دار. فقط همین بخش را با تصاویر تاییدشده و موشن تعریف‌شده تغییر بده. ساختار داده المنتور را معتبر حفظ کن و به بخش‌های دیگر دست نزن. پس از ذخیره، صفحه عمومی، بارگذاری تصاویر، لمس، صفحه‌کلید و بازگشت به عکس اصلی را بررسی کن و لینک نتیجه را بده.
در اجرای همین پروژه، تصاویر ساخته و بارگذاری شدند و کد لایه‌ها به صفحه المنتور اضافه شد. تغییر دستی داده‌های داخلی المنتور به رعایت ساختار و شیوه ذخیره‌سازی نیاز دارد؛ برای شروع، ویجت HTML مسیر قابل فهم‌تری است. نکات دسترسی و نگهداری اتصال در راهنمای امنیت اتصال وردپرس و ChatGPT توضیح داده شده است.
چطور موشن سبک بماند؟
برای تغییر تصویر، شفافیت یا opacity را متحرک کنید و برای حرکت کوچک از transform استفاده کنید. راهنمای web.dev درباره انیمیشن‌های سریع این ویژگی‌ها را برای جلوگیری از هزینه‌های اضافی چیدمان و نقاشی پیشنهاد می‌کند. برای شروع، به‌جای حرکت دائمی، یک توالی کوتاه و مشخص طراحی کنید.
در عکس‌های پایین صفحه می‌توانید بارگذاری را به نزدیکی محدوده نمایش موکول کنید؛ برای تصویر اصلی ابتدای صفحه، بارگذاری دیرهنگام را بدون بررسی اعمال نکنید. وجود چند تصویر اضافی همچنان هزینه دانلود دارد و عبارت «موشن سبک» به معنی حجم صفر یا بهبود تضمینی سرعت نیست.
با prefers-reduced-motion می‌توان تنظیم کاهش حرکت کاربر را تشخیص داد؛ در این حالت، حرکت‌های تزئینی را حذف کنید و تعامل دستی را نگه دارید. مستندات کاهش حرکت در MDN
خطاهای رایج و روش رفع آن‌ها
| مشکل | بررسی و اصلاح |
|---|---|
| با تغییر حالت، عکس می‌پرد | قاب، نسبت تصویر و محل صورت در هر سه فایل را یکسان کنید. |
| با لمس عکس، صفحه جابه‌جا می‌شود | وجود لینک والد را بررسی کنید؛ برای تغییر حالت از دکمه مناسب یا مدیریت رویداد بدون مسیریابی ناخواسته استفاده کنید. |
| نسخه جدید دیده نمی‌شود | آدرس فایل، خطای بارگذاری، اجرای اسکریپت و سپس کش صفحه و CDN را بررسی کنید. |
| در موبایل افکت کار نمی‌کند | رفتار را فقط بر پایه hover ننویسید؛ لمس و کلیک را اضافه کنید. |
| حالت Arcane با اسکرول خاموش می‌شود | انتخاب دستی را در متغیر جدا ذخیره کنید و به آن نسبت به رویداد اسکرول اولویت بدهید. |
| افکت در ویرایشگر و سایت متفاوت است | خروجی عمومی را آزمایش کنید؛ زمان آماده‌شدن عناصر و مقداردهی تکراری اسکریپت را بررسی کنید. |
قبل از انتشار چه چیزهایی را آزمایش کنیم؟
- هر سه فایل باز شوند و در شبکه کند، قاب خالی نماند.
- لمس اول و دوم دقیقاً رفتار تعریف‌شده داشته باشند.
- کلیدهای Enter و Space کار کنند و فوکوس قابل مشاهده باشد.
- در موبایل، تصویر از عرض صفحه بیرون نزند.
- با خاموش‌کردن JavaScript، عکس اصلی و محتوای ضروری باقی بمانند.
- تنظیم کاهش حرکت و مخفی‌کردن تب، رفتار قابل انتظار داشته باشند.
- صفحه عمومی پس از ذخیره و پاک‌سازی کش، نسخه جدید را نشان دهد.
در نمونه پلی‌مدیا، بارگذاری سه تصویر عکس ابتدای صفحه، بازگشت به حالت اصلی و تغییر دستی به انیمه و Arcane بررسی شد. این بررسی محدود، جای آزمون روی دستگاه‌ها و مرورگرهای مختلف یا اندازه‌گیری سرعت سایت را نمی‌گیرد.
پرسش‌های متداول
آیا برای ساخت این افکت باید برنامه‌نویسی بلد باشیم؟
می‌توانید تولید کد را به ChatGPT بسپارید، اما باید محل نصب، آدرس تصاویر و معیار آزمایش را بشناسید. اگر کد روی صفحه اصلی یا فروشگاه اثر می‌گذارد، نتیجه را روی نسخه آزمایشی بررسی کنید.
آیا افزونه انیمیشن جدا لازم است؟
برای این جابه‌جایی سه‌حالته، کد محدود HTML، CSS و JavaScript کافی است. نصب افزونه جدا به امکانات موردنیاز و ساختار سایت بستگی دارد.
آیا می‌توان همین کار را بدون اتصال ChatGPT به وردپرس انجام داد؟
بله. تصاویر و کد را در گفت‌وگو آماده کنید، فایل‌ها را در وردپرس بارگذاری کنید و کد را در ویجت HTML قرار دهید. اتصال مستقیم، مرحله اعمال تغییرات را ساده‌تر می‌کند، به شرط وجود ابزار و دسترسی مناسب.
آیا این موشن باعث افزایش رتبه گوگل می‌شود؟
برای این افکت وعده افزایش رتبه نداریم. هدف آن جذاب‌ترشدن تعامل با تصاویر است. متن قابل خواندن، ساختار صفحه و سرعت بارگذاری را باید مستقل بررسی کنید.
قدم بعدی: یک عکس را سه‌حالته کنید
از یک پرتره شروع کنید: سه فایل هم‌قاب بسازید، رفتار لمس را تعریف کنید و نسخه آزمایشی را بررسی کنید. بعد از تایید نتیجه، همین الگو را برای اعضای تیم گسترش دهید. برای آماده‌سازی مسیر اتصال و استفاده از پرامپت‌های مرتبط، فایل آموزشی اتصال ChatGPT به وردپرس با MCP را ببینید.
منابع فنی: مستندات رسمی Elementor، MDN، web.dev و OpenAI که در بخش‌های مرتبط لینک شده‌اند. تاریخ بررسی: ۱۴ اکتبر ۲۰۲۶. مثال اجرایی متعلق به صفحه اصلی پلی‌مدیا است.
