วิธีการเพิ่มวิดเจ็ต WordPress ในส่วนหัวของเว็บไซต์ของคุณ

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


เพิ่มวิดเจ็ต WordPress ที่ส่วนหัวของเว็บไซต์ของคุณ

บันทึก: นี่คือบทช่วยสอนระดับกลาง คุณจะต้องเพิ่มรหัสลงในไฟล์ธีม WordPress ของคุณและเขียน CSS.

ทำไมและเมื่อคุณต้องการ Widget ส่วนหัวบนเว็บไซต์ของคุณ?

วิดเจ็ตช่วยให้คุณเพิ่มบล็อกเนื้อหาลงในพื้นที่ที่กำหนดในธีม WordPress ของคุณได้อย่างง่ายดาย พื้นที่ที่กำหนดเหล่านี้เรียกว่าแถบด้านข้างหรือพื้นที่พร้อมวิดเจ็ต.

พื้นที่พร้อมวิดเจ็ตในส่วนหัวหรือก่อนเนื้อหาสามารถใช้แสดงโฆษณาบทความล่าสุดหรืออะไรก็ได้ที่คุณต้องการ.

พื้นที่เฉพาะนี้เรียกว่า ‘ครึ่งหน้าล่าง’ และไซต์ยอดนิยมทั้งหมดใช้เพื่อแสดงสิ่งที่สำคัญจริงๆ.

ส่วนหัวบนเว็บไซต์ List25 ยอดนิยม

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

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

ขั้นตอนที่ 1 การสร้างพื้นที่ Widget ส่วนหัว

อันดับแรกเราต้องสร้างพื้นที่วิดเจ็ตที่กำหนดเอง ขั้นตอนนี้จะช่วยให้คุณเห็นพื้นที่วิดเจ็ตที่กำหนดเองของคุณใน หน้าตา»วิดเจ็ต หน้าในแดชบอร์ด WordPress ของคุณ.

คุณจะต้องเพิ่มรหัสนี้ลงในไฟล์ functions.php ของชุดรูปแบบของคุณ.

ฟังก์ชั่น wpb_widgets_init () {

register_sidebar (อาร์เรย์ (
‘name’ => ‘พื้นที่เครื่องมือส่วนหัวที่กำหนดเอง’,
‘id’ => ‘ที่กำหนดเองหัววิดเจ็ต’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

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

ตอนนี้คุณสามารถไปที่ หน้าตา»วิดเจ็ต หน้าและคุณจะเห็นพื้นที่วิดเจ็ตใหม่ที่ชื่อว่า ‘พื้นที่เครื่องมือส่วนหัวที่กำหนดเอง’.

พื้นที่วิดเจ็ตส่วนหัวที่กำหนดเอง

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

ขั้นตอนที่ 2: แสดงวิดเจ็ตส่วนหัวที่กำหนดเองของคุณ

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

นั่นเป็นเพราะเรายังไม่ได้บอก WordPress ว่าจะแสดงพื้นที่วิดเจ็ตนี้ที่ไหน.

มาทำกันในขั้นตอนนี้.

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

<?PHP

ถ้า (is_active_sidebar (‘custom-header-widget’)): ?>

<?php dynamic_sidebar (‘custom-header-widget’); ?>

<?php endif; ?>

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

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

วิดเจ็ตส่วนหัวที่ไม่มีการจัดรูปแบบ

คุณจะสังเกตเห็นว่ามันดูขัดมันเล็กน้อย ที่ซึ่งคุณจะต้องใช้ CSS เพื่อทำให้ดูดีขึ้น.

ขั้นตอนที่ 3: กำหนดสไตล์ส่วนหัว Widget ของคุณโดยใช้ CSS

คุณจะต้องเพิ่ม CSS เพื่อควบคุมวิธีที่พื้นที่วิดเจ็ตส่วนหัวและแต่ละวิดเจ็ตภายในแสดงขึ้นอยู่กับธีมของคุณ.

วิธีที่ง่ายกว่าคือการใช้ CSS Hero plugin จะช่วยให้คุณใช้ส่วนติดต่อผู้ใช้ที่ใช้งานง่ายเพื่อเปลี่ยน CSS ของธีม WordPress ใด ๆ สำหรับรายละเอียดเพิ่มเติมดูรีวิว CSS Hero ของเรา.

หากคุณไม่ต้องการใช้ปลั๊กอินคุณสามารถเพิ่ม CSS ที่กำหนดเองในธีมของคุณได้โดยไปที่ หน้าตา»ปรับแต่ง หน้า.

สิ่งนี้จะเปิดใช้ส่วนต่อประสานตัวกำหนดค่าธีม WordPress คุณจะต้องคลิกที่แท็บ “CSS เพิ่มเติม”.

การเพิ่ม CSS ที่กำหนดเองให้กับธีม WordPress

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

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

นี่คือตัวอย่าง CSS ที่จะช่วยคุณเริ่มต้นใช้งาน.

div # header-widget-area {
ความกว้าง: 100%;
สีพื้นหลัง: # f7f7f7;
border-bottom: 1px solid #eeeeee;
จัดเรียงข้อความ: กึ่งกลาง;
}
h2.chw-title {
margin-top: 0px;
จัดเรียงข้อความ: ซ้าย;
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
ขนาดตัวอักษร: เล็ก;
พื้นหลังสี: #feffce
ความกว้าง: 130px;
การขยาย: 5px;
}

นี่คือลักษณะที่วิดเจ็ตส่วนหัวที่กำหนดเองของเราดูในธีมยี่สิบเจ็ดเริ่มต้น.

ตัวอย่างของวิดเจ็ตส่วนหัว

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map