آموزش وردپرس | بلاگ وب‌داده

افزودن iFrame به صفحات وردپرس؛ از بلوک HTML تا شورت‌کد

می‌خواهید یک ویدیو، نقشه، فرم یا صفحهٔ سایت دیگری را داخل نوشته‌تان جاسازی کنید؟ در این راهنما سه روش امن و واکنش‌گرا را گام‌به‌گام یاد می‌گیرید.
افزودن iFrame در وردپرس، یکی از کاربردی‌ترین مهارت‌هایی است که به شما اجازه می‌دهد محتوای یک سایت یا سرویس دیگر را بدون کپی‌کردن، مستقیم داخل برگه یا نوشتهٔ خود نمایش دهید؛ از ویدیوی آپارات و یوتیوب گرفته تا نقشهٔ گوگل، فرم گوگل و حتی یک صفحهٔ کامل از سایتی دیگر. در این مقاله سه مسیر اصلی را با هم مرور می‌کنیم: بلوک HTML سفارشی که بدون افزونه کار می‌کند، افزونه‌های آمادهٔ شورت‌کدی، و ساخت یک شورت‌کد اختصاصی با چند خط کد. در کنار آن، نکات امنیتی، واکنش‌گراکردن iframe و رفع خطاهای رایج را هم پوشش می‌دهیم.
  • iFrame چیست: یک عنصر HTML که یک صفحهٔ وب دیگر را مثل پنجره‌ای درون صفحهٔ شما نمایش می‌دهد.
  • روش بدون افزونه: کد iframe را داخل بلوک «HTML سفارشی» ویرایشگر بلوکی قرار دهید.
  • روش افزونه: با افزونه‌هایی مثل iframe یا Advanced iFrame و یک شورت‌کد ساده جاسازی کنید.
  • روش کد: با add_shortcode در functions.php یک شورت‌کد امن و قابل استفادهٔ مجدد بسازید.
  • نکتهٔ صادقانه: فقط از منابع مورد اعتماد جاسازی کنید و بدانید بعضی سایت‌ها اجازهٔ نمایش در iframe را نمی‌دهند.

در یک جمله

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

افزودن iFrame در وردپرس چیست و چه کاربردی دارد؟

iFrame مخفف «inline frame» و یکی از عناصر استاندارد HTML است. کار آن ساده اما قدرتمند است: با iframe می‌توانید یک صفحهٔ وب مستقل را درون صفحهٔ خودتان نمایش دهید، بدون اینکه محتوای آن را کپی کنید. مرورگر آن صفحه را جداگانه بارگذاری می‌کند و داخل قابی که شما تعیین کرده‌اید نشان می‌دهد.
تشبیه ساده این است: iframe مثل یک پنجره روی دیوار اتاق شماست که از آن، اتاق دیگری را می‌بینید. محتوای آن اتاق (سایت مقصد) دست شما نیست و صاحب همان سایت آن را کنترل می‌کند؛ شما فقط پنجره را در دیوار خود کار گذاشته‌اید. به همین دلیل هر تغییری در سایت مقصد، بلافاصله داخل قاب شما هم دیده می‌شود.

نکتهٔ کلیدی

چون محتوای داخل iframe از سرور سایت مقصد می‌آید، کنترل کامل روی آن ندارید. رایج‌ترین کاربردهای مطمئن iframe عبارت‌اند از: جاسازی ویدیو (آپارات، یوتیوب)، نقشهٔ گوگل، فرم گوگل، تقویم، ابزارک‌های آنلاین و پیش‌نمایش صفحات یک سایت مورد اعتماد.
چرا این کار ارزش دارد؟ چون به‌جای ساختن دوبارهٔ یک قابلیت، می‌توانید سرویس آماده و به‌روزِ یک منبع دیگر را در سایت خود نمایش دهید و در زمان صرفه‌جویی کنید. اگر تازه سایت خود را راه‌اندازی کرده‌اید، ابتدا راهنمای نصب وردپرس روی هاست سی‌پنل را ببینید و بعد سراغ جاسازی محتوا بیایید.
افزودن iFrame در وردپرس؛ نمایش صفحه سایت دیگر درون قاب صفحه وردپرس

روش‌های افزودن iframe به صفحات و نوشته‌های وردپرس (گام‌به‌گام)

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

روش اول: بلوک HTML سفارشی (بدون افزونه)

