จะเพิ่มวิดเจ็ต WordPress ได้อย่างไร?การรวมธีม พื้นที่วิดเจ็ต

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

• การทำธีม ถ้าไม่มี XNUMX ฟังก์ชันนี้ ก็เหมือนซี่โครงไก่...

เฉิน เว่ยเหลียงในคราวที่แล้ว站ในบทช่วยสอนนี้ ฉันจะแบ่งปันวิธีการมอบธีม WordPressเพิ่มเมนูที่กำหนดเอง

บทความนี้อธิบายวิธีเพิ่มฟังก์ชันวิดเจ็ตที่กำหนดเองเมื่อสร้างธีม

เช่นเดียวกับการเพิ่มเมนูแบบกำหนดเองให้กับธีม วิดเจ็ตการเพิ่มแบบกำหนดเองใช้เวลาเพียง 3 ขั้นตอน

ขั้นตอนแรกการลงทะเบียนแกดเจ็ต

ในการใช้วิดเจ็ต คุณต้องลงทะเบียนก่อน เปิดไฟล์ functions.php ภายใต้ธีม WordPress

ในไฟล์ functions.php ให้เพิ่มโค้ดต่อไปนี้:

<?php

//侧边栏小工具
if ( function_exists('register_sidebar') ) {
    register_sidebar( array(
        'name' => __( 'Top Sidebar' ),
        'id' => 'top-sidebar',
        'description' => __( 'The top sidebar' ),
        'before_widget' => '<li>',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}

?>

แก้ไขแท็ก li และ h2 ใน functions.php เพื่อให้สอดคล้องกับแท็กใน sidebar.php:

ชื่อ li และโมดูล h2 ของ 'before_widget' และ 'after_widget' แก้ไขรหัสตามสถานการณ์จริง

(อาจจะไม่มีการดัดแปลง)

        'before_widget' => '<li>',
        'after_widget' => '</li>',

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

รหัสด้านบนลงทะเบียนพื้นที่วิดเจ็ตชื่อ "แถบด้านข้างด้านบน":

• ชื่อที่แสดงคือ "แถบด้านข้างด้านบน"
• เพิ่มแท็ก h2 ให้กับชื่อ
• รายการเนื้อหาถูกแท็กด้วย li

登录WordPress แบ็กเอนด์แดชบอร์ด ไปที่ ลักษณะที่ปรากฏ → วิดเจ็ต

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

ขั้นตอนที่สอง เรียกแกดเจ็ต

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

1) ในไฟล์ sidebar.php ใต้แท็ก li หรือ div ที่ใหญ่ที่สุด ให้แทรก ▼

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(top-sidebar) ) : ?>

2) ในไฟล์ sidebar.php ไฟล์ที่ใหญ่ที่สุดหรือด้านบน เพิ่ม ▼

<?php endif; ?>

ขั้นตอนที่ XNUMX: ตั้งค่าวิดเจ็ต

1) แกดเจ็ตได้รับการลงทะเบียนแล้ว และตำแหน่งที่แสดงยังถูกกำหนดไว้ในไฟล์ธีม

• คุณสามารถตั้งค่าพื้นที่กลุ่มวิดเจ็ตในพื้นหลัง WordPress ▼

2) หลังจากบันทึกแล้ว ให้รีเฟรชหน้าแรก

• แถบด้านข้างของเว็บไซต์ของเราจะมีลักษณะเหมือนภาพด้านล่าง ▼

คุณสามารถเห็นภาพด้านบน แสดงว่าแกดเจ็ตของเราถูกสร้างขึ้นและทำงานตามปกติ

จะเพิ่มวิดเจ็ต WordPress หลายอันในพื้นที่ต่างๆ ได้อย่างไร?

ทำซ้ำขั้นตอนที่ XNUMX และ XNUMX เพื่อให้ธีม WordPress ของคุณรองรับวิดเจ็ตในตำแหน่งต่างๆ

สมมติว่าคุณต้องเพิ่มวิดเจ็ตที่ส่วนหัว แถบด้านข้าง และด้านล่างของธีม

1) ขั้นแรก คุณต้องคัดลอกโค้ดต่อไปนี้ลงในไฟล์ functions.php ▼

if (function_exists('register_sidebar')) {

register_sidebar(array(
'name' => 'Header',
'id' => 'header',
'description' => 'This is the widgetized header.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'This is the widgetized sidebar.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'Footer',
'id' => 'footer',
'description' => 'This is the widgetized footer.',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));

}

2) จากนั้น เพิ่มโค้ดต่อไปนี้ลงในไฟล์ header.php, sidebar.php และ footer.php ตามลำดับ

header.php ▼

<div id="widgetized-header">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

<div>
<p><strong>Widgetized Header</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

sidebar.php ▼

<div id="widgetized-sidebar">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

<div>
<p><strong>Widgetized Sidebar</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

footer.php ▼

<div id="widgetized-footer">

<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

<div>
<p><strong>Widgetized Footer</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>

<?php endif; ?>

</div>

นี่คือความสำเร็จ!

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

ต่อไป แบ่งปันเคล็ดลับในการใช้วิดเจ็ตใน WordPress

WordPress Theme Integration Widget เคล็ดลับ

จัดการวิดเจ็ตที่กำหนดเองอย่างมีประสิทธิภาพ:

1) หลังจากเพิ่มวิดเจ็ตในธีมแล้ว คุณสามารถสร้างไฟล์แยกต่างหากและตั้งชื่อมันได้widgets.php.

• เพื่อบันทึกโค้ดวิดเจ็ตที่กำหนดเองทั้งหมดที่เพิ่มในขั้นตอนที่ 1 ลงในโฟลเดอร์นี้

2) เพิ่มรหัสลงในไฟล์ functions.php:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

3) บันทึกโค้ดวิดเจ็ตวิดเจ็ตที่กำหนดเองทั้งหมดที่เพิ่มในขั้นตอนที่ 1 ลงในไฟล์ widgets.php

วิธีนี้ช่วยให้มั่นใจได้ว่าวิดเจ็ตทั้งหมดจะโหลดได้อย่างราบรื่นและทำงานบน WordPress ทุกรุ่นที่รองรับวิดเจ็ต

ด้วยวิธีนี้ คุณสามารถจัดการไฟล์ธีม WordPress ของคุณได้อย่างมีประสิทธิภาพมากขึ้น