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

اگه می‌خواید یک صفحه، فرم یا محتوای آنلاین رو داخل سایت وردپرسی‌تون نشون بدید، iframe یکی از راه‌های انجام این کاره. iframe یا «قاب درون‌صفحه‌ای» یک تگ HTML هست که صفحه‌ای جدا رو داخل صفحه فعلی باز می‌کنه. البته هر سایتی اجازه این کار رو نمی‌ده و استفاده نادرست از iframe هم می‌تونه روی امنیت، سرعت و تجربه کاربر اثر بذاره.

توی این آموزش، روش نمایش یک سایت در سایت دیگر با افزونه Advanced iFrame رو قدم‌به‌قدم یاد می‌گیرید. قبل از شروع، محدودیت‌های مهم این روش رو بررسی می‌کنیم. بعد سراغ ساخت iframe با بلوک یا شورت‌کد افزونه می‌ریم و می‌بینیم چرا بعضی آدرس‌ها اصلاً داخل iframe باز نمی‌شن.

iframe چیه و چه کاربردی داره؟

iframe مخفف Inline Frame هست. این تگ یک صفحه وب جدا رو داخل صفحه سایتتون نشون می‌ده. برای نمونه، می‌تونید یک گوگل فرم، نقشه، گوگل اسلاید یا صفحه‌ای از سامانه خودتون رو داخل یک برگه وردپرس بذارید.

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

قبل از نمایش یک سایت در سایت دیگر این محدودیت‌ها رو بدونید

• هر سایتی قابل نمایش نیست: مدیر سایت مقصد می‌تونه با هدر امنیتی X-Frame-Options یا قانون frame-ancestors در CSP جلوی نمایش صفحه داخل iframe رو بگیره. CSP مجموعه‌ای از قوانین امنیتیه که مرورگر با کمک اون‌ها منابع و قاب‌های مجاز رو کنترل می‌کنه.
• صفحه HTTPS نباید محتوای ناامن باز کنه: اگه سایتتون با HTTPS باز می‌شه، ولی آدرس داخل iframe از HTTP استفاده می‌کنه، ممکنه مرورگر اون رو مسدود کنه.
• تغییر محتوای سایت دیگه محدودیت داره: مرورگر معمولاً اجازه نمی‌ده CSS، ارتفاع داخلی یا بخش‌های مختلف صفحه‌ای از یک دامنه دیگه رو مستقیم کنترل کنید.
• اجازه استفاده از محتوا مهمه: قبل از جاسازی صفحه‌ای که برای شما نیست، شرایط استفاده و مجوز صاحب محتوا رو بررسی کنید.
• نمایش موبایل رو آزمایش کنید: ممکنه صفحه مقصد ریسپانسیو نباشه؛ یعنی در موبایل خودش رو درست با عرض صفحه هماهنگ نکنه.

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

آیا iframe برای سئو ضرر داره؟

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

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

معرفی افزونه Advanced iFrame

افزونه Advanced iFrame بهتون کمک می‌کنه بدون نوشتن کد، یک iframe رو داخل وردپرس بسازید و تنظیمش کنید. این افزونه هم بلوک مخصوص داره و هم شورت‌کد. تنظیماتی مثل آدرس مقصد، عرض، ارتفاع، اسکرول و روش بارگذاری هم در اختیارتون می‌ذاره.

طبق صفحه رسمی افزونه در تاریخ ۲۵ اکتبر ۲۰۲۶، نسخه 2026.4 منتشر شده، افزونه بیش از ۴۰ هزار نصب فعال داره، به PHP 7.4 یا بالاتر نیاز داره و تا وردپرس 7.1.3 آزمایش شده. این اطلاعات با انتشار نسخه‌های تازه تغییر می‌کنن، پس بهتره قبل از نصب، صفحه رسمی افزونه رو یک بار دیگه ببینید.

نسخه رایگان برای سایت‌های شخصی و کسب‌وکارهای کوچک ارائه شده. طبق توضیح سازنده، بعد از ۱۰ هزار بازدید ماهانه درخواست عضویت نشون داده می‌شه. اگه عضو نشید، iframe همچنان کار می‌کنه، ولی یک پیام زیر اون دیده می‌شه. بعضی قابلیت‌های پیشرفته و حالت‌های بین‌دامنه‌ای هم به نسخه Pro یا دسترسی به سایت مقصد نیاز دارن.

ویژگی‌های اصلی افزونه Advanced iFrame

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

نصب و راه‌اندازی افزونه Advanced iFrame

اول از پیشخوان وردپرس به مسیر «افزونه‌ها ← افزودن افزونه تازه» برید. عبارت Advanced iFrame رو جست‌وجو کنید. وقتی افزونه رو پیدا کردید، روی «هم‌اکنون نصب نمایید» و بعد «فعال نمایید» بزنید. اگه قبلاً افزونه‌ای نصب نکردید، آموزش نصب افزونه در وردپرس مراحل رو ساده و کامل نشونتون می‌ده.

بعد از فعال‌سازی، از مسیر «تنظیمات ← Advanced iFrame» وارد صفحه افزونه بشید. ممکنه جای بعضی گزینه‌ها در نسخه‌های تازه کمی تغییر کنه. پس اگه صفحه شما دقیقاً شبیه تصاویر نبود، دنبال اسم همون گزینه بگردید.

ساخت iframe با بلوک اختصاصی

یک برگه یا نوشته رو باز کنید و روی دکمه افزودن بلوک با علامت «+» بزنید. عبارت Advanced iFrame رو جست‌وجو کنید و بلوک افزونه رو به صفحه اضافه کنید. بعد آدرس مقصد و اندازه قاب رو در تنظیمات بلوک بنویسید.

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

ساخت iframe با شورت‌کد

شورت‌کد یک دستور کوتاه داخل براکته که وردپرس اون رو به خروجی افزونه تبدیل می‌کنه. برای استفاده ساده، همین شورت‌کد کافیه:

[advanced_iframe]

اگه می‌خواید آدرس مقصد رو هم در شورت‌کد مشخص کنید، ویژگی src رو به اون اضافه کنید. به‌جای آدرس نمونه، نشانی HTTPS صفحه خودتون یا صفحه‌ای رو بذارید که اجازه جاسازی اون رو دارید:

[advanced_iframe src="https://example.com"]

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

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

تنظیم اندازه، اسکرول و بارگذاری iframe

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

• Width: عرض قاب رو مشخص می‌کنه. مقدار 100% معمولاً برای نمایش ریسپانسیو انتخاب مناسب‌تریه.
• Height: ارتفاع اولیه قاب رو تعیین می‌کنه.
• Scrolling: مشخص می‌کنه نوار پیمایش داخل قاب دیده بشه یا نه.
• Hide Until Loaded: قاب رو تا وقتی صفحه مقصد کامل بارگذاری بشه، مخفی نگه می‌داره.
• Margin و Border: فاصله بیرونی و کادر دور iframe رو کنترل می‌کنن.

تنظیمات پیشرفته و محدودیت دامنه متفاوت

بخش Advanced Settings گزینه‌های بیشتری برای کنترل رفتار قاب داره. قبل از دست‌کاری این گزینه‌ها، یک نسخه آزمایشی از برگه بسازید. این‌طوری می‌تونید نتیجه رو بدون تغییر صفحه اصلی ببینید.

Advanced Features

گزینه Scrolls The Parent Window/iframe To The Top رفتار پیمایش صفحه اصلی و iframe رو کنترل می‌کنه. این گزینه رو در موبایل هم امتحان کنید، چون دو بخش اسکرول جدا می‌تونه کار با صفحه رو برای کاربر سخت کنه.

گزینه Hide The iframe Until It Is Loaded باعث می‌شه قاب ناقص قبل از بارگذاری دیده نشه. البته این گزینه سرعت واقعی صفحه مقصد رو بیشتر نمی‌کنه و فقط روش نمایش اون رو تغییر می‌ده.

Resize The iframe To The Content Height/Width

گزینه Resize iframe To Content Height برای هماهنگ کردن ارتفاع قاب با محتوای داخلش به کار می‌ره. این قابلیت روی صفحات هم‌دامنه راحت‌تر کار می‌کنه. هم‌دامنه یعنی صفحه اصلی و محتوای داخل iframe از یک دامنه باشن. برای یک دامنه متفاوت، معمولاً باید به صفحه مقصد دسترسی داشته باشید و فایل یا کد ارتباطی افزونه رو هم همون‌جا راه‌اندازی کنید.

Modify The iframe

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

Add/include Files

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

اول URL صفحه رو وارد کنید. بعد شناسه بخش موردنظرتون رو در قسمت Include Content بذارید. Include Height ارتفاع خروجی رو کنترل می‌کنه و Include Fade مدت جلوه ظاهر شدن محتوا رو برحسب میلی‌ثانیه می‌گیره. اگه با HTML و ساختار صفحه آشنا نیستید، بهتره اول این تنظیمات رو روی یک برگه آزمایشی امتحان کنید.

مشکلات رایج نمایش سایت داخل iframe

• صفحه مقصد باز نمی‌شه: احتمالاً سایت مقصد نمایش داخل iframe رو با X-Frame-Options یا CSP بسته.
• مرورگر هشدار امنیتی نشون می‌ده: مطمئن بشید سایتتون و آدرس مقصد هر دو از HTTPS استفاده می‌کنن. اگه برای SSL سایتتون خطا می‌بینید، راهنمای رفع هشدار SSL در گوگل کروم رو ببینید.
• ارتفاع قاب درست نیست: برای دامنه متفاوت، تنظیم خودکار ارتفاع معمولاً به دسترسی به سایت مقصد و راه‌اندازی بخش ارتباطی افزونه نیاز داره.
• صفحه در موبایل از کادر بیرون می‌زنه: عرض iframe رو روی 100% بذارید و ریسپانسیو بودن خود صفحه مقصد رو هم بررسی کنید.
• تغییرات دیده نمی‌شن: کش سایت و مرورگر رو پاک کنید. راهنمای حل مشکل کش وردپرس هم می‌تونه کمکتون کنه.

یادتون نره افزونه رو همیشه به‌روز نگه دارید. نسخه 2025.7 یک مشکل امنیتی با شناسه CVE-2025-8089 رو برطرف کرده و بعضی رفتارهای JavaScript هم بعد از این اصلاح تغییر کردن. راهکار خارجی نسخه رایگان هم از طرف سازنده منسوخ اعلام شده و ممکنه در نسخه‌های بعدی حذف بشه.

جمع‌بندی

برای نمایش یک سایت در سایت دیگر، افزونه Advanced iFrame راه ساده‌ای در اختیارتون می‌ذاره و می‌تونید از بلوک اختصاصی یا شورت‌کد اون استفاده کنید. بااین‌حال، قبل از هر کاری مطمئن بشید صفحه مقصد اجازه نمایش داخل iframe رو می‌ده و هر دو سایت از HTTPS استفاده می‌کنن. عرض قاب رو هم روی 100% بذارید و نتیجه رو در موبایل و دسکتاپ آزمایش کنید.

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

موفق و سربلند باشید. 🙂

پرسش‌های رایج

تیم تولید محتوا

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