شیوه قرار دادن کد آی فریم در داخل وبسایت (⚡آموزش قدم به قدم)

insert iframe in wordpress

فهرست مطالب

در این آموزش قصد داریم به شما آموزش دهیم که چگونه یک کد آی فریم را در داخل وبسایت وردپرس خود قرار دهید، کد آی فریم میتواند برای نمایش ویدئو ، نقشه گوگل یا هر چیز دیگری باشد و امروزه کاربرد آن در سایت های مختلف چندین برابر شده است پس ما تصمیم بر آن گرفتیم که این آموزش را به شما ارائه دهیم.

آی فریم چیست؟

آی فریم یک راه آسان برای جاسازی ویدئو ها یا سایر مطالب و محتوا در سایت شما می باشد به طوری که نیاز به آپلود آن بر روی هاست خود نداشته باشید و از منبع خودش برروی سایت شما نمایش داده شود، به عبارتی دیگر با قرار دادن آی فریم دیگر منابع سرور شما در گیر نمی شود و وقتی کاربران ویدئوی آی فریمی را باز کنند درواقع اطلاعات از سایت و سرور منبع گرفته میشود و شما هیچ دخالتی ندارید.

همین موضوع باعث افزایش محبوبیت آی فریم ها شده است و امروزه در بخش های مختلف سایت های مختلف از آن استفاده میکنند و به کاربرانشان محتوا ارائه می دهند.

امروزه سایت هایی مانند آپارات و یوتیوب تا حتی گوگل مپ به شما کد های آی فریم را برای قرار دادن در سایتتان ارائه میدهند و این امکان برای همه کاربران قابل دسترسی می باشد.

قرار دادن کد آی فریم در وبسایت وردپرسی

برای اینکه کد آی فریم را قرار دهید و به وبسایت خود اضاف کنید نیازمند یکسری کد نویسی ها و کد های html هستید ، اما نگران نباشید زیرا ما در این مقاله میخواهیم کار شما را ساده تر کنیم و بدون نیاز به حتی یک خط کدنویسی آیفریم های مختلف را در وبسایت خود جایگذاری کنید.

چرا باید از آیفریم ها استفاده کنیم؟

مهم ترین دلیل آن این است که وقتی یک ویدئو در هاست خود بارگذاری میکنید و کاربری مشغول دیدن آن بشود در واقع پهنای باند سرور شما کاهش می یابد و از آن استفاده میکند ، حال فکر این را بکنید که همزمان با هم 100 کاربر آنرا ببینند!

درست است ، دیگر سایت شما از دسترس خارج میشود و برای همه قطع میشود، دلیل آن هم این است که پهنای باند شما قدرت این همه کار را ندارد و سرور تحمل این همه بار اضافه را ندارد مخصوصا اگر سرور های اشتراکی باشد.

یکی دیگر از دلایل استفاده از iframe این است که حقوق نشر و کپی رایت را رعایت کنید که در آینده دچار مشکل با صاحبان محتوا نشوید و هم آنها راضی باشند و هم شما.

آیفریم مزایای زیادی دارد و یکی از آنها این است که اگر محتوایی که شما با آیفریم قرار داده اید بروزرسانی شود، تمام تغییرات برروی آن اعمال میشود و دیگر نیازی به حذف و قرار دادن مجدد آن نیست.

استفاده از افزونه

برای اینکه کدهای آیفریم در وبسایت خود قرار دهید میتوانید از افزونه های مختلف استفاده کنید اما ما برای شما یک افزونه مناسب و رایگان در نظر گرفته ایم که کارایی بالایی دارد و میتوانید از آن استفاده کنید.

افزونه Source’s Embed Code

یک افزونه بسیار مناسب برای افزودن کد های iframe است و باتوجه به سادگی که دارد شما میتوانید بدون آموزش از آن استفاده کنید پس ما به سراغ روش هی بعدی میرویم که آنها بدون اضافه کردن افزونه هستند.

کپی کردن کد آیفریم از یوتیوب و یا آپارات

