คุณต้องการเพิ่มวิดเจ็ต WordPress ในส่วนหัวของเว็บไซต์หรือไม่?
วิดเจ็ตช่วยให้คุณสามารถเพิ่มบล็อกของเนื้อหาในส่วนที่กำหนดของธีม WordPress ของคุณได้อย่างง่ายดาย
ในบทช่วยสอนนี้เราจะแสดงวิธีเพิ่มวิดเจ็ต WordPress ให้กับส่วนหัวของเว็บไซต์ของคุณ
หมายเหตุ: นี่คือบทช่วยสอนระดับกลาง คุณจะต้องเพิ่มรหัสในไฟล์ ไฟล์ของธีม WordPress ของคุณ และใช้ CSS เป็นหลัก
แต่ก่อนที่จะแก้ไขใด ๆ ค้นพบของเรา ปลั๊กอิน 5 WordPress เพื่อสำรองบล็อกของคุณ หรือ วิธีการติดตั้งธีม WordPress et วิธีการหลายปลั๊กอินที่ฉันควรจะติดตั้งบน WordPress.
ถ้าอย่างนั้นเราก็กลับไปดูว่าทำไมเราถึงมาที่นี่
ทำไมและเมื่อไหร่ที่คุณต้องเพิ่มวิดเจ็ตในส่วนหัว?
วิดเจ็ตช่วยให้คุณสามารถเพิ่มบล็อกเนื้อหาลงในพื้นที่ที่กำหนดในธีม WordPress ของคุณได้อย่างง่ายดาย พื้นที่ที่กำหนดเหล่านี้เรียกว่า " แถบด้านข้าง "หรือพื้นที่ของ" วิดเจ็ต'
สามารถใช้พื้นที่วิดเจ็ตบนส่วนหัวเพื่อแสดงโฆษณาบทความล่าสุดหรืออะไรก็ตามที่คุณต้องการ
โดเมนนี้ใช้กับเว็บไซต์ยอดนิยมทั้งหมดเพื่อแสดงข้อมูลที่สำคัญจริงๆ
ค้นพบด้วย วิธีเพิ่มวิดเจ็ตที่กำหนดเองหลังจากโพสต์บน WordPress
ตามกฎทั่วไปแล้ว ธีม WordPress เพิ่มแถบด้านข้างถัดจากเนื้อหาหรือในพื้นที่ส่วนท้าย ธีม WordPress น้อยมากเพิ่มพื้นที่วิดเจ็ตเหนือเนื้อหาหรือในส่วนหัว
เรายังแนะนำให้ค้นพบของเรา กวดวิชา MailChimp ในภาษาฝรั่งเศส: คู่มือที่สมบูรณ์เพื่อสร้างจดหมายข่าว
นั่นเป็นเหตุผลในบทช่วยสอนนี้เราจะแสดงวิธีเพิ่มพื้นที่วิดเจ็ตในส่วนหัวของเว็บไซต์ WordPress ของคุณ
ขั้นตอนที่ 1: สร้างพื้นที่วิดเจ็ต
ก่อนอื่นเราต้องสร้างพื้นที่วิดเจ็ตที่กำหนดเอง ขั้นตอนนี้จะช่วยให้คุณเห็นพื้นที่วิดเจ็ตที่กำหนดเองใน " ลักษณะที่ปรากฏ> วิดเจ็ต บนแผงควบคุม WordPress ของคุณ
คุณจะต้องเพิ่มรหัสนี้ลงในไฟล์ functions.php จากธีมของคุณ
ฟังก์ชัน bpc_widgets_init () {register_sidebar (array ('name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');
รหัสนี้จะบันทึกแถบด้านข้างหรือพื้นที่วิดเจ็ตใหม่ในธีม WordPress ของคุณ
หากคุณไม่เคยติดตั้ง WordPress ไว้ในเครื่องให้ค้นหา วิธีการติดตั้ง WordPress ไว้บนเครื่อง PC / Windows ด้วย XAMPP
คุณสามารถไปที่ " ลักษณะที่ปรากฏ> วิดเจ็ต และคุณจะเห็นพื้นที่วิดเจ็ตใหม่ระบุว่า " พื้นที่ Widget ส่วนหัวที่กำหนดเอง '
ไปข้างหน้าและเพิ่มวิดเจ็ตข้อความในพื้นที่ที่สร้างขึ้นใหม่และบันทึกไว้
ลองด้วย คำแนะนำของเราเกี่ยวกับการเพิ่มวิดเจ็ต.
ขั้นตอนที่ 2: แสดงวิดเจ็ตของคุณในส่วนหัว
หากคุณเข้าชมเว็บไซต์ของคุณคุณจะไม่เห็นวิดเจ็ตข้อความที่คุณเพิ่งเพิ่มเข้าไป
เพราะเรายังไม่ได้แสดงวิธีการแสดงโซนของ วิดเจ็ตที่กำหนดเอง WordPress
นี่คือสิ่งที่เราจะทำในขั้นตอนนี้
นี่คือรายการของคุณด้วย 5 ปลั๊กอิน WordPress ที่สำคัญเพื่อเพิ่มรายได้บล็อกของคุณ
คุณจะต้องแก้ไขไฟล์ header.php ในธีม WordPress ของคุณและเพิ่มรหัสนี้ในตำแหน่งที่คุณต้องการแสดงวิดเจ็ต
อย่าลืมบันทึกการเปลี่ยนแปลงของคุณ
จากนั้นคุณสามารถเยี่ยมชมเว็บไซต์ของคุณและคุณจะเห็นวิดเจ็ตข้อความในส่วนหัวของคุณ
ผลลัพธ์ที่ได้จะไม่น่าดึงดูดที่สุด นั่นเป็นเหตุผลที่คุณจะต้องใช้ CSS เพื่อให้แสดงอย่างถูกต้อง
ขั้นตอนที่ 3: กำหนดสไตล์ให้กับส่วนหัว CSS ของคุณ
ขึ้นอยู่กับธีม WordPress ของคุณคุณจะต้องเพิ่มโค้ด CSS เพื่อควบคุมวิธีแสดงส่วนหัวและวิดเจ็ต
วิธีที่ง่ายที่สุดวิธีหนึ่งคือการใช้ CSS Hero ส่วนหลังช่วยให้คุณใช้อินเทอร์เฟซผู้ใช้ที่ใช้งานง่ายเพื่อแก้ไข CSS ของธีม WordPress
เราขอแนะนำให้คุณค้นพบสิ่งนี้ คุณสามารถทำอะไรกับปลั๊กอิน WordPress ดินสอสีเหลือง?
หากคุณไม่ต้องการใช้ปลั๊กอินคุณสามารถเพิ่ม CSS ที่กำหนดเองในธีม WordPress ของคุณได้โดยไปที่ " ลักษณะ»ปรับแต่ง เพื่อปรับแต่งธีม WordPress
อ่านบทความของเราเกี่ยวกับ ปลั๊กอิน WordPress 10 เพื่อปรับปรุงปริมาณการใช้งานของบล็อก
เพื่อให้คุณแสดงอินเทอร์เฟซ WordPress Customizer คุณจะต้องคลิกที่ปุ่ม " CSS เพิ่มเติม '
แท็บ« CSS เพิ่มเติม ใน " Customizer ช่วยให้คุณเพิ่ม CSS ที่กำหนดเองของคุณในขณะที่ดูการเปลี่ยนแปลงในหน้าตัวอย่างทางด้านขวา
ด้วยเหตุผลที่มีมาจากบทช่วยสอนนี้เราคิดว่าคุณจะใช้พื้นที่นี้เพื่อเพิ่มวิดเจ็ตเดียวเพื่อแสดงโฆษณาแบนเนอร์หรือวิดเจ็ตเมนูที่กำหนดเอง
นี่คือตัวอย่างของ CSS เพื่อช่วยคุณเริ่มต้น:
div # หัวเครื่องมือพื้นที่ {กว้าง: 100%; สีพื้นหลัง: #f7f7f7; ขอบล่าง: #eeeeee 1px ของแข็ง text-align: ศูนย์; } H2.chw ชื่อ {ขอบด้านบน: 0px; text-align: ซ้าย; ข้อความเปลี่ยน: พิมพ์ใหญ่; font-size: เล็ก ๆ น้อย ๆ สีพื้นหลัง: #feffce; ความกว้าง: 130px; padding: 5px; }
นี่คือวิธีที่วิดเจ็ตที่กำหนดเองของเราจะแสดงในส่วนหัวของธีมยี่สิบเจ็ด
ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง
คุณสามารถใช้อื่นๆ ปลั๊กอิน WordPress เพื่อให้ดูทันสมัยและเพิ่มประสิทธิภาพการจัดการบล็อกหรือเว็บไซต์ของคุณ
เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้
1 เคล็ดลับเครื่องมือของ Smart4
Smart4y Tooltip เป็น WordPress ปลั๊กอิน เครื่องมือที่ยืดหยุ่นซึ่งอุทิศให้กับการสร้างคำแนะนำเครื่องมือที่ทันสมัยโดยไม่ต้องพึ่งพาไลบรารี Javascript มันตอบสนองอย่างเต็มที่และมีความเป็นไปได้ในการแทรกเนื้อหา HTML
โปรแกรมแก้ไขแบบ WYSIWYG ของมันจะช่วยให้คุณสามารถสร้างคำแนะนำเครื่องมือแต่ละรายการได้โดยไม่ต้องป้อนรหัสใด ๆ แต่ถ้าคุณเต็มใจคุณก็สามารถทำได้
ค้นพบยังของเรา ปลั๊กอิน WordPress 10 เพื่อประเมินบทความจากบล็อกของคุณ
คุณสมบัติอื่น ๆ ได้แก่ : การสนับสนุนหน้าตัวสร้าง, เค้าโครงที่ตอบสนองอย่างเป็นธรรม, ความสามารถในการกำหนดพารามิเตอร์ส่วนกลางสำหรับคำแนะนำเครื่องมือทั้งหมดหรือกำหนดพารามิเตอร์เฉพาะสำหรับคำแนะนำเครื่องมือแต่ละรายการ, รองรับเอฟเฟกต์ภาพที่กำหนดไว้ล่วงหน้า, การคำนวณตำแหน่งของคำแนะนำเครื่องมือบนหน้าต่างที่ปรับขนาด, เอกสารรายละเอียด ฯลฯ ….
ดาวน์โหลด | การสาธิต | เว็บโฮสติ้ง
2 Justified
Le WordPress ปลั๊กอิน Justified เป็นปลั๊กอินแกลเลอรีแบบตอบสนองที่จัดวางภาพขนาดย่อของคุณในตารางที่ปรับให้เหมาะสมโดยใช้ jQuery เช่นบน Flickr
มันนำคุณสมบัติที่จะแยกแยะแกลเลอรี่ของคุณจากคู่แข่ง!
คุณสมบัติหลักคือ: เลย์เอาต์ที่ตอบสนอง, เอฟเฟกต์สะพานลอยพิเศษ, การปรับแนวกริดอัตโนมัติ, เครื่องมือแก้ไขรหัสย่อลักษณะจปรับแต่งได้อย่างสมบูรณ์การสนับสนุนของ pผู้ดูและ อื่น ๆ อีกมากมาย…
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 อีเมลกำหนดการ
ce WordPress ปลั๊กอิน ตามชื่อที่แนะนำช่วยให้คุณสามารถกำหนดเวลาการเผยแพร่ทางอีเมลบนเว็บไซต์ของคุณได้ มันเป็นส่วนหนึ่งของส่วนขยายปลั๊กอิน WordPress “ติดตามโพสต์บล็อกของฉัน”
ตอนนี้คุณจะสามารถกำหนดเวลาเผยแพร่อีเมลของคุณตามชั่วโมงวันหรือสัปดาห์ได้
อ่านบทความของเราเกี่ยวกับ ปลั๊กอิน WordPress 10 เพื่อใช้แผนที่บนเว็บไซต์ของคุณ
มีความเป็นไปได้ในการส่งอีเมลรวมสำหรับการแจ้งเตือนทั้งหมดแทนที่จะเป็นอีเมลแต่ละฉบับสำหรับการแจ้งเตือนแต่ละครั้งและยังช่วยให้สามารถกำหนดเทมเพลตอีเมลที่แตกต่างกันสำหรับอีเมลที่แตกต่างกันในที่สุดเพื่อให้การรับอีเมลของคุณย่อยง่ายขึ้น .
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
ทรัพยากรที่แนะนำ
ค้นหาข้อมูลเกี่ยวกับแหล่งข้อมูลที่แนะนำอื่น ๆ เพื่อช่วยคุณสร้างและจัดการเว็บไซต์ของคุณ
- วิธีการสร้างเอกสาร Excel และ Word บน WordPress
- วิธีปรับแต่งโลโก้ WordPress ของแดชบอร์ด
- วิธีการหาไฟล์ที่จะแก้ไขธีม WordPress
- วิธีปรับแต่ง CSS ของเว็บไซต์ WordPress ของคุณ
สรุป
แค่นั้นแหละ! สำหรับการกวดวิชานี้ฉันหวังว่ามันจะช่วยให้คุณเพิ่มพื้นที่วิดเจ็ตในส่วนหัวของธีม WordPress ของคุณ อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress
หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.
...
ไฮ! ฉันต้องการทราบว่าคุณมีโอกาสที่จะบอกวิธีใส่ "ช่องข้อมูล" ที่คล้ายกับที่ใช้ในตอนต้นของบทความนี้หรือไม่รวมถึงปุ่มที่คลิกได้ถัดจาก "ดาวน์โหลด" และ "สเปรดชีต" เลย์เอาต์ดีมาก ขอบคุณ!
โค้ดที่เพิ่ม header.php ไม่ทำงาน
ครับผมลองแล้ว แท้จริงแล้วหน้าวิดเจ็ตเป็นเอาต์พุตที่กำหนดการเพิ่มวิดเจ็ต และฉันเพิ่มมัน เมื่อขั้นตอนที่ 2 ไม่สามารถป้อนรหัสในส่วนหัว php เดา 2 ผิดพลาดอะไรครับ?
ในโค้ดแรกที่แสดงซึ่งก็คือการสร้างพื้นที่วิดเจ็ตใหม่ให้เริ่มด้วยการพิมพ์ "function" แต่ฉันจะบอกว่ามันขึ้นต้นด้วย "function" อันที่จริงรหัสนี้มีข้อผิดพลาดหลายประการซึ่งทำให้ผิดพลาดขณะเขียน ฉันขอขอบคุณที่ได้รับการแก้ไข
ตกลง
🙂ทุกอย่างเรียบร้อยไม่มีใครในคำแนะนำของพวกเขาเท่านั้นที่อธิบายว่าจะเพิ่มโค้ดใน“ functions.php ได้ที่ไหน !!! “ เป็นเรื่องสำคัญ! ทุกคนใช้ธีม "ที่แตกต่างกัน" ...
สวัสดี
ขอบคุณสำหรับการสนับสนุนเหล่านี้
ฉันรู้วิธีเพิ่มแถบค้นหาในส่วนหัวส่วนบุคคล ในทางกลับกันการปรับแต่งสไตล์ให้เป็นส่วนตัวนั้นซับซ้อนกว่า ...
ฉันต้องการเปลี่ยนขนาดตำแหน่ง (ที่ไม่ใช้ความกว้างทั้งหมดของส่วนหัว) รวมถึงสีพื้นหลัง
Merci d'avance
สวัสดีโทมัส
ต้องใช้ความรู้เกี่ยวกับ CSS สักนิดหน่อย แต่ผมขอแนะนำให้ใช้ปลั๊กอิน WordPress อันยอดเยี่ยมนี้: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand