كيفية إضافة أداة Instagram Widget في WordPress (دليل خطوة بخطوة)

الانستقرام وورد القطعة 

هل تريد معرفة كيفية إضافة عنصر واجهة مستخدم Instagram إلى مدونة WordPress الخاصة بك ؟ يعد عرض موجز Instagram الخاص بك على مدونتك طريقة رائعة لزيادة التفاعل مع القراء وتزويدهم بمحتوى إضافي والمزيد.

قد يبدو ربط حسابك على Instagram  بمدونة WordPress الخاصة بك  أمرًا صعبًا ، لكنه ليس كذلك في الحقيقة!

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

مستعد؟

دعنا نتعمق!

 

ما هي أداة WordPress؟

أولاً ، إذا كنت جديدًا على WordPress ، فقد تتساءل عن ماهية أداة WordPress.

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

تتوفر أدوات WordPress للعديد من الوظائف المختلفة مثل عرض منشورات المدونة الشائعة وإضافة النماذج وعرض موجز الوسائط الاجتماعية وغير ذلك الكثير.

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

instagram تغذية استوديو الأم

يمكن أن تكون إضافة عنصر واجهة مستخدم Instagram إلى WordPress مفيدة بشكل خاص لمدونتك.

اقرأ لتكتشف لماذا. 

فوائد إضافة أداة Instagram إلى مدونة WordPress الخاصة بك

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

لذلك ، دعونا نلقي نظرة فاحصة على سبب وجوب إضافة موجز Instagram إلى مدونتك. 

تزويد الزوار بمزيد من المحتوى

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

يشجع هذا المحتوى الإضافي الزوار على البقاء على موقع الويب الخاص بك لفترة أطول.

تحسين السيو

عند إضافة عنصر واجهة مستخدم Instagram إلى WordPress ، يتم تضمين تعليقات Instagram على موقعك.

يساعد ذلك محركات البحث على فهم موضوع مدونتك بشكل أفضل ، مما يساعدك على  تحسين SEO  (تحسين محرك البحث) وزيادة عدد الزيارات إلى موقعك. 

زيادة المشاركة والمتابعين

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

يمكن أن يساعدك ذلك في الحصول على المزيد من متابعي Instagram وزيادة تواجدك على وسائل التواصل الاجتماعي.

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

قم بتحديث مدونتك بسهولة

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

بناء الثقة والثقة الاجتماعية

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

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

الآن بعد أن عرفت جميع مزايا ربط حساب Instagram الخاص بك بـ WordPress ، دعنا ننتقل مباشرة إلى البرنامج التعليمي. 

كيفية إضافة عنصر واجهة مستخدم Instagram في WordPress (يدويًا)

إذا كنت ترغب في إضافة عنصر واجهة مستخدم Instagram في WordPress بدون مكون إضافي ، فيمكنك القيام بذلك يدويًا.

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

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

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

انقر على النقاط الثلاث الصغيرة في الزاوية اليمنى العليا من منشور Instagram. ثم انقر فوق  “تضمين”  .

تضمين Instagram

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

انسخ الكود المضمن

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

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

القطعة-المظهر-لوحة القيادة

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

اسحب أداة النص إلى الشريط الجانبي

بعد وضع الأداة في الموقع المطلوب على موقعك ، انقر فوق سهم القائمة المنسدلة في الأداة.

القائمة المنسدلة

سيؤدي هذا إلى فتح مربع نص حيث يمكنك لصق رمز التضمين في Instagram الذي نسخته مسبقًا. تأكد من لصق كود التضمين في  محرر النصوص  بدلاً من المحرر المرئي.

لصق كود التضمين

يمكنك أيضًا إضافة عنوان لخلاصة Instagram الخاصة بك. انقر فوق  حفظ  عند  الانتهاء  .

هذا كل شئ.

يمكنك الآن رؤية أداة Instagram الخاصة بك مباشرة على مدونتك.

Instagram-sidebar-widget

كما ترى من المثال أعلاه ، ليس لديك العديد من خيارات التخصيص عند إضافة عنصر واجهة مستخدم Instagram يدويًا في WordPress.

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

كيفية إضافة عنصر واجهة مستخدم Instagram في WordPress (باستخدام مكون إضافي)

الطريقة الأسهل والأفضل لإضافة عنصر واجهة مستخدم Instagram إلى WordPress هي باستخدام مكون إضافي. نوصي باستخدام  البرنامج الإضافي Smash Balloon Instagram Feed Pro  .

إنستغرام تغذية برو سماش بالون

Instagram Feed Pro هو  المكون الإضافي  الأول  في Instagram لـ WordPress  .

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

بالإضافة إلى ذلك ، يأتي Instagram Feed Pro مزودًا بميزات رائعة لمساعدتك في إنشاء عنصر واجهة مستخدم Instagram قوي ومخصص ، بما في ذلك:

  • خيارات التخطيط المتعددة  – اختر من بين خيارات التخطيط المضمنة مثل الرف الدائري والشبكة والطوب والتمييز. 
  • نظام الإشراف البصري  : حدد المنشورات التي تريد إظهارها وأيها ستخفي. 
  • المشاركة الاجتماعية  : اعرض القصص والتعليقات والإعجابات على Instagram وزر متابعة في خلاصتك. 
  • تصميم سريع الاستجابة  : يتكيف تلقائيًا مع أحجام الشاشات المختلفة لجعل خلاصتك متوافقة مع الجوّال.
  • خلاصات Instagram المتعددة  : اعرض جميع أنواع الخلاصات المختلفة على موقعك كما تريد. 

يقدم Smash Balloon أيضًا  إصدارًا مجانيًا من البرنامج المساعد  ، حتى تتمكن من تجربته.

ولكن للوصول إلى ميزات مثل التخطيطات المتعددة والتعليقات والإعجابات وخلاصات علامة التجزئة ، فأنت بحاجة إلى الترقية إلى  الإصدار المحترف  .

الآن ، دعنا نفحص كيفية استخدام Smash Balloon لإضافة عنصر واجهة مستخدم Instagram في WordPress ، خطوة بخطوة. 

الخطوة 1: قم بتثبيت المكون الإضافي لخلاصة Instagram

أولاً ، تحتاج إلى تنزيل  Instagram Feed Pro من Smash Balloon  وتثبيت وتفعيل المكون الإضافي.

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

الخطوة 2: قم بتوصيل حساب Instagram الخاص بك بالمكوِّن الإضافي

بعد ذلك ، تحتاج إلى ربط حساب Instagram الخاص بك مع المكون الإضافي Smash Balloon. للقيام بذلك ، انقر فوق  الزر Instagram Feed  في لوحة معلومات WordPress التي تظهر بعد تنزيل المكون الإضافي وتفعيله.

سينقلك هذا إلى صفحة الإعدادات في المكون الإضافي Instagram Feed. انقر فوق الزر الأزرق قم  بتوصيل حساب Instagram  .

ربط حساب instagram

اتبع التعليمات التي تظهر على الشاشة لتوصيل حساب Instagram الخاص بك.

ستسألك المطالبة الأولى عما إذا كنت تريد ربط  حساب Instagram شخصي  أو  تجاري  .

حساب تجاري شخصي

من المهم ملاحظة أنه بالنسبة لبعض ميزات موجز Smash Balloon Instagram ، مثل موجز علامة التجزئة أو المنشورات القابلة للتسوق ، يجب أن يكون لديك حساب Instagram للأعمال.

لا تقلق بشأن نوع حساب Instagram الذي تحتاجه الآن لأنه يمكنك دائمًا تغييره لاحقًا.

حدد نوع حساب Instagram وانقر فوق  اتصال  للمتابعة.

هذا كل شئ! حساب Instagram الخاص بك متصل الآن بالمكوِّن الإضافي Instagram Feed. 

الخطوة 3: اختر محتوى Instagram لعرضه

في نفس الصفحة ، يمكنك أيضًا اختيار نوع محتوى Instagram الذي تريد عرضه في أداة Instagram الخاصة بك.

يمكنك اختيار عرض:

  • موجز Instagram القياسي الخاص بك
  • موجز بصور علامة تصنيف عامة محددة
  • موجز بالصور التي تم وضع علامة باسمك فيها
  • علف مختلط بأنواع أعلاف متعددة
الانستغرام نوع التغذية

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

الخطوة 4: اختر تنسيق عنصر واجهة المستخدم Instagram الخاص بك

انتقل إلى  صفحة الإعدادات  في المكون الإضافي Instagram Feed وانقر فوق  علامة التبويب تخصيص  .

سحق بطاقة التخصيص بالون

في هذه الصفحة ، يمكنك تحديد الشكل الذي ستبدو عليه أداة Instagram في مدونتك بخيارات التخصيص مثل:

  • العرض والارتفاع 
  • لون الخلفية
  • عدد الصور المراد عرضها
  • إظهار / إخفاء سيرتك الذاتية على Instagram
  • أضف زر متابعة

يمكنك أيضًا اختيار نوع التخطيط الذي تريد أن يكون على أداة Instagram الخاصة بك. يقدم Instagram Feed من Smash Balloon 4 خيارات تخطيط مختلفة للاختيار من بينها:

  • الشبكة  : شبكة قياسية بها صور مربعة ثابتة
  • الرف الدائري  : رف دائري أفقي يمكن للمستخدمين التمرير خلاله
  • Masonry  – معرض يعرض صور Instagram بتنسيقها الأفقي أو الرأسي الأصلي
  • Highlight  : معرض تظهر فيه صور معينة بشكل أكبر في الشبكة لتمييزها

في هذا البرنامج التعليمي ، سنختار تخطيط الشبكة ، والذي يبدو كالتالي:

سحق بالون الانستغرام شبكة تخطيط

اختر نوع التخطيط الذي تريده  وانقر فوق  حفظ  التغييرات  .

الخطوة 5: أضف أداة Instagram الخاصة بك في WordPress

حان الوقت الآن لإضافة أداة Instagram إلى مدونتك!

مع البرنامج المساعد Instagram Feed من Smash Balloon ، لديك 3 طرق مختلفة لتضمين خلاصتك.

دعونا نلقي نظرة على كل منهم. 

1. WordPress Instagram feed block

لإضافة عنصر واجهة مستخدم Instagram إلى صفحة جديدة على موقع الويب الخاص بك باستخدام محرر قوالب WordPress ، انتقل أولاً إلى  الصفحات »إضافة جديد  .

في محرر قوالب WordPress ، انقر فوق رمز  الإضافة (+)  للبحث عن قالب WordPress. في شريط البحث ، اكتب “Instagram” للعثور على  كتلة Instagram Feed WordPress  .

وورد بلوك القطعة

انقر فوق الكتلة لإضافتها إلى صفحتك.

سيكون لديك بعد ذلك معاينة للشكل الذي ستبدو عليه خلاصة Instagram على موقع الويب الخاص بك ويمكنك تغيير الإعدادات إذا لزم الأمر.

انشر  الصفحة لجعل عنصر موجز Instagram الخاص بك مباشرًا على مدونتك!

فيما يلي مثال لما يبدو عليه المنتج النهائي:

إنستغرام ، تغذية ، سحق بالون

يمكنك استخدام نفس الطريقة لإضافة موجز Instagram إلى أي صفحة موجودة أو منشور على موقعك. 

2. انستغرام تغذية الرمز القصير

إذا كنت تستخدم محرر WordPress الكلاسيكي ، فيمكنك استخدام الرمز المختصر لخلاصة Instagram لعرض خلاصتك في منشور أو صفحة على موقعك.

انتقل إلى  صفحة إعدادات  Instagram Feed . في علامة التبويب  عرض الخلاصة  ، انسخ الرمز القصير المقدم.

تغذية قصيرة

بعد ذلك ، قم ببساطة بلصق الرمز القصير مباشرةً في محرر المنشور أو الصفحة.

لصق رمز قصير

انقر فوق  ” نشر  ” لحفظ التغييرات الخاصة بك وتنشيط موجز Instagram الخاص بك على موقعك. 

3. القطعة وورد في تغذية Instagram

إذا كنت تريد أن تظهر أداة Instagram الخاصة بك في الشريط الجانبي ، مثل التذييل أو الشريط الجانبي الرئيسي ، فيمكنك استخدام عنصر واجهة Instagram Feed المضمنة في Smash Balloon. 

انتقل إلى  المظهر »الحاجيات  من لوحة معلومات WordPress. 

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

القطعة سحق بالون

في الإعدادات يمكنك إضافة عنوان. عند الانتهاء  ، انقر فوق  حفظ   . 

الآن عند معاينة موقعك ، يمكنك مشاهدة موجز Instagram الخاص بك في الشريط الجانبي. 

الشريط الجانبي-instagram-feed

إنها خاتمة!

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

هل تريد أن ترى موجز Facebook على مدونتك أيضًا؟ تحقق من قائمتنا  لأفضل مكونات Facebook الإضافية لـ WordPress  . يمكنك أيضًا قراءة البرنامج التعليمي الخاص بنا حول  كيفية تضمين مجموعة Facebook في WordPress  .

ولا تنس  الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني  للحصول على مزيد من النصائح المفيدة حول التدوين!