การสอน WordPress: วิธีสร้างปลั๊กอิน Awesome Page Flip

บทความที่เขียนโดย:
  • ตลาดขาเข้า
  • อัปเดต: ก.ย. 15, 2014

หมายเหตุ: เราไม่สนับสนุนปลั๊กอิน WP อีกต่อไปเนื่องจากผู้เขียนไม่ได้เขียนให้เราตอนนี้

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

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

ฟังก์ชันพื้นฐานจะสร้างใหม่ ประเภทของแกลลอรี่ ขึ้นอยู่กับภาพและขนาดของพวกเขาผ่านทาง shortcode

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

Zip & Install

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

[flip_book ids = "78 79 78 79 79 78 78" width = "79" height = "79" display = "double"]

ตัวอย่างรวดเร็ว

นี่เป็นผลที่คุณจะได้รับ:

เอฟเฟกต์ฟลิปบุ๊ค

แต่สิ่งที่ประเภทของมายากลดำไปที่นั่น? ดีมันค่อนข้างง่ายจริง ลองเรียนรู้วิธีสร้างสิ่งต่างๆเช่นนี้

Header

ก่อนอื่นคุณจะต้องสร้างโฟลเดอร์ใหม่และไฟล์. php ใหม่ ณ จุดนี้มันจะน่ากลัวถ้าคุณมีสภาพแวดล้อมการทดสอบเพื่อให้คุณสามารถแบ่งและทดสอบสิ่งที่

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

/ * ชื่อปลั๊กอิน: FlipBook Gallery คำอธิบาย: สร้างรหัสย่อสำหรับแกลเลอรี flipbook รุ่น: 1.0 ผู้แต่ง: ใบอนุญาตบล็อกรายรับจากเว็บ: GPL2 * /

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

การเรียกสคริปต์

ตอนนี้เราจำเป็นต้องรวมสินทรัพย์ภายนอกที่สำคัญ ๆ ไว้ที่นี่ ไฟล์ภายนอกที่จำเป็นสำหรับฟังก์ชันพื้นฐานคือ:

  • jQuery (1.9 +)
  • สคริปต์ Turn.js
  • เปลี่ยนรูปแบบพื้นฐาน

หากคุณเพิ่มสคริปต์และแท็กสไตล์คุณจะมีปัญหาบางอย่าง ตัวอย่างเช่นการเรียก jQuery คู่อาจจะทำให้ไซต์ของคุณเสียหาย นอกจากนี้ WordPress เองจะไม่ "รู้" ว่าคุณได้สร้างไอเท็มเหล่านี้ไว้แล้วดังนั้นหากปลั๊กอินอื่นเรียก turn.js อีกครั้งหรือรูปแบบที่แตกต่างออกไปไซต์ของคุณจะทำลายไซต์ของคุณ

นั่นเป็นเหตุผลที่เราควรใช้งาน wp_enqueue_script และ wp_enqueue_style นี่คือการใช้พื้นฐาน:

ฟังก์ชัน plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), อาร์เรย์ ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

เราเรียกสินค้าจากต่างประเทศในรูปแบบต่าง ๆ 3 นี่คือ:

  • เรียกรายการที่มีอยู่: jQuery - เราไม่จำเป็นต้องผ่านพารามิเตอร์จำนวนมากถ้าเราทราบว่า WordPress โหลดสคริปต์นี้อยู่แล้วเรากำลังบอกเขาว่า "เพื่อนบทนี้ต้องอยู่ที่นี่มิฉะนั้นรหัสของเราจะไม่ งาน"
  • สร้างสคริปต์ใหม่ - คุณจะต้องส่งผ่านคุณลักษณะบางอย่างเช่นชื่อตำแหน่งที่ตั้งของไฟล์รายการที่จำเป็น (ในกรณีนี้ต้องใช้ jQuery) เวอร์ชันและหากโหลดในส่วนท้ายหรือส่วนหัว (false = header, true = footer)
  • การสร้างสไตล์ใหม่ - สวยมากเช่นเดียวกับก่อนหน้านี้มีความแตกต่างเล็ก ๆ น้อย ๆ ในแอตทริบิวต์ล่าสุดซึ่งระบุว่าสื่อประเภทใดในรูปแบบนี้ถ้า

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

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

หลังจากโค้ดที่ดีนี้เราต้องบอก WordPress ให้โหลดสคริปต์เหล่านั้นเป็นสคริปต์การกระทำ "wp_enqueue_scripts" จะทำดังนี้

add_action ('wp_enqueue_scripts', 'plugin_scripts');

รหัสย่อ

เริ่มต้นด้วยการดำเนินการเพื่อสร้างรหัสย่อ มันค่อนข้างง่ายคุณเพียงแค่ต้องเพิ่มทริกเกอร์ shortcode และฟังก์ชันที่จะดำเนินการ:

add_shortcode ( "flip_book", "create_flip_book");

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

การดำเนินงานเป็นแบบ Ternary ถ้างบตรงในค่าของตัวแปร ถ้าตามโครงสร้างนี้:

ตัวแปร $ = (CONDITION)? "VALUE หากเงื่อนไขเป็น TRUE": "VALUE หากเงื่อนไขเป็น FALSE";

คุณสามารถเห็นพวกเขาในการดำเนินการในส่วนแรกของฟังก์ชันของเรา:

ฟังก์ชั่น create_flip_book ($ attr) {// การเตรียม ID ที่จะประมวลผล $ array ['ids'] = explode ("", $ attr ['ids']); // display display $ array ['display'] = ว่าง ($ attr ['display'])? "single": $ attr ['display']; // ค่ามาตรฐาน // ความกว้าง $ array ['width'] = ว่าง ($ attr ['width'])? 400: $ attr ['width']; // height $ array ['height'] = ว่าง ($ attr ['height'])? 300: $ attr ['height'];
    // HTML และโค้ดที่เหลืออยู่ตรงนี้}

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

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS และ Black Magic?> <div id = "flipbook"> <? php สำหรับ ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'เต็ม'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </span> <? php} อื่น {?> <spanright ":" ซ้าย ");?>"> <? php echo "" ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids']); ?> </span> <? php}?> </div> <? php}?> </div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ? php echo $ array ['width'];?> ความสูง: <? php echo $ array ['height'];?>, autoCenter: true, จอแสดงผล: '<? php echo $ array [' display ']; ?> ', // การเร่งความเร็วหน้าเดียวหรือสองหน้า: จริงการไล่ระดับสี:! jQuery.isTouch,}); </ script>

คุณคิดอย่างไร?

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

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

เกี่ยวกับ Rochester Oliveira

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