การสอน WordPress: วิธีการสร้าง Plugin รับรอง

บทความที่เขียนโดย: Rochester Oliveira
  • WordPress
  • อัปเดต: ส.ค. 12, 2013

ดังนั้นที่นี่เรามีไว้สำหรับการสอนรายสัปดาห์ที่สองของเราใน WordPress เราได้เรียนรู้วิธีการสร้าง a ไซต์ WP แบบเลื่อนแบบไม่มีที่สิ้นสุด และ ปลั๊กอินพลิกเพจ ในอดีตที่ผ่านมา. วันนี้เราจะเรียนรู้เพิ่มเติมเกี่ยวกับประเภทโพสต์ที่กำหนดเองและวิธีโหลดข้อมูล

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

มาเริ่มกันเถอะ!

Zip & Install

หากคุณรีบไปตรวจสอบนี้คุณสามารถ ดาวน์โหลด และติดตั้ง

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

รายการรับรอง

จากนั้นคุณสามารถใช้รหัสย่อพื้นฐานเพื่อโหลดว่า

[ข้อความรับรอง rand = 0 สูงสุด = 5]

เมื่อคุณเพิ่มโค้ดดังกล่าวแล้วคุณจะเห็นข้อมูลบางอย่างในหน้าเว็บของคุณ:

หลักคำรับรอง

ตอนนี้เราจะดูวิธีสร้างและสำรวจสิ่งนี้ (โดยการเพิ่มฟังก์ชันและเปลี่ยนรูปลักษณ์)

ข้อมูลพื้นฐานเกี่ยวกับ

ดังที่เราได้กล่าวมาก่อนแล้วคุณจะต้องเพิ่ม สร้างเมธอดหัวข้อสร้างไฟล์ปลั๊กอินและเรียกสคริปต์ของคุณ. เรื่องยาวสั้น ๆ คุณจะสร้างโฟลเดอร์ใหม่ภายใต้ wp-content / plugins ของคุณโดยใช้ชื่อปลั๊กอินจากนั้นสร้างไฟล์ที่มีชื่อเหมือนกับโฟลเดอร์ที่เป็นไฟล์ปลั๊กอินหลักของคุณ

เมื่อคุณได้ทำสำเนาและวางดังต่อไปนี้:

<?php
/*
Plugin Name: Testimonials
Description: Display customer testimonials.
Version: 1.0
Author: Web Revenue Blog
License: GPL2
*/

//enqueueing scripts and styles
function plugin_scripts(){
    wp_enqueue_script('jquery');
    wp_enqueue_script('flexslider', plugins_url( 'js/jquery.flexslider-min.js' , __FILE__ ), array('jquery'), '2.2', false);
    wp_enqueue_script('testimonials', plugins_url( 'js/testimonials.js' , __FILE__ ), array('jquery'), '1.0', false);
    wp_enqueue_style('flexsliderCSS', plugins_url( 'css/flexslider.css' , __FILE__ ), false, '2.2', 'all' );
    wp_enqueue_style('testimonialsCSS', plugins_url( 'css/testimonials.css' , __FILE__ ), false, '1.0', 'all' );
}
add_action("wp_enqueue_scripts","plugin_scripts");

นี่คือสิ่งที่เรากำลังทำ:

  • บอกกับ WP ว่าชื่อปลั๊กอินของเราคืออะไร
  • การสร้างฟังก์ชันที่เราใส่สคริปต์ปกติ (เช่น jQuery) และสคริปต์ที่กำหนดเอง (เช่น flexslider) และ Stylesheets
  • บอกให้ WP โหลดฟังก์ชั่นสคริปต์ในสคริปต์สคริปต์เริ่มต้นของมันดังนั้นจึงจะถูกโหลดลงในหน้าเว็บจริงๆ

ทุกอย่างสวยเด็ด แต่อย่าลืมสร้างไฟล์ภายใต้ / js และ / css คุณสามารถดาวน์โหลดได้ในเนื้อหาการสาธิตของเราเท่านั้นดังนั้นคุณจึงไม่จำเป็นต้องขุดหาไฟล์ flexslider

ตอนนี้เรามีทุกสิ่งพื้นฐานในสถานที่ที่เราสามารถเริ่มต้นส่วนตลก

ประเภทโพสต์ที่กำหนดเอง

ตามค่าเริ่มต้น WordPress มี 2 ประเภทโพสต์เพจและโพสต์ทั่วไป แต่ก็มีประเภทโพสต์ภายในจำนวนมาก (เช่นไฟล์แนบ) ดังนั้นคำจำกัดความประเภท "โพสต์" คือ: ข้อมูลทุกประเภทที่คุณต้องการจัดเก็บ

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

// มนต์ดำเพื่อสร้างฟังก์ชันประเภทโพสต์ create_post_type () {register_post_type ('testimonials', // new post type array ('labels' => array ('name' => __ ('Testimonials'), 'singular_name' => __ ('คำรับรอง')), 'สาธารณะ' => จริง, / * ประเภทโพสต์มีไว้สำหรับการใช้งานแบบสาธารณะซึ่งรวมถึงส่วนหน้าและใน wp-admin * / 'supports' => array ('title ',' ตัวแก้ไข ',' ภาพขนาดย่อ ',' custom_fields '),' ลำดับชั้น '=> เท็จ)); }

ที่นี่เราเพิ่งใช้ฟังก์ชัน register_post_type () เพื่อบอก WP "Hey Buddy เราต้องจัดเก็บข้อมูลประเภทนี้ไว้โปรดพร้อมที่จะรับ"

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

จากนั้นเราต้องเรียกทุกครั้งที่เราโหลด WordPress เบ็ดนี้จะทำ:

add_action ('init', 'create_post_type');

ฟิลด์ที่กำหนดเอง

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

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

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

// การเพิ่มฟังก์ชันฟิลด์เมตาบ็อกซ์ URL add_custom_metabox () {add_meta_box ('custom-metabox', __ ('Link'), 'url_custom_metabox', 'testimonials', 'side', 'low'); } add_action ('admin_init', 'add_custom_metabox');

ฟังก์ชัน add_meta_box () ต้องการพารามิเตอร์เหล่านี้:

  1. ID - รหัสประจำตัวที่ไม่ซ้ำกัน คุณสามารถใช้อะไรที่ไม่เหมือนใครเช่น "ยูนิคอร์น - กิน - รุ้ง" หรือ "ข้อความรับรองลิงก์" สิ่งที่สามารถใช้ภายในได้
  2. ชื่อเรื่อง - จะแสดงอะไรสำหรับผู้ใช้? นี่เป็นสิ่งสำคัญที่จะใช้ฟังก์ชัน __ () ซึ่งเป็นฟังก์ชันที่อนุญาตให้ผู้ใช้จากภาษาต่างประเทศแปลปลั๊กอินของคุณด้วยไฟล์. o (โดยไม่มีการแก้ไขไฟล์ปลั๊กอิน)
  3. Callback - ฟังก์ชันที่คุณมีเนื้อหาที่แท้จริงของการเผาผลาญ
  4. ประเภทโพสต์ - ในกรณีของเราเราต้องการให้ปรากฏเฉพาะข้อความรับรองเท่านั้น
  5. บริบท - ตำแหน่งในหน้าเว็บที่คุณต้องการแสดง
  6. ลำดับความสำคัญ - ถ้าควรอยู่ก่อนรายการอื่น ๆ ที่มีตำแหน่งเดียวกันหรือหลังพวกเขา

ตอนนี้เราจำเป็นต้องสร้างฟังก์ชัน url_custom_metabox () เนื่องจากเราเรียกมันว่า

// HTML สำหรับฟังก์ชันพื้นที่ผู้ดูแลระบบ url_custom_metabox () {global $ post; $ urllink = get_post_meta ($ post-> ID, 'urllink', จริง); // กำลังตรวจสอบ! if (! preg_match ("/ http (s?): ///", $ urllink) && $ urllink! = "") {$ error = "URL นี้ไม่ถูกต้อง"; $ urllink = "http: //"; } // เอาท์พุทข้อความ url ที่ไม่ถูกต้องและเพิ่ม http: // ลงในช่องอินพุต if (isset ($ error)) {echo $ error; }?> URL: " />

ตกลงตอนนี้แปลเป็นภาษาอังกฤษธรรมดา:

  • เราเรียกตัวแปร global $ post เพื่อให้เราสามารถทราบได้ว่าเป็น POSTID ของรายการปัจจุบัน
  • เราโหลดค่าปัจจุบันของ URL
  • เราตรวจสอบถ้าค่าที่ผู้ใช้แทรกถูกต้อง หากมีเหตุการณ์ "http" หรือ "https" อย่างน้อยหนึ่งรายการค่านี้ก็โอเคมิฉะนั้นจะเป็นค่าที่ถูกต้องและเราจำเป็นต้องใช้ค่าเริ่มต้น
  • จากนั้นเราจะแสดงข้อผิดพลาดถ้ามี
  • ตอนนี้เราเริ่ม HTML จริงเพิ่มค่าเริ่มต้นในช่องป้อนข้อมูลตามที่เราได้รับใน PHP

