هل تريد تضمين كود iFrame في منشور أو صفحة ووردبريس؟
توفر إطارات IFrame طريقة سهلة لتضمين فيديو أو محتوى آخر على موقعك دون تحميله. تسمح العديد من الأنظمة الأساسية التابعة لجهات خارجية مثل YouTube للمستخدمين باستخدام iframe لتضمين محتوى من موقع الويب الخاص بهم.
في هذه المقالة ، سنوضح لك كيفية تضمين كود iFrame بسهولة في ووردبريس باستخدام طرق متعددة.
تضمين كود iFrame بسهولة في ووردبريس
يتيح لك إطار iFrame تضمين مقاطع فيديو أو محتوى آخر على موقعك. هذا يعني أنه يمكنك عرض مقطع فيديو على موقعك دون استضافة هذا الفيديو فعليًا.
يشبه إطار iframe فتح نافذة على موقعك لعرض المحتوى الخارجي. لا يزال المحتوى الفعلي يتم تحميله من المصدر الذي تقوم بالتضمين منه.
لإضافة إطار iframe ، تحتاج إلى إضافة كود HTML خاص. لا تقلق إذا كان هذا يبدو تقنيًا تمامًا.
سنعرض لك أسهل طريقة لتضمين iFrame في مدونة ووردبريس الخاصة بك .
يتمثل أحد الأسباب الرئيسية لاستخدام iFrames في تجنب الاضطرار إلى استضافة مقاطع فيديو أو موارد أخرى على موقعك ، مما يؤدي إلى استهلاك النطاق الترددي ومساحة التخزين لديك.
أيضًا ، تتيح لك إطارات iFrame تجنب انتهاك المحتوى المحمي بحقوق الطبع والنشر لأشخاص آخرين. بدلاً من تنزيل الفيديو الخاص بهم أو أي محتوى آخر ثم تحميله على موقعك ، يمكنك ببساطة إضافته إلى صفحتك باستخدام iFrame.
ميزة أخرى هي أنه إذا تم تغيير المحتوى الأصلي ، فسيتم تحديثه تلقائيًا في iFrame أيضًا.
صورة لأشخاص كرتونيين يضيفون محتوى إلى موقع ويب
هناك أيضًا بعض عيوب استخدام إطارات iFrames. لا تسمح لك كل مواقع الويب بوضع محتواها في إطار iFrame. أيضًا ، قد ينتهي الأمر بإطار iFrame كبيرًا أو صغيرًا جدًا بالنسبة لصفحتك ، وستحتاج إلى تعديله يدويًا.
هناك مشكلة أخرى وهي أن مواقع HTTPS يمكنها فقط استخدام إطارات iFrame للمحتوى من مواقع HTTPS الأخرى. وبالمثل ، يمكن لمواقع HTTP فقط استخدام إطارات iFrames للمحتوى من مواقع HTTP الأخرى.
هذا هو السبب في أن العديد من المنصات مثل ووردبريس تفضل oEmbed. يمكنك استخدام oEmbed لتضمين مقاطع الفيديو بالإضافة إلى بعض أنواع المحتوى الأخرى ببساطة عن طريق لصق عنوان URL في منشور ووردبريس الخاص بك. سيتم تغيير حجم المحتوى تلقائيًا ليناسب ، وسيكون الحجم المناسب حتى على الأجهزة المحمولة.
هام: ووردبريس لا يدعم oEmbed لمنشورات Facebook و Instagram. لمزيد من المعلومات حول هذا الأمر ، تحقق من دليلنا الكامل حول مشكلة Facebook / Instagram oEmbed وكيفية إصلاحها .
بديل رائع آخر لـ iFrames هو استخدام المكوِّن الإضافي للخلاصات الاجتماعية. نوصي باستخدام ملحقات Smash Balloon . يتيح لك ذلك عرض المحتوى من Facebook و Instagram و Twitter و YouTube.
بعد قولي هذا ، دعنا نلقي نظرة على ثلاث طرق مختلفة لإضافة إطارات iFrames إلى موقعك.
تحتوي العديد من المواقع الكبيرة على خيار تضمين لمحتواها. يمنحك هذا رمز iFrame الخاص الذي تحتاج إلى إضافته إلى موقعك.
على YouTube ، يمكنك الحصول على هذا الرمز من خلال الانتقال إلى مقطع الفيديو على YouTube ، ثم النقر فوق الزر “مشاركة” الموجود أسفله.
النقر فوق الزر “مشاركة” لمقطع فيديو YouTube الذي اخترته
بعد ذلك ، سترى نافذة منبثقة بها العديد من خيارات المشاركة. ما عليك سوى النقر فوق الزر “تضمين”.
النقر فوق الزر “تضمين” للحصول على رمز تضمين YouTube
الآن ، سيعرض لك YouTube رمز iFrame. بشكل افتراضي ، سيتضمن YouTube عناصر تحكم المشغل. نوصي أيضًا بتمكين الوضع المحسّن للخصوصية.
بعد ذلك ، امض قدمًا وانقر فوق الزر نسخ لنسخ الرمز.
نسخ كود التضمين لفيديو يوتيوب
الآن ، يمكنك لصق هذا الرمز في أي منشور أو صفحة على موقعك. سنقوم بإضافته إلى صفحة جديدة في محرر الكتلة .
لإنشاء صفحة جديدة ، انتقل إلى الصفحات »إضافة جديد في لوحة معلومات ووردبريس الخاصة بك.
ثم أضف كتلة HTML إلى صفحتك.
إضافة كتلة HTML مخصصة إلى ووردبريس
الآن ، تحتاج إلى لصق رمز YouTube iFrame في هذه الكتلة.
لصق رمز YouTube HTML في كتلة iFrame
يمكنك بعد ذلك معاينة صفحتك أو نشرها لمشاهدة مقطع فيديو YouTube مضمنًا هناك.
عرض الفيديو المضمن مباشرة على موقع الويب الخاص بك
نصيحة: إذا كنت تستخدم المحرر الكلاسيكي القديم ، فلا يزال بإمكانك إضافة كود iFrame. تحتاج إلى القيام بذلك في عرض النص.
إضافة كود YouTube iFrame في المحرر الكلاسيكي
يمكن أن يؤدي التبديل بين العرض المرئي والنص في المحرر الكلاسيكي إلى حدوث مشكلات في كود iFrame.
هذه الطريقة مفيدة لأنها تتيح لك إنشاء إطار iframe لتضمين المحتوى من أي مصدر ، حتى إذا كان هذا المصدر لا يوفر تعليمات برمجية مضمنة.
أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي iFrame . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، سيبدأ المكون الإضافي في العمل على الفور دون الحاجة إلى إعداد. انطلق وقم بتحرير أو إنشاء منشور أو صفحة. ثم قم بإضافة كتلة رمز قصير .
إضافة كتلة رمز قصير في محرر الكتلة
بعد ذلك ، يمكنك استخدام هذا الرمز القصير لإدخال رمز iFrame الخاص بك.
1
[iframe src=”URL goes here”]
ما عليك سوى استبدال عنوان URL الموجود هنا بعنوان URL الخاص بالمحتوى الذي تريد تضمينه على موقعك. نقوم بتضمين خريطة جوجل.
نصيحة: قد تحتاج إلى استخدام خيار التضمين للحصول على عنوان URL المباشر للمحتوى. تحتاج إلى استخدام عنوان URL فقط ، وليس باقي كود التضمين.
الرمز المختصر لتضمين خريطة جوجل
بعد ذلك ، قم بمعاينة أو نشر منشورك. يجب أن تشاهد خريطة Google مضمنة في موقعك.
خريطة جوجل المضمنة في الموقع
يمكنك اختياريًا إضافة معلمات إلى الرمز المختصر iFrame لتغيير كيفية عرض المحتوى المضمن. على سبيل المثال ، يمكنك ضبط العرض والارتفاع وإضافة شريط تمرير أو حد أو إزالتهما. يمكنك العثور على التفاصيل في صفحة المكون الإضافي iFrame .
نصيحة: إذا كنت تستخدم المحرر الكلاسيكي ، فيمكنك ببساطة لصق الرمز القصير في المنشور أو الصفحة. لا تحتاج إلى التبديل إلى عرض النص.
إضافة الكود المختصر في المحرر الكلاسيكي
إذا كنت تفضل عدم استخدام مكون iFrame الإضافي ، فيمكنك إنشاء كود iFrame يدويًا. للقيام بذلك ، تحتاج إلى إضافة كتلة HTML في محرر محتوى ووردبريس .
إضافة كتلة HTML مخصصة
أولاً ، تحتاج إلى لصق هذا الرمز في كتلة HTML الخاصة بك.
1
<iframe src=”URL goes here”></iframe>
ما عليك سوى استبدال “URL يذهب هنا” بعنوان URL المباشر للمحتوى الذي تريد تضمينه. ما عليك سوى عنوان URL نفسه.
هنا ، نقوم بتضمين خريطة من Google.
إدخال كود iFrame لخريطة جوجل
يمكنك إضافة معلمات إضافية إلى علامة HTML. على سبيل المثال ، يمكنك ضبط عرض وارتفاع إطار iFrame الخاص بك. يعني الرمز أدناه أن المحتوى المضمن الخاص بك سيعرض 600 بكسل ارتفاعًا و 300 بكسل ارتفاعًا.
<iframe src="URL goes here" width="600" height="300"></iframe>هذا مفيد إذا كنت بحاجة إلى تقييد المحتوى المضمن بمساحة أصغر.
خريطة جوجل على الموقع مع ارتفاع وعرض محددين
نأمل أن تساعدك هذه المقالة في تعلم كيفية تضمين كود iFrame بسهولة في ووردبريس. قد ترغب أيضًا في الاطلاع على دليلنا النهائي حول كيفية تسريع موقع ووردبريس الخاص بك ، ومقارنتنا لأفضل أدوات البحث عن الكلمات الرئيسية لتحسين تصنيفات SEO الخاصة بك.
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
