WordPress Tutorial: Πώς να δημιουργήσετε ένα απίστευτο Flip Plugin Page

Άρθρο που γράφτηκε από:
  • Inbound Marketing
  • Ενημερώθηκε: Sep 15, 2014

Σημείωση: Δεν υποστηρίζουμε πλέον αυτό το plugin WP, καθώς ο συγγραφέας δεν γράφει για εμάς για τώρα.

Ξεκινώντας σήμερα, κάθε εβδομάδα θα παρουσιάσουμε ένα φοβερό tutorial για την κωδικοποίηση, που θα σας διδάξει πώς να κάνετε προσαρμοσμένα πράγματα χρησιμοποιώντας το WordPress, από το βασικό έως το προηγμένο. Σήμερα θα δημιουργήσουμε ένα plugin (έτσι θα μάθετε τα βασικά βήματα σε αυτό) για να δημιουργήσετε μια γκαλερί "flip page", χρησιμοποιώντας το JS.

Σίγουρα έχετε δει ένα από αυτά στις πρώτες μέρες του διαδικτύου σας, αλλά αυτά έγιναν ως επί το πλείστον χρησιμοποιώντας το φλας, το οποίο είναι πλέον απογοητευτικό (εξακολουθεί να έχει την αξία του, αλλά δεν είναι η καλύτερη επιλογή για τέτοιου είδους πράγματα πια).

Η βασική λειτουργικότητα θα είναι η δημιουργία ενός νέου είδος γκαλερί με βάση μερικές εικόνες και τα μεγέθη τους, μέσω shortcode.

Ας ξεκινήσουμε λοιπόν!

Zip & Εγκατάσταση

Ο καλύτερος τρόπος να το δείτε σε δράση είναι να το εγκαταστήσετε μόνοι σας. Μπορείς κατεβάστε το εδώ. Εγκαταστήστε και ενεργοποιήστε την προσθήκη, στη συνέχεια, μόνο που πρέπει να κάνετε είναι να προσθέσετε το shortcode σε μια σελίδα, όπως αυτό:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78 300" width = "225" ύψος = "XNUMX" εμφάνιση = "διπλό"]

Γρήγορη προεπισκόπηση

Και αυτό είναι το είδος του αποτελέσματος που θα πάρετε:

Εφέ FlipBook

Αλλά τι είδους μαύρη μαγεία πηγαίνει εκεί; Λοιπόν, είναι πραγματικά απλό. Ας μάθουμε πώς να δημιουργήσουμε κάτι τέτοιο.

Η επικεφαλίδα

Πρώτα απ 'όλα θα χρειαστεί να δημιουργήσετε ένα νέο φάκελο και ένα νέο αρχείο .php. Σε αυτό το σημείο θα ήταν τρομερό εάν έχετε ένα δοκιμαστικό περιβάλλον, ώστε να μπορείτε να σπάσετε και να δοκιμάσετε πράγματα.

Το αρχείο και ο φάκελος πρέπει να έχουν ένα απλό και μοναδικό όνομα, οπότε θα αποφύγετε τη σύγκρουση με τα υπάρχοντα πρόσθετα. Τότε το βασικό περιεχόμενο του αρχείου μας είναι κάτι τέτοιο:

/ * Όνομα Plugin: FlipBook Gallery Περιγραφή: Δημιουργήστε ένα shortcode για galleries flipbook. Έκδοση: 1.0 Συγγραφέας: Web Revenue Blog Άδεια χρήσης: GPL2 * /

Πολύ απλό, ε; Μόλις δημιουργήσετε αυτό το αρχείο θα δείτε το plugin σας στη λίστα με το WP admin> Plugins και μπορείτε να το ενεργοποιήσετε (αλλά αν έχετε μόνο αυτό το περιεχόμενο στο αρχείο σας, δεν θα αλλάξει πολύ τον ιστότοπό σας).

Κλήση σεναρίων

Τώρα πρέπει να συμπεριλάβουμε εδώ μερικά σημαντικά εξωτερικά περιουσιακά στοιχεία. Τα απαιτούμενα εξωτερικά αρχεία για βασική λειτουργικότητα είναι:

  • jQuery (1.9 +)
  • Σενάριο Turn.js
  • Γυρίστε το βασικό στυλ

Εάν προσθέσετε απλά τις ετικέτες δέσμης ενεργειών και στυλ, θα έχετε κάποια προβλήματα. Για παράδειγμα, η διπλή κλήση jQuery πιθανώς θα σπάσει τον ιστότοπό σας. Επίσης το ίδιο το WordPress δεν θα "ξέρει" ότι έχετε δημιουργήσει αυτά τα στοιχεία, οπότε αν ένα διαφορετικό plugin κάνει εκ νέου κλήση 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', ψευδής); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'όλα'); }}

Καλούμε εξωτερικά αντικείμενα σε 3 με διαφορετικούς τρόπους, εδώ είναι:

  • Κλήση υπάρχοντος στοιχείου: jQuery - Δεν χρειάζεται να περάσουμε πολλές παραμέτρους, αν γνωρίζουμε με βεβαιότητα ότι το WordPress ήδη φορτώνει αυτό το σενάριο, του λέμε απλά "Φίλε, αυτό το σενάριο ΠΡΕΠΕΙ να είναι εδώ αλλιώς ο κώδικας μας δεν θα εργασία"
  • Δημιουργώντας μια νέα δέσμη ενεργειών - θα πρέπει να περάσετε μερικά χαρακτηριστικά όπως το όνομα, την τοποθεσία του αρχείου, τα απαιτούμενα στοιχεία (σε αυτή την περίπτωση απαιτεί jQuery), την έκδοση και αν είναι φορτωμένα στο υποσέλιδο ή την κεφαλίδα (false = header, true = footer)
  • Δημιουργία νέου στυλ - Σχεδόν όμοιο με το προηγούμενο, με μικρή διαφορά στο τελευταίο χαρακτηριστικό, το οποίο δηλώνει το είδος μέσου που πληκτρολογεί αυτό το στυλ αν για

Ένα από τα σημαντικά πράγματα που πρέπει να λάβετε υπόψη όταν καλείτε εξωτερικά σενάρια είναι αν υπάρχει περισσότερος κώδικας που θα εξαρτηθεί από αυτό το πρόσθετο. Αυτό είναι βασικά αυτό που ορίζει αν το αρχείο σας θα κληθεί στην κεφαλίδα ή το υποσέλιδο.

Στην περίπτωσή μας, έχουμε μερικά πρόσθετα σενάρια για να ρυθμίσετε τη συλλογή μόνο όταν δημιουργείται η HTML της και αυτό θα προστεθεί στο σώμα. Αυτός είναι ο λόγος για τον οποίο πρέπει να προσθέσουμε αυτό το σενάριο στο κεφάλι, διαφορετικά όταν ο κώδικας μας ονομάζεται λειτουργία "turn" δεν υπάρχει ακόμα.

Μετά από αυτό το ωραίο κώδικα πρέπει να πούμε στο WordPress να φορτώσει αυτά σαν scripts, η ενέργεια "wp_enqueue_scripts" θα το κάνει αυτό:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Ο κωδικός Shortcode

Ας ξεκινήσουμε με τη δράση για τη δημιουργία του shortcode. Είναι πολύ απλό, απλά πρέπει να προσθέσετε την ενεργοποίηση shortcode και τη λειτουργία που θα εκτελεστεί:

add_shortcode ("flip_book", "create_flip_book");

Τώρα πρέπει να δημιουργήσουμε τη λειτουργία μας και να πάρουμε τα χαρακτηριστικά μας. Ωστόσο, ορισμένα από τα χαρακτηριστικά μπορούν να είναι προαιρετικά, πράγμα που σημαίνει ότι θα πρέπει να δημιουργήσουμε προεπιλεγμένες τιμές για αυτά. Θα μπορούσαμε να δημιουργήσουμε πολλά αν υπάρχει δοκιμή εκεί αν το χαρακτηριστικό είναι άδειο, αλλά αυτή είναι μία από τις περιπτώσεις όπου η τριμερής λειτουργία είναι καλύτερη από την κανονική κλήση.

