ปลั๊กอินสำหรับสร้างแผงการแจ้งเตือนใน WordPress ปลั๊กอินสำหรับสร้างแผงการแจ้งเตือนใน WordPress bigSlide - แผงนำทางแบบสไลด์ใน Jquery

การใช้ปลั๊กอิน – แถบการแจ้งเตือน WPFront คุณสามารถเพิ่มแถบการแจ้งเตือนลงในเว็บไซต์ของคุณที่ด้านบนหรือด้านล่างของไซต์ WordPress ของคุณ แผงควบคุมสามารถแสดงข้อความและปุ่มพร้อมลิงก์ไปยังหน้าใดก็ได้ คุณสามารถเพิ่มโค้ด HTML ได้ คุณสามารถปรับแต่งสีสำหรับแผงการแจ้งเตือนได้ คุณสามารถเลือกตำแหน่งของแผงที่ด้านบนหรือด้านล่างของไซต์ได้ คุณสามารถล็อคแผงเพื่อให้เมื่อคุณเลื่อนหน้า แผงจะมองเห็นได้บนหน้าจอตลอดเวลา คุณสามารถเลือกได้ว่าจะให้แผงแสดงหน้าใดและจะไม่แสดงหน้าใด ฯลฯ

คุณสามารถติดตั้งปลั๊กอินได้โดยตรงจากแผงผู้ดูแลระบบ WordPress ไปที่แท็บ: ปลั๊กอิน – เพิ่มใหม่ ป้อนชื่อของปลั๊กอินในแบบฟอร์มการค้นหา กด Enter ติดตั้งและเปิดใช้งานปลั๊กอิน

หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว ให้ไปที่หน้า: WPFront – แถบการแจ้งเตือน เพื่อกำหนดค่าปลั๊กอิน

แสดง

– เปิดใช้งานแล้ว ทำเครื่องหมายในช่องที่นี่เพื่อเปิดใช้งานแผงการแจ้งเตือน

– ตำแหน่ง เลือกตำแหน่งที่จะแสดงแผง บน – ที่ด้านบน ล่าง – ที่ด้านล่าง

– แก้ไขที่ตำแหน่ง หากคุณทำเครื่องหมายในช่องนี้ แผงจะมองเห็นได้บนหน้าจอตลอดเวลา แม้ว่าจะเลื่อนหน้าก็ตาม

– แสดงผลเมื่อเลื่อน หากคุณเลือกช่องนี้ แผงจะปรากฏขึ้นเมื่อคุณเลื่อนหน้า

– Scroll Offset ที่นี่คุณสามารถระบุจำนวนพิกเซลที่ควรเลื่อนหน้าก่อนที่แผงการแจ้งเตือนจะปรากฏขึ้น

– Bar Height คุณสามารถระบุความสูงของแถบได้ที่นี่เป็นพิกเซล

– Position Offset ที่นี่คุณสามารถกำหนดระยะห่างจากด้านบนของไซต์ถึงแผงได้

– Display After คุณสามารถตั้งเวลาหลังจากที่พาเนลปรากฏขึ้นได้ แต่ใช้ไม่ได้กับฟังก์ชัน – Display on Scroll

– Animation Duration คุณสามารถกำหนดระยะเวลาของภาพเคลื่อนไหวเมื่อแผงเลื่อนไปบนหน้าจอได้

– แสดงปุ่มปิด ทำเครื่องหมายในช่องเพื่อแสดงปุ่มที่มีเครื่องหมายกากบาทเพื่อปิดแผง

– ปิดอัตโนมัติหลังจาก คุณสามารถระบุหลังจากผ่านไปกี่วินาทีแผงจะปิดโดยอัตโนมัติ ใช้งานไม่ได้กับฟังก์ชัน – แสดงบนเลื่อน

– Display Shadow แสดงเงาให้กับพาเนล

– แสดงปุ่มเปิดใหม่ หากคุณทำเครื่องหมายในช่อง จากนั้นหลังจากปิดแผงแล้ว จะมีปุ่มเปิดแผงปรากฏขึ้นที่มุมของหน้าจอ

– Keep Closed หากคุณทำเครื่องหมายในช่อง จากนั้นเมื่อคุณปิดแผงในหน้าหนึ่ง แผงจะไม่ปรากฏในหน้าอื่นๆ อีกต่อไป

– Keep Closed For คุณสามารถระบุจำนวนวันที่แผงจะไม่แสดงสำหรับผู้ใช้ที่ปิดแผงได้ที่นี่

เนื้อหา

– ข้อความข้อความ ป้อนข้อความที่นี่ที่จะแสดงในการแจ้งเตือน คุณสามารถเพิ่มโค้ด HTML ได้

– ประมวลผลรหัสย่อ ทำเครื่องหมายในช่องเพื่อให้คุณสามารถเพิ่มรหัสย่อในการแจ้งเตือนได้

– Display Button ให้เลือกช่องเพื่อแสดงปุ่มในแผง

– ข้อความของปุ่ม ป้อนข้อความสำหรับปุ่มที่นี่

– การทำงานของปุ่ม ป้อนลิงค์สำหรับปุ่มที่นี่ เปิด URL ในแท็บ/หน้าต่างใหม่ - ลิงก์จะเปิดในหน้าต่างใหม่ ห้ามติดตามลิงก์ – ลิงก์จะไม่ถูกจัดทำดัชนี

– ปิดแถบบนปุ่มคลิก ปิดแถบโดยกดปุ่ม

กรอง