ساده‌ترین راه بومی، استفاده از خودِ ویرایشگر بلوکی وردپرس است. در نوشته یا برگه، روی دکمهٔ + (افزودن بلوک) کلیک کنید و در جستجو عبارت «HTML سفارشی» (Custom HTML) را تایپ و انتخاب کنید. سپس کد iframe سرویس مقصد را داخل آن بلوک بچسبانید. با دکمهٔ «پیش‌نمایش» (Preview) بالای بلوک می‌توانید نتیجه را همان‌جا ببینید. نمونهٔ یک کد iframe امن و واکنش‌گرا:
<!-- این کد را داخل بلوک «HTML سفارشی» (Custom HTML) قرار دهید -->
<div class="wd-iframe-wrap">
  <iframe
    src="https://example.com/embed-page"
    title="نمونه محتوای جاسازی‌شده در وردپرس"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    sandbox="allow-scripts allow-same-origin allow-popups"
    allowfullscreen>
  </iframe>
</div>
برای اینکه iframe در موبایل و دسکتاپ درست کشیده شود و کناره‌هایش نزند، بهتر است آن را داخل یک قاب واکنش‌گرا با نسبت تصویر مشخص بگذارید. کد CSS زیر را می‌توانید در بخش «افزودن CSS» سفارشی‌ساز قالب یا استایل قالب فرزند قرار دهید:
/* iframe واکنش‌گرا با نسبت تصویر 16:9 — در Additional CSS یا استایل قالب */
.wd-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* مرورگرهای جدید */
  overflow: hidden;
  border-radius: 10px;
}
.wd-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;              /* جایگزین frameborder منسوخ */
}

چه کسی مجوز ذخیرهٔ iframe را دارد؟

در نصب تک‌سایتی، فقط «مدیر کل» (Administrator) به‌صورت پیش‌فرض مجوز ذخیرهٔ کد iframe را دارد. در وردپرس شبکه‌ای (Multisite) تنها Super Admin این اجازه را دارد و برای نقش‌های پایین‌تر، وردپرس هنگام ذخیره کد iframe را حذف می‌کند. اگر iframe شما بعد از ذخیره ناپدید شد، ابتدا سطح دسترسی کاربر را بررسی کنید.

روش دوم: استفاده از افزونهٔ آمادهٔ iframe

اگر با کد راحت نیستید یا می‌خواهید محدودیت حذفِ خودکار iframe برای کاربران کم‌دسترسی را دور بزنید، افزونه‌ها گزینهٔ خوبی هستند. افزونهٔ سبک iframe یک شورت‌کد ساده در اختیارتان می‌گذارد که همان پارامترهای تگ iframe را می‌پذیرد؛ مثلاً [iframe src="https://example.com" width="100%" height="450"]. افزونهٔ Advanced iFrame امکانات بیشتری مثل کد امنیتی برای جلوگیری از جاسازی توسط دیگران، استایل‌دهی و مدیریت خطا دارد و برای موارد حرفه‌ای‌تر مناسب است.

افزونهٔ کمتر، بهتر

هر افزونه کمی به بار سایت و سطح حملهٔ امنیتی اضافه می‌کند. اگر فقط چند iframe ساده دارید، روش بلوک HTML یا شورت‌کد کد سبک‌تر است؛ سراغ افزونه بروید که واقعاً به امکانات اضافه‌اش (مانند مدیریت دسترسی یا استایل پیشرفته) نیاز دارید.

روش سوم: ساخت شورت‌کد اختصاصی در functions.php

اگر می‌خواهید بدون افزونه اما با خروجی یک‌دست و امن، iframe را بارها در سایت استفاده کنید، ساخت یک شورت‌کد اختصاصی بهترین راه است. با تابع add_shortcode یک شورت‌کد تعریف می‌کنیم که آدرس، عرض، ارتفاع و عنوان می‌گیرد و خروجی را با توابع امنیتی esc_url و esc_attr پاک‌سازی‌شده تحویل می‌دهد. کد زیر را در functions.php قالب فرزند یا افزونهٔ Code Snippets قرار دهید:
// شورت‌کد سفارشی iframe برای وردپرس
// این کد را در functions.php قالب فرزند یا افزونه Code Snippets قرار دهید
function webdade_iframe_shortcode( $atts ) {
    $a = shortcode_atts( array(
        'src'    => '',
        'width'  => '100%',
        'height' => '450',
        'title'  => 'محتوای جاسازی‌شده',
    ), $atts );

    if ( empty( $a['src'] ) ) {
        return ''; // بدون آدرس، چیزی نمایش داده نمی‌شود
    }

    return sprintf(
        '<iframe src="%s" width="%s" height="%s" title="%s" loading="lazy" style="border:0;max-width:100%%;" allowfullscreen></iframe>',
        esc_url( $a['src'] ),
        esc_attr( $a['width'] ),
        esc_attr( $a['height'] ),
        esc_attr( $a['title'] )
    );
}
add_shortcode( 'webdade_iframe', 'webdade_iframe_shortcode' );

// استفاده در نوشته/برگه:
// [webdade_iframe src="https://example.com" height="500"]
پس از فعال‌کردن این کد، کافی است در هر نوشته یا برگه شورت‌کد [webdade_iframe src="..."] را بنویسید تا iframe امن ساخته شود. روش‌های امن افزودن این نوع کد را در راهنمای درج کد در برگه و نوشته‌های وردپرس کامل توضیح داده‌ایم.

هشدار: ویرایش نادرست functions.php سایت را از کار می‌اندازد

یک خطای تایپی کوچک در functions.php می‌تواند کل سایت را با خطای 500 از دسترس خارج کند. حتماً پیش از ویرایش بکاپ بگیرید، کد را در قالب فرزند یا افزونهٔ Code Snippets قرار دهید (تا با آپدیت قالب پاک نشود) و اگر با مدیریت افزونه‌ها راحت نیستید، ابتدا راهنمای جعبه ابزار وردپرس در هاست سی‌پنل را ببینید.
برای اینکه انتخاب بین این روش‌ها ساده‌تر شود، جدول زیر آن‌ها را کنار هم گذاشته است:
جدول مقایسه روش‌های افزودن iframe به وردپرس: بلوک HTML، افزونه و شورت‌کد سفارشی
مقایسهٔ روش‌های جاسازی iframe در وردپرس:
روشنیاز به کدنیاز به افزونهمناسبِ چه کسی
بلوک HTML سفارشیکمی (چسباندن کد)خیرمبتدی، جاسازی موردی
افزونهٔ iframe / Advanced iFrameخیر (شورت‌کد)بلهکاربرانِ بدون کد، امکانات بیشتر
شورت‌کد سفارشی functions.phpبله (یک‌بار)خیرکاربر حرفه‌ای، استفادهٔ مکرر
جمع‌بندی جدول: برای جاسازی سریع و موردی، بلوک HTML بهترین است؛ برای استفادهٔ مکرر و خروجی یک‌دست، شورت‌کد سفارشی؛ و اگر با کد راحت نیستید، افزونه.

معایب، نکات امنیتی و عیب‌یابی iframe

iframe ابزار مفیدی است، اما مثل هر قابلیتی چند محدودیت و ریسک دارد که بهتر است صادقانه بدانید:
  • ریسک امنیتی منبع نامعتبر: جاسازی از سایت‌های ناشناس می‌تواند کاربر را در معرض clickjacking یا اسکریپت مخرب قرار دهد؛ فقط از منابع مورد اعتماد استفاده کنید.
  • مسدودسازی از سمت مقصد: بسیاری از سایت‌ها (مثل گوگل، بانک‌ها و شبکه‌های اجتماعی) با هدرهای امنیتی مانع نمایش خود در iframe می‌شوند و خطای «refused to connect» می‌دهند؛ این محدودیت قابل دور زدن نیست.
  • حذف برای کاربران کم‌دسترسی: در نصب چندسایتی، وردپرس کد iframe کاربران غیرمدیر را هنگام ذخیره حذف می‌کند.
  • اثر بر سرعت و سئو: هر iframe یک صفحهٔ کامل جداگانه بارگذاری می‌کند و می‌تواند سرعت سایت را کاهش دهد؛ محتوای داخل آن هم توسط موتور جستجو به پای سایت شما ثبت نمی‌شود.
  • واکنش‌گرایی دستی: iframe به‌صورت پیش‌فرض ارتفاع ثابت دارد و برای درست‌نمایش در موبایل باید با CSS واکنش‌گرا شود.

امنیت را جدی بگیرید: از ویژگی sandbox استفاده کنید

ویژگی sandbox در تگ iframe به شما اجازه می‌دهد قابلیت‌های محتوای جاسازی‌شده را محدود کنید؛ مثلاً با مقادیر allow-scripts و allow-same-origin فقط همان چیزهایی را که لازم است فعال می‌گذارید. این کار احتمال سوءاستفاده از قاب را کاهش می‌دهد و برای جاسازی از هر منبعی که کامل به آن اطمینان ندارید، توصیه می‌شود.
در جدول زیر رایج‌ترین مشکلات هنگام کار با iframe و راه‌حلشان را کنار هم گذاشته‌ایم:
مشکل رایجعلت احتمالیراه‌حل
خطای refused to connectسایت مقصد هدر X-Frame-Options دارداز سرویسی که «کد جاسازی» رسمی می‌دهد استفاده کنید
iframe بعد از ذخیره حذف شدکاربر مجوز unfiltered_html نداردبا کاربر مدیر ذخیره کنید یا از افزونه/شورت‌کد استفاده کنید
ارتفاع ثابت و برش در موبایلiframe واکنش‌گرا نیستقاب را با CSS و aspect-ratio واکنش‌گرا کنید
اسکرول دوگانه و آزاردهندهمحتوای مقصد بلندتر از قاب استارتفاع مناسب بگذارید یا اسکرول داخلی را با استایل مدیریت کنید

