اذهب إلى المحتوى

كيفية استخدام مكون الأيقونات الاجتماعية في ووردبريس


Ali Alrohia

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

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

كيفية إضافة مكون الأيقونات الاجتماعية لمقال أو صفحة ووردبريس

wordpress social icons block add

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

002_wordpress_social_icons_block_add_2.png

تستطيع إضافة هذا المكون بطريقة أخرى من خلال كتابة "/أيقونات اجتماعية" ضمن محتوى المقال لتظهر لك قائمة تتضمن هذا المكون وما عليك سوى اختياره.

003_wordpress_social_icons_block.png

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

004_wordpress_social_icons_add_icon.png

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

005_wordpress_social_icons_add_icon_2.png

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

006_wordpress_social_icons.png

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

إعدادات وخيارات مكون الأيقونات الاجتماعية

007_wordpress_social_icons_settings.png

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

شريط أدوات مكون الأيقونات الاجتماعية

008_wordpress_social_icons_toolsbar.png

يظهر شريط أدوات المكون عند الضغط على هذا المكون في أي مكان.

تغيير نوع أو نمط مكون الأيقونات الاجتماعية

009_wordpress_social_icons_toolsbar_change_type.png

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

010_wordpress_social_icons_toolsbar_change_type_only_logos.png

يزيل نمط "الشعارات فقط" الدائرة المحيطة بالأيقونة.

011_wordpress_social_icons_toolsbar_change_type_pile.png

يُطيل نمط "شكل القرص" الدوائر لتُصبح على شكل قرص.

012_wordpress_social_icons_toolsbar_change_type_gray.png

يُزيل نمط "رمادي داكن" الدوائر ويجعل الأيقونات رمادية.

السحب والتحريك

013_wordpress_social_icons_toolsbar_change_type_drag.png

تُسهل أدوات السحب والتحريك نقل المكون لأي مكان ضمن المحتوى، حيث تستطيع إمساك أداة السحب (النقاط الستة) لسحب وإفلات المكون في أي مكان أو تستطيع استخدام أسهم التحريك لنقل المكون لأعلى أو أسفل ضمن المحتوى.

المحاذاة

014_wordpress_social_icons_toolsbar_change_type_alignment.png

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

تغيير ضبط العناصر

015_wordpress_social_icons_toolsbar_change_type_justify.png

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

016_wordpress_social_icons_toolsbar_change_type_justify.png

هذا المثال يستخدم فراغات بين الأيقونات.

الحجم

017_wordpress_social_icons_toolsbar_change_type_size.png

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

الخيارات

018_wordpress_social_icons_toolsbar_option.png

تتضمن الخيارات:

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

شريط أدوات أيقونات مكون الأيقونات الاجتماعية

019_wordpress_social_icons_icontoolsbar_option.png

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

أيقونة الشبكة ضمن شريط أدوات الأيقونات

020_wordpress_social_icons_icontoolsbar_option.png

تُشير هذه الأيقونة إلى الشبكة التي اخترتها، وجميع الخيارات سوف تُطبق عليها فقط.

سحب وتحريك الأيقونة

021_wordpress_social_icons_icontoolsbar_option.png

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

خيارات شريط أدوات الأيقونة

022_wordpress_social_icons_icontoolsbar_option.png

تعمل هذه الخيارات بنفس آلية خيارات شريط أدوات المكون لكنها تُطبّق فقط على الأيقونة التي اخترتها، وتتضمن الخيارات:

  • إظهار المزيد من الإعدادات.
  • نسخ.
  • تكرار.
  • نقل إلى.
  • إزالة المكون.

إعدادات مكون الأيقونات الاجتماعية

023_wordpress_social_icons_sidebar_settings.png

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

أنماط المكون

024_wordpress_social_icons_sidebar_settings_types.png

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

إعدادات الرابط

025_wordpress_social_icons_sidebar_settings_link.png

يسمح لك هذا الخيار بتفعيل فتح الرابط بنفس الصفحة أو بصفحة جديدة.

اللون

026_wordpress_social_icons_sidebar_settings_color.png

يسمح لك هذا القسم بتخصيص ألوان الأيقونة والدائرة المستخدمة في خلفية الأيقونة، تستطيع الاختيار من ألوان مسبقة موجودة أو اختيار لون مُخصص من خلال إدخال رمز اللون الست عشري أو ترميز RGB أو ترميز HSL.

متقدم

027_wordpress_social_icons_sidebar_settings_advanced.png

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

إعدادات الشريط الجانبي للأيقونات

028_wordpress_social_icons_sidebar_settings.png

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

أفضل النصائح لاستخدام فعال لمكون الأيقونات الاجتماعية

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

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

أسئلة متكررة حول مكون الأيقونات الاجتماعية في ووردبريس

توجد بضع أسئلة تكرر حول مكون الأيقونات الاجتماعية وهي:

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال How to Use the WordPress Social Icons Block لصاحبه Randy A. Brown.

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...