วิธีสร้างปลั๊กอินวิดเจ็ต WordPress

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

ฉันเพิ่งพัฒนาปลั๊กอินที่เรียกว่า Freelancer Widgets Bundle เมื่อถูกถามว่าควรเขียนปลั๊กอินอะไร ฉันคิดว่าถึงเวลาต้องเขียนโพสต์นี้เพราะมีคนถามถึงเรื่องนี้ เมื่อคุณติดตั้งปลั๊กอิน WordPress คุณจะต้องเพิ่มโค้ดพิเศษลงไป คุณจะต้องมีโปรแกรมแก้ไข เช่น Coda (Mac) หรือ Dreamweaver (PC) เพื่อพัฒนาปลั๊กอินของคุณ ตัวสร้างคือฟังก์ชันที่กำหนดชื่อวิดเจ็ตและอาร์กิวเมนต์หลัก นี่คือตัวอย่างว่ามันอาจมีลักษณะอย่างไร เมื่อทำการเปลี่ยนแปลงฟิลด์แบบฟอร์ม ตรวจสอบให้แน่ใจว่าได้ใช้ esc_attr() เนื่องจากเป็นการดำเนินการเพื่อเหตุผลด้านความปลอดภัย พารามิเตอร์ 'customize_selective_refresh' อนุญาตให้รีเฟรชวิดเจ็ตภายใต้ลักษณะที่ปรากฏเช่นเดียวกับเมื่อแก้ไข

กล่าวอีกนัยหนึ่ง การเปลี่ยนแปลงวิดเจ็ตไม่จำเป็นต้องรีเฟรชเพื่อให้ปรากฏในรายการ แท็กทั้งหมด ยกเว้นข้อความพื้นฐาน จะถูกลบออกด้วย WP_strip_all_tags WP_kses_post_string() เป็นฟังก์ชันเดียวกับสตริงเนื้อหาโพสต์ ฟังก์ชันนี้จะสร้างเนื้อหาสำหรับเว็บไซต์โดยใช้ฟังก์ชัน widget() ฟังก์ชันนี้สามารถปรับแต่งให้รวมแท็กหรือคลาสเฉพาะได้ GitHub เป็นที่ที่เหมาะสำหรับการดูโค้ดทั้งหมด

เมื่อคุณต้องการเพิ่มวิดเจ็ตลงในเว็บไซต์ ให้ไปที่หน้าที่คุณต้องการทำและวางโค้ดก่อนที่แท็ก HTML “/body” จะปิดลง จำเป็นต้องใส่รหัสในทุกหน้าเว็บที่คุณต้องการแสดงวิดเจ็ต ตรวจสอบไฟร์วอลล์ของคุณเพื่อดูว่าได้เปิดใช้งาน Web Widget (Classic) หรือไม่

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

ฉันจะสร้างปลั๊กอินวิดเจ็ตที่กำหนดเองสำหรับ WordPress ได้อย่างไร

