نمایش یک سایت با استفاده iframe در سایت دیگر وردپرس

نمایش یک سایت با استفاده iframe در سایت دیگر وردپرس

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

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

نمایش یک سایت در یک سایت دیگر با وردپرس

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

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

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

آموزش کار با افزونه Advanced iFrame

بعد از اینکه شما در سایت خود این افزونه را نصب و فعالسازی کردید یک بخش به نام Advanced iFrame به شما نمایش داده می شود که شما باید بر روی کلیک کنید و بعد از آن وارد یک صفحه مانند تصویر بالا می شوید که برای ادامه شروع تنظیمات افزونه باید مانند تصویر بالا بر روی دکمه Basic Setting کلیک کنید تا وارد صفحه تنظیمات سایت شوید و اینجاست که برای شروع باید بر روی دکمه آبی رنگ کلیک کرده تا یک شورت کد مانند شورت کد بالا در تصویر مشاهده می کنید برای شما بسازد و نمایش دهد.

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

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

Basic settings (تنظیمات پایه):

• Security key (کلید امنیتی): یک کلید امنیتی برای استفاده در کد کوتاه. اختیاری است، اما برای امنیت بیشتر توصیه می‌شود.
• URL: آدرس صفحه‌ای که می‌خواهید در iFrame نمایش دهید.
• Free URL checker (بررسی کننده رایگان URL): برای بررسی اینکه آیا URL درست کار می‌کند یا نه.
• Height (ارتفاع): ارتفاع iFrame.
• Width (عرض): عرض iFrame.
• Scrolling (اسکرول): تعیین نحوه نمایش اسکرول (auto، yes، no).
• Margin width (عرض حاشیه): عرض حاشیه iFrame.
• Margin height (ارتفاع حاشیه): ارتفاع حاشیه iFrame.
• Frame border (حاشیه قاب): ضخامت حاشیه iFrame.
• Transparency (شفافیت): تعیین اینکه آیا پس‌زمینه iFrame شفاف باشد یا نه.
• Class (کلاس): اضافه کردن کلاس CSS به iFrame.
• Style (استایل): اضافه کردن استایل CSS به iFrame.
• Id (شناسه): تعیین شناسه HTML برای iFrame.
• Name (نام): تعیین نام برای iFrame.
• Allow full screen (اجازه تمام صفحه): اجازه دادن به iFrame برای نمایش در حالت تمام صفحه.
• Lazy load (بارگذاری تنبل): فعال کردن بارگذاری تنبل برای iFrame.
• Sandbox (جعبه شنی): محدود کردن دسترسی‌های iFrame برای امنیت بیشتر.
• Title (عنوان): تعیین عنوان برای iFrame.
• Allow (اجازه): تعیین مجوزهای خاص برای iFrame.
• Referrerpolicy (سیاست ارجاع دهنده): تعیین سیاست ارجاع دهنده برای iFrame.
• Custom (سفارشی): اضافه کردن ویژگی‌های سفارشی به iFrame.

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

بعد از جایگذاری شورت کد در صفحات سایت خود بر روی دکمه انتشار کلیک کنید تا شاهد ای فریم ساخته شده در سایت خود باشید و همچنین شما می توانید روی دکمه Add Advanced iframe کلیک کرده و شورتکد را در سایت خود اضافه کنید.

Advanced iFrame

Scrolls the parent window/iframe to the top (اسکرول کردن صفحه اصلی /iFrame به بالا): اگر می‌خواهید وقتی روی یک لینک در iFrame کلیک می‌کنید، صفحه والد به بالای صفحه اسکرول شود، این گزینه را روی “Yes” تنظیم کنید. این کار با استفاده از جاوااسکریپت انجام می‌شود.

Hide the iframe until it is loaded (مخفی کردن iFrame تا زمانی که بارگذاری شود): این تنظیمات iFrame را تا زمانی که بارگذاری شود مخفی می‌کند. این کار از نمایش یک فلش سفید در هنگام بارگذاری جلوگیری می‌کند.

Set Iframe height by ratio (تنظیم ارتفاع iFrame بر اساس نسبت): این تنظیمات به شما امکان می‌دهد ارتفاع iFrame را بر

اساس یک نسبت مشخص تنظیم کنید. این روش برای ویدیوهای iFrame مانند ویدیوهای یوتیوب بسیار مناسب است.

Modify the iframe

Hide elements in iframe (مخفی کردن عناصر در iFrame): این تنظیمات به شما اجازه می‌دهد عناصری را در داخل iFrame مخفی کنید. می‌توانید از ID یا کلاس CSS برای شناسایی عناصر استفاده کنید.

Show only one element (نمایش فقط یک عنصر): با استفاده از این تنظیمات می‌توانید فقط یک عنصر خاص از صفحه iFrame را نمایش دهید و بقیه عناصر را حذف کنید.

Content id in iframe (شناسه محتوای iFrame): شناسه عنصری که می‌خواهید CSS آن را تغییر دهید. می‌توانید از یک انتخابگر jQuery استفاده کنید.

Content styles in iframe (استایل‌های محتوای iFrame): استایل‌هایی که می‌خواهید برای عنصر مشخص شده در Content id in iframe اعمال کنید.

Add css styles to iframe (اضافه کردن استایل‌های CSS به iFrame): در این قسمت می‌توانید استایل‌های CSS را مستقیماً به بدنه صفحه iFrame اضافه کنید.

Add/Include files

Include url : آدرس کامل صفحه‌ای که می‌خواهید محتوایش را نمایش دهید (مثال: https://www.mihanacademy.org)

Include content : می‌توانید یک id یا class را مشخص کنید تا فقط آن بخش از صفحه نمایش داده شود.

Include height : ارتفاع محتوایی که قرار است نمایش داده شود (به پیکسل).

Include fade : زمان fade in (به میلی‌ثانیه) برای زمانی که محتوا بارگذاری شد.

Hide page until Include is loaded : اگر Yes را انتخاب کنید ، صفحه اصلی تا زمان بارگذاری کامل محتوای شامل شده مخفی می‌ماند.

برای بازنشانی تنظیمات از دکمه Reset Settings و برای ذخیره از Update Settings استفاده کنید ، به همین راحتی می توانید در سایت خود از Iframe ها استفاده کنید ، موفق و پیروز باشید 😊