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

อัปเดต: 15 กันยายน 2014 / บทความโดย: Rochester Oliveira

หมายเหตุ: เราไม่สนับสนุนปลั๊กอิน 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> ปลั๊กอินและคุณสามารถเปิดใช้งานได้ (แต่ถ้าคุณมีเนื้อหานี้ในไฟล์ของคุณเท่านั้นมันจะไม่เปลี่ยนแปลงไซต์ของคุณมากนัก)

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

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

  • 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__), array ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), เท็จ, '1.3', 'ทั้งหมด'); }

เราเรียกสินค้าจากต่างประเทศในรูปแบบต่าง ๆ 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";

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

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

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

/ "> /
    jQuery("#flipbook").turn({
        width: ,
        height: ,
        autoCenter: true,
        display: '',//single page or double page
        acceleration: true,
        gradients: ! jQuery.isTouch,
    });

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

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

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

เกี่ยวกับ Rochester Oliveira

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

เชื่อมต่อ: