วิธีแสดงแถบด้านข้างต่างๆ สำหรับบทความและหน้าใน WordPress

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

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

ทำไมคุณอาจต้องการแถบด้านข้างที่แตกต่างกัน

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

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

มาครอบคลุมวิธีการแบบแมนนวลกันก่อน

วิธีสร้างแถบด้านข้าง WordPress ใหม่ด้วยตนเอง

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

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

เปิดไฟล์และค้นหาฟังก์ชันสำหรับโค้ดด้านข้าง โดยทั่วไปจะประกอบด้วย register_sidebar และฟังก์ชันเต็มรูปแบบอาจมีลักษณะดังนี้:

function twentyseventeen_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Blog Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-1',

'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'       => __( 'Footer 1', 'twentyseventeen' ),

'id'         => 'sidebar-2',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);


register_sidebar(

array(

'name'      => __( 'Footer 2', 'twentyseventeen' ),

'id'         => 'sidebar-3',

'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ),

'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', 'twentyseventeen_widgets_init' );

ตอนนี้คัดลอกฟังก์ชันทั้งหมดและสร้างไฟล์ functions.php ในธีมย่อยของคุณ (หากคุณยังไม่มี) และวางโค้ด อย่าลืมเปลี่ยนชื่อฟังก์ชัน

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

function twentyseventeen_new_widgets_init() {

register_sidebar(

array(

'name'       => __( 'Wordpress Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-4',

'description'   => __( 'Add widgets here to appear in your sidebar on wordpress related blog posts.', 'twentyseventeen' ),

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget'  => '</section>',

'before_title'  => '<h2 class="widget-title">',

'after_title'   => '</h2>',

)

);



register_sidebar(

array(

'name'       => __( 'Web Design Sidebar', 'twentyseventeen' ),

'id'         => 'sidebar-5',

'description'   => __( 'Add widgets here to appear in your sidebar on web design related blog posts.', 'twentyseventeen' ),

'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', 'twentyseventeen_new_widgets_init' );

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

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

สำหรับตัวอย่างนี้จะอยู่ใน sidebar.php คัดลอกไฟล์จากธีมหลักแล้ววางลงในธีมย่อยของคุณ

หากคุณตรวจสอบไฟล์ ไฟล์จะเรียก sidebar-1 ซึ่งเป็น id ของแถบด้านข้างขวาหลัก

<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">

<?php dynamic_sidebar( 'sidebar-1' ); ?>

</aside>

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

แนวทางที่ขับเคลื่อนด้วยเทมเพลต

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

/* Template Name: WordPress Sidebar

* Template Post Type: post*/

ในทำนองเดียวกัน ฉันได้สร้างเทมเพลตอื่นชื่อ webdesign-post.php

ตอนนี้ กลับไปที่ไฟล์ sidebar.php ของธีมลูกและเพิ่มเงื่อนไขง่ายๆ เพื่อตรวจสอบว่าเทมเพลตใดใช้งานอยู่ สำหรับสิ่งนี้ เราจะใช้ is_page_template()

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

<?php

if ( is_page_template('wordpress-post.php') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( is_page_template('webdesign-post.php') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

ตอนนี้ มาสร้างโพสต์ใหม่และกำหนดเทมเพลตที่เราเพิ่งสร้างขึ้น

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

แนวทางการขับเคลื่อนตามหมวดหมู่

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

<?php

if ( in_category('wordpress') ) {

dynamic_sidebar( 'sidebar-4' );

}elseif ( in_category('web-design') ){

dynamic_sidebar( 'sidebar-5' );

}else{

dynamic_sidebar( 'sidebar-1' );

}

?>

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

โดยพื้นฐานแล้ว คุณเพียงแค่ต้องปรับเงื่อนไข sidebar.php ตามความต้องการเฉพาะของคุณ

วิธีสร้างแถบด้านข้างแบบกำหนดเองด้วยปลั๊กอิน WordPress

หากคุณประสบปัญหาในการสร้างแถบด้านข้างด้วยตนเอง คุณสามารถลองใช้ปลั๊กอิน WordPress ที่มีประโยชน์ซึ่งช่วยให้คุณสร้างแถบด้านข้างได้อย่างง่ายดาย!

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

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

แถบด้านข้าง > เพิ่มใหม่

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

คุณสามารถกำหนดเวลาแถบด้านข้างของคุณได้จากแท็บกำหนดการ และแก้ไขแท็ก HTML ในแท็บการออกแบบ

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

เมื่อเผยแพร่แถบด้านข้างแล้ว คุณสามารถเข้าถึงได้จากส่วนลักษณะที่ ปรากฏ > วิดเจ็ต

แถบด้านข้างใหม่นี้จะปรากฏบนหน้าและโพสต์โดยอัตโนมัติตามการตั้งค่าของคุณ

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

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

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

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

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

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

บทสรุป

ผู้ฝึกงานด้านการออกแบบของ Flywheel, Rese และ Art Director, Andrea

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

พร้อมสำหรับการกวดวิชาอื่นหรือไม่ ลองอย่างใดอย่างหนึ่งต่อไปนี้:

• วิธีเพิ่มปุ่ม back-to-top แบบเหนียวบนเว็บไซต์ของคุณ
• วิธีสร้างเทมเพลตโพสต์เดียวแบบกำหนดเอง
• วิธีทำให้ไซต์ WordPress ของคุณเป็นมิตรกับอุปกรณ์เคลื่อนที่
• วิธีโคลนไซต์ WordPress ของคุณ