ข้ามไปยังเนื้อหาหลัก

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

Divi: ธีม WordPress ที่ใช้ง่ายที่สุด

Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

ขึ้น ดาวน์โหลด 701.000 แล้วDivi เป็นธีม WordPress ที่ได้รับความนิยมมากที่สุดในโลก สมบูรณ์และใช้งานง่ายและมาพร้อมกับเทมเพลตฟรีมากกว่า 62 [แนะนำ]

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

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

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

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

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

ถ้าอย่างนั้นเราก็กลับไปดูว่าทำไมเราถึงมาที่นี่ 

ทำไมและเมื่อไหร่ที่คุณต้องเพิ่มวิดเจ็ตในส่วนหัว?

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

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

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

ค้นพบด้วย วิธีเพิ่มวิดเจ็ตที่กำหนดเองหลังจากโพสต์บน WordPress

widget widgeteeee ในหัว 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 ส่วนหัวที่กำหนดเอง '

ใหม่โซนวิดเจ็ต WordPress

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

Elementor ช่วยให้คุณสร้างการออกแบบเว็บไซต์ได้อย่างง่ายดายด้วยรูปลักษณ์แบบมืออาชีพ หยุดจ่ายเงินแพงสำหรับสิ่งที่คุณสามารถทำได้ด้วยตัวเอง [ฟรี]

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

ลองด้วย คำแนะนำของเราเกี่ยวกับการเพิ่มวิดเจ็ต.

ขั้นตอนที่ 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 เพิ่มเติม WorDPress

คุณกำลังมองหาธีมและปลั๊กอิน WordPress ที่ดีที่สุดหรือไม่?

ดาวน์โหลดปลั๊กอินและธีม WordPress ที่ดีที่สุดใน Envato และสามารถสร้างเว็บไซต์ของคุณได้ง่ายๆ ดาวน์โหลดมากกว่า 49.720.000 [EXCLUSIVE]

แท็บ« 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 อื่น ๆ เพื่อสร้างรูปลักษณ์ที่ทันสมัยและปรับให้เหมาะกับบล็อกหรือเว็บไซต์ของคุณ

เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้

1 เคล็ดลับเครื่องมือของ Smart4

Smart4y Tooltip เป็นปลั๊กอิน WordPress ที่ยืดหยุ่นสำหรับการสร้างคำแนะนำเครื่องมือที่ทันสมัยโดยไม่ต้องพึ่งพาไลบรารี JavaScript มีการตอบสนองอย่างเต็มที่และมีความเป็นไปได้ในการแทรกเนื้อหา HTML

Smart4y Tooltip ปลั๊กอิน WordPress ที่ตอบสนอง

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

ค้นพบยังของเรา ปลั๊กอิน WordPress 10 เพื่อประเมินบทความจากบล็อกของคุณ

คุณสมบัติอื่น ๆ ได้แก่ : การสนับสนุนหน้าตัวสร้าง, เค้าโครงที่ตอบสนองอย่างเป็นธรรม, ความสามารถในการกำหนดพารามิเตอร์ส่วนกลางสำหรับคำแนะนำเครื่องมือทั้งหมดหรือกำหนดพารามิเตอร์เฉพาะสำหรับคำแนะนำเครื่องมือแต่ละรายการ, รองรับเอฟเฟกต์ภาพที่กำหนดไว้ล่วงหน้า, การคำนวณตำแหน่งของคำแนะนำเครื่องมือบนหน้าต่างที่ปรับขนาด, เอกสารรายละเอียด ฯลฯ ….

ดาวน์โหลด | การสาธิต | เว็บโฮสติ้ง

2 Justified

ปลั๊กอิน WordPress Justified เป็นปลั๊กอินแกลเลอรีที่ตอบสนองซึ่งจัดแนวรูปขนาดย่อของคุณในตารางที่ถูกต้องโดยใช้ jQuery เช่นเดียวกับ Flickr 

ธรรมปลั๊กอินสำหรับ WordPress-ช่างภาพ,

มันนำคุณสมบัติที่จะแยกแยะแกลเลอรี่ของคุณจากคู่แข่ง!

คุณสมบัติหลักคือ: เลย์เอาต์ที่ตอบสนอง, เอฟเฟกต์สะพานลอยพิเศษ, การปรับแนวกริดอัตโนมัติ,  เครื่องมือแก้ไขรหัสย่อลักษณะจปรับแต่งได้อย่างสมบูรณ์การสนับสนุนของ pผู้ดูและ อื่น ๆ อีกมากมาย…

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง  

3 อีเมลกำหนดการ

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

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

อ่านบทความของเราเกี่ยวกับ ปลั๊กอิน WordPress 10 เพื่อใช้แผนที่บนเว็บไซต์ของคุณ

สร้างร้านค้าออนไลน์ได้อย่างง่ายดาย

ดาวน์โหลดฟรี WooCommerce ปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในการขายผลิตภัณฑ์ทางกายภาพและดิจิทัลของคุณบน WordPress [แนะนำ]

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

ดาวน์โหลดสาธิต |เว็บโฮสติ้ง

ทรัพยากรที่แนะนำ

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

สรุป

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

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

หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.

...

บทความนี้ประกอบด้วยข้อคิดเห็น 8

  1. ไฮ! ฉันต้องการทราบว่าคุณมีโอกาสที่จะบอกวิธีใส่ "ช่องข้อมูล" ที่คล้ายกับที่ใช้ในตอนต้นของบทความนี้หรือไม่รวมถึงปุ่มที่คลิกได้ถัดจาก "ดาวน์โหลด" และ "สเปรดชีต" เลย์เอาต์ดีมาก ขอบคุณ!

  2. ครับผมลองแล้ว แท้จริงแล้วหน้าวิดเจ็ตเป็นเอาต์พุตที่กำหนดการเพิ่มวิดเจ็ต และฉันเพิ่มมัน เมื่อขั้นตอนที่ 2 ไม่สามารถป้อนรหัสในส่วนหัว php เดา 2 ผิดพลาดอะไรครับ?

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

  4. 🙂ทุกอย่างเรียบร้อยไม่มีใครในคำแนะนำของพวกเขาเท่านั้นที่อธิบายว่าจะเพิ่มโค้ดใน“ functions.php ได้ที่ไหน !!! “ เป็นเรื่องสำคัญ! ทุกคนใช้ธีม "ที่แตกต่างกัน" ...

  5. สวัสดี

    ขอบคุณสำหรับการสนับสนุนเหล่านี้

    ฉันรู้วิธีเพิ่มแถบค้นหาในส่วนหัวส่วนบุคคล ในทางกลับกันการปรับแต่งสไตล์ให้เป็นส่วนตัวนั้นซับซ้อนกว่า ...

    ฉันต้องการเปลี่ยนขนาดตำแหน่ง (ที่ไม่ใช้ความกว้างทั้งหมดของส่วนหัว) รวมถึงสีพื้นหลัง

    Merci d'avance

    1. สวัสดีโทมัส

      ต้องใช้ความรู้เกี่ยวกับ CSS สักนิดหน่อย แต่ผมขอแนะนำให้ใช้ปลั๊กอิน WordPress อันยอดเยี่ยมนี้: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand

แสดงความคิดเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

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

กลับไปด้านบน
6 หุ้น
หุ้น1
ทวีต
Enregistrer5