วิธีแสดงแถบด้านข้างของเนื้อหาสำหรับหน้า WordPress หรือประเภทโพสต์

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

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

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

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

พร้อมที่จะไป? แล้วมาแตกร้าวกัน

ประเด็นของแถบด้านข้างที่รับรู้เนื้อหาคืออะไร

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

ปรากฏว่ามีกรณีการใช้งานมากมายที่ควรใช้แถบด้านข้างที่รับรู้เนื้อหา:

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

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

วิธีใช้งาน Content Aware Sidebars ใน WordPress

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

หลังจากนั้น แถบด้านข้างมักจะเปลี่ยนด้วยวิธีใดวิธีหนึ่งจากสามวิธี:

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

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

ใช้การมองเห็นวิดเจ็ต Jetpack เพื่อกรองวิดเจ็ต

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

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

เงื่อนไขการมองเห็นมีดังนี้

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

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

Content Aware Sidebars ช่วยให้คุณสามารถตั้งค่าแถบด้านข้างแบบกำหนดเองได้

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

หลังการติดตั้ง คุณจะพบรายการเมนูใหม่ที่ชื่อว่า Sidebars ในเมนู WordPress

เมื่อคุณเลือก เพิ่มใหม่ ที่นี่ คุณจะเข้าสู่หน้าจอนี้:

ที่นี่ สิ่งแรกที่ต้องทำคือตั้งชื่อแถบด้านข้างของคุณ หลังจากนั้นก็ถึงเวลาตั้งค่าเงื่อนไขการแสดง ตัวเลือกที่มีให้นั้นคล้ายกับ Jetpack:

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

การตั้งค่าเพิ่มเติม:

• กำหนดการ — ตั้งเวลาสำหรับการแสดงแถบด้านข้าง ในเวอร์ชันฟรีคุณถูกจำกัดให้เต็มวัน เวอร์ชัน Pro ให้ช่วงเวลาที่ละเอียดยิ่งขึ้น
• การออกแบบ — เพิ่มคลาส CSS ที่กำหนดเองให้กับแถบด้านข้าง วิดเจ็ต และชื่อวิดเจ็ตเพื่อจัดการ
• ขั้นสูง — กำหนดลำดับของแถบด้านข้างของคุณ (ในกรณีที่มีมากกว่าหนึ่ง)

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

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

สร้างแถบด้านข้างแบบกำหนดเองด้วยตนเอง

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

สิ่งแรกที่ต้องทำเพื่อสร้างแถบด้านข้างที่กำหนดเองคือการลงทะเบียนพื้นที่วิดเจ็ตใหม่ สำหรับสิ่งนั้น เพียงป้อนรหัสต่อไปนี้ลงใน functions.php ของธีม (ลูก):

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

ด้วยสิ่งนี้:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

หลังจากนั้น นั่นคือผลลัพธ์สุดท้ายที่ส่วนหน้า:

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

วิธีเพิ่มเติมในการใช้งาน Content Aware Sidebars

นอกจากตัวเลือกด้านบนแล้ว เรายังมีปลั๊กอินอีกสองสามตัวที่มีฟังก์ชันการทำงานที่คล้ายคลึงกัน

ลอจิกวิดเจ็ต

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

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

แถบด้านข้างที่กำหนดเอง

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

Simple Page Sidebars

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

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

เนื้อหาเกี่ยวกับแถบด้านข้างโดยสังเขป

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

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

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

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

ภาพขนาดย่อของบทความโดย Kit8.net/ shutterstock.com