หลังจากจุดนี้เราจำเป็นต้องบันทึกสิ่งที่ถูกส่งโดยผู้ใช้จริง เราจะใช้เบ็ด "save_post" ดังนั้นทุกครั้งที่ WordPress บันทึกโพสต์จะเรียกใช้ฟังก์ชันนี้:

// บันทึกฟังก์ชันข้อมูลฟิลด์ที่กำหนดเอง save_custom_url ($ post_id) {global $ post; ถ้า (isset ($ _ POST ['siteurl'])) {update_post_meta ($ post-> ID, 'urllink', $ _POST ['siteurl']); }} add_action ('save_post', 'save_custom_url');

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

หลังจากที่ทุกอย่างเข้าที่แล้วนี่คือลักษณะของหน้าคำรับรองใหม่ของคุณ:

ใหม่รับรอง

กำลังโหลดข้อมูลที่กำหนดเองของเรา

ตอนนี้เราจำเป็นต้องโหลดรายการของเราจริง ๆ แล้วเราจะใช้ฟังก์ชัน get_posts () เนื่องจากเรามีข้อมูลเพียงเล็กน้อยเท่านั้นดังนั้นเราจึงไม่จำเป็นต้องมี WP loop ที่เหมาะสม (ซึ่งจะเพิ่มจำนวนมาก ไม่ต้องการมัน)

ก่อนอื่นให้สร้างฟังก์ชันเพื่อรับลิงก์ของเว็บไซต์ของเราหากมี

// ส่งคืน URL สำหรับฟังก์ชัน post get_url ($ post) {$ urllink = get_post_meta ($ post-> ID, 'urllink', true); ส่งคืน $ urllink; }

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

// การลงทะเบียนรหัสย่อเพื่อแสดงฟังก์ชั่นคำรับรอง load_testimonials ($ a) {$ args = array ("post_type" => "testimonials"); if (isset ($ a ['rand']) && $ a ['rand'] == true) {$ args ['orderby'] = 'rand'; } if (isset ($ a ['max'])) {$ args ['posts_per_page'] = (int) $ a ['max']; } // รับข้อความรับรองทั้งหมด $ posts = get_posts ($ args); // HTML OUTPUT} add_shortcode ("ข้อความรับรอง", "load_testimonials");

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

ตอนนี้เราจำเป็นต้องเพิ่มโค้ด HTML ที่มีโครงสร้างดีฟอลต์ของ flexslider นี่คือลักษณะที่ว่า:

ก้อง ' '; ก้อง ' '; foreach ($ โพสต์เป็น $ โพสต์) {// รับภาพขนาดเล็ก $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)); $ link = get_url ($ โพสต์); ก้อง ' '; ถ้า (! empty ($ url_thumb)) {echo ' '; } เสียงสะท้อน ' '. $ post-> post_title' '; ถ้า (! empty ($ post-> post_content)) {echo ' '. $ post-> post_content' '; } if (! empty ($ link)) {echo ' Visit Site '; } เสียงสะท้อน ' '; } เสียงสะท้อน ' '; ก้อง ' ';

รอ แต่ทำไมเราจะสร้างโค้ด HTML ภายในฟังก์ชัน PHP? นั่นเป็นเพราะเราสามารถโหลดเนื้อหาได้เฉพาะเมื่อผู้ใช้เพิ่มเนื้อหาดังนั้นคุณจะไม่มีแท็ก HTML ที่ว่างเปล่ารอให้เลอะเลือนเค้าโครง

แล้วแถบด้านข้างล่ะ?

คนส่วนใหญ่เพียงแค่ต้องการแสดงข้อความรับรองในแถบด้านข้างและปลั๊กอินนี้จะไม่ทำงานได้ดีเนื่องจากวิดเจ็ตข้อความไม่ประมวลผล shortcodes มีวิธีง่ายๆในการนี้เพียงเพิ่มรหัสนี้:

add_filter ('widget_text', 'do_shortcode');

ทำอะไรต่อไป

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

เกี่ยวกับ Rochester Oliveira

ฉันเป็นนักออกแบบเว็บไซต์และผู้ประกอบการจากItajubá (MG), Brasil ฉันชอบเขียนเกี่ยวกับหัวข้อที่คลุมเครือและทำสิ่งดีๆ

เชื่อมต่อ: