วิธีทำให้โมดูลติดตามโซเชียลมีเดียคงที่เหมือนราชา

ในบทช่วยสอนวันนี้ เราจะแสดงวิธีทำให้ Social Media Follow Module ตรงกับความต้องการบางอย่าง การติดตามโซเชียลมีเดียเป็นโมดูลที่แทบจะหายไปจากหน้าใด ๆ ในเว็บไซต์ใด ๆ เป็นหนึ่งในวิธีหลักในการเชื่อมต่อช่องทางโซเชียลมีเดียกับเว็บไซต์ เพื่อช่วยให้คุณบรรลุการเชื่อมต่อที่ต้องการระหว่างเว็บไซต์และช่องทางโซเชียลมีเดีย เรามี Monarch ปลั๊กอินที่ช่วยให้คุณแสดงโซเชียลมีเดียตามปุ่มบนเว็บไซต์ของคุณได้อย่างง่ายดาย แต่ถ้าคุณต้องการบรรลุผล Monarch ผ่านตัวสร้าง Divi โพสต์นี้อาจมีประโยชน์

เราจะแสดงวิธีสร้างโมดูลการติดตามโซเชียลมีเดียแบบคงที่สำหรับเว็บไซต์ของคุณ ซึ่งเป็นหนึ่งในสิ่งที่ปลั๊กอิน Monarch มีให้ นอกจากการระบุตำแหน่งไว้ที่ด้านซ้ายหรือด้านขวา (การตั้งค่ามาตรฐานภายใน Monarch) เรายังจะแสดงวิธีทำให้มันติดอยู่ที่ด้านบนและด้านล่างของหน้า นอกจากจะทำให้ติดที่ด้านบนของหน้าแล้ว เรายังรวมส่วนที่จะแสดงวิธีทำให้โมดูลการติดตามโซเชียลมีเดียปรากฏใต้เมนูหลักบนเว็บไซต์ของคุณอีกด้วย (ไม่ว่าเมนูหลักของคุณจะได้รับการแก้ไขหรือไม่ก็ตาม) .

มาดูผลลัพธ์สุดท้ายด้านล่างกัน

ตัวอย่างด้านซ้าย

ตัวอย่างด้านขวา

ตัวอย่างยอดนิยม (มาตรฐาน)

ไม่มีการนำทางคงที่

ด้วยการนำทางคงที่

ตัวอย่างด้านล่าง

วิธีทำให้โมดูลติดตามโซเชียลมีเดียคงที่เหมือนราชา

สมัครสมาชิกช่อง Youtube ของเรา

ขั้นตอนทั่วไป

เนื่องจากขั้นตอนพื้นฐานของการเพิ่ม Social Media Follow Module ไปยังเพจจะเหมือนกันในทุกตัวอย่าง เราจะแสดงสิ่งนี้เพียงครั้งเดียวเท่านั้น หากคุณต้องการได้ผลลัพธ์แบบเดียวกันสำหรับด้านขวา ตำแหน่งบนหรือล่าง คุณจะต้องเพิ่มโมดูลการติดตามโซเชียลมีเดียก่อนตามที่อธิบายไว้ในส่วนต่อไปนี้ของโพสต์นี้

เพิ่มโมดูลการติดตามโซเชียลมีเดียไปที่เพจ

เพื่อให้ง่าย เราจะเพิ่ม Social Media Follow Module ที่ส่วนแรกของเพจ เมื่อทำเช่นนั้น คุณจะรู้ได้ทันทีว่าจะค้นหาได้ที่ไหนเมื่อคุณต้องการทำการเปลี่ยนแปลงใดๆ ในอนาคต เราไม่ต้องการแถวแยกต่างหากสำหรับโมดูลนี้ เนื่องจากเราจะกำหนดตำแหน่งคงที่ให้กับโมดูลนี้

เพิ่มช่องทางโซเชียลมีเดียไปยัง Social Media Follow Module+

สิ่งต่อไปที่เราจะต้องทำคือเพิ่มช่องทางโซเชียลมีเดียที่จำเป็นลงในโมดูลติดตามโซเชียลมีเดีย เปิดการตั้งค่าโมดูลและคลิกที่ 'เพิ่มเครือข่ายสังคมใหม่' เมื่อคุณทำเสร็จแล้ว คุณสามารถเลือกเครือข่ายโซเชียลมีเดียที่คุณต้องการเพิ่มและกำหนด URL ให้กับเครือข่ายนั้นได้

สำหรับเครือข่ายโซเชียลแต่ละเครือข่าย จะมีการกำหนดสีไอคอนให้ตรงกับเครือข่ายโซเชียลโดยอัตโนมัติ อย่างไรก็ตาม หากคุณต้องการใช้สีในสไตล์ของเว็บไซต์ของคุณเอง คุณสามารถเลือกสีอื่นได้ในแท็บออกแบบ สำหรับตัวอย่าง เราจะแสดงวิธีการสร้าง เราจะรวมเครือข่ายโซเชียลสี่เครือข่าย Facebook, Twitter, Google+ และ LinkedIn แทนที่จะใช้สีมาตรฐาน เราจะให้เครือข่ายโซเชียลแต่ละเครือข่ายมีสีเดียวกันแต่มีความทึบต่างกัน เราจะจัดช่องทางโซเชียลมีเดียตามความสำคัญ

การตั้งค่า Facebook

คลิกที่ 'เพิ่มเครือข่ายสังคมใหม่' ในตัวเลือกโซเชียลเน็ตเวิร์ก ให้เลือกสำหรับ Facebook ขณะที่ยังอยู่ในแท็บเนื้อหา ให้เพิ่ม URL ที่เชื่อมโยงกับช่องทางโซเชียลมีเดียของ Facebook

จากนั้นไปที่แท็บออกแบบ ในกรณีนี้ Facebook เป็นเครือข่ายโซเชียลที่สำคัญที่สุด นั่นเป็นเหตุผลที่เราจะให้เฉดสีที่ดึงดูดความสนใจมากที่สุด สีที่เราใช้คือ 'rgba(59,89,152,0.94)'

การตั้งค่าทวิตเตอร์

ถัดไป เพิ่มเครือข่ายโซเชียลใหม่ แทนที่จะเลือกสำหรับ 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)'

สร้างแถบด้านข้างซ้ายโซเชียลมีเดีย ติดตาม

โมดูลการติดตามโซเชียลมีเดียแบบคงที่แรกที่เราจะแสดงให้คุณเห็นวิธีการสร้างนั้นอยู่ที่ด้านซ้ายของเพจของคุณ นี่เป็นรูปแบบที่ใช้บ่อยที่สุดและอาจเป็นสิ่งที่ทำให้คุณนึกถึงพระมหากษัตริย์ในทันทีมากที่สุด ทำตามขั้นตอนทั่วไปก่อนและดำเนินการต่อโดยเพิ่มโค้ด CSS ซึ่งคุณจะพบในส่วนถัดไปของโพสต์นี้ เราจะแสดงให้คุณเห็นสองวิธีในการเพิ่มโค้ด CSS; ไปที่ตัวเลือกธีมและหน้าหนึ่งโดยเฉพาะ หลังจากตัวอย่างนี้ คุณสามารถเลือกระหว่างสองตัวเลือกสำหรับตัวอย่างอื่นๆ ได้เช่นกัน

เพิ่ม CSS Code Lines ให้กับ Theme Options

วิธีหนึ่งในการเพิ่มโค้ด 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 ได้คือการเพิ่มลงในหน้าหนึ่งโดยเฉพาะ วิธีนี้ใช้บ่อยที่สุดเมื่อคุณตัดสินใจที่จะเพิ่ม Social Media Follow Module ในหน้าเดียวเท่านั้น เมื่อใช้วิธีนี้ เว็บไซต์ของคุณจะไม่โหลดบรรทัดโค้ด CSS ในทุกหน้าบนเว็บไซต์ของคุณที่ไม่มีโมดูลการติดตามโซเชียลมีเดีย หรือหากคุณต้องการให้ Social Media Follow Module ในหน้าอื่นทำงานตามปกติ วิธีนี้จะช่วยคุณได้เช่นกัน

คลิกที่ปุ่มต่อไปนี้บนตัวสร้าง Divi ของคุณ:

ถัดไป คัดลอกและวางโค้ด CSS ในช่อง Custom CSS

สร้างแถบด้านข้างขวาโซเชียลมีเดีย ติดตาม

โค้ดถัดไปที่เราจะแชร์จะช่วยให้คุณวางโมดูล Social Media Follow ไว้ทางด้านขวาของเว็บไซต์ของคุณ

บรรทัดโค้ด CSS ที่จำเป็น

เพิ่มบรรทัดโค้ด CSS ต่อไปนี้ใน Theme Options หรือในหน้าเดียวโดยเฉพาะตามที่อธิบายไว้ในตัวอย่างด้านบน

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 ต่อไปนี้ลงใน Theme Options หรือเพิ่มลงในหน้าเดียวโดยเฉพาะ

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;
}

สร้างโซเชียลมีเดียอันดับต้นๆ ติดตามด้านล่าง เมนูหลัก

วิธีที่แสดงไว้ก่อนหน้านี้ในการเพิ่มโมดูลการติดตามโซเชียลมีเดียในเว็บไซต์ของคุณจะไม่พิจารณาเมนูหลัก อย่างไรก็ตาม หากคุณต้องการให้ Social Media Follow ปรากฏใต้เมนูหลักและกลับไปด้านบนสุดเมื่อเลื่อนไป ส่วนนี้ของโพสต์อาจช่วยคุณได้

เพิ่มโค้ด 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 ต่อไปนี้ลงในฟิลด์ Custom CSS ของ Theme Options ของคุณ หรือเฉพาะในหน้าเดียว:

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