Οι τριμερείς λειτουργίες είναι κάποιες αν οι δηλώσεις είναι απευθείας στην τιμή της μεταβλητής. Εάν ακολουθεί αυτή τη δομή:

$ variable = (CONDITION); "VALUE IF CONDITION IS TRUE": "VALUE IF CONDITION IS FALSE".

Μπορείτε να τα δείτε σε δράση στο πρώτο μέρος της λειτουργίας μας:

συνάρτηση create_flip_book ($ attr) {// Προετοιμασία των ID προς επεξεργασία $ array ['ids'] = έκρηξη ("", $ attr ['ids']); // εμφάνιση mode $ array ['display'] = κενή ($ attr ['display']); "single": $ attr ['display']; // πρότυπη τιμή // πλάτος $ array ['width'] = κενό ($ attr ['width']); 400: $ attr ['πλάτος']; // ύψος $ array ['ύψος'] = άδειο ($ attr ['ύψος']); 300: $ attr ['ύψος'];
    // HTML και το υπόλοιπο του κώδικα πηγαίνει εδώ}

Στη συνέχεια θα χρειαστεί να δημιουργήσουμε το HTML και τη βασική κλήση για τις εικόνες μας. Ένα άλλο σημαντικό σημείο είναι να προσαρμόσουμε το μέγεθος εάν χρησιμοποιούμε το στυλ του περιοδικού (θα πρέπει να είναι το 2x το πλάτος αφού θα έχουμε εικόνες 2 αντί για ένα):

<? php αν ($ array ['display'] == "διπλό") {$ array ['width'] = $ array ['πλάτος'] * 2; } // HTML, JS και Black Magic; <? Id = "flipbook"> <? Php για ($ i = 0; $ i <sizeof ($ array ['ids' div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'πλήρης'); εάν ($ array ['display'] == "single") {?> <span> <? = "" ($ i + 1)?> / <? ($ array ['ids']); </ span> <? php} αλλιώς {?> <spanright>: "αριστερά");?> "> <? php echo" i + 1);> / <? echo "" .sizeof ($ array ['ids']); ; </ span> <? php}; </ div> <? php}; </ div> <script type = "text / javascript"> jQuery (" ; php echo $ array ['width'];?>, ύψος: <? php echo $ array ['ύψος'];?>, autoCenter: true, εμφάνιση: '<? php echo $ array [' display ']; ?> ', // επιτάχυνση μιας σελίδας ή διπλής σελίδας: true, κλίσεις:! jQuery.isTouch,}); </ script>

Ποια είναι η γνώμη σας;

Τώρα μπορείτε να τροποποιήσετε και να τροποποιήσετε αυτό όπως θέλετε, προσθέτοντας περισσότερες επιλογές (ανατρέξτε στα εκπληκτικά παραδείγματα για περισσότερη έμπνευση), προσαρμόζοντας τι δεν λειτουργεί για εσάς ή συνδυάζοντας αυτό με άλλα πρόσθετα.

Έχετε οποιαδήποτε έννοια WordPress που θέλετε να μάθετε λίγο περισσότερο; Ίσως κάτι που θέλετε να μάθετε πώς να κάνετε; Ενημερώστε μας μέσω σχολίων και θα χαρούμε να το συμπεριλάβουμε σε μια μελλοντική θέση!

Σχετικά με την Rochester Oliveira

Είμαι σχεδιαστής ιστοσελίδων και επιχειρηματίας από την Itajubá (MG), τη Βραζιλία. Μου αρέσει να γράφω για τα σκοτεινά θέματα και να κάνω μερικά δροσερά πράγματα.

Συνδέω: