- چرا تصاویر متحرک به درستی در سایت کار نمی کنند؟
- چرا از تصویر متحرک در وردپرس استفاده کنیم؟
- نحوه قرار دادن تصویر متحرک در وردپرس به صورت دستی
- آموزش اضافه کردن تصویر متحرک در وردپرس با ویرایشگر کلاسیک
- نحوه گذاشتن تصویر متحرک در وردپرس با استفاده از افزونه
- – افزونه Giphypress
- – افزونه WP GIF Player
- – افزونه GIF Animation Preview
- – افزونه Auto AnimateImage
- معرفی افزونه Animate it
- سوالات متداول
- جمع بندی: اموزش افزودن تصاویر متحرک در وردپرس
نحوه اضافه کردن تصویر متحرک در وردپرس
( 1 رای , میانگین : 5,00 از 5)
بارگذاری...آیا قصد دارید از تصاویر متحرک در سایت خود اضافه کنید؟ گیف ها یا همان تصاویر متحرک علاوه بر اینکه باعث جذابیت وب سایت می شوند، می توانند به جلب توجه بازدیدکنندگان و افزایش تعامل با سایت شما کمک کنند. اما ممکن است بعد از اضافه کردن یک تصویر متحرک، آن تصویر انیمیشن را از دست داده و به عنوان یک تصویر ثابت نمایش داده شود. اگر شما هم با این مشکل مواجه هستید، نگران نباشید. زیرا ما در این مطلب قصد داریم آموزش اضافه کردن تصویر متحرک در وردپرس را به صورت کامل در اختیار شما عزیزان قرار دهیم. با ما همراه باشید.
بیشتر بخوانید: معرفی بهترین افزونه های صفحات فرود وردپرس 2024
چرا تصاویر متحرک به درستی در سایت کار نمی کنند؟
در برخی از مواقع تصاویر متحرک در وردپرس به تصاویر ثابت تبدیل می شوند زیرا به صورت خودکار چندین اندازه از تصویر را تولید می کنند. در واقع؛ هر زمانی که شما هر نوع تصویری را با استفاده از آپلود کننده رسانه به وب سایت وردپرس خود اضافه می کنید، وردپرس به صورت خودکار چندین نسخه از آن تصویر را در اندازه های مختلف که شامل تصویر کوچک، متوسط، بزرگ و اندازه کامل می باشد را ایجاد می کند.
با این حال، هنگام ایجاد اندازه های جدید تصویر برای گیف های متحرک، وردپرس تنها اولین فریم گیف را ذخیره می کند. در نتیجه، وقتی هر یک از آن اندازه های تصویر تولید شده را به پست یا صفحه خود اضافه می کنید، تصاویر به صورت ثابت نمایش داده می شوند و تصویر به صورت متحرک نیست. حال برای اینکه بتوانید این مشکل را رفع کنید، روش های مختلفی وجود دارد که در ادامه مطلب آنها را به شما آموزش می دهیم. بنابراین همراه ما باشید تا شما را با نحوه افزودن تصویر متحرک در وردپرس آشنا کنیم.
چرا از تصویر متحرک در وردپرس استفاده کنیم؟
تصاویر متحرک محبوبیت گسترده ای در بین رسانه های اجتماعی و وب سایت ها در سراسر جهان دارند. برخی از مهم ترین دلایل استفاده از آنها عبارت است از:
- داستان سرایی بصری: گیف‌ها روشی مختصر و از نظر بصری جذاب برای گفتن یک داستان یا انتقال یک پیام ارائه می دهند و آنها را برای تصویرسازی فرآیندها، نمایش ویژگی‌های محصول یا روایت دنباله‌ای از رویدادها ایده‌آل می کنند.
- افزایش تعامل: در حالی که تصاویر ثابت توجه را به خود جلب می کنند، تصاویر متحرک نیز باعث افزایش تعامل می شوند. آنها به طور طبیعی چشم را به خود جلب کرده و بازدیدکنندگان را وادار می کنتد تا با محتوای شما تعامل داشته باشند و زمان بیشتری را در سایت شما بگذرانند.
- آموزش و نمایش: گیف ها مفاهیم پیچیده را با ارائه نمایش ها و آموزش های بصری ساده می کنند و درک راهنماهای خاص در محتوای شما را برای مخاطبان آسان تر می کنند.
- ارتباط بیانی: تصاویر متحرک در بیان احساسات، واکنش ها و احساسات ظریفی که ممکن است انتقال آنها به تنهایی از طریق متن چالش برانگیز باشد، عالی هستند.
بیشتر بخوانید: مقایسه Webflow با WordPress
نحوه قرار دادن تصویر متحرک در وردپرس به صورت دستی
نحوه اضافه کردن GIF های متحرک در وردپرس چگونه است؟ در اولین قدم، شما باید یک پست یا صفحه جدید را ویرایش و یا ایجاد کنید تا بتوانید تصاویر متحرک خود را به آن اضافه نمائید. پس از اینکه وارد صفحه ویرایشگر محتوا شدید، روی گزینه «+» کلیک و سپس بلوک «تصویر» را اضافه کنید.
پس از آن روش های مختلفی وجود دارد که می توانید تصاویر متحرک خود را در بلوک “تصویر” اضافه کنید.
برای شروع، کافیست روی دکمه «آپلود» کلیک کنید و سپس تصویر متحرک خود را از رایانه خود انتخاب نمائید. یا اینکه می توانید روی دکمه «کتابخانه رسانه» کلیک نمائید و سپس یک تصویر متحرک یا گیف را انتخاب کنید که قبلاً در کتابخانه رسانه شما آپلود شده است.
همچنین گزینه ای برای وارد کردن لینک به تصویر متحرک وجود دارد که ما این گزینه را اصلاً به شما توصیه نمی کنیم، زیرا باعث می شود که تصویر در سایت شما آپلود نشود.
بعد از اینکه تصویر متحرک خود را آپلود کردید، وردپرس آن را به محتوای شما اضافه می کند. پس از افزودن گیف، باید گزینه “اندازه کامل” را در زیر اندازه تصویر از منوی سمت راست خود انتخاب کنید.
بیشتر بخوانید: آموزش ایجاد منوی ریسپانسیو در وردپرس
تصویر در اندازه کامل همان تصویر متحرک اصلی است که در وردپرس آپلود کرده اید. این باعث می‌شود که گیف‌های وردپرس شما به‌عنوان تصاویر ثابت نشان داده نشوند و انیمیشن پخش نشود. سپس شما می توانید بلافاصله انیمیشن را در ویرایشگر محتوای خود مشاهده کنید.
پس از ان پست یا صفحه خود را منتشر کنید. سپس می توانید تصاویر متحرک را مشاهده نمائید.
بیشتر بخوانید: آموزش افزودن انیمیشن گیف ( GIF ) در نوشته های سایت وردپرسی
آموزش اضافه کردن تصویر متحرک در وردپرس با ویرایشگر کلاسیک
اگر از ویرایشگر قدیمی وردپرس کلاسیک استفاده می کنید، همچنان می توانید تصویر متحرک را به وب سایت خود اضافه کنید. برای انجام این کار، وارد صفحه ویرایشگر دلخواه خود شوید. حال روی دکمه “افزودن رسانه” کلیک کنید و سپس فایل گیف خود را انتخاب نمائید.
با این کار آپلود کننده رسانه باز می شود و به شما امکان می دهد یک GIF موجود را از کتابخانه رسانه خود آپلود یا انتخاب کنید. هنگامی که تصویر دلخواه را انتخاب کردید، روی دکمه Insert into post (در پست درج کنید) کلیک کنید. سپس تصویر در مکان مکان نما به پست شما اضافه می شود.
روی تصویر متحرک درج شده کلیک کنید تا گزینه های تراز و اندازه ظاهر شوند. شما می توانید این تنظیمات را بر اساس ترجیحات خود سفارشی کنید.
در نهایت روی دکمه منتشر کردن صفحه کلیک کنید.
نحوه گذاشتن تصویر متحرک در وردپرس با استفاده از افزونه
همچنین وردپرس به شما این امکان را می دهد تا با استفاده از افزونه، انواع تصاویر متحرک را به سادگی در سایت خود اضافه کنید. در واقع؛ افزونه هایی وجود دارند که به شما این امکان را می دهند تا فایل‌های گیف را به سرعت و به آسانی آپلود و جاسازی کنید، درست مانند تصاویر یا ویدیوها. در ادامه بهترین افزونه در این خصوص را به شما معرفی می کنیم.
– افزونه Giphypress
با نصب این افزونه، یک دکمه Giphy به ویرایشگر محتوای شما اضافه می شود که می توانید در هنگام ویرایش یک صفحه، با کلیک روی این دکمه تصاویر متحرک را به سایت خود اضافه کنید. هنگامی که گیف مناسب را پیدا کردید، روی Embed into Post کلیک کنید و تا گیف به پست یا صفحه شما شما اضافه شود.
– افزونه WP GIF Player
اضافه کردن تصاویر متحرک به یک پست یا صفحه می تواند باعث شود که سرعت بارگذاری آن صفحه کاهش پیدا کند. اما این افزونه می تواند به شما در مقابله با این مشکل کمک کند. پس از نصب، این افزونه تضمین می کند که همه فایل های گیف شما بارگذاری و پخش نمی شوند. این یک دکمه GIF بر روی تمام انیمیشن ها اضافه می کند که به بازدیدکنندگان اجازه می دهد تا به دلخواه گیف های شما را متوقف کنند.
بیشتر بخوانید: افزونه ایجاد حالت های انیمیشنی و متحرک
– افزونه GIF Animation Preview
این افزونه به شما این امکان را می دهد تا از یک تصویر متحرک از پست خود به عنوان تصویر پیش نمایش استفاده کنید. این می تواند یک گیف بومی از کتابخانه رسانه شما یا یک گیف جاسازی شده از یک وب سایت دیگر باشد.
– افزونه Auto AnimateImage
این پلاگین به شما کمک می کند تا مجموعه ای از تصاویر را آپلود و از این افزونه برای ترکیب و تبدیل آنها به یک انیمیشن استفاده کنید. بسته به نیاز خود می توانید گزینه های مختلفی مانند تأخیر انیمیشن، عقب، مکث یا تعداد تکرار را تنظیم کنید. همانطور که می مشاهده می کنید، افزودن تصویر متحرک و گرافیک های متحرک به وبلاگ وردپرس بسیار ساده است.
بیشتر بخوانید: افزودن صفحه لودینگ وردپرس | بهترین افزونه های لودینگ (بارگذاری)
معرفی افزونه Animate it
در این بخش قصد داریم نحوه افزودن انیمیشن به اجزای مختلف سایت وردپرسی را با استفاده از یک افزونه کاربردی آموزش دهیم. این افزونه که با نام Animate It شناخته می‌شود، امکان اعمال جلوه های متحرک متنوع را بر روی بخش‌های مختلف صفحات سایت شما فراهم می سازد.
با کمک این افزونه می توانید انیمیشن های CSS را از سه طریق روی عناصر دلخواه پیاده سازی کنید:
- هنگامی که کاربر موس را روی عنصر حرکت می دهد
- هنگام اسکرول شدن صفحه و رسیدن به موقعیت عنصر
- زمانی که کاربر روی آن کلیک می‌کند
مزیت بزرگ استفاده از انیمیشن های CSS در این است که برخلاف ویدیوها یا فایل های فلش، سرعت بارگذاری بسیار بالاتری دارند و در عین حال سبک هستند. همچنین، تمامی مرورگرهای امروزی به‌خوبی از آنها پشتیبانی می کنند؛ بنابراین دیگر نیازی به استفاده از فایل‌های حجیم برای ایجاد جلوه‌های بصری نیست.
افزونه Animate It در مخزن رسمی وردپرس ثبت شده و کاملاً رایگان در دسترس قرار دارد. می توانید آن را مستقیماً از بخش افزونه‌های پیشخوان وردپرس نصب کرده و بدون پرداخت هزینه‌ای از امکانات آن بهره مند شوید. رابط کاربری این افزونه بسیار ساده و کاربرپسند است، به طوری‌که حتی کاربران مبتدی نیز به راحتی می توانند از آن استفاده کنند.
برای استفاده از این افزونه مراحل زیر را دنبال کنید:
وارد پیشخوان وردپرس خود شوید و سپس از بخش افزونه ها روی گزینه افزودن کلیک کنید. سپس نام افزونه را سرچ و پیدا کنید. بعد از اینکه افزونه به شما نشان داده شد، آن را نصب و فعال کنید.
پس از نصب و فعال‌سازی این افزونه، بخشی جدید با عنوان Animate It به منوی تنظیمات پیشخوان وردپرس شما افزوده خواهد شد. از طریق این بخش، می توانید به راحتی به صفحه تنظیمات افزونه دسترسی پیدا کرده و تنظیمات مورد نظر خود را اعمال نمایید.
با کلیک روی گزینه Animate It در پنل مدیریت، وارد صفحه ای خواهید شد که شامل گزینه ها و تنظیمات متعددی است. این صفحه به شما امکان می دهد نحوه عملکرد انیمیشن ها را بر اساس نیاز خود شخصی سازی کرده و کنترل دقیق تری بر افکت های تصویری سایت داشته باشید.
در بخش تنظیمات افزونه Animate It، گزینه های متعددی برای کنترل رفتار انیمیشن‌ها در شرایط مختلف وجود دارد. در ادامه، مهم ترین این گزینه ها را مرور می کنیم:
- Scroll Offset: این بخش به شما اجازه می دهد مشخص کنید انیمیشن موردنظر پس از چه میزان اسکرول شدن صفحه توسط کاربر فعال شود. مقدار پیش فرض این گزینه روی ۷۵ درصد قرار دارد، به این معنا که انیمیشن وقتی ظاهر می شود که کاربر سه چهارم صفحه را پیموده باشد.
- Enable On Tablets: این گزینه مشابه مورد قبلی بوده و به شما این امکان را می دهد تا مشخص کنید انیمیشن‌ها در تبلت‌ها نیز اجرا شوند یا نه.
- Hide Horizontal Scrollbar: در صورتی که کاربر از دستگاه هایی با نمایشگر افقی مانند برخی تبلت ها استفاده کند، با فعال سازی این گزینه می توان اجرای انیمیشن را در این حالت خاص غیرفعال کرد.
- Hide Vertical Scrollbar: مشابه گزینه قبلی، این بخش اجازه می دهد که در صورت نمایش عمودی صفحه، انیمیشن‌ها پنهان شوند و دیگر اجرا نگردند.
- Custom CSS: برای آن دسته از کاربرانی که به شخصی‌سازی بیشتر علاقه مندند، این بخش امکان وارد کردن استایل های دلخواه CSS را فراهم می کند تا بتوان انیمیشن ها را با نیازهای خاص هر پروژه هماهنگ کرد.
پس از آنکه تنظیمات مربوط به افزونه را مطابق نیاز خود اعمال کردید، حالا نوبت آن است که انیمیشن مورد نظر را به محتوای سایت خود اضافه نمایید. برای این کار کافی است به قسمت نوشته‌ها > افزودن نوشته جدید یا برگه‌ها > افزودن برگه جدید در پیشخوان وردپرس مراجعه کنید. حتی اگر از پست تایپ های سفارشی استفاده می کنید، این فرایند به همان صورت قابل اجرا خواهد بود.
در ویرایشگر محتوا، یک دکمه جدید با رنگ قرمز به نوار ابزار اضافه شده است. این دکمه مربوط به افزونه Animate It است و با کلیک بر روی آن می توانید افکت متحرک دلخواه را برای هر بخش از نوشته یا برگه خود انتخاب و اعمال نمایید. این ویژگی، فرآیند افزودن انیمیشن را به سادگی چند کلیک می سازد، بدون آنکه نیازی به دانش برنامه نویسی داشته باشید.
با کلیک بر روی دکمه قرمزرنگ افزونه که در ویرایشگر وردپرس ظاهر می‌شود، پنجره‌ای به شکل یک باکس تنظیماتی برای شما باز خواهد شد. این پنجره همان جایی است که میتوانید افکت دلخواه خود را انتخاب و پیکربندی نمایید.
در نخستین بخش از این پنجره، باید از میان انیمیشن‌های موجود، نوع افکتی را که قصد دارید روی عنصر مورد نظر اجرا شود انتخاب کنید. لیست افکت ها شامل حالت هایی مانند محو شدن، پرش، سر خوردن و موارد متنوع دیگر است.
سپس در قسمت Delay یا تأخیر، این امکان را خواهید داشت که زمان شروع انیمیشن را (بر حسب ثانیه) تنظیم کنید. به‌عنوان مثال اگر مقدار تأخیر را روی ۲ قرار دهید، انیمیشن دقیقاً ۲ ثانیه پس از بارگذاری یا فعال شدن، نمایش داده خواهد شد.
یکی دیگر از گزینه های مهم در این پنجره،Duration است که به شما اجازه می دهد مدت زمان نمایش انیمیشن را مشخص کنید. این گزینه، مدت زمانی را که انیمیشن شما اجرا خواهد شد تعیین می کند. به‌عنوان مثال، اگر مدت‌زمان را روی ۵ ثانیه تنظیم کنید، انیمیشن طی ۵ ثانیه اجرا خواهد شد.
Timing نیز به شما این امکان را می دهد که نوع زمان سنجی انیمیشن را مشخص کنید. با استفاده از این گزینه، می توانید نحوه تعامل انیمیشن با سرعت و حرکت صفحه را کنترل کنید، که می تواند به نمایش روان تر و طبیعی تر انیمیشن کمک کند.
پس از تنظیم تمام این موارد، می توانید با کلیک بر روی دکمه Animate It پیش‌نمایش انیمیشن را مشاهده کنید و از صحت تنظیمات خود مطمئن شوید پیش از آنکه تغییرات را به صورت نهایی منتشر نمائید.
در نهایت، تب دیگری با عنوانExit در این پنجره وجود دارد. در این بخش می توانید تنظیمات مربوط به افکت پایان انیمیشن را پیکربندی کنید. تنظیمات این بخش مشابه تنظیمات تب قبلی است، با این تفاوت که در اینجا شما می توانید تعیین کنید که انیمیشن پایان متفاوتی نسبت به شروع آن داشته باشد. این امکان به شما کمک می کند تا پایان انیمیشن را به گونه‌ای دلخواه طراحی کنید، که بر اساس نیاز یا تجربه کاربری مورد نظر شما متفاوت باشد.
در نهایت روی Insert کلیک کنید تا تنظیمات به پایان برسد.
سوالات متداول
بله. به صورت کلی، تصاویر متحرک می تواند باعث جلب توجه و رضایت کاربران شود که این موضوع برای سئوی سایت شما مفید می باشد. اما از طرفی، استفاده زیاد ازگیف ها در سایت هم می تواند باعث کاهش سرعت بارگذاری وب سایت شما شود.
تصاویر متحرک اگر به خوبی بهینه نشوند می توانند باعث کند شدن سرعت وب سایت شوند.
آیا قرار دادن تصاویر متحرک برای سئوی سایت خوب است؟
آیا تصاویر متحرک سرعت سایت را پایین نمی آورد؟
بیشتر بخوانید: آموزش افکت های متحرک در المنتور Motion Effects
جمع بندی: اموزش افزودن تصاویر متحرک در وردپرس
طریقه افزودن تصاویر متحرک در وردپرس چگونه است؟ یکی از ساده ترین روش هایی که می تواند به جلب توجه بازدیدکنندگان و افزایش تعامل سایت شما کمک کند، استفاده از تصاویر متحرک و جذاب در بخش های مختلف وب سایت می باشد. به همین منظور نحوه اضافه کردن تصاویر متحرک در سایت وردپرس را به شما آموزش دادیم. امیدوارم این مطلب مورد رضایت شما عزیزان قرار گرفته باشد.
منبع: wpbeginner
لیست مطالب
- چرا تصاویر متحرک به درستی در سایت کار نمی کنند؟
- چرا از تصویر متحرک در وردپرس استفاده کنیم؟
- نحوه قرار دادن تصویر متحرک در وردپرس به صورت دستی
- آموزش اضافه کردن تصویر متحرک در وردپرس با ویرایشگر کلاسیک
- نحوه گذاشتن تصویر متحرک در وردپرس با استفاده از افزونه
- – افزونه Giphypress
- – افزونه WP GIF Player
- – افزونه GIF Animation Preview
- – افزونه Auto AnimateImage
- معرفی افزونه Animate it
- سوالات متداول
- آیا قرار دادن تصاویر متحرک برای سئوی سایت خوب است؟
- آیا تصاویر متحرک سرعت سایت را پایین نمی آورد؟
- جمع بندی: اموزش افزودن تصاویر متحرک در وردپرس
چند نکته قبل از ارسال دیدگاه :
- تمامی دیدگاه ها قبل از انتشار عمومی توسط کارشناسان سایت بررسی خواهند شد.
- دیدگاه هایی که جنبه تبلیغاتی داشته باشند تایید نخواهند شد.
- آدرس سایت ، مشخصات مدیریت و... در متن دیدگاه حذف خواهند شد.
- دیدگاه هایی که به زبان انگلیسی باشند تایید نخواهند شد.
- دیدگاه هایی که حاوی توهین ، تهدید یا... باشند تایید نخواهند شد.
مطالب مرتبط
4 روش برای حفاظت از رمز عبور پیشخوان وردپرس
انتخاب یک رمز عبور قوی در وردپرس | چگونه یک سایت ایمن داشته باشیم؟ | روش های افزایش امنیت سایت وردپرس | ویژگی های یک رمز عبور قوی ...
جزییات بیشتر آموزش را بخوانید!
رفع خطای لودینگ المنتور در وردپرس
المنتور یکی از بهترین و محبوب ترین صفحه سازهای وردپرس بشمار می رود که با استفاده از آن می توانید تنها با کشیدن و رها کردن المان ها ...
جزییات بیشتر آموزش را بخوانید!
علت بلاک شدن آی پی سرور
بلاک شدن آی پی سرور به دلایل متعددی از جمله محافظت از شبکه‌ها در برابر حملات، اجرای استانداردهای رفتار آنلاین، سانسور دسترسی به اطلاعات و.. رخ می دهد. ...
جزییات بیشتر آموزش را بخوانید!
آموزش نحوه ویرایش متن در وردپرس
وردپرس یکی از بهترین پلتفرم های سایت ساز جهان می باشد که امکان ساخت هر نوع وب سایتی را به شما می دهد. وردپرس ابزارها و گزینه های ...
جزییات بیشتر آموزش را بخوانید!
آموزش کار با افزونه (پلاگین) اسلایدر رولوشن Slider Revolution
فرقی نمی کند که شما چه نوع سایتی را اداره می کنید، در هر صورت اسلایدرها می توانند به شما در جذاب تر شدن صفحات سایتتان کمک کنند. ...
جزییات بیشتر آموزش را بخوانید!
آموزش حل خطای Ensure text remains visible during webfont load در GTMetrix
اگر شما از ابزارها جی تی متریکس برای مدیریت سرعت عملکرد سایت خود استفاده می کنید، ممکن است با خطاهای مختلفی مواجه شوید که یکی از شایع ترین ...
جزییات بیشتر آموزش را بخوانید!
تغیر یا غیرفعال سازی سنجش قدرت کلمه عبور در ووکامرس
غیرفعال سازی قدرت کلمه عبور ووکامرس | سنجش قدرت کلمه عبور ووکامرس | ساده سازی کلمه عبور در ووکامرس | مدیریت کلمات عبور کاربران در ووکامرس
در خدمت شما ...
جزییات بیشتر آموزش را بخوانید!
نشانه های هک شدن سایت وردپرس و اقدامات لازم پس از مشاهده علائم آن
یکی از بزرگ ترین ترس های هر صاحب وب سایتی شنیدن اینکه سایت آنها به خطر افتاده و یا هک شده می باشد. اگرچه وردپرس یک پلت فرم ...
جزییات بیشتر آموزش را بخوانید!
اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.
با سلام و تشکر از آموزش خوبتون . من طبق دستورالعمل شما با افزونه و بدون افزونه این کار رو انجام دادم و سایز تصویر رو در حالت کامل قرار دادم اما همچنان تصویر ثابت هستش چه باید بکنم ؟