ในการสร้างปลั๊กอินวิดเจ็ตที่กำหนดเองสำหรับ WordPress คุณจะต้องสร้างไฟล์ PHP ด้วยรหัสต่อไปนี้: /* ชื่อปลั๊กอิน: [ชื่อปลั๊กอิน] คำอธิบาย: [คำอธิบายของปลั๊กอิน] */ // ลงทะเบียนและโหลดวิดเจ็ต ฟังก์ชัน [name_of_plugin]_load_widget() { register_widget( '[name_of_plugin]' ); } add_action( 'widgets_init', '[name_of_plugin]_load_widget' ); // การสร้างคลาสวิดเจ็ต [name_of_plugin] ขยาย WP_Widget { ฟังก์ชั่น __construct () { parent::__construct ( // ID พื้นฐานของวิดเจ็ตของคุณ '[name_of_plugin]' // ชื่อวิดเจ็ตจะปรากฏใน UI __('[ชื่อปลั๊กอิน ]', '[name_of_plugin]'), // Widget description array( 'description' => __( '[Description of plugin]', '[name_of_plugin]' ), ) ); } // การสร้างส่วนหน้าวิดเจ็ต // นี่คือจุดที่การกระทำเกิดขึ้น วิดเจ็ตฟังก์ชันสาธารณะ( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // ก่อนและหลังอาร์กิวเมนต์วิดเจ็ตถูกกำหนดโดยธีม echo $args['before_widget']; ถ้า ( ! empty( $title ) ) echo $args['before_title'] $ชื่อ $args['after_title']; // นี่คือที่ที่คุณเรียกใช้โค้ดและแสดงผล echo __( '[Name of plugin]', '[name_of_plugin]' ); echo $args['after_widget']; } // รูปแบบฟังก์ชันสาธารณะของวิดเจ็ตแบ็กเอนด์ ( $instance ) { if ( isset ( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } อื่น { $title = __( '[ชื่อปลั๊กอิน]', '[name_of_plugin]' ); } // แบบฟอร์มผู้ดูแลระบบวิดเจ็ต ? > เมื่อผู้ใช้ WordPress สร้างพื้นที่วิดเจ็ต พวกเขาจะเพิ่มเนื้อหาเล็กๆ ลงในพื้นที่นั้น ขึ้นอยู่กับพื้นที่วิดเจ็ตที่ติดตั้ง วิดเจ็ตอาจแสดงข้อมูลประเภทต่างๆ ในทุกหน้า หรืออาจแสดงเฉพาะข้อมูลบางอย่างเท่านั้น มีวิดเจ็ตบางตัวที่พร้อมใช้งานโดยค่าเริ่มต้น ในขณะที่บางวิดเจ็ตมีให้โดยใช้ปลั๊กอินหรือธีม ต้องเพิ่มสี่วิธีที่กล่าวถึงข้างต้นในชั้นเรียนของคุณเพื่อสร้างวิดเจ็ตที่กำหนดเองขั้นพื้นฐาน คุณต้องใช้ฟังก์ชัน register_widget() เพื่อลงทะเบียนวิดเจ็ตเพื่อใช้ภายในแดชบอร์ด ก่อนที่เราจะศึกษาตัวอย่างที่เรานำเสนอในบทความนี้ เราจะพูดถึงจุดประสงค์ของทุกส่วนของรหัสอย่างรวดเร็ว วิธีหนึ่งที่ใช้ในคลาส Custom_Widget คือวิธีการกำหนดอักขระ เราสร้างวิดเจ็ตด้วย custom_widget เป็น ID ด้วยเมธอด constructor โดยใช้เมธอด __construct() เมื่อใช้เมธอด register_widget() วิดเจ็ตใหม่จะถูกสร้างขึ้นหลังจากลงทะเบียนวิดเจ็ตที่มีอยู่แล้ว เราได้รวมแต่ละส่วนด้วยคำสั่ง if…* เพื่อให้แน่ใจว่าจะแสดงเฉพาะส่วนเหล่านั้นหากรวมอยู่ในตัวเลือกวิดเจ็ต วิธีการ widget() รวมฟังก์ชัน nl2br() เพื่อให้แน่ใจว่าข้อความที่มีหลายย่อหน้าทั้งหมดจะแสดงอย่างถูกต้อง Sanitize_text_field() กำจัดช่องว่าง แท็บ และตัวแบ่งบรรทัดที่ไม่จำเป็นออกจากอาร์กิวเมนต์ นอกจากนี้ ค่า ใช่ ถูกกำหนดเป็นค่าเริ่มต้นภายในฟิลด์เลือก ซึ่งบ่งชี้ว่าเป้าหมายลิงก์ถูกตั้งค่าเป็น _blank ในสองกรณีก่อนหน้านี้ ชื่อเรื่อง ข้อความ ลิงก์ใต้ชื่อเรื่อง และระบุว่าควรเปิดลิงก์ในแท็บใหม่หรือไม่ โปรดบันทึกตัวเลือกที่คุณเลือกโดยคลิกปุ่มบันทึกทันที เมื่อคุณเลือกธีมเริ่มต้น วิดเจ็ตจะสร้างเอาต์พุตที่ต่างออกไป ในกรณีนี้ วิดเจ็ตของคุณอาจดูคล้ายกับที่แสดงด้านล่างหากคุณใช้ธีม Lekker WordPress ฉันจะสร้างวิดเจ็ตรูปภาพที่กำหนดเองใน WordPress ได้อย่างไร หากต้องการเพิ่มรูปภาพลงในแถบด้านข้างของ WordPress ให้เลือกวิดเจ็ต 'รูปภาพ' คุณสามารถเปลี่ยนแปลงรูปลักษณ์ของคุณได้โดยไปที่ลักษณะที่ปรากฏ เพิ่มวิดเจ็ต 'รูปภาพ' ลงในแถบด้านข้าง หากคุณมีหน้าเว็บที่มีวิดเจ็ต ปลั๊กอินวิดเจ็ตที่กำหนดเอง: octobercms.com ปลั๊กอินวิดเจ็ตที่กำหนดเองคือปลั๊กอินที่ช่วยให้คุณสร้างวิดเจ็ตที่กำหนดเองได้ ปลั๊กอินนี้เหมาะสำหรับผู้ที่ต้องการสร้างวิดเจ็ตที่กำหนดเองสำหรับเว็บไซต์หรือบล็อกของตน ด้วยปลั๊กอินนี้ คุณสามารถสร้างวิดเจ็ตที่กำหนดเองได้อย่างง่ายดายโดยไม่ต้องเขียนโค้ดด้วยตนเอง ในการจัดเตรียมวิดเจ็ตแบบกำหนดเองที่สามารถใช้กับ Qt Designer ได้ เราจำเป็นต้องจัดเตรียมการใช้งานที่มีอยู่แล้วในตัวเองรวมถึงอินเทอร์เฟซของปลั๊กอิน วิดเจ็ตที่กำหนดเองของตัวอย่างนี้ เช่นเดียวกับนาฬิกาอะนาล็อกที่ไม่มีสัญญาณหรือสล็อตที่กำหนดเอง ต้องใช้มาโคร Q_PLUGIN_METADATA() เพื่อให้แน่ใจว่าวิดเจ็ตได้รับการระบุอย่างถูกต้องว่าเป็นปลั๊กอินโดยการส่งออกข้อมูลจากมาโคร คลาส AnalogClock สามารถใช้เป็นวิดเจ็ตแบบกำหนดเองภายในกล่องวิดเจ็ต และเป็นตัวอย่างของคลาสในตัวเอง คลาสปลั๊กอินสำหรับคลาส AnalogClock จะรวมอยู่ใน Qt Designer ตัวสร้างสำหรับคลาส QObject เพียงแค่เรียกตัวสร้างคลาสฐาน QObject ซึ่งตั้งค่าตัวแปรเริ่มต้นเป็นเท็จ ฟังก์ชัน isInitialized() จะตรวจสอบว่าปลั๊กอินพร้อมใช้งานหรือไม่โดยอนุญาตให้ Qt Designer ระบุ ฟังก์ชัน createWidget() สามารถสร้างอินสแตนซ์ของวิดเจ็ตที่กำหนดเองได้ ปลั๊กอินวิดเจ็ตจะปรากฏในชื่อกลุ่มในส่วนปลั๊กอินวิดเจ็ตของ Qt Designer เคล็ดลับเครื่องมือและนี่คืออะไร? ในกล่องวิดเจ็ต คุณสามารถให้ความช่วยเหลือสำหรับวิดเจ็ตที่กำหนดเองได้ ฟังก์ชัน isContainer() ตรวจสอบว่าควรใช้วิดเจ็ตเป็นคอนเทนเนอร์สำหรับอิมเมจวิดเจ็ตอื่นๆ หรือไม่ ซึ่งจะป้องกันไม่ให้ผู้ใช้สร้างวิดเจ็ตในนั้น Custom Widget WordPress CodeCredit: www.hostpapa.in วิดเจ็ตที่กำหนดเองเป็นวิธีที่ยอดเยี่ยมในการเพิ่มฟังก์ชันการทำงานให้กับไซต์ WordPress ของคุณ มีบางสิ่งที่ควรคำนึงถึงเมื่อเพิ่มโค้ดวิดเจ็ตที่กำหนดเองลงในไซต์ของคุณ ขั้นแรก คุณจะต้องสร้างไฟล์ชื่อ “widget.php” ในไดเร็กทอรีของธีมของคุณ ถัดไป คุณจะต้องเพิ่มรหัสต่อไปนี้ในไฟล์ widget.php ของคุณ: class Custom_Widget expands WP_Widget { function __construct() { parent::__construct( 'custom_widget', __('Custom Widget', 'text_domain'), array ( 'description' => __( 'วิดเจ็ตที่กำหนดเองสำหรับไซต์ WordPress ของคุณ', ' text_domain' ), ) ); } วิดเจ็ตฟังก์ชันสาธารณะ ( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget']; ถ้า ( ! empty( $title ) ) echo $args['before_title'] $ชื่อ $args['after_title']; echo __( 'สวัสดีชาวโลก!', ' text_domain' ); echo $args['after_widget']; } รูปแบบฟังก์ชันสาธารณะ ( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } อื่นๆ { $title = __( 'ชื่อใหม่', 'text_domain' ); } ? > } อัปเดตฟังก์ชันสาธารณะ ( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title']Wordpress Add Widget To Templateการเพิ่มวิดเจ็ตในเทมเพลต WordPress เป็นขั้นตอนง่ายๆ คุณจะต้องเข้าถึงไฟล์ WordPress ของคุณผ่านบัญชีโฮสติ้งและแก้ไข ไฟล์ที่เหมาะสม ส่วนใหญ่แล้วจะเป็นไฟล์ header.php มองหาโค้ดที่ควบคุมพื้นที่ที่คุณต้องการเพิ่มวิดเจ็ต จากนั้น คัดลอกโค้ดสำหรับวิดเจ็ตที่คุณต้องการเพิ่มแล้ววางลงในไฟล์ที่เหมาะสม ในไฟล์ บันทึกไฟล์และอัปโหลดไปยังเซิร์ฟเวอร์ของคุณ แค่นั้นแหละ! ตอนนี้วิดเจ็ตจะปรากฏบนไซต์ WordPress ของคุณ ใน WordPress มีแท็กเทมเพลตชื่อ the_widget() ที่ช่วยให้คุณสามารถเพิ่มวิดเจ็ตลงในเว็บไซต์ของคุณได้โดยตรง ไฟล์เทมเพลต คุณสามารถวางวิดเจ็ตในไฟล์ที่มีชื่อคลาสของวิดเจ็ตที่คุณต้องการใช้และตำแหน่งที่คุณต้องการให้ปรากฏ พูดอีกอย่างก็คือ หากคุณต้องการแสดงรายการความคิดเห็นล่าสุด คุณสามารถเขียนสิ่งนี้: $instance สำหรับแต่ละวิดเจ็ต การใช้ฟังก์ชันในตัว คุณสามารถเพิ่ม defa . ของคุณได้มากมาย ult วิดเจ็ต WordPress ไปยังไฟล์เทมเพลตของคุณแทนที่จะใช้ คุณสามารถแทรกวิดเจ็ตที่กำหนดเองได้โดยใช้เมธอด the_widget() ในเทมเพลตของคุณ วิดเจ็ตแบบกำหนดเอง ซึ่งสามารถใช้ได้บนแพลตฟอร์มที่แตกต่างจากแถบด้านข้างของคุณ มีอยู่ในปลั๊กอินจำนวนมาก ฉันจะเพิ่มวิดเจ็ตในธีม WordPress ของฉันได้อย่างไร ไปที่หน้าจอการดูแลระบบ WordPress เพื่อดูหน้าลักษณะที่ปรากฏ เลือกวิดเจ็ตโดยลากไปที่แถบด้านข้างเฉพาะหรือคลิกลิงก์ "เพิ่มวิดเจ็ต" (หากธีมของคุณมีแถบด้านข้างมากกว่าหนึ่งแถบ ให้เลือกแถบด้านข้างปลายทาง) คุณจะเรียกวิดเจ็ตจากเทมเพลตหน้า WordPress ได้อย่างไร ขั้นตอนแรกคือการค้นหา และแทรกไฟล์ที่วิดเจ็ตของคุณควรปรากฏ ขั้นตอนที่สองคือการกำหนดวิดเจ็ตที่คุณต้องการใช้ ในส่วนนี้ เราจะพูดถึงชื่อคลาสของวิดเจ็ต WordPress เริ่มต้น: WP_Widget_Archives วิธีสร้างวิดเจ็ตรูปภาพที่กำหนดเองใน WordPressในการสร้างวิดเจ็ตรูปภาพที่กำหนดเองใน WordPress คุณจะต้องสร้างปลั๊กอินหรือธีมย่อยที่กำหนดเองก่อน เมื่อคุณทำเสร็จแล้ว คุณสามารถสร้างไฟล์ใหม่ชื่อ “image-widget.php” ภายในปลั๊กอินหรือธีมลูกของคุณ ภายในไฟล์นี้ คุณจะต้องใส่รหัสต่อไปนี้: class WP_Widget_Custom_Image extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __( 'วิดเจ็ตที่ให้คุณ เพื่ออัปโหลดรูปภาพที่กำหนดเอง', ' text_domain' ), ); parent::__construct( 'custom_image', __( 'รูปภาพที่กำหนดเอง', 'text_domain' ), $widget_ops ); } วิดเจ็ตฟังก์ชัน ( $args, $instance ) { echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . Apply_filters( 'widget_title', $instance['title'] ) $args['after_title']; } if ( ! empty( $instance['image'] ) ) { echo ”; } echo $args['after_widget']; } อัปเดตฟังก์ชัน ( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] =ฆ่าเชื้อ_text_field( $new_instance['title'] ); $instance['image'] = esc_url_raw( $new_instance['image'] ); ส่งคืน $instance; } รูปแบบฟังก์ชัน ( $instance ) { $title = ! ว่างเปล่า( $instance['title'] ) ? $instance['title'] : __( 'รูปภาพที่กำหนดเอง', 'text_domain' ); $image = ! ว่างเปล่า( $instance['image'] ) ? $instance['image'] : ”; ?ปลั๊กอิน Image Widget เป็นปลั๊กอินง่ายๆ ที่สามารถใช้เพื่อเพิ่มวิดเจ็ตรูปภาพในไซต์ของคุณโดยใช้ตัวจัดการสื่อของ WordPress เป็นเรื่องปกติที่เทมเพลตเอาต์พุตวิดเจ็ตจะรวมเทมเพลตเริ่มต้น แต่ไฟล์ในเทมเพลตของคุณสามารถแก้ไขได้ ใน 3.2 มีการเพิ่มตัวกรอง sh_template_image_widget_php ซึ่งทำให้คุณสามารถแทนที่การทำงานเทมเพลตเริ่มต้นได้ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับอินสแตนซ์วิดเจ็ตเฉพาะ คุณต้องเพิ่มสองอาร์กิวเมนต์ $args และ $instance คุณสามารถใช้สิ่งนี้ในการออกแบบที่ตอบสนองได้หากคุณแทนที่สิ่งนี้ ฉันจะเพิ่มแถบเลื่อนสำหรับรูปภาพแบบสุ่มได้อย่างไร ได้ คุณมีตัวเลือกที่จะทำได้ โดยทั่วไปสิ่งนี้จะได้รับการจัดการโดยตรงผ่านการแสดงแถบด้านข้างของปลั๊กอิน Image Widget; ต้องตั้งค่าการแสดงแถบด้านข้างเป็นหน้าเฉพาะ โปรดแจ้งให้เราทราบหากคุณมีคำถามหรือความคิดเห็นในหน้านี้ Image Widget เป็นโครงการซอฟต์แวร์โอเพ่นซอร์ส ปลั๊กอินนี้เผยแพร่ต่อสาธารณะโดยผู้ร่วมให้ข้อมูลที่หลากหลาย หากคุณต้องการใส่รูปภาพ คุณสามารถเพิ่มหนึ่งช่อง และหากต้องการใส่ลิงก์ คุณสามารถเพิ่มชั้นเรียนได้ คุณจะใช้เวลาประมาณ 15 นาทีในการดำเนินการ ดังนั้นจึงเป็นการลงทุนที่คุ้มค่า ฉันจะสร้างวิดเจ็ตใหม่ใน WordPress ได้อย่างไร ไม่ว่าจะลากวิดเจ็ตไปยังพื้นที่วิดเจ็ตที่เกี่ยวข้องหรือลากจากด้านซ้ายมือของหน้าไปทางซ้าย . เมื่อคุณคลิกที่วิดเจ็ตที่คุณต้องการเพิ่ม คุณจะเห็นรายการวิธีดำเนินการดังกล่าว หากต้องการเพิ่มวิดเจ็ตใหม่ในพื้นที่ที่มีอยู่ ให้คลิกปุ่มเพิ่มวิดเจ็ต