كيفية تضمين إطارات iFrames في WordPress

تعد مشاركة المحتوى عبر الإنترنت ممارسة شائعة. ومع ذلك ، قد تشعر بالحيرة عند محاولة اكتشاف كيفية دمج أنواع معينة من المحتوى. يمكن أن تمثل مشاركة ملفات كبيرة أو عناصر معينة من مواقع ويب أخرى تحديًا في بعض الأحيان.

لحسن الحظ ، هناك ممارسة بسيطة إلى حد ما لتصميم الويب يمكنك استخدامها لعرض أنواع معينة من المحتوى على موقع WordPress الخاص بك. يمكن أن يؤدي استخدام HTML لإنشاء إطارات مضمنة (iFrames) إلى تسهيل مشاركة الصور ومقاطع الفيديو والوسائط الأخرى عبر الإنترنت.

في هذه المقالة ، سوف نستكشف الاستخدامات المختلفة لـ iFrames على أحد مواقع الويب. سننتقل أيضًا إلى خطوات إنشاء إطارات iFrame يدويًا ومع مكون إضافي. هيا بنا نبدأ!

يستخدم iFrame

عند استخدام iFrame ، فأنت تقوم بشكل أساسي بإنشاء بوابة صغيرة على موقع الويب الخاص بك تتيح عرض المحتوى من مكان آخر. يمكن أن يكون هذا مفيدًا في عدة سيناريوهات.

يعني استخدام iFrame أنك لست مضطرًا لاستضافة الملفات التي تريد عرضها بالفعل. يظل المحتوى في موقعه الأصلي ، ويمكن مشاهدته من خلال الإطار الموجود على موقعك. إحدى الطرق التي يمكن أن تفيد بها هذه التقنية هي عندما تريد عرض ملفات كبيرة. يمكن لـ iFrame جلب هذا المحتوى إلى موقع الويب الخاص بك دون إبطاء سرعات التحميل.

تجدر الإشارة إلى أن إطارات iFrames هي النوع الوحيد المسموح به من الإطارات في HTML5. هناك مجموعة متنوعة من أنواع المحتوى المختلفة التي قد تستخدمها لعرضها ، بما في ذلك:

• الصور: يمكنك استخدام إطارات iFrames لعرض صور عالية الجودة من معرض خارجي ، وتجنب الاضطرار إلى التنازل بسبب حجم الملف.
• مقاطع الفيديو: يمكن أن تؤدي استضافة مقاطع الفيديو الخاصة بك على نظام أساسي مثل YouTube أو Vimeo ، واستخدام إطار iFrame لوضعها على موقع الويب الخاص بك ، إلى تحسين تجربة المستخدم أثناء تحرير مساحة تخزين موقع الويب الخاص بك.
• محتوى الويب الآخر: يمكن لإبراز المحتوى من مواقع الويب الأخرى ، مثل صفحات المحفظة أو الوصفات ، أن يجلب محتوى ثريًا إلى جمهورك بسهولة.

عند استخدام إطارات iFrame ، يمكنك أيضًا تجنب قواعد حقوق النشر المعقدة. قضت عدة محاكم بأن استخدام إطار iFrame لعرض مواد محمية بحقوق الطبع والنشر لا يشكل انتهاكًا لحقوق النشر في جميع الحالات.

يمكن أن يتضمن موقع الويب أيضًا نصوصًا برمجية لمنع تضمين محتواه في إطار iFrame. ومع ذلك ، نوصي دائمًا بمنح الأموال للمنشئ الأصلي لأي محتوى تستخدمه ، أو طلب المشورة القانونية إذا لم تكن متأكدًا من كيفية المتابعة.

استخدام إطارات iFrames مع البرنامج المساعد

واحدة من أسهل الطرق لاستخدام iFrames على موقع WordPress هي استخدام مكون iFrame الإضافي. لحسن الحظ ، هناك العديد من الخيارات عالية التصنيف للاختيار من بينها.

الخطوة 1: قم بتنزيل وتكوين مكون iFrame الإضافي

على سبيل المثال ، سنستخدم المكون الإضافي Advanced iFrame. إنه مرن وسهل الاستخدام وجيد التصنيف:

بعد تثبيت البرنامج المساعد وتنشيطه ، ستجد عنصر قائمة إطارات iFrames جديدة في لوحة معلومات WordPress الخاصة بك. يحتوي Advanced iFrame على مجموعة واسعة جدًا من الخيارات. سترغب في البدء بعلامة التبويب "خيارات" ، ومراجعة فيديو "QuickStart":

بعد ذلك ، يمكنك التمرير لأسفل ومراجعة بعض خيارات المكون الإضافي. تم إعدادها جميعًا مع الكثير من التفسيرات المفيدة والخيارات سهلة التحديد:

توفر إطارات iFrame المتقدمة أيضًا أداة فحص إطارات iFrame مجانية ، والتي ستتحقق من أي عنوان URL تقدمه لمعرفة ما إذا كان يحتوي على برامج نصية تمنع تضمين المحتوى في iFrame. من الجيد تشغيل أي عنوان URL من خلال هذه الأداة قبل استخدامها في iFrame على موقع الويب الخاص بك.

ستحتاج أيضًا إلى مراجعة علامة التبويب الإعدادات الأساسية . هناك ، يمكنك تخصيص عناصر iFrame مثل الارتفاع والعرض وحدود الإطار:

بمجرد تكوين إعدادات المكون الإضافي لتلبية احتياجاتك ، يمكنك البدء في استخدام iFrames على موقع الويب الخاص بك.

الخطوة 2: استخدم Advanced iFrame Block

في محرر قوالب WordPress ، سيكون لديك الآن كتلة iFrames متقدمة متاحة للاستخدام:

إذا كنت تواجه مشكلة في العثور على هذه المجموعة في المرة الأولى التي تريد استخدامها فيها ، فستكون ضمن فئة الأدوات .

بمجرد النقر فوق كتلة iFrame المتقدمة ، سيتم تحميلها تلقائيًا بمحتوى من موقع الويب الخاص بمنشئ المكون الإضافي. يمكنك تكوين الكتلة باستخدام خيارات الحظر على الجانب الأيمن من الصفحة:

هناك ، يمكنك إضافة عنوان URL للمحتوى الذي تريده أن يظهر في iFrame. ستتمكن أيضًا من تجاوز بعض إعدادات المكون الإضافي إذا لزم الأمر.

الخطوة 3: معاينة موقعك

إذا اختبرت عنوان URL الخاص بك باستخدام مدقق iFrame ، فيجب أن تكون على ما يرام. من الأفضل دائمًا معاينة التغييرات قبل نشر المحتوى الخاص بك. من المفترض أن تشاهد معاينة مباشرة لإطار iFrame أثناء تحريره وإجراء التغييرات.

يمكنك أيضًا استخدام خيار المعاينة في الزاوية العلوية اليسرى من نافذة التعديل لعرض المنشور في سياق قوائم موقعك وأشرطةه الجانبية.

استخدام إطارات iFrames بدون مكون إضافي

إذا كنت لا تريد العمل مع مكون إضافي ولكنك لا تزال ترغب في استخدام iFrames ، فأنت محظوظ! يمكنك تطبيق التعليمات البرمجية يدويًا على منشوراتك وصفحاتك لتضمين محتوى iFramed.

الخطوة 1: أدخل رمز التضمين

إذا كنت ترغب في دمج محتوى مثل مقطع فيديو من YouTube على موقع الويب الخاص بك ، فستحتاج إلى تحديد موقع رمز التضمين الذي يوفره YouTube. يمكنك العثور على هذا أسفل مقطع فيديو بالنقر فوق مشاركة .

سيؤدي ذلك إلى إظهار قائمة بخيارات المشاركة. ستحتاج إلى تحديد Embed للحصول على الرمز الذي تحتاجه لإطار iFrame الخاص بك.

سيتم فتح نافذة منفصلة مع معاينة الشكل الذي سيبدو عليه المحتوى المضمن. ستتمكن بعد ذلك من نسخ مقتطف رمز iFrame.

يمكنك أيضًا تحديد المربع "البدء عند" إذا كنت تريد أن يبدأ المشاهدون تلقائيًا في عرض المحتوى في رمز وقت معين.

بعد ذلك ، ستعود إلى منشور WordPress الخاص بك وتضيف كتلة HTML المخصصة . يمكنك العثور على هذا ضمن فئة التنسيق .

بعد إضافة هذا الحظر إلى مشاركتك ، يمكنك ببساطة لصق رمز التضمين الذي نسخته من صفحة YouTube.

بعد ذلك ، ستحتاج إلى التأكد من أن التضمين يعمل بشكل صحيح ويظهر بالطريقة التي تريدها. يمكنك النقر فوق معاينة في كتلة HTML المخصصة لمعرفة ما إذا كان إطار iFrame الخاص بك يعمل أم لا.

وبذلك تكون قد نجحت في وضع إطار iFrame على موقع الويب الخاص بك. ستعمل نفس العملية مع أي نظام أساسي يوفر لك أكواد التضمين.

الخطوة 2: تخصيص إطارات iFrames الخاصة بك

إذا كنت لا تزال غير راضٍ تمامًا عن طريقة عرض iFrame في منشورك أو صفحتك ، فيمكنك ضبط بعض القيم في الكود يدويًا. يوصى باستخدام Cascading Style Sheets (CSS) للتخصيص الكامل لطريقة ظهور iFrames على موقع الويب الخاص بك.

تسمح علامة iFrame بعدد من الخصائص المخصصة. ومع ذلك ، من المهم ملاحظة أن HTML5 لم يعد يدعمها. ستحتاج على الأرجح إلى التحقق من CSS لموضوعك كما ذكرنا سابقًا ، حيث قد لا تتمكن من تجاوز بعض التنسيقات مباشرةً في كتلة HTML المخصصة .

الخطوة 3: تحقق من محتوى iFrame الخاص بك بانتظام

عند استخدام iFrames ، سترغب في التحقق من المحتوى ذي الإطارات بانتظام. نظرًا لأنك تفتح نافذة لمحتوى قد لا يكون لديك أي تحرير أو رقابة على الجودة ، فقد يتسبب ذلك في حدوث مشكلة على موقع الويب الخاص بك في أي وقت.

على سبيل المثال ، إذا تمت إزالة مقطع الفيديو الذي استخدمناه في مثالنا من قناته على YouTube ، فسيكون لمشاركتنا مشغل معطل. هذا أكثر وضوحًا من ارتباط معطل ، لأنه سيترك تأثيرًا مرئيًا على موقع الويب الخاص بك. يتيح لك التحقق من محتوى iFrame الخاص بك بشكل دوري تغيير أو إزالة أي وسائط لم تعد تعمل.

قم بتحسين موقعك باستخدام WP Engine

يمكن أن يؤدي استخدام iFrames على موقع الويب الخاص بك إلى الحفاظ على سير الأمور بسلاسة ، مع الاستمرار في دمج الوسائط الغنية والمحتوى الديناميكي. هنا في WP Engine ، نعلم أهمية فهم مفاهيم تصميم الويب المهمة والوصول إلى أفضل موارد المطورين المتوفرة.

علاوة على ذلك ، نحن ملتزمون بمساعدتك على تقديم أفضل التجارب الرقمية لعملائك. لدينا مجموعة متنوعة من خطط استضافة WordPress المُدارة بالكامل ، بحيث يمكنك التركيز على تصميم مواقع ويب جميلة!