– Start Date & Time คุณสามารถระบุวันที่และเวลาที่แผงเริ่มแสดงได้

– End Date & Time คุณสามารถระบุวันที่และเวลาเมื่อแผงปิด

– Display on Pages เลือกว่าเพจไหนจะแสดงพาเนล ทุกหน้า-ทุกหน้า รวมไว้ในหน้าต่อไปนี้ – ตรวจสอบหน้าที่จะแสดงแผง ไม่รวมในหน้าต่อไปนี้ – ไม่รวมหน้า

– แสดงบทบาทของผู้ใช้ ที่นี่คุณสามารถเลือกได้ว่าจะให้แสดงพาเนลสำหรับบทบาทผู้ใช้ใด ผู้ใช้ทั้งหมด – สำหรับทุกคน ผู้ใช้ที่เข้าสู่ระบบทั้งหมด – เฉพาะผู้ใช้ที่ได้รับอนุญาต ผู้ใช้ทั่วไป – เฉพาะผู้เยี่ยมชม สำหรับบทบาทผู้ใช้ต่อไปนี้ – ตรวจสอบบทบาท

สี

– Bar Color เลือกสีให้กับแถบ

– สีข้อความข้อความ ระบุสีให้กับข้อความในแผง

– Button Color เลือกสีให้กับปุ่ม โดยสามารถระบุ 2 สีเพื่อแสดงการไล่ระดับสีได้

– สีข้อความของปุ่ม สีของข้อความในปุ่ม

– Reopen Button Color สีสำหรับปุ่มเพื่อเปิดแผง

– สีปุ่มปิด เลือกสีสำหรับปุ่มปิดของแผง

– CSS แบบกำหนดเอง คุณสามารถตั้งค่าสไตล์ CSS ของคุณเองสำหรับพาเนลได้ แต่ไม่จำเป็น

ในตอนท้าย บันทึกการเปลี่ยนแปลงของคุณ.

แถบการแจ้งเตือนที่ด้านบนหรือด้านล่างของไซต์ WordPress ของคุณอัปเดต: 25 กรกฎาคม 2018 โดย: อิลยา จูราฟเลฟ

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

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

การเชื่อมโยงมีบทบาทอย่างไรในการโปรโมตเว็บไซต์ในขณะนี้?

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

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

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

การเชื่อมโยงกันในรูปแบบของชุดวงแหวนตามทฤษฎีของ Peydrank ควรเพิ่มน้ำหนักคงที่ของหน้าไซต์ () ที่เกี่ยวข้องกับวงแหวนนี้อย่างจริงจัง

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

การเชื่อมโยงหน้าเว็บไซต์มีงานอื่นซึ่งไม่ได้มุ่งเป้าไปที่การทำให้ Yandex หรือ Google พอใจอีกต่อไป แต่อยู่ที่ ผู้เยี่ยมชมจะชอบมัน. บทความเดียวเห็นได้ชัดว่าไม่เพียงพอสำหรับเขาที่จะลองใช้บล็อกของคุณ - คุณต้องเชิญเขาไปที่อื่นอย่างแน่นอนเพื่อที่จะทำให้เขาสนใจ รักษาเขาไว้ และอาจทำให้เขาเป็นสมาชิกของคุณ

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

แน่นอนว่ามีตัวเลือกมากมายสำหรับการนำการเชื่อมโยงภายในไปใช้ คุณสามารถทำได้โดยไม่ต้องใช้ปลั๊กอิน (คุณสามารถดูตัวอย่างในบทความ) แต่มีการเขียนส่วนใหญ่เพื่อเชื่อมโยง สิ่งที่ยากที่สุดคือการเลือกตัวเลือกที่เหมาะกับบล็อกของคุณอย่างสมบูรณ์แบบ

ตัวฉันเองได้ลองมาหลายอย่างแล้วและยังเขียนบทวิจารณ์เกี่ยวกับบางส่วนด้วย () ในความเป็นจริงปลั๊กอินดังกล่าวเป็นหนึ่งในสิ่งที่ดีที่สุดสำหรับการคำนวณโพสต์ที่เกี่ยวข้องและแสดงรายการไว้ในหน้าบล็อก

แต่ข้อมูลของมันยังสามารถนำมาใช้กับส่วนขยาย WordPress อื่น ๆ ได้ด้วย โดยการออกแบบให้มีสีสันมากขึ้นหรือดูอวดดี ในบทความเดียวกันเกี่ยวกับ YARP ฉันเพิ่งยกตัวอย่างว่าข้อมูลถูกใช้อย่างไรโดยปลั๊กอิน Related Posts Slider ซึ่งอนุญาตให้แสดงโพสต์ที่คล้ายกันในรูปแบบต่อไปนี้:

หรือนี่:

ฮีโร่ของเราในวันนี้เรียกว่า ขึ้นก่อนหน้ายังรู้วิธีรับข้อมูลจากฐานข้อมูลปลั๊กอิน Yet Another Related Post และทำสิ่งที่ถูกต้องเพราะไม่จำเป็นต้องสร้างวงล้อใหม่ทุกครั้ง มาดูการอธิบายความสามารถของปาฏิหาริย์แห่งวิศวกรรมกันดีกว่า

การเชื่อมโยงตัวเลือกโดยใช้ปลั๊กอิน upPrev

ฉันไม่ได้สัมผัสสไตล์เหล่านี้เพราะฉันใช้เส้นทางอื่น (ไม่ใช่เส้นทางที่ตรงที่สุด) ซึ่งฉันจะอธิบายด้านล่างในข้อความ จากนั้นไปที่แท็บที่สอง:

เลือกจำนวนโพสต์ที่ปลั๊กอินนี้จะสร้างลิงก์ แต่ต่ำกว่านิดหน่อยเราก็เฉยๆ เลือกประเภทของการเชื่อมโยงสำหรับเว็บไซต์ของเรา. ฉันได้เลือกตัวเลือกของโพสต์ที่คล้ายกันโดยใช้ฐานปลั๊กอิน Yet Another โพสต์ที่เกี่ยวข้อง (ต้องติดตั้งไว้ล่วงหน้า) แต่คุณสามารถกำหนดค่าการเชื่อมโยงแบบวงแหวนได้โดยการเลือกตัวเลือกที่สองหรือสาม เช่นเดียวกับการเชื่อมโยงวงแหวนขนาดใหญ่โดยการเลือก อันดับแรก .

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

แท็บที่สามใช้เพื่อตั้งค่าการติดตามจำนวนการคลิกลิงก์ในแผงนี้ ซึ่งฉันไม่ได้ใช้ อย่างไรก็ตาม ในแท็บที่สี่ ฉันยังคงเปิดใช้งานแคชอยู่ บนแท็บที่ห้า ฉันห้ามไม่ให้แสดงแผงบนโทรศัพท์มือถือ แต่ไม่ได้คัดค้านการแสดงบนแท็บเล็ต:

นั่นคือทั้งหมด upPrev ตั้งค่าเสร็จแล้ว แต่ฉันได้เปลี่ยนรูปลักษณ์ของพาเนลในการตั้งค่าของปลั๊กอิน Yet Another Articles ที่เกี่ยวข้องแล้ว

การปรับแต่งรูปลักษณ์ของเนื้อหาแผงเลื่อน

ที่นั่นฉันเลือกไฟล์เทมเพลตที่จะรับผิดชอบในการแสดงโพสต์ที่คล้ายกัน (ดูลิงค์ด้านบนเพื่อดูสาระสำคัญและข้อมูลเฉพาะของการทำงานกับส่วนขยายนี้):

ที่. ตอนนี้ลักษณะที่ปรากฏของรายการโพสต์ที่คล้ายกันที่แสดงโดยปลั๊กอิน upPrev (ในแผงป๊อปอัป) จะถูกกำหนดโดยโค้ดที่เขียนในไฟล์ yarpp-template-list.php ของฉันจากโฟลเดอร์ที่มีธีมของฉัน () หากบล็อกของคุณสร้างภาพขนาดย่อสำหรับโพสต์ ก็สมเหตุสมผลที่จะเลือกเทมเพลตจากคลังแสงปลั๊กอิน Yet Another Related Articles ที่ได้รับการสนับสนุนจากพวกเขา

รหัสสำหรับไฟล์นี้คือ:

have_posts()): $postsArray = array(); ในขณะที่ ($ related_query->have_posts()) : $ related_query->the_post(); $postsArray = "
• ".get_the_title()"
"; end While; echo implode(" "."\n",$postsArray); // พิมพ์รายการที่เกี่ยวข้อง โดยคั่นด้วยเครื่องหมายจุลภาค else:?>

ไม่มีโพสต์ที่เกี่ยวข้อง

อย่างที่คุณเห็น นี่คือส่วนที่ส่วนหัวของซ็อกเก็ตแบบเลื่อนอาศัยอยู่ ดังนั้นคุณจะต้องแปลง (หากจำเป็น) ไฟล์นี้เป็นการเข้ารหัส UTF-8 โดยไม่มี BOM เพื่อหลีกเลี่ยง crack() ฉันไม่รู้เกี่ยวกับคุณ แต่ฉันมี Notepad++ () เป็นตัวแก้ไขหลักมาเป็นเวลานานแล้ว และการแปลงนี้ทำได้ดังนี้:

เห็นได้ชัดว่าโค้ดนี้สร้างเพียงรายการ Html ซ้ำ ๆ () และคุณสมบัติ CSS ที่เขียนในไฟล์สไตล์สำหรับคลาสที่มีอยู่ในโค้ดมีหน้าที่รับผิดชอบต่อลักษณะที่ปรากฏ ในกรณีของฉัน สไตล์เหล่านี้มีลักษณะดังนี้:

A.oy (สี: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;margin: 5px 0;border: dotted 2px #ccc;) li.eto:hover (การตกแต่งข้อความ:underline;) div.oyy (margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;สี:#666;)

คลาส lampochka เพิ่มเครื่องหมายถูกสีเขียว ซึ่งตั้งค่าไว้ในโค้ด CSS ของฉันโดยใช้โค้ด base64 (ฉันคัดลอกโค้ดนี้ไว้ที่ใดที่หนึ่ง) หากคุณสนใจ ลองดูที่ style.css ของฉัน โอเค ตอนนี้ทุกอย่างจบลงแล้ว หากคุณลืมบางสิ่งบางอย่างให้ถาม จริงอยู่ ฉันตั้งค่าตัวเลือกการเชื่อมโยงนี้ไว้เมื่อเดือนที่แล้วและมีบางอย่างหายไปจากใจฉันแล้วในช่วงเวลานี้

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

คุณอาจจะสนใจ

วิธีลบพิกเซลโปร่งใส http://yarpp.org/pixels ในปลั๊กอิน Yet Another Related Post และเปลี่ยนคำจารึก วัสดุที่คล้ายกัน
การสร้างรายการโพสต์ที่เกี่ยวข้องใน WordPress (พร้อมภาพขนาดย่อ) โดยใช้ปลั๊กอิน "โพสต์ที่เกี่ยวข้อง" สำหรับการเชื่อมโยงภายใน
วิธีปรับปรุงสถิติพฤติกรรมเว็บไซต์โดยใช้ปลั๊กอินตัวเลื่อนบทความที่เกี่ยวข้องและบทความที่เกี่ยวข้องสำหรับ WordPress
ตัวนับและไอคอนหมวดหมู่และหน้าอย่างง่าย - ตัวนับ RSS และ Twitter ที่สวยงาม รวมถึงไอคอนสำหรับหมวดหมู่และหน้าใน WordPress
ปลั๊กอิน WordPress ในบล็อกของฉัน (ไซต์) ตัวเลื่อนและสไลด์โชว์สำหรับเว็บไซต์ของคุณ - มีตัวเลือกอะไรบ้างและวิธีใช้สคริปต์ jQuery Slider
Breadcrumbs ใน WordPress โดยใช้ปลั๊กอิน Breadcrumb NavXT (การเสริมความแข็งแกร่งของการเชื่อมโยง)
ลดการใช้หน่วยความจำใน WordPress เมื่อสร้างเพจ - ปลั๊กอิน WPLANG Lite สำหรับแทนที่ไฟล์แปล
WP-PageNavi - การนำทางหน้าสำหรับบล็อก WordPress - การติดตั้งการกำหนดค่าและการเปลี่ยนลักษณะที่ปรากฏของการแบ่งหน้า
ปฏิทินมัน! - ปฏิทินกิจกรรมสำหรับ WordPress
เมลไม่ได้ถูกส่งจาก WordPress และโปรแกรมแก้ไขภาพไม่ทำงาน - วิธีแก้ปัญหาโดยใช้ปลั๊กอินกำหนดค่า SMTP และปุ่มตัวแก้ไขโพสต์

แน่นอนว่าคุณมักจะเจอแผงพับของหน้าเว็บไซต์ประเภทและตำแหน่งต่างๆ ที่พูดที่ด้านบน ล่าง ขวา หรือซ้ายโดยอัตโนมัติ ตามช่วงเวลาที่กำหนด หรือเปิดใช้งานโดยการคลิก ตามกฎแล้ว แผงดังกล่าวจะมีข้อมูลเพิ่มเติมบางส่วน บางส่วนสำคัญและบางส่วนไม่สำคัญ ซึ่งจะถูกซ่อนไม่ให้ผู้ใช้มองเห็นได้ในขณะนี้ ตัวอย่างเช่น แบบฟอร์มสมัครสมาชิก วิดเจ็ตเครือข่ายโซเชียล ลิงก์ แท็ก ข้อมูลติดต่อ ฯลฯ ฯลฯ กล่าวโดยสรุป อะไรก็ได้
มีโซลูชันสำเร็จรูปจำนวนมากสำหรับการติดตั้งแผงเลื่อนใน javascript, โมดูลและปลั๊กอินสำหรับ CMS ต่างๆ, ปลั๊กอิน jQuery แต่ละตัว แต่มีน้อยมากที่ดึงดูดสายตาของฉันคือวิธีการทำงานอย่างสมบูรณ์ใน CSS ล้วนๆ

ฉันอยากทำอะไรแบบนี้มานานแล้ว กลไกของการใช้ช่องทำเครื่องหมายที่ซ่อนอยู่นั้นเป็นที่รู้จักและเข้าใจได้ แต่อย่างใดฉันก็ไม่เคยทำได้ เมื่อบังเอิญไปเจอหนึ่งในห้องเก็บของที่เต็มไปด้วยฝุ่นของ CodePen ฉันจึงตัดสินใจทดลองและสร้างแผงด้านบนแบบพับเก็บได้ในเวอร์ชันของตัวเองใน CSS ล้วนๆ ซึ่งใช้งานได้ค่อนข้างดี แก้ไขเล็กน้อยและปรับให้เหมาะกับพี่ชายของเรา และนี่คือสิ่งที่เกิดขึ้น)) .

เราดูตัวอย่างโดยเปรียบเทียบกับต้นฉบับ และตอนนี้ใครต้องการมัน เรามาดูกันว่าทั้งหมดนี้ทำงานอย่างไร ฉันขอเตือนคุณอีกครั้ง ไม่มี js มีเพียง html ที่เก่าแก่และ "เวทย์มนตร์" ของ css เท่านั้นที่จะทำงานได้ทั้งหมด

เค้าโครง HTML

ประกอบด้วยองค์ประกอบหลักสามประการ: คอนเทนเนอร์พื้นฐาน บล็อกที่มีเนื้อหา และปุ่มสำหรับเปิด/ปิดแผง

อย่างที่คุณเห็น การออกแบบพาเนลมีแฟล็ก type=" " ซึ่งถูกซ่อนไว้และไม่ได้ใช้งานตามค่าเริ่มต้น การใช้แท็ก ซึ่งได้รับการออกแบบให้เป็นปุ่มใน CSS เราสร้างการเชื่อมต่อระหว่างช่องทำเครื่องหมาย เช่น หากคุณคลิกที่ป้ายกำกับ อินพุตจะทำงาน (เปิดใช้งาน) การใช้คลาสหลอก: ใน CSS เราสร้างการเชื่อมต่อระหว่างช่องทำเครื่องหมายที่ซ่อนอยู่และองค์ประกอบของพาเนล
ฉันต้องการทราบทันทีว่าปุ่มเปิด/ปิดไม่ได้เชื่อมโยงกับเนื้อหาของแผง แต่อยู่ในตำแหน่งที่สัมพันธ์กับคอนเทนเนอร์เนื้อหาของหน้าหลัก

และเมื่อเปิดใช้งานแผงเลื่อน บล็อกเนื้อหาและปุ่มจะถูกเลื่อนลงตามระยะห่างที่สอดคล้องกับความสูงของแผง

ตอนนี้ เรามาสร้างสไตล์ของแผงเลื่อนของเรา ขั้นแรก กำหนดขนาดของคอนเทนเนอร์ฐาน กำหนดสีพื้นหลังและตำแหน่งเริ่มต้น ใน CSS เราจะสร้าง class.top-panel ซึ่งเราจะเขียนคุณสมบัติทั้งหมดที่เราต้องการ
แผงของเราเป็นแบบยืดหดได้ ซึ่งหมายความว่าเราต้องซ่อนแผงไว้ ซึ่งทำได้ง่ายมาก กำหนดตำแหน่งตำแหน่งคงที่: คงที่; , ยืดให้เต็มความกว้างของหน้ากว้าง: 100%; เราไม่ได้ระบุความสูง (height:) ของพาเนล ในกรณีนี้ พาเนลจะปรับตามขนาดของเนื้อหาโดยอัตโนมัติ และใช้การแปลง: TranslateY(-100%); ดันแผงของเราให้เลยขอบด้านบนของหน้า

. แผงด้านบน ( พื้นหลัง: #39464e; ตำแหน่ง: คงที่; ด้านบน: 0; ความกว้าง: 100%; การขยาย: 0 ; - webkit- box- sizing: border- box; - moz- box- sizing: border- box; box- ขนาด: border- box; - webkit- การแปลง: แปล Y(- 100% ) ; - moz- การแปลง: แปล Y(- 100% ) ; การแปลง: แปล Y(- 100% ) ; )

แผงด้านบน ( พื้นหลัง: #39464e; ตำแหน่ง: คงที่; ด้านบน: 0; ความกว้าง: 100%; การขยาย: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- การปรับขนาด: border-box; -webkit-transform: แปล Y (-100%); -moz-transform: แปล Y (-100%); การแปลง: แปล Y (-100%); )

บล็อกข้อความพาเนลตั้งอยู่ภายในคอนเทนเนอร์ฐานและถูกกำหนดคลาสเฉพาะ class="message" โดยในนั้นเราจะระบุคุณสมบัติขององค์ประกอบทั้งหมดที่อยู่ภายในด้านนี้ สีและตระกูลแบบอักษร ขนาดรูปภาพ ฯลฯ .
แน่นอนว่าคุณสามารถทำได้โดยไม่ต้องบล็อกเพิ่มเติมนี้โดยการวางข้อความลงในคอนเทนเนอร์ฐานโดยตรง แต่จะสูญเสียความยืดหยุ่นในการตั้งค่าแผงที่เป็นไปได้
ข้อความจะแสดงตรงกลางอย่างเคร่งครัดและขยายเป็นความกว้างที่ระบุ ความกว้างสูงสุด: 980px; ค่านี้เป็นค่าที่กำหนดเอง คุณสามารถเลือกขนาดที่แตกต่างกันโดยสิ้นเชิงได้

/* บล็อกข้อความ */ .message ( color: #fff; font-weight: 300; ตำแหน่ง: สัมพันธ์; การขยาย: 2em; ระยะขอบ: 0 อัตโนมัติ; ความกว้างสูงสุด: 980px ) /* ส่วนหัวระดับ 1 */ .message h1 ( color: #fff ) /* ส่วนหัวระดับ 2 */ .message h2 ( สี: #888 )

ต่อไป เราจะกำหนดสไตล์ที่จำเป็นทั้งหมดสำหรับสวิตช์แผงของเรา ขั้นแรก เรามาซ่อนธง type="ช่องทำเครื่องหมาย" ไม่ให้ผู้ใช้เห็นในแท็ก html โดยไม่ต้องกังวลใจอีกต่อไป มาเขียนแอตทริบิวต์ที่ซ่อนอยู่ซึ่งกำหนดว่าควรแสดงวัตถุในหน้าต่างเบราว์เซอร์หรือไม่

เปิด ( ตำแหน่ง: สัมบูรณ์; คลิป: สี่เหลี่ยมผืนผ้า (0 0 0 0); ความทึบ: 0; )

เตกู มากำหนด class="btn" กัน ซึ่งเราจะทำงานใน css เพื่อ "วาด" สวิตช์ที่ดีทีเดียว (ปุ่ม):

/* สวิตช์แผง */ฉลาก. btn ( จอแสดงผล: บล็อก; ตำแหน่ง: สัมบูรณ์; ขวา: 25px; ด้านบน: 100%; /*ด้านล่าง: -35px;*/ เคอร์เซอร์: ตัวชี้; พื้นหลัง: #2bbbad; รัศมีเส้นขอบ: 0 0 3px 3px; การขยาย: 8px 16px ; สี: #fff; ขนาดตัวอักษร: 100%; ความสูงบรรทัด: 1em; ข้อความ- จัดตำแหน่ง: กึ่งกลาง; - webkit- แบบอักษร- ปรับให้เรียบ: ลดรอยหยัก; เคอร์เซอร์: ตัวชี้; กล่อง- เงา: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; ดัชนี z: 9999 ) /* เปิดสวิตช์โฮเวอร์ */ฉลาก. btn: โฮเวอร์ ( - webkit- การเปลี่ยนแปลง: 0. 35s; - moz- การเปลี่ยนแปลง: 0. 35s; การเปลี่ยนแปลง: 0. 35s; กล่อง- เงา: 0 5px 11px 0 rgba (0 , 0 , 0 , 0.18 ) , 0 4px 15px 0 อาร์จีบีเอ(0 , 0 , 0 , 0.15 ) ) /* ลูกศรสวิตช์ลง */ฉลาก. btn: after ( content: "\f078" ; font: ปกติ 18px/ 1 FontAwesome; text- decoration: inherit )

/* สวิตช์แผง */ label.btn ( จอแสดงผล: บล็อก; ตำแหน่ง: สัมบูรณ์; ขวา: 25px; ด้านบน: 100%; /*ด้านล่าง: -35px;*/ เคอร์เซอร์: ตัวชี้; พื้นหลัง: #2bbbad; รัศมีเส้นขอบ: 0 0 3px 3px; การขยาย: 8px 16px; สี: #fff; ขนาดตัวอักษร: 100%; ความสูงบรรทัด: 1em; การจัดแนวข้อความ: กึ่งกลาง; -webkit-font-smoothing: ลดรอยหยัก; เคอร์เซอร์: ตัวชี้; กล่องเงา: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-index: 9999 ) /* Hover สลับ */ label.btn:hover ( - webkit -การเปลี่ยนแปลง: 0.35s; -moz-การเปลี่ยนแปลง: 0.35s; การเปลี่ยนแปลง: 0.35s; กล่องเงา: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) ) /* ลูกศรสวิตช์ลง */ label.btn:after ( เนื้อหา: "\f078"; แบบอักษร: ปกติ 18px/1 FontAwesome; การตกแต่งข้อความ: สืบทอด )

ลูกศรสวิตช์นำมาจากแพ็คเกจฟอนต์ไอคอน FontAwesome ดังนั้น ไฟล์สไตล์สำหรับชุดนี้จะต้องเชื่อมต่อกับเพจก่อน:

< link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="สไตล์ชีท">

คุณสามารถใช้สวิตช์ประเภทอื่นได้ เช่น ข้อความที่ตรงกันหรือสัญลักษณ์ html
ตามค่าเริ่มต้น ฉันกำหนดสถานะไว้สามสถานะสำหรับสวิตช์: เมื่อแผงปิด - ลูกศรลง เมื่อแผงเปิด - ลูกศรขึ้น และแน่นอนว่าเอฟเฟกต์โฮเวอร์เล็กน้อยเมื่อโฮเวอร์

เราเปิดใช้งานแผงควบคุมของเราและเปลี่ยนสถานะของสวิตช์โดยใช้ pseudo-class:checked
ด้วยการใช้คุณสมบัติ box-shadow ฉันเพิ่มเงาแสงที่ขอบด้านล่างของแผงที่ใช้งานอยู่ และใช้การเปลี่ยนแปลง ฉันตั้งค่าเอฟเฟกต์การเปลี่ยนแปลงอย่างง่ายระหว่างสองสถานะของแผง (เปิดและปิด)

. เปิด: ตรวจสอบแล้ว ~ . แผงด้านบน ( กล่อง - เงา: 0 2px 5px 0 rgba (0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba (0 , 0 , 0 , 0.12 ) ; - webkit- แปลง: แปล Y (0 ) ; - moz - การแปลง: แปล Y(0) ; การแปลง: แปล Y (0) ; - webkit- การเปลี่ยนแปลง: 0. 35s; - moz- การเปลี่ยนแปลง: 0. 35s; การเปลี่ยนแปลง: 0. 35s) เปิด: ไม่ (: ตรวจสอบแล้ว) ~ . แผงด้านบน ( - webkit- การเปลี่ยนแปลง: 0. 35s; - moz- การเปลี่ยนแปลง: 0. 35s; การเปลี่ยนแปลง: 0. 35s ) /* เปลี่ยนสีเมื่อคลิก */. เปิด: ตรวจสอบแล้ว ~ . แผงด้านบน > ป้ายกำกับ btn ( พื้นหลัง: #dd6149 ) /* สลับลูกศรขึ้น*/. เปิด: ตรวจสอบแล้ว ~ . แผงด้านบน > ป้ายกำกับ btn: หลัง ( เนื้อหา: "\f077" ; แบบอักษร: ปกติ 18px/ 1 FontAwesome )

เปิด: ตรวจสอบแล้ว ~ .top-panel ( กล่องเงา: 0 2px 5px 0 rgba (0, 0, 0, 0.16), 0 2px 10px 0 rgba (0, 0, 0, 0.12); -webkit-transform: แปล Y( 0); -moz-transform: แปล Y(0); การแปลง: แปล Y(0); -webkit-transition: 0.35s; -moz-transition: 0.35s; การเปลี่ยนแปลง: 0.35s ) .open:not(:checked) ~ .top-panel ( -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s ) /* เปลี่ยนสีเมื่อคลิก */ .open:checked ~ .top-panel > label.btn ( พื้นหลัง: #dd6149 ) /* ลูกศรสวิตช์ขึ้น*/ .open:checked ~ .top-panel > label.btn:after ( เนื้อหา: "\f077"; แบบอักษร: ปกติ 18px/1 FontAwesome )

หากต้องการเปลี่ยนขนาดตัวอักษรเมื่อดูบนหน้าจอต่างๆ ของอุปกรณ์ของผู้ใช้ ฉันใช้ @media media Queries เมื่อพิจารณาถึงความเป็นจริงสมัยใหม่ ฉันคิดว่าการเพิ่ม:

@media only screen และ (ความกว้างสูงสุด: 400px) (body (ขนาดตัวอักษร: 90%)) @media only screen และ (ความกว้างสูงสุด: 800px) (body (ขนาดตัวอักษร: 100%)) @media only screen และ (ความกว้างขั้นต่ำ: 1100px) ( เนื้อความ ( ขนาดตัวอักษร: 120% ) )

@media only screen และ (ความกว้างสูงสุด: 400px) ( body ( font-size: 90%) ) @media only screen และ (max-width: 800px) ( body ( font-size: 100% ) ) @media only screen และ (ความกว้างขั้นต่ำ: 1100px) ( เนื้อความ ( ขนาดตัวอักษร: 120% ) )

นั่นอาจเป็นทั้งหมด! แผงที่เลื่อนออกมาจากด้านบนพร้อมใช้งานแล้ว เหลือเพียงการเติมเนื้อหาลงไป ดูตัวอย่างสดอีกครั้ง ดาวน์โหลดไฟล์เก็บถาวรด้วยซอร์สโค้ด ทดลองใช้พารามิเตอร์ต่างๆ และสร้าง สร้าง สร้าง...

ด้วยความเคารพ แอนดรูว์

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

หมายเหตุ: บทความนี้ถือว่ามีความรู้ระดับกลางเกี่ยวกับ HTML และ CSS

แทนที่เมนูมาตรฐานด้วยแผงเลื่อนใน WordPress

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

ก่อนอื่น เราต้องเปิดโปรแกรมแก้ไขข้อความเช่น Notepad และสร้างไฟล์ใหม่ คัดลอกและวางโค้ดต่อไปนี้ลงไป:

(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( left: 0 ), "slow", function() ( $("#toggle" ).html(" "); )); ), function() ( $("#popout").animate(( ซ้าย: -250), "slow", function() ( $("#toggle").html(" "); )); )); ))(jQuery);

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

เปิดไคลเอนต์ FTP ของคุณ (Filezilla หรือ Total Commander) และเชื่อมต่อกับเว็บไซต์ของคุณ จากนั้นไปที่ไดเร็กทอรีของธีมของคุณและหากมีโฟลเดอร์อยู่ในนั้นแล้ว เจสแล้วเปิดมัน หากธีมของคุณไม่มีไดเร็กทอรีดังกล่าว ให้สร้างและอัปโหลดไฟล์ slidepanel.js ที่อยู่ภายใน

ขั้นตอนต่อไปคือการออกแบบหรือค้นหาไอคอนสำหรับเมนู ไอคอนที่ใช้มากที่สุดสำหรับสิ่งนี้คือไอคอนที่มีสามแท่ง คุณสามารถสร้างมันขึ้นมาในโปรแกรมแก้ไขกราฟิกใดก็ได้ (เช่น Photoshop) หรือค้นหาหนึ่งในโปรแกรมที่มีอยู่มากมายบน Google ในตัวอย่างนี้ เราจะใช้ขนาด 27x23px สำหรับไอคอน เมื่อคุณสร้างมันแล้ว ให้เปลี่ยนชื่อเป็น menu.png และอัปโหลดไปยังโฟลเดอร์รูปภาพในไดเร็กทอรีธีมของคุณ

ขั้นตอนต่อไปคือสำหรับแถบเมนูแบบเลื่อน คุณเพียงแค่ต้องคัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ ฟังก์ชั่น.phpหัวข้อ:

Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", จริง);

ตอนนี้งานเตรียมการทั้งหมดเสร็จสิ้นแล้ว คุณต้องแก้ไขเมนูธีมเริ่มต้น โดยทั่วไปแล้ว ธีมส่วนใหญ่จะแสดงเมนูการนำทางในไฟล์ header.phpหัวข้อ กำลังเปิด header.phpและค้นหาบรรทัดที่คล้ายกับสิ่งนี้:

"หลัก", "menu_class" => "เมนูนำทาง"); ?>

ความท้าทายคือการรวมเมนูธีมด้วยโค้ด HTML เพื่อแสดงแถบเมนูแบบเลื่อนบนหน้าจอขนาดเล็ก เราจะห่อมันไว้

"หลัก", "menu_class" => "เมนูนำทาง"); ?>

แทนที่ example.com ด้วยชื่อโดเมนของคุณและธีมของคุณด้วยโฟลเดอร์ธีมของคุณ บันทึกการเปลี่ยนแปลงของคุณ

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

หน้าจอ @media และ (ความกว้างขั้นต่ำ: 769px) ( #toggle ( จอแสดงผล:none; ) ) หน้าจอ @media และ (ความกว้างสูงสุด: 768px) ( #popout ( ตำแหน่ง: คงที่; ความสูง: 100%; ความกว้าง: 250px; พื้นหลัง : rgb(25, 25, 25); พื้นหลัง: rgba(25, 25, 25, .9); สี: ขาว; ด้านบน: 0px; ซ้าย: -250px; ล้น:อัตโนมัติ; ) #toggle ( float: ขวา; ตำแหน่ง : แก้ไขแล้ว; ด้านบน: 60px; ขวา: 45px; ความกว้าง: 28px; ความสูง: 24px; ) .nav-menu li ( border-bottom:1px solid #eee; padding:20px; width:100%; ) .nav-menu li :hover ( พื้นหลัง:#CCC; ) .nav-menu li a ( color:#FFF; การตกแต่งข้อความ:none; width:100%; ) )

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

แผงการแจ้งเตือน- วิธีที่มีประสิทธิภาพอย่างยิ่งในการกระตุ้นผู้ใช้ให้ย้ายไปยังหน้าที่ต้องการ นอกจากนี้ยังทำหน้าที่แสดงข้อมูลที่สำคัญเนื่องจากดึงดูดความสนใจของผู้ใช้อยู่เสมอ แผงบางแผงมีแบบฟอร์มสำหรับการป้อนข้อมูลและสามารถใช้เพื่อจัดระเบียบการสมัครรับข้อมูลรายชื่อผู้รับจดหมาย

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

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

การแจ้งเตือนที่กำหนดเอง

ปลั๊กอินพรีเมียมคุณภาพสูงที่มีฟังก์ชันที่จำเป็นทั้งหมดที่มีอยู่ในปลั๊กอินระดับนี้

แถบการแจ้งเตือนอาจมีข้อความธรรมดา แบบฟอร์มการกรอกอีเมลหรือบนเว็บไซต์ โซเชียลเน็ตเวิร์ก และตัวจับเวลาถอยหลัง

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

ราคา: $29

ปลั๊กอิน WordPress BugMeBar

แผงที่เรียบง่ายแต่สะดุดตาพร้อมเอฟเฟกต์สีที่สวยงามและสะดุดตามาก สามารถวางไว้ที่ใดก็ได้บนเพจ และนอกจากนี้ ยังสามารถตั้งค่าคุกกี้และไม่แสดงในการเข้าชมเพจครั้งต่อไปหากผู้ใช้ไม่ต้องการดูอีกต่อไปในทันที

คุณสมบัติอื่น ๆ ที่น่าสังเกต:

• การระบุหน้าที่แผงจะแสดงและจะไม่แสดง
• การตั้งค่าระยะเวลาความถูกต้องของคุกกี้
• ควบคุมลักษณะที่ปรากฏได้อย่างสมบูรณ์ รวมถึงการเลือกสี ความโปร่งใส ฯลฯ
• ความสามารถในการเปลี่ยนส่วนหัวคงที่ในขณะที่ยังคงรักษาความสมบูรณ์ของเค้าโครง
• ความสามารถในการเปิดหรือปิดใช้งานการขนส่งและภาพเคลื่อนไหว

ราคา: $12

สวัสดีบาร์

หนึ่งในความนิยมมากที่สุด แถบการแจ้งเตือนสำหรับ Wordpress. แล้ว ฟรีแม้ว่าในแง่ของฟังก์ชันการทำงานจะไม่ด้อยกว่ารุ่นพรีเมี่ยมก็ตาม
หากต้องการใช้ Hello bar เพียงไปที่ปลั๊กอินแล้วป้อน URL ของบล็อกของคุณ จากนั้น คุณจะถูกนำไปที่แผงการตั้งค่า ซึ่งคุณสามารถกำหนดตำแหน่งและรูปลักษณ์ของการแจ้งเตือนได้ นอกจากนี้ แผงการตั้งค่ายังมีฟังก์ชันแสดงตัวอย่าง ดังนั้นคุณจึงสามารถกำหนดรูปลักษณ์ที่ต้องการให้กับการแจ้งเตือนได้อย่างรวดเร็ว
หลังจากเสร็จสิ้นการตั้งค่า คุณจะได้รับส่วนของโค้ดที่คุณต้องวางลงในหน้าไซต์โดยตรง หากคุณรู้สึกว่าไม่มีคุณสมบัติเพียงพอสำหรับการดำเนินการนี้ คุณสามารถติดตั้งโปรแกรมที่จะทำงานประจำนี้ให้กับคุณได้

แถบส่งเสริมการขาย DW

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

Foobar – แถบการแจ้งเตือน WordPress

รีวิวนี้จะไม่สมบูรณ์หากฉันไม่ได้พูดถึง Foobar นี่เป็นหนึ่งในปลั๊กอินพรีเมียมที่ใช้กันอย่างแพร่หลายที่สุดในคลาสนี้ มันมีตัวเลือกการปรับแต่งมากกว่า 30 แบบ และแตกต่างจากตัวเลือกอื่น ๆ ตรงที่ให้คุณปรับแต่งแถบการแจ้งเตือนได้ แยกกันสำหรับแต่ละหน้า.

ราคา: $9

แถบการแจ้งเตือน WordPress

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

รอยัล ฟุตเตอร์ บาร์

Royal Footer Bar เป็นปลั๊กอินระดับสูงสุด "รอยัล" อย่างแท้จริง มันดูเป็นมืออาชีพมากและมีตัวเลือกมากมาย

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

จุดเด่นของปลั๊กอินนี้คือ นักพัฒนาเรียกมันว่าการทดสอบ A/B/C คุณสามารถตั้งค่าต่างๆ ได้ และหลังจากประเมินในสภาพแวดล้อมการทำงานของคุณแล้ว ให้เลือกการตั้งค่าที่เหมาะกับแนวคิดของไซต์มากที่สุด

ราคา: $39

แถบการแจ้งเตือน

ปลั๊กอินที่เรียบง่ายที่แสดง แผงการแจ้งเตือนที่ด้านบนหรือด้านล่างของหน้า มี 5 สีให้เลือกสำหรับข้อความหรือ