آموزش ساخت صفحات آی‌فریم در وردپرس

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

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

آموزش ساخت صفحات آی فریم در وردپرس

قبل از اینکه به معرفی افزونه آی فریم وردپرس بپردازم لازمه تا ابتدا توضیحاتی در رابطه با اینکه آی فریم چیست داشته باشیم. iframe مخفف inline frame هستش که اگر با زبان HTML کار کرده باشید حتما از این تگ استفاده کردید. از iframe برای نمایش یک صفحه از اینترنت در صفحه دیگری استفاده می‌شود. به دلیل استفاده بیش از حد برخی از وبمستران از iframe در سال 2008 بود که گوگل اعلام کرد هرگونه استفاده از آی فریم در صفحات یک وب میتونه به عنوان امتیاز منفی تلقی بشه و رنک سایت را تحت تاثیر خود قرار دهد. چرا که این وبمستران با استفاده از صفحات آی فریم موتورهای جستجو را فریب میدادند تا رتبه سایت خود را بهتر کند. با این وجود همچنان میبینیم که سایت‌های زیادی با استفاده از آی فریم سعی دارند از موتورهای جستجو بازدیدکننده جذب می‌کنند.

افزونه‌ای که قصد معرفی اونو دارم با عنوان Advanced iFrame در مخزن وردپرس به ثبت رسیده و تاکنون تونسته بیش از 40.000 نصب فعال و کسب امتیاز 4.3 را ازآن خودش بکنه که با استفاده از این افزونه میتونید اقدام به ساخت صفحات iframe وردپرس کرده و محتوای یک صفحه دلخواه را در اینترنت در سایت خودتون نمایش دهید. برای استفاده از این افزونه ابتدا روی دکمه زیر کلیک کنید و سپس با استفاده از آموزش نحوه نصب و کار کردن با افزونه ها در وردپرس اقدام به نصب و فعال سازی این افزونه در سایت خودتون بکنید.

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

حالا همونطور که در تصویر میبینید شورت کدی برای شما ساخته شده که میتونید با قرار دادن این شورت کد در برگه یا نوشته‌ای که قصد دارید آی‌فریم وردپرس را در این صفحه نمایش دهید، وارد کنید. همچنین میتونید به صفحه ویرایش نوشته رفته و با کلیک روی دکمه Add Advanced Iframe این شورت کد را با یک کلیک اضافه کنید. سپس در فیلد URL آدرس صفحه مورد نظر که قصد نمایش اونو دارید را وارد کنید.

با اسکرول کردن به سمت پایین هم به ترتیب میتونید موارد زیر را مدیریت و کنترل کنید:

Width: با استفاده از این بخش میتونید اندازه پهنای آی فریم وردپرس را بر اساس درصدی مشخص کنید.

Height: با استفاده از این گزینه میتونید ارتفاع صفحه آی فریم را بر حسب درصدی مشخص کنید. در صورت تعیین ارتفاع کمتر از میزان 100٪ به صورت خودکار اگر محتوای صفحه مقصد طولانی باشه اسکرول خواهد خورد.

Scrolling: اما اگر تمایلی نداشتید تا امکان اسکرول در صفحه وجود داشته باشه میتونید از این بخش برای فعال یا غیرفعال کردن اسکرول اقدام کنید.

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

Frame border: از این گزینه برای اندازه حاشیه آی فریم میتونید استفاده کنید.

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

Scrolls the parent window/iframe to the top: با فعال کردن این گزینه وقتی در باکس آی فریم اسکرول کردید و به انتهای اون رسیدید، حالا با اسکرول بیشتر صفحه سایت خودتون هم اسکرول خواهد خود. حالا اگر تمایلی به فعال کردن این وضعیت نداشتید میتونید تا از این بخش با انتخاب گزینه false این قابلیت را غیرفعال کنید.

Hide the iframe until it is loaded: با استفاده از این گزینه هم میتونید کاری کنید تا زمان لود شدن کامل صفحه آی‌فریم نمایش داده نشود. در این صورت بعد از لود کامل صفحه سایت خودتون محتوای صفحه آی‌فریم وردپرس نمایش داده خواهد شد.

تنظیمات Resize the iframe to the content height/width

با قرار دادن گزینه Resize iframe to content height بر روی YES میتونید کاری کنید که ارتفاع صفحه آی فریم وردپرس دقیقا به اندازه صفحه ارتفاع موجود در محتوای صفحه مقصد باشد. با فعال کردن گزینه Store height in cookie هم امکان ذخیره اندازه صفحه آی‌فریم در کوکی مرورگر کاربران فراهم خواهد شد.

تنظیمات Modify the iframe

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

در بخش Modify the parent page هم میتونید المنت‌هایی خاص را مخفی کنید، به عنوان نمونه اگر قصد دارید تا از تگ‌های استفاده شده‌ای مثل <h1> که در صفحه مقصد قرار داره انتخاب کنید که هر بخش از این سایت که دارای تگ h1 بود در آی فریم وردپرس نمایش داده نشود.

تنظیمات بخش Add/include files

با استفاده از این بخش میتونید به طور مستقیم امکان نمایش یک محتوای خاص را بر اساس jQuery تعیین کنید. برای این منظور کافیه یک آی‌دی و یا یک کلاس مشخص را وارد کنید، این قابلیت تنها زمانی کاربرد خواهد داشت که محتوا از خود دامنه مورد نظر لود شود. برای این منظور مطابق تصویر بالا آدرس URL خود را وارد کرده و سپس در فیلد include content آی‌دی مورد نظر، در فیلد include height ارتفاع فریم و در نهایت در فیلد include fade میزان زمان را بر حسب میلی ثانیه برای نمایش محتوا وارد کنید.