วิธีเพิ่มคลาสในวิดเจ็ต WordPress

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

ฉันจะเพิ่มคลาส Css ให้กับวิดเจ็ตใน WordPress ได้อย่างไร

หากคุณต้องการเพิ่มคลาส CSS ให้กับวิดเจ็ตใน WordPress คุณสามารถทำได้โดยไปที่หน้า ลักษณะที่ปรากฏ > วิดเจ็ต จากที่นี่ คุณสามารถเพิ่มคลาส CSS ให้กับวิดเจ็ตใดก็ได้โดยเพิ่มชื่อคลาสลงในฟิลด์ “Extra Classes” ของวิดเจ็ต

ฉันจะปรับแต่งวิดเจ็ตใน WordPress ได้อย่างไร

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

คุณสามารถเพิ่มฟังก์ชันเพิ่มเติมให้กับเว็บไซต์ของคุณผ่าน วิดเจ็ตที่กำหนดเอง ของ WordPress ได้โดยการลากและวางลงในส่วนที่เหมาะสม ในการทำเช่นนี้ คุณจะต้องรู้ PHP และ WordPress เท่านั้น และไม่ซับซ้อน พึงระลึกไว้เสมอว่าวิดเจ็ตที่กำหนดเองของคุณต้องสร้างขึ้นจากพื้นฐาน เพื่อให้สามารถปรับแต่งได้อย่างละเอียด ในบทช่วยสอนนี้ เราจะพูดถึงวิธีการส่งคำทักทายจาก Hostinger.com ด้วยการใช้วิดเจ็ตที่กำหนดเอง คุณสามารถเรียนรู้เกี่ยวกับการสร้างวิดเจ็ต WordPress กำลังเขียนโค้ดในไฟล์ functions.php ในตัวอย่างนี้ เนื่องจากมีธีมที่โหลดอยู่ในปัจจุบัน ด้วยเหตุนี้ ปลั๊กอินที่กำหนดเองใดๆ ก็จะมีโค้ดเหมือนกันเช่นกัน

Hstngr_register_widget() เป็นฟังก์ชันใหม่ที่ใช้ รหัสวิดเจ็ต ซึ่งระบุไว้ในฟังก์ชัน __construct() เพื่อลงทะเบียนวิดเจ็ตของเรา จากนั้นเราใช้ widget_init เพื่อโหลดวิดเจ็ตลงใน WordPress โดยใช้เมธอด add_action() ในตัว ตอนนี้ต้องรันโค้ดในไฟล์ functions.php

คลาสวิดเจ็ต Css

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

วิธีปรับแต่งวิดเจ็ตของคุณในหน้าจอเครื่องมือปรับแต่งวิดเจ็ต WordPress

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

วิธีเพิ่มวิดเจ็ตใหม่ใน WordPress

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

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

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

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

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

วิธีแก้ไขรหัสวิดเจ็ตใน WordPress

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

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

ฉันจะรับรหัสวิดเจ็ตได้อย่างไร

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

WordPress Widget Css

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

หากต้องการตรวจสอบองค์ประกอบ ให้คลิกขวาที่องค์ประกอบแล้วคลิกตรวจสอบองค์ประกอบ ซึ่งพบได้ใน Chrome หรือ Firefox ทันทีที่คุณกดปุ่มนี้ หน้าต่างโค้ดใหม่บางหน้าต่างจะปรากฏขึ้นที่ด้านล่าง (หรือด้านข้าง) ของหน้าจอ ในการเลือกวิดเจ็ตเฉพาะ ให้เลื่อนเคอร์เซอร์ไปที่บานหน้าต่างด้านซ้ายของโค้ด แล้วเลือกจากรายการ พื้นหลังของคอนเทนเนอร์หลัก ชื่อ และลิงก์ในวิดเจ็ตที่แสดงด้านบนจะเปลี่ยนไป เนื่องจากเรากำลังจัดการกับลิงก์ ฉันจึงต้องสร้างส่วนใหม่ของ CSS เปลี่ยนสี และอัปโหลดไฟล์ ดังนั้นฉันจึงหวังว่าจะขยายให้ใหญ่ขึ้นเล็กน้อย คุณสามารถเปลี่ยนขนาดได้โดยการเลื่อนตัวเลข 1.2 ขึ้นหรือลง นี่คือสิ่งที่เราได้รับที่นี่

วิธีปรับแต่งวิดเจ็ตของคุณด้วย Css

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

วิธีสร้างวิดเจ็ต Html ที่กำหนดเองใน WordPress

ในการสร้าง วิดเจ็ต HTML ที่กำหนดเอง ใน WordPress คุณจะต้องทำตามขั้นตอนเหล่านี้: 1. ลงชื่อเข้าใช้บัญชี WordPress ของคุณและไปที่แดชบอร์ด 2. ทางด้านซ้ายมือ คุณจะเห็นเมนู วางเมาส์เหนือแท็บ "ลักษณะที่ปรากฏ" และคลิกที่ "วิดเจ็ต" 3. ในหน้าวิดเจ็ต คุณจะเห็นรายการวิดเจ็ตที่มีอยู่ทั้งหมด ค้นหาวิดเจ็ต "HTML ที่กำหนดเอง" แล้วลากลงในแถบด้านข้างอันใดอันหนึ่ง 4. เมื่อติดตั้งวิดเจ็ตแล้ว คุณสามารถคลิกเพื่อขยายและเพิ่มโค้ด HTML ที่กำหนดเองได้ 5. อย่าลืมคลิกที่ปุ่ม "บันทึก" เมื่อดำเนินการเสร็จ

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

WordPress: แพลตฟอร์มที่ปรับแต่งได้มากที่สุด

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