در اینجا ما نحوه کپی کردن ویدئو ها از یوتیوب را به شما توضیح میدهیم که آپارات چون واضح و فارسی است و راهنمای خاصی نیاز نداد را رد می کنیم و به سراغ سرویس پر طرفدار یوتیوب میرویم سروی ثی که در هر ثانیه محتوای آن بروز میشود و هزاران ویدئو جدید قرار میگیرد.

در ابتدا شما برروی گزینه به اشتراک گذاری کلیک میکنید که در پائین هر ویدئو به صورت کاملا مشخص قرار دارد کلیک میکنید تا یک صفحه جدید برای شما باز شود.

در صفحه جدید نام چندین شبکه اجتماعی وجود دارد که با کلیک برروی هرکدام از آنها به آن منتقل میشوید و میتوانید لینک ویدئو را به اشتراک بگذارید، اما در کنار آنها و سمت چپ گزینه ای به نام emed وجود دارد که درواقع همان کد آی فریم هست.

برروی آن کلیک کنید ، پس از آن به شما کدی را نشان میدهد که باید برروی قسمت و گزینه کپی کلیک کنید تا برای شما در کلیپ بورد کپی بشود.

تا اینجای آموزش شما موفق شده اید تا کد آیفریم یوتیوب و آپارات را کپی کنید ، اما اصل کار در ادامه مقاله است یعنی قرار دادن آن.

قرار دادن با ویرایشگر گوتنبرگ

اگر ویرایشگر جدید وردپرس را دارید و از آن استفاده میکنید یعنی همان ویرایشگر گوتنبرگ میتوانید طبق این آموزش پیش بروید ، اگر هم از ویرایشگر کلاسیک وردپرس استفاده می کنید میتوانید به بخش بعدی موزش بروید تا در آنجا آموزش ببینید.

در ابتدا و بعد از بازکردن محیط نوشتن یک مطلب و پست جدید با کلیک برروی دکمه افزودن نوشته باید به بخش بلوک ها و جستجوی بلوک بروید.

مطابق پس از آنکه به این بخش وارد شدید در قسمت جستجو عبارت html را جستجو کنید و بلوکی برای شما می آید با نام custom html ، برروی آن کلیک کنید تا به پست شما اضافه شود و بتوانید از آن استفاده کنید.

برای افزودن یک نوشته باید به بخش نوشته ها بروید و سپس برروی افزودن نوشته کلیک کنید تا به صفحه جدیدی منتقل شوید که در آن میتوانید یک نوشته بنویسید و منتظر کنید، نحوه اضافه کردن بلوک هم بسیار ساده است یعنی برروی علامت + کلیک میکنید و سپس عبارتی که در بالا گفته ایم را جستجو میکنید.

خب حالا کد ای فریمی را که از یوتیوب کپی کرده اید باید در اینجا قرار دهید، توجه کنید که کد شما باید به صورت زیر باشد و اگر اینگونه نیست یکی از مراحل را اشتباه رفته اید:

پس از آنکه این کد را قرار دادید، یک عنوان برای صفحه خود انتخاب کنید که میتواند همان موضوع یا عنوان ویدئوی انتخابی شما باشد و سپس آنرا از طریق دکمه منتشر کردن انتشار دهید و بررسی کنید که کد به درستی کار میکند.

ویرایشگر گوتنبرگ امکانات بسیار زیادی را دارا است که شاید بسیاری از آنها را شما در ویرایشگر کلاسیک هرگز نمی بینید و برای همین ما به شما توصیه میکنیم از گوتنبرگ استفاده کنید.

حال اگر به هر دلیلی از ویرایشگر گوتنبرگ و جدید وردپرس استفاده نمی کنید طبق توضیحات زیر پیش بروید:

قرار دادن کد آی فریم در ویرایشگر کلاسیک

این آموزش برای دسته کسانی است که از ویرایشگر قدیمی وردپرس استفاده میکنند و با آن راحت تر هستند.
خب در ابتدا همان مراحل مرحله قبلی را می رویم، ابتدا به پیشخوان وردپرس خود بروید و وارد بخش نوشته ها بشوید سپس برروی گزینه افزودن نوشته کلیک کنید.

پس از اینکه وارد ویرایشگر کلاسیک شدید متوجه میشوید که با گوتنبرگ تفاوت خیلی زیادی دارد و امکانات بسیار کمتری از آن دارد اما به طور کلی برای کسانی که تازه کار هستند بسیار مناسب است و دارای یک محیط ساده و روان است که هرکسی متوجه میشود شیوه کار کردن با آن چگونه است.

برای اینکه در ویرایشگر کلاسیک بتوانید آی فریم قرار دهید ما به شما پیشنها میکنیم که از افزونه های مختلفی که در این زمینه وجود دارد استفاده کنید، این افزونه ها را با جستجوی عبارت iframe در مخزن وردپرس میتوانید به سادگی پیدا کنید و با چند کلیک آنها را نصب کنید.

یکی از این افزونه ها که فقط مناسب ویدئو های یوتیوب است و بسیار هم پر طرفدار است پلاگین YouTube iFrame می باشد که بعد از نصب آن میتوانید از آن استفاده کنید

با استفاده از این افزونه میتوانید به سادگی کد های ای فریم را از طریق ویرایشگر کلاسیک و قدیمی وردپرس در داخل مقاله خود قرار دهید، شیوه و
نحوه کار آن همبه این صورت است که بعد از نصب آن و رفتن به بخش افزونه تازه یک آیکون جدید در نوار ویرایشگر آن ظاهر میشود که با کلیک برروی آن و قرار دادن و جایگذاری کد iframe ویدئو در مقاله شما به صورت کاملا زیبا قرار میگیرد.

افزودن دستی کد آیفریم با ویرایشگر کلاسیک

اگر به هر دلیلی نمیخواهید و یا نمیتوانید از این افزونه ها استفاده کنید پس بهتر است طبق آموزش زیر پیش بروید .

بعد از اینکه وارد قسمت افزودن نوشته و نوشته تازه شدید از منوی بالای ویرایشگر حالت را از روی متنی برروی نماش قرار دهید ، این قسمت را میتوانید در تصویر زیر نیز مشاهده کنید و طبق آن پیش بروید.

و بعد از اینکه این حالت را انجام دادید همانند تصویر بالا آیکون های آبی رنگ وتکه کد ها برای شما ظاهر میشود، در این مرحله شما تنها کاری را که باید انجام دهید این است که کد آیفریم خود را قرار داده و سپس نوشته را منتشر کنید.

پس از آن با رفتن به نوشته ویدئو به همان حالت یوتیوب برای شما و دیگر بازدیدکنندگان نمایش داده میشود و میتوانید استفاده کنید.
در پایان میخواهیم به شما چند نکته را یاد آور باشیم:

اولین نکته این است که برای اینکه از آی فریم یوتیوب استفاده کنید باید هاستتان خارجی باشد و سروری که از آن استفاده میکنید برای خارج از کشور باشد، اما برای استفاده از سرویس های ویدئویی که فیلتر نیستند محدودیتی ندارد و چه داخل و چه خارج باهم یکسان هستند و تاثیری ندارد.

اگر محتوای ویدئویی زیادی داخل سایت قرار میدهید باید بدانید که الان و یا چند وقت دیگر حتما دچار مشکل میشوید و سایتتان دیگر تحمل ندارد، پس میتوانید یک کانال یوتیوب تاسیس کنید و ودیدئو هایتان را آنجا قرار دهید و با استفاده از ای فریم به داخل سایت خود بیاورید ، اینگونه بازدید بیشتری نیز میگیرید.

امیدواریم که این مقاله به شما کمک کرده باشد و شما میتوانید مقالات دیگر ما را در بخش وبلاگ ما بخوانید.

2/5 - (1 امتیاز)

4 دیدگاه دربارهٔ «شیوه قرار دادن کد آی فریم در داخل وبسایت (⚡آموزش قدم به قدم)»

  1. سلام.من سایتی رو میخوام با این روش در سایتم که با ورد پرس هست قرار بدم .که اون سایت دارای قسمت عضویت و ورود به سایت دارد.

    من این کار را انجام دادم.ولی قسمت ورود به سایت و عضویت اون سایت با ورود از طریق سایت من کار نمیکنه.
    چطور این کاررا انجام بدم.لطفا جواب بدین

    پاسخ

دیدگاهتان را بنویسید