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

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

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

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

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

Zip & Install

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

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

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

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

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

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

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

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

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

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

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

<? php / * ชื่อปลั๊กอิน: ข้อความรับรองคำอธิบาย: แสดงข้อความรับรองลูกค้า รุ่น: 1.0 ผู้แต่ง: ใบอนุญาตบล็อกรายรับจากเว็บ: GPL2 * / // การจัดคิวสคริปต์และลักษณะฟังก์ชัน plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('flexslider', plugins_url ('js / jquery.flexslider-min.js', __FILE__), อาร์เรย์ ('jquery'), '2.2', เท็จ); wp_enqueue_script ('ข้อความรับรอง', plugins_url ('js / testimonials.js', __FILE__), อาร์เรย์ ('jquery'), '1.0', เท็จ); wp_enqueue_style ('flexsliderCSS', plugins_url ('css / flexslider.css', __FILE__), false, '2.2', 'all'); wp_enqueue_style ('testimonialsCSS', plugins_url ('css / testimonials.css', __FILE__), เท็จ, '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 ('ข้อความรับรอง', // อาร์เรย์ประเภทโพสต์ใหม่ ('ป้ายกำกับ' => อาร์เรย์ ('ชื่อ' => __ ('ข้อความรับรอง'), 'singular_name' => __ ('Testimonial')), 'public' => true, / * ประเภทการโพสต์มีไว้สำหรับการใช้งานสาธารณะซึ่งรวมถึงส่วนหน้าและใน wp-admin * / 'รองรับ' => อาร์เรย์ ('ชื่อ' ',' editor ',' thumbnail ',' custom_fields '),' ลำดับชั้น '=> false)); }

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

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

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

add_action ('init', 'create_post_type');

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

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

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

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

// เพิ่มฟังก์ชันฟิลด์เมตาบ็อกของ URL เมตาดาต้า add_custom_metabox () {add_meta_box ('custom-metabox', __ ('ลิงก์'), 'url_custom_metabox', 'ข้อความรับรอง', 'ด้าน', 'ด้านล่าง'); } 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! = "") {$ ข้อผิดพลาด = "URL นี้ไม่ถูกต้อง"; $ urllink = "http: //"; } // เอาท์พุทข้อความ URL ของ invlid และเพิ่ม http: // ไปยังฟิลด์อินพุตหาก (isset ($ errors)) {echo $ errors; }?> <p> <label สำหรับ = "siteurl"> URL: <br /> <input id = "siteurl" size = "37" name = "siteurl" value = "<? php if (isset ($ urllink) ) {echo $ urllink;}?> "/> </label> </p> <? php}

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

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

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

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

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

หลังจากทุกสิ่งทุกอย่างเป็นไปตามที่นี่แล้วหน้ารับรองใหม่ของคุณจะมีลักษณะดังนี้:

ใหม่รับรอง

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

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

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

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

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

// การลงทะเบียนรหัสย่อเพื่อแสดงข้อความรับรองฟังก์ชั่น load_testimonials ($ a) {$ args = array ("post_type" => "ข้อความรับรอง"); if (isset ($ a ['rand']) && $ a ['rand'] == จริง) {$ 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 นี่คือลักษณะที่ว่า:

echo '<div>'; echo '<ul>'; foreach ($ โพสต์เป็น $ โพสต์) {// รับรูปขนาดย่อ $ url_thumb = wp_get_attachment_thumb_url (get_post_thumbnail_id ($ post-> ID)) $ link = get_url ($ โพสต์); echo '<li>'; if (! empty ($ url_thumb)) {echo '<img src = "'. $ url_thumb. '" />'; } echo '<h2>'. $ post-> post_title. '</h2>'; if (! empty ($ post-> post_content)) {echo '<p>'. $ post-> post_content '<br />'; } if (! empty ($ link)) {echo '<a href="'.$link.'"> เยี่ยมชมเว็บไซต์ </a> </p>'; } echo '</li>'; } echo '</ul>'; echo '</div>';

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

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

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

add_filter ('widget_text', 'do_shortcode');

ทำอะไรต่อไป

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

เกี่ยวกับ Rochester Oliveira

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