نقل‌قول از مرجع رسمی موزیلا (MDN)

مستندات رسمی موزیلا دربارهٔ ویژگی امنیتی iframe می‌نویسد: «ویژگی sandbox مجموعه‌ای از محدودیت‌های اضافی را بر محتوای داخل iframe اعمال می‌کند.» همین جمله نشان می‌دهد محدودسازی امنیتی iframe یک قابلیت استاندارد و پشتیبانی‌شدهٔ مرورگرهاست، نه یک ترفند جانبی. منبع: developer.mozilla.org — iframe (sandbox).
نکتهٔ خوب دربارهٔ سرعت این است که از وردپرس نسخهٔ 5.7 به بعد، هسته به‌صورت خودکار ویژگی loading=”lazy” را به iframeها اضافه می‌کند تا تا زمانی که کاربر به قاب نرسیده، بارگذاری نشود و صفحه سریع‌تر باز شود.

نقش هاست وردپرس وب‌داده در جاسازی بی‌دردسر iframe

جاسازی iframe، به‌ویژه وقتی سراغ ویرایش functions.php یا افزودن CSS می‌روید، زمانی بی‌دردسر است که به ابزارهای مدیریت فایل، بکاپ سریع و محیط پایدار دسترسی داشته باشید. درست همین‌جاست که کیفیت هاست خودش را نشان می‌دهد؛ چون اگر بعد از ویرایش کد مشکلی پیش بیاید، باید بتوانید در چند دقیقه فایل را اصلاح یا نسخهٔ قبلی را بازگردانید.
در تجربهٔ پشتیبانی ما در وب‌داده، بسیاری از کاربران وردپرسی هنگام افزودن iframe یا قطعه‌کدهای مشابه به کمک نیاز دارند؛ دسترسی به File Manager سی‌پنل و امکان بکاپ لحظه‌ای باعث می‌شود همین کارها بدون استرس انجام شوند. به همین دلیل روی این موارد تأکید داریم:
✅ هاست وردپرس وب‌داده با منابع اختصاصی و دیسک پرسرعت برای بارگذاری روان صفحات و iframeها.
✅ زیرساخت نسل جدید HPE (Gen11 و Gen10) برای پایداری و پاسخ سریع سرور.
✅ دیتاسنترهای ایران، هلند و آلمان برای انتخاب نزدیک‌ترین لوکیشن به مخاطبان شما.
✅ پشتیبانی فنی ۲۴ ساعته برای کمک در افزودن کد، بکاپ و رفع خطای احتمالی.
اگر می‌خواهید سایت وردپرسی شما روی بستری سریع و پایدار اجرا شود و ویرایش‌هایی مثل همین مقاله را با خیال راحت انجام دهید، می‌توانید پلن‌های هاست سی‌پنل وب‌داده را بررسی کنید.

پرسش‌های پرتکرار دربارهٔ iframe در وردپرس

جمع‌بندی و قدم بعدی شما

در این راهنما دیدیم iframe چیست، چه کاربردهایی دارد و چطور می‌توان آن را در وردپرس جاسازی کرد. سه روش را مرور کردیم: بلوک HTML سفارشی برای جاسازی سریع و بدون افزونه، افزونه‌های آماده برای کاربرانی که با کد راحت نیستند، و ساخت شورت‌کد اختصاصی در functions.php برای خروجی یک‌دست و استفادهٔ مکرر. در کنار آن، واکنش‌گراکردن قاب، نکات امنیتی مثل sandbox و رفع خطاهای رایج را هم پوشش دادیم. مهم‌ترین توصیه این است: پیش از هر ویرایش کدی بکاپ بگیرید، فقط از منابع مورد اعتماد جاسازی کنید و بعد از اعمال، نتیجه را در موبایل و دسکتاپ تست کنید.

جمع‌بندی سریع

✅ جاسازی سریع و موردی: بلوک «HTML سفارشی».
✅ بدون کدنویسی: افزونهٔ iframe یا Advanced iFrame.
✅ استفادهٔ مکرر و امن: شورت‌کد سفارشی با add_shortcode.
✅ همیشه: منبع مورد اعتماد + sandbox + قاب واکنش‌گرا.
در صورتی که سوالی داشتید می‌توانید در بخش نظرات با ما در ارتباط باشید.
منابع: MDN — iframe element؛ WordPress.org — lazy-loading iframes in 5.7؛ WordPress.org — iframe plugin؛ WordPress.org — Advanced iFrame.
به اشتراک بگذارید
وب داده
وب داده

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

مقاله‌ها: 63

نوشته‌ای مرتبط

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *