كيفية جعل وحدة متابعة وسائل التواصل الاجتماعي ثابتة مثل Monarch

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

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

دعونا نلقي نظرة على النتائج النهائية أدناه.

مثال على الجانب الأيسر

مثال الجانب الأيمن

أعلى مثال (قياسي)

بدون ملاحة ثابتة

مع الملاحة الثابتة

المثال السفلي

كيفية جعل وحدة متابعة وسائل التواصل الاجتماعي ثابتة مثل Monarch

اشترك في قناتنا على اليوتيوب

خطوات عامة

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

أضف وحدة متابعة الوسائط الاجتماعية إلى الصفحة

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

أضف قنوات التواصل الاجتماعي إلى الوسائط الاجتماعية Follow Module +

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

لكل شبكة من الشبكات الاجتماعية ، يتم تعيين لون رمز تلقائيًا يتوافق مع الشبكة الاجتماعية. ومع ذلك ، إذا كنت تفضل استخدام الألوان في نمط موقع الويب الخاص بك ، فيمكنك اختيار لون مختلف في علامة التبويب "تصميم". على سبيل المثال سنوضح لك كيفية الإنشاء ، سنقوم بتضمين أربع شبكات اجتماعية ؛ Facebook و Twitter و Google+ و LinkedIn. بدلاً من استخدام الألوان القياسية ، سنمنح كل شبكة من الشبكات الاجتماعية نفس اللون ولكن مع تعتيم مختلف. سنقوم أيضًا بترتيب قنوات التواصل الاجتماعي حسب الأهمية.

إعدادات Facebook

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

بعد ذلك ، انتقل إلى علامة التبويب "التصميم". في هذه الحالة ، يعد Facebook أهم شبكة اجتماعية. لهذا السبب سنمنحه ظل اللون الذي يجذب أكبر قدر من الاهتمام. اللون الذي استخدمناه هو "rgba (59،89،152،0.94)".

إعدادات Twitter

بعد ذلك ، أضف شبكة اجتماعية جديدة. بدلاً من اختيار Facebook ، اختر Twitter هذه المرة. أضف عنوان URL في علامة تبويب المحتوى نفسها وانتقل إلى علامة التبويب التصميم. ضمن علامة التبويب "تصميم" ، اختر "rgba (59،89،152،0.76)" كلون للخلفية. في هذه الحالة ، يعد Twitter قناة وسائط اجتماعية مهمة ولكنها ليست بنفس أهمية Facebook. لهذا السبب تأتي في المرتبة الثانية على التوالي ولونها أكثر شفافية وأقل بروزًا.

إعدادات LinkedIn

كرر نفس العملية لشبكة LinkedIn الاجتماعية في علامة تبويب المحتوى وانتقل إلى علامة التبويب التصميم. ضمن علامة التبويب "تصميم" ، قم بتعيين لون "rgba (59،89،152،0.6)" للأيقونة.

إعدادات Google+

وأخيرا وليس آخرا؛ إضافة رمز Google+ الاجتماعي. املأ عنوان URL وانتقل إلى علامة التبويب تصميم. هذه هي الشبكة الاجتماعية "الأقل" أهمية التي نريد إضافتها إلى القائمة في هذا المثال وسيكون لها لون الرمز "rgba (59،89،152،0.42)".

إنشاء الشريط الجانبي الأيسر اتبع وسائل التواصل الاجتماعي

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

أضف خطوط كود CSS إلى خيارات النسق

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

لإضافة رمز CSS إلى خيارات السمة الخاصة بك ، انتقل إلى لوحة معلومات WordPress> Divi> خيارات السمة> عام> قم بالتمرير لأسفل في علامة التبويب "عام" وأضف الأسطر التالية من كود CSS إلى حقل CSS المخصص:

ul.et_pb_social_media_follow { 
position: fixed; 
left: 0; 
top: 35%;
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

أضف خطوط كود CSS إلى صفحة واحدة على وجه الخصوص

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

انقر فوق الزر التالي على Divi builder الخاص بك:

بعد ذلك ، انسخ والصق كود CSS في حقل CSS المخصص.

إنشاء الشريط الجانبي الأيمن اتبع وسائل الإعلام الاجتماعية

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

خطوط كود CSS المطلوبة

أضف أسطر كود CSS التالية إلى خيارات السمة أو إلى صفحة واحدة على وجه الخصوص كما هو موضح في المثال أعلاه.

ul.et_pb_social_media_follow {
position: fixed;
top: 40%; 
padding: 0 !important; 
right: 0; 
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

قم بإنشاء أعلى متابعة لوسائل التواصل الاجتماعي

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

خطوط كود CSS المطلوبة

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

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

قم بإنشاء أعلى الوسائط الاجتماعية ، اتبع أسفل القائمة الأساسية

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

أضف كود CSS

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

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

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

مع الملاحة الثابتة

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

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>

لا تنس استخدام خطوط كود CSS أيضًا. كود jQuery إضافي. تأكد أيضًا من أنه عند التمرير ، يظل ارتفاع الأساسي كما هو. يمكنك القيام بذلك من خلال الانتقال إلى لوحة معلومات WordPress> المظهر> تخصيص> الرأس والتنقل> إعدادات التنقل الثابتة> حدد الحد الأدنى لارتفاع القائمة الثابتة.

بدون ملاحة ثابتة

إذا كنت ترغب في تحقيق نفس النتيجة ، ولكن ليس لديك تنقل ثابت ، فسيكون الرمز مختلفًا قليلاً:

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>

اتبع إنشاء وسائل التواصل الاجتماعي السفلية

آخر واحد في الصف هو وحدة متابعة الوسائط الاجتماعية السفلية.

خطوط كود CSS المطلوبة

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

ul.et_pb_social_media_follow { 
position: fixed; 
left: 45%; 
bottom: 0; 
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; 
padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Snopek Nadia / shutterstock.com