Δημιουργία σύντομων κωδικών στο WordPress CMS. Shortcodes Προσθέστε ένα κουμπί για να εισαγάγετε έναν σύντομο κώδικα στο πρόγραμμα επεξεργασίας οπτικών αναρτήσεων TinyMCE




Σύντομος κωδικός- αυτό είναι ένα πολύ χρήσιμο πράγμα για έναν webmaster ένας σύντομος κώδικας απλοποιεί πραγματικά τη συνηθισμένη εργασία της εισαγωγής του ίδιου τύπου πληροφοριών σε εκατοντάδες σελίδες ενός ιστότοπου. Ταυτόχρονα, είναι βολικό να αντικαταστήσετε ΜΑΖΙΚΑ τις πληροφορίες στον επιθυμητό συντομότερο κωδικό.


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

10 Χρήσιμοι Shortcodes για WordPress

Ας φανταστούμε ότι θέλετε να το εισαγάγετε σε 10 άρθρα σε τυχαία σημεία. Κατ 'αρχήν, δεν είναι δύσκολο, το εγκαταστήσαμε. Τώρα φανταστείτε ότι ο σύνδεσμος αποδείχθηκε χαλασμένος και πρέπει να τον αντικαταστήσετε σε 10 σημεία; Τι γίνεται αν είναι 100 σελίδες; Θα είναι δύσκολο να το κάνετε αυτό με το χέρι, ίσως, αλλά για πολλούς είναι ένα δύσκολο έργο.

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

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

Και αν έχετε ένα ηλεκτρονικό κατάστημα, τότε αυτό είναι ένα ακόμα πιο χρήσιμο πράγμα για εσάς, από τότε που χρησιμοποιείτε Οι σύντομοι κωδικοί του woocommerce μπορείτε να αλλάξετε μαζικά τις τιμές, τις συναλλαγματικές ισοτιμίες, τα ονόματα προϊόντων και οτιδήποτε άλλο θέλετε. Πώς μπορούν να πραγματοποιηθούν όλα αυτά;

Υπάρχουν πολλά πρόσθετα στο WordPress για τη δημιουργία συντομεύσεων, αλλά δεν μου άρεσε κανένα από αυτά: είτε όλα είναι στα αγγλικά, μερικές φορές πολύ εξελιγμένα, μερικές φορές πολύ λίγο λειτουργικά... Αλλά μόλις τις προάλλες διάβασα ότι ένας διάσημος blogger SEO Vitaly Burgomistrovανακοίνωσε μια δωρεάν προσθήκη για αυτούς τους σκοπούς - sCode από mojWP.


Ακολουθεί ένα σύντομο βίντεο για το πώς λειτουργεί αυτό το πρόσθετο:

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

Εάν εισαγάγετε έναν σύντομο κώδικα στον κώδικα html του προτύπου, θα δείτε αυτό που εισαγάγατε - τον σύντομο κώδικα. Για να λειτουργήσει, πρέπει να περικλείσετε τον σύντομο κωδικό σας σε μια συνάρτηση:

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

Προτιμώ να σας δείξω πώς μπορεί να γίνει πράξη για . Ήθελα να το κάνω εδώ και πολύ καιρό και τώρα είναι η κατάλληλη στιγμή. Για να κατανοήσω την ουσία της ιδέας μου, θα σημειώσω μόνο ένα σημείο.

Από τι εξαρτώνται τα κέρδη από το Adsense;

1. Κόστος ανά κλικ.
2. Αριθμός κλικ.

Δεν θα μπορούμε πλέον να επηρεάσουμε το πρώτο εάν το άρθρο είναι γραμμένο και υπάρχει ήδη καλή επισκεψιμότητα σε αυτό. Μπορούμε όμως να αυξήσουμε σημαντικά την αναλογία κλικ προς αριθμό εμφανίσεων. Όπως καταλαβαίνετε, θα μιλήσω μόνο για τα διαφημιστικά μπλοκ που υπάρχουν στο άρθρο. Τα μπλοκ στην πλαϊνή μπάρα, στα υποσέλιδα και ειδικά στην κεφαλίδα είναι τα πιο χαζά και τα έχω αφαιρέσει όλα εδώ και πολύ καιρό.

Αλλά στο άρθρο είναι ένα εντελώς διαφορετικό θέμα. Ένα άτομο αρχίζει να διαβάζει ένα άρθρο και συναντά μια διαφήμιση - θα κάνει κλικ ή όχι; Εδώ όλα εξαρτώνται από έναν παράγοντα: το θέμα της διαφήμισης συμπίπτει ΤΕΛΕΙΩΣ με το θέμα που συζητείται σε ΑΥΤΟ το στάδιο του άρθρου. Παράδειγμα:

Εδώ είναι ένα άτομο που διαβάζει για το ποια φιλοξενία να επιλέξει. Διαβάζει, διαβάζει και προσεγγίζει την ερώτηση που γράψατε στο άρθρο και τονίσατε με έντονη γραφή - ποιο hosting είναι καλύτερο να επιλέξω;?

Παρεμπιπτόντως, έχω ήδη χρησιμοποιήσει αυτό το πρόσθετο και έχω εισαγάγει έναν σύντομο κώδικα με διαφήμιση adsense μετά την ερώτησή μου - τι δείχνει; Εάν τοποθετήσετε το διαφημιστικό μπλοκ σε διαφορετικό μέρος, τότε αυτό το εφέ δεν θα υπάρχει πλέον. Καταλαβαίνεις σε τι καταλαβαίνω;

Ναι, πρέπει να εισαγάγετε ΧΕΙΡΟΚΙΝΗΤΑ τον σύντομο κωδικό με διαφήμιση ΣΤΗΝ ΚΑΤΑΛΛΗΛΗ ΘΕΣΗ! Εάν αυτό το μέρος δεν υπάρχει, τότε πρέπει να είναι ΔΗΜΙΟΥΡΓΙΑ! Μπορείτε να το κάνετε αυτό: ανοίξτε το google.com και εισαγάγετε το όνομα του άρθρου μας στην αναζήτηση. Αναζητούμε το άρθρο μας στα αποτελέσματα αναζήτησης και πηγαίνουμε σε αυτό. Ας δούμε τι διαφημίσεις εμφανίζει το Adsense. Αναζητούμε μια θέση στο άρθρο όπου θα ανήκει, ολοκληρώνουμε το άρθρο χρησιμοποιώντας τις λέξεις από αυτή τη διαφήμιση και εισάγουμε τον σύντομο κωδικό εκεί.

Τώρα η διαφήμιση στο άρθρο θα είναι ΜΕΓΙΣΤΗ προσαρμοσμένη στο περιεχόμενό της, τουλάχιστον στο κομμάτι του κειμένου όπου θα εμφανίζεται. Ναι, είναι μακρύ και κουραστικό, αλλά δεν ψάχνουμε για εύκολους τρόπους, σωστά; Ο εύκολος τρόπος είναι η θρησκεία των ηττημένων...


Δεν βρήκατε την απάντηση; Χρησιμοποιήστε την αναζήτηση ιστότοπου

Οι σύντομοι κώδικες είναι συναρτήσεις PHP που μπορούν να χρησιμοποιηθούν μέσα σε περιεχόμενο ανάρτησης χρησιμοποιώντας σύμβολα.

Για παράδειγμα, ένας τυπικός σύντομος κώδικας WordPress σάς επιτρέπει να εμφανίζετε μια συλλογή μέσα σε μια ανάρτηση.

Είναι σαφές ότι αυτή η λειτουργικότητα δίνει στους προγραμματιστές του WordPress εκπληκτικές ευκαιρίες - σήμερα, η εισαγωγή φορμών, κουμπιών και ρυθμιστικών σε αναρτήσεις είναι πολύ δημοφιλής.

Όπως μια συνάρτηση μπορεί να έχει ορίσματα, έτσι και ένας σύντομος κώδικας μπορεί να έχει τις δικές του παραμέτρους. Ένα άλλο παράδειγμα με σύντομο κωδικό:

Μπορείτε να επικολλήσετε τον κώδικα στο αρχείο functions.php (εννοώ αυτό που βρίσκεται στον κατάλογο του τρέχοντος θέματός σας).

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

Σύντομος κώδικας με παραμέτρους

Εντάξει, έγραψα ήδη ότι οι σύντομοι κωδικοί μπορούν να έχουν τις δικές τους παραμέτρους, ας δούμε τώρα πώς γίνεται αυτό.

Για παράδειγμα, έγραψα έναν σύντομο κώδικα που απλώς εισάγει έναν σύνδεσμο σε μια ανάρτηση που ανοίγει σε μια νέα καρτέλα προγράμματος περιήγησης target="_blank" . Δεν νομίζω ότι μπορεί πραγματικά να είναι χρήσιμο, αλλά το κύριο πράγμα για εμάς τώρα είναι να κατανοήσουμε την ίδια την αρχή του τρόπου λειτουργίας των σύντομων κωδικών.

Θα υπάρχουν δύο παράμετροι: anchor και url - anchor (κείμενο συνδέσμου) και URL, αντίστοιχα.

Κλείσιμο σύντομων κωδικών και σύντομων κωδικών μέσα σε συντομότερους κωδικούς

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

Τι θα γινόταν αν το επανασχεδιάζαμε ως εξής: URL σύνδεσης .

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

Αντίστοιχα, ας επεξεργαστούμε ξανά τον κώδικά μας από το προηγούμενο παράδειγμα:

συνάρτηση true_url_external( $atts , $shortcode_content = null ) ( $params = shortcode_atts( array ( "anchor" => "Misha Rudrastykh") , $atts ) ; return """ target="_blank">($params[ "άγκυρα "])"; ) add_shortcode( "trueurl" , "true_url_external" );

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

Προσθήκη κουμπιού εισαγωγής σύντομου κώδικα στο πρόγραμμα επεξεργασίας οπτικών αναρτήσεων TinyMCE

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

1.PHP

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

// Συνάρτηση Hooks true_add_mce_button() ( // ελέγξτε τα δικαιώματα του χρήστη - μπορεί να επεξεργαστεί αναρτήσεις και σελίδες if ( !current_user_can( "edit_posts" ) && !current_user_can( "edit_pages" ) ) ( return ; // αν δεν μπορεί, τότε δεν θα χρειαστεί το κουμπί, σε αυτήν την περίπτωση βγαίνουμε από τη συνάρτηση } // ελέγξτε εάν το οπτικό πρόγραμμα επεξεργασίας είναι ενεργοποιημένο στις ρυθμίσεις του χρήστη (εάν όχι, τότε δεν χρειάζεται να συνδέσετε το κουμπί) if ( "true" == get_user_option( "rich_editing" ) ) (add_filter ("mce_external_plugins" , "true_add_tinymce_script" ) ; add_filter ("mce_buttons" , "true_register_mce_button") add_mce_button" ); // Σε αυτή τη συνάρτηση καθορίζουμε έναν σύνδεσμο προς το αρχείο JavaScript του κουμπιούσυνάρτηση true_add_tinymce_script( $plugin_array ) ( $plugin_array [ "true_mce_button" ] = get_stylesheet_directory_uri() ."/true_button.js" ; επιστροφή $plugin_array ; ) // Καταχωρίστε το κουμπί στον επεξεργαστήσυνάρτηση true_register_mce_button( $buttons ) ( array_push ( $buttons , "true_mce_button" ) ; // true_mce_button - αναγνωριστικό κουμπιούεπιστροφή $buttons ; )

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

2.1. JavaScript. Παράδειγμα απλού κουμπιού

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

(function () ( tinymce.PluginManager .add ( "true_mce_button" , function ( editor, url ) ( // true_mce_button - αναγνωριστικό κουμπιού editor.addButton("true_mce_button" , ( // true_mce_button - Το αναγνωριστικό κουμπιού, πρέπει να είναι το ίδιο παντούκείμενο: "" , // κείμενο κουμπιού, εάν θέλετε το κουμπί σας να περιέχει μόνο ένα εικονίδιο, αφαιρέστε αυτή τη γραμμήτίτλος: "Εισαγωγή συντόμου κωδικού", // συμβουλή εργαλείουεικονίδιο: ψευδής // εδώ μπορείτε να καθορίσετε οποιοδήποτε από τα υπάρχοντα διανυσματικά εικονίδια στο TinyMCE ή τη δική σας κλάση CSS onclick: function () ( editor.insertContent ( "" ) ; // εισάγετε τον σύντομο κώδικα στο πρόγραμμα επεξεργασίας, μπορείτε επίσης να ορίσετε οποιαδήποτε ενέργεια jQuery } } ) ; } ) ; } ) () ;

Σαν άποτέλεσμα:

Έκδοση κειμένου του κουμπιού εισαγωγής σύντομου κώδικα στο οπτικό πρόγραμμα επεξεργασίας TinyMCE.

2.2. Ένα κουμπί με ένα εικονίδιο, μια αναπτυσσόμενη λίστα και τη δυνατότητα ορισμού παραμέτρων σύντομου κώδικα

Θα ξεκινήσω εισάγοντας (ή μάλλον αντικαθιστώντας) τον κώδικα στο αρχείο true_button.js:

(function () ( tinymce.PluginManager.add("true_mce_button" , function ( editor, url ) ( // Το αναγνωριστικό του κουμπιού true_mce_button πρέπει να είναι το ίδιο παντού editor.addButton( "true_mce_button" , ( // αναγνωριστικό κουμπιού true_mce_buttonεικονίδιο: "perec" , // τη δική μου τάξη CSS, χάρη στην οποία θα ορίσω το εικονίδιο του κουμπιού type: "menubutton" , τίτλος: "Εισαγωγή στοιχείου", // συμβουλή εργαλείου στο δείκτη του ποντικιούμενού: [ // η πρώτη αναπτυσσόμενη λίστα ξεκινά εδώ( κείμενο: "Στοιχεία φόρμας" , μενού: [ // εδώ ξεκινά η δεύτερη αναπτυσσόμενη λίστα μέσα στην πρώτη( text: "Text field" , onclick: function () ( editor.windowManager.open( ( title: "Ορισμός παραμέτρων πεδίου", body: [ ( type: "textbox" , name: "textboxName" , // ID, θα χρησιμοποιηθεί παρακάτωεπιγραφή: "Αναγνωριστικό και όνομα του πεδίου κειμένου", // τιμή ετικέτας: "σχόλιο" // Προεπιλεγμένη τιμή) , ( πληκτρολογήστε: "πλαίσιο κειμένου" , // πληκτρολογήστε textbox = πεδίο κειμένουόνομα: "multilineName" , ετικέτα: "Προεπιλεγμένη τιμή πεδίου κειμένου", τιμή: "Hello" , multiline: true , // μεγάλο πεδίο κειμένου - περιοχή κειμένου min Πλάτος: 300, // ελάχιστο πλάτος σε pixel min Ύψος: 100 // ελάχιστο ύψος σε pixel) , ( πληκτρολογήστε: "listbox" , // Τύπος πλαισίου λίστας = επιλογή αναπτυσσόμενης λίστας name: "listboxName" , label: "Padding" , "values" : [ // τιμές αναπτυσσόμενης λίστας( κείμενο: "Απαιτείται" , τιμή: "1" ) , // ετικέτα, τιμή(κείμενο: "Προαιρετικός", τιμή: "2" ) ) ] , onsubmit: συνάρτηση ( e ) ( // Αυτό θα συμβεί αφού συμπληρώσετε τα πεδία και πατήσετε το κουμπί υποβολή editor.insertContent( "" ) ; ) ) ) ; ) ) , ( // δεύτερο στοιχείο της ένθετης αναπτυσσόμενης λίστας, απλώς εισάγει τον σύντομο κώδικακείμενο: "Κουμπί υποβολής", onclick: function () ( editor.insertContent("" ) ; ) ) ] ) , ( // δεύτερο στοιχείο της πρώτης αναπτυσσόμενης λίστας, απλώς εισάγεται text: "Shortcode", onclick: function () ( editor.insertContent("" ) ; ) ) ] ) ); ) ) ; ) ) () ;

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

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

Συνήθως, επιλέγεται ένα κατάλληλο πρότυπο για κάθε εφαρμογή, αλλά μερικές φορές οι δυνατότητές του δεν επαρκούν.

Εδώ έρχονται στη διάσωση οι σύντομοι κώδικες, με τους οποίους μπορείτε να προσθέσετε το δικό σας «ζεστό» στο WordPress.

Ένας σύντομος κώδικας είναι ένας σύντομος κώδικας που εισάγεται απευθείας στο κείμενο μιας σελίδας, κεφαλίδας, widget - δηλαδή στο περιεχόμενο και επεκτείνει τις δυνατότητες του WordPress.

Με τη βοήθειά του, μπορείτε να μορφοποιήσετε όμορφα το κείμενο, να το χωρίσετε σε στήλες, να εισαγάγετε περιεχόμενο, ένα κουμπί, ένα πρόγραμμα αναπαραγωγής ήχου, μια φόρμα παραγγελίας και πολλές άλλες δυνατότητες στη σελίδα που διακρίνουν το WordPress σας από όλες τις άλλες.

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

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

Τύποι σύντομων κωδικών ανά δομή

Έρχονται χωρίς παραμέτρους, με παραμέτρους και με περιεχόμενο.

Σύντομοι κωδικοί χωρίς παραμέτρους

Μερικές φορές το μόνο που χρειάζεται να κάνετε είναι να καλέσετε έναν σύντομο κωδικό για να εκτελέσετε μια αυστηρά καθορισμένη λειτουργία. Δεν χρειάζεται να περάσετε καμία παράμετρο σε αυτό.

Για παράδειγμα, αυτός ο κωδικός εμφανίζει μια οριζόντια γραμμή. Η εμφάνισή του καθορίζεται στο φύλλο στυλ.

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

Σύντομοι κωδικοί με παραμέτρους

Μερικές φορές χρειάζεται να περάσετε παραμέτρους για να έχετε διαφορετικά αποτελέσματα.

Για παράδειγμα, έτσι εισάγεται ένα όμορφο κουμπί, το στυλ του οποίου πρέπει να προσδιορίζεται στο φύλλο στυλ.

Περιέχει δύο παραμέτρους: τίτλος- αυτή είναι η επιγραφή στο κουμπί, για παράδειγμα, Παραγγελία, Εγγραφή κ.λπ.

url— αυτή είναι η διεύθυνση κλικ προς αριθμό εμφανίσεων.

Με αυτόν τον τρόπο μπορείτε να εισαγάγετε μια τιμή σε ρούβλια, η οποία μετατρέπεται αυτόματα από την τιμή σε δολάρια με την τρέχουσα συναλλαγματική ισοτιμία της Κεντρικής Τράπεζας.

Εδώ είναι η παράμετρος μικρόείναι η τιμή σε δολάρια.

Σύντομοι κωδικοί με περιεχόμενο

Αποτελούνται από δύο μέρη, μεταξύ των οποίων μπορεί να υπάρχει οποιοδήποτε περιεχόμενο μιας ανάρτησης, widget κ.λπ.

Έτσι μπορείτε να επισημάνετε ένα κομμάτι κειμένου ή μέρος μιας ανάρτησης «τοποθετώντας» ένα έγχρωμο φόντο κάτω από αυτό:

Υπάρχει κάποιο κείμενο που θα εμφανίζεται σε έγχρωμο φόντο.

Παράμετρος χρώμαορίζει το χρώμα φόντου στον συνηθισμένο δεκαεξαδικό κώδικα.

Και έτσι μπορείτε να εμφανίσετε κείμενο σε δύο στήλες του ίδιου πλάτους:

Ένας σύντομος κώδικας στον κώδικα PHP αποτελείται από μια συνάρτηση που τον επεξεργάζεται και μια εντολή που εκχωρεί την αντίστοιχη συνάρτηση στον κώδικα.

Ακολουθεί ένας τυπικός σύντομος κώδικας για ένα κουμπί:

λειτουργία χα_αλλά($atts,$content=NULL) (
απόσπασμα(shortcode_atts(array(
«τίτλος» => «Μετάβαση σε»,
'url' => ψευδής
), $atts));

$output=" ".$title."’;

επιστροφή $output;
}
add_shortcode('but','ha_but');

Σε αυτό το παράδειγμα η συνάρτηση ονομάζεται χα_αλλά. Μεταβιβάζονται δύο παράμετροι - τίτλοςΚαι url. Και για τίτλοςεκχωρήθηκε προεπιλεγμένη τιμή Πηγαίνω. Εάν, κατά την κλήση του κωδικού, η παράμετρος τίτλος skip, τότε το προεπιλεγμένο κουμπί θα έχει την επιγραφή Πηγαίνω.

Μέσα σε μια συνάρτηση, μπορούν να κληθούν άλλες λειτουργίες, να συνδεθούν αρχεία κ.λπ. Η λειτουργικότητα του σύντομου κώδικα περιορίζεται μόνο από τη φαντασία και τις προγραμματιστικές σας ικανότητες.

Στη συνέχεια, η συνάρτηση επιστρέφει το αποτέλεσμα της εργασίας της χρησιμοποιώντας ΕΠΙΣΤΡΟΦΗ.

Λειτουργία add_shortcodeεκχωρεί σε σύντομο κωδικό με το όνομα αλλάλειτουργία χειριστή με το όνομα χα_αλλά.

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

Btn (
οθόνη: inline-block;
χρώμα: #000000;
γραμματοσειρά: 300 16px “Roboto”, sans-serif;
μετατροπή κειμένου: κεφαλαία;
φόντο: #fde42b;
φόντο: -webkit-gradient(γραμμικό, αριστερό πάνω, αριστερό κάτω, από(#fcea38), σε(#ffcf00));
φόντο: -webkit-linear-gradient(top, #fcea38 0%, #ffcf00 100%);
φόντο: γραμμική διαβάθμιση (προς τα κάτω, #fcea38 0%, #ffcf00 100%);
περίγραμμα-κάτω: 3px συμπαγές #b27d00;
padding: 14px 15px 11px;
πλάτος: 90%;
περίγραμμα-ακτίνα: 2px;
text-align: κέντρο;
κείμενο-διακόσμηση: κανένα;
text-shadow: 1px 1px 0 #ffec89;

}
.btn:hover (
αδιαφάνεια: 1;
φόντο: -webkit-gradient(γραμμικό, κάτω αριστερά, πάνω αριστερά, από(#ffdd02), σε(#fffe6d));
φόντο: -webkit-linear-gradient(κάτω, #ffdd02 0%, #fffe6d 100%);
φόντο: γραμμική κλίση (προς κορυφή, #ffdd02 0%, #fffe6d 100%);
χρώμα περιγράμματος: #bd8500;

Πώς να εισαγάγετε έναν σύντομο κώδικα σε ένα πρότυπο WordPress

Μπορείτε να εισαγάγετε μια συνάρτηση - έναν χειριστή σύντομου κώδικα απευθείας στο αρχείο που είναι υπεύθυνο για την έξοδο μεμονωμένων αναρτήσεων - συνήθως αυτό single.php. Τότε αυτός ο σύντομος κωδικός θα λειτουργεί μόνο σε αναρτήσεις.

Είναι καλύτερα να το επικολλήσετε σε ένα αρχείο functions.php,το οποίο είναι διαθέσιμο σε οποιοδήποτε θέμα WordPress. Στη συνέχεια, ο σύντομος κώδικας θα λειτουργήσει σε όλες τις σελίδες, τα γραφικά στοιχεία κ.λπ.

Ωστόσο, εάν ενημερώσετε ή αλλάξετε το πρότυπο, οι σύντομοι κωδικοί δεν θα υποβάλλονται πλέον σε επεξεργασία. Εάν σκοπεύετε να αλλάξετε τη σχεδίαση του ιστολογίου στο μέλλον, τότε είναι καλύτερο να τοποθετήσετε τον κώδικα όλων των συντομεύσεων σε ένα αρχείο, για παράδειγμα, shortcodes.php,και τοποθετήστε το σε ένα φάκελο μουστη ρίζα του ιστότοπου.

Σε αυτήν την περίπτωση, πρέπει να οργανώσετε την κλήση εισάγοντας το στο αρχείο λειτουργίες.phpομάδα require_once('my/shortcodes.php');

Αφού αλλάξετε ή ενημερώσετε το θέμα σας στο WordPress, μην ξεχάσετε να εισαγάγετε ξανά αυτήν την εντολή.

Πώς να εισαγάγετε έναν σύντομο κώδικα σε μια σελίδα WordPress

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

Ελπίζω να υπάρχουν αρκετά παραδείγματα ώστε να μπορείτε να δημιουργήσετε τον δικό σας σύντομο κώδικα WordPress που λύνει τα προβλήματα που χρειάζεστε.

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

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

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

Ας δούμε τις ενέργειες ενός σύντομου κώδικα χρησιμοποιώντας το πρόσθετο της συλλογής εικόνων ως παράδειγμα. Έτσι, μετά την εγκατάσταση και την ενεργοποίησή του, εμφανίζεται μια ειδική ενότητα στο διαχειριστικό μέρος του WordPress site σας, η οποία περιέχει τα απαραίτητα εργαλεία για τη δημιουργία μιας γκαλερί. Μόλις προστεθούν οι εικόνες και εφαρμοστούν οι απαραίτητες ρυθμίσεις, η συλλογή σας θα αποθηκευτεί. Τώρα το μόνο που μένει είναι να το εμφανίσετε στον ιστότοπο. Για να γίνει αυτό, το πρόσθετο σάς λέει έναν μοναδικό σύντομο κώδικα, όπου τον εισάγετε, θα εμφανιστεί η συλλογή που δημιουργήσατε.

Ο σύντομος κώδικας μοιάζει με αυτό:

Πώς να δημιουργήσετε έναν σύντομο κώδικα στο WordPress;

Τα εργαλεία του κινητήρα σάς επιτρέπουν όχι μόνο να χρησιμοποιείτε υπάρχοντες συντομότερους κωδικούς, αλλά και να δημιουργείτε τους δικούς σας. Για να το κάνετε αυτό πρέπει να έχετε δεξιότητες προγραμματισμού. Θα τοποθετήσουμε όλη την εργασία μας στο κύριο αρχείο ρυθμίσεων του ενεργού θέματος WordPress - λειτουργίες.php.

Εάν δεν ξέρετε πώς να επεξεργαστείτε λειτουργίες.php, τότε σε αυτή την περίπτωση το πρόσθετο ProFunctions θα σας βοηθήσει.

Για παράδειγμα, ας δημιουργήσουμε έναν σύντομο κώδικα που θα εμφανίζει απλό κείμενο "Γεια σου, WPSchool!"

Για να το κάνετε αυτό, προσθέστε τις ακόλουθες γραμμές στο παραπάνω αρχείο:

Λειτουργία wpschool_text_shortcode() ( επιστροφή "Γεια, WPSchool!"; ) add_shortcode("textshortcode", "wpschool_text_shortcode");

Ο κώδικας μας αποτελείται από 2 κύριες δομές. ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ συνάρτηση wpschool_text_shortcode()είναι μια συνάρτηση στην οποία στην πραγματικότητα εξάγεται η απαιτούμενη τιμή συντόμου. Στην περίπτωσή μας, αυτή είναι η έξοδος μιας συμβολοσειράς κειμένου "Γεια σου, WPSchool!"

Διευθυντικός add_shortcode()είναι μια εντολή βοηθητικού προγράμματος που δημιουργεί τον ίδιο τον σύντομο κώδικα. Έχει δύο παραμέτρους. 'textshortcode'– αυτό είναι το όνομα του σύντομου κωδικού, ο οποίος τελικά θα περικλείεται σε αγκύλες. Στη δεύτερη παράμετρο καθορίζουμε το όνομα της συνάρτησής μας με έξοδο κειμένου.

Ως αποτέλεσμα, θα λάβουμε τον ακόλουθο σύντομο κωδικό, έτοιμο για εισαγωγή:

Ας το προσθέσουμε στο τμήμα περιεχομένου της ανάρτησης ή της σελίδας.

Ως αποτέλεσμα, θα μοιάζει με αυτό στον ιστότοπο:

Στο παρακάτω παράδειγμα, θα δημιουργήσουμε έναν σύντομο κώδικα για την εισαγωγή μιας εικόνας με δεδομένο μέγεθος.

Συνάρτηση wpschool_picture_shortcode($atts) (extract(shortcode_atts(array("width" => 100, "height" => 100,), $atts)); return " "; ) add_shortcode("picture", "wpschool_picture_shortcode");

Ο σύντομος κώδικας περιέχει τώρα τις παραμέτρους της συνάρτησης και έχει επίσης ένα όρισμα $ atts. Για να χρησιμοποιήσουμε τις επιλογές σύντομου κώδικα, χρειαζόμαστε δύο λειτουργίες: shortcode_atts()Και εκχύλισμα(). Η πρώτη είναι μια συνάρτηση ενσωματωμένη στον πυρήνα του WordPress που αντιστοιχίζει τα χαρακτηριστικά του συντόμου κώδικα με αυτά που διαβιβάζονται και εκχωρεί προεπιλεγμένες τιμές (αν είναι απαραίτητο). εκχύλισμα()είναι συνάρτηση της γλώσσας PHP, το οποίο δημιουργεί μεταβλητές από τιμές πίνακα. Η συνάρτησή μας επιστρέφει την τιμή που χρειαζόμαστε ( HTML- σήμανση της εικόνας μας με καθορισμένες τιμές ύψους και πλάτους).

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

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

Πωςαρχείο? Γρήγορη απάντηση

Ειδικά για όσους γνωρίζουν ήδη τα πάντα, αλλά ψάχνουν απλώς για μια γρήγορη απάντηση ή για έναν άλλο κινητήρα, χρησιμοποιήστε αυτόν τον κωδικό:

php echo κάντε σύντομο κώδικα wordpress

Ωστόσο, μην ξεχνάτε τα σημεία στίξης! Εισαγωγικά στο δικό σας σύντομος κωδικόςΚαι Vphpο κωδικός πρέπει να είναι διαφορετικός.

Δηλαδή, εάν στο πρότυπο του ιστότοπού σας WordPress, χρησιμοποιείτε τον ίδιο σύντομο κώδικα, αλλά με δύο εισαγωγικά μέσα ([“…”]) και στον κώδικα php χρησιμοποιείτε επίσης διπλά εισαγωγικά (“[…]”), τότε χρειάζεστε να αλλάξουν κάποια από αυτά σε μοναχικά. Ακριβώς για τόσο μικρούς λόγους που συχνά Οι σύντομοι κωδικοί δεν λειτουργούν στο wordpress. Περισσότερα για αυτό παρακάτω.

Τι είναι ένας σύντομος κωδικός(σύντομος κωδικός) και σε τι χρησιμεύει;

Ο σύντομος κώδικας είναιαπό τα Αγγλικά "σύντομος κωδικός" Χρησιμοποιείται κυρίως κατά τη δημιουργία προσθηκών ή λειτουργικών μονάδων που έχουν σχεδιαστεί για να λειτουργούν με συστήματα διαχείρισης περιεχομένου (CMS), για παράδειγμα WordPress, Joomla, κ.λπ. Με απλά λόγια, αυτός ο σύντομος κώδικας είναι ένα είδος συντόμευσης που, όταν προστεθεί στον ιστότοπο, εμφανίζεται όλος ο μεγάλος κώδικας από το πρόσθετο.

Ο σύντομος κωδικός συνήθως μοιάζει με αυτό: είτε αυτή είτε έστω μόνο μία λέξη

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

Πως δουλεύει?

Όλα είναι πολύ απλά. Ας υποθέσουμε ότι έχετε έναν ιστότοπο στη μηχανή του WordPress, έχετε κάποιο απλό πρότυπο ιστότοπου (σχεδίαση), αλλά για να το διακοσμήσετε, αποφασίζετε να βάλετε ένα ρυθμιστικό σε αυτό, στο οποίο οι φωτογραφίες σας θα μετακινηθούν μέσα από μόνες τους. Είναι πολύ εύκολο να γίνει. Για να το κάνετε αυτό, πρέπει να κάνετε λήψη του πρόσθετου ρυθμιστικού από τη γενική βιβλιοθήκη προσθηκών WordPress, να ανεβάσετε εκεί τις απαραίτητες φωτογραφίες και το πρόσθετο θα σας δώσει έναν μικρό κωδικό ρυθμιστικού όπως:

αλλά μόνο αυτός ο σύντομος κωδικός (Shortcode) σε μία γραμμή:

Εισάγοντας κάτι τέτοιο

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

ΕΝΑ πώς να εισάγετε σύντομο κωδικόρυθμιστικό ευθεία σε ένα πρότυπο wordpressσε κώδικα php;

Εάν το χρειάζεστε απευθείας στον κώδικα, για το σκοπό αυτό οι προγραμματιστές αυτού του πρόσθετου έγραψαν δίπλα στο (Εικ. παραπάνω) μια συνάρτηση συντόμευσης στην PHP:

Αυτή η "συνάρτηση" σύντομου κώδικα μπορεί να εισαχθεί σε ένα αρχείο php στη θέση που χρειάζεστε στον ιστότοπο. Για παράδειγμα, στο header.php, κάπου μετά το σώμα ή ίσως στο sidebar.php, ή καλύτερα από όλα στο αρχείο προτύπου σελίδας (θα μπορούσε να ονομαστεί κάτι σαν content-page.php), ως αποτέλεσμα, θα λάβετε ότι το ίδιο ρυθμιστικό, αλλά ήδη ενσωματωμένο στο σχεδιασμό του ίδιου του ιστότοπου.

Ωστόσο, πρέπει να είστε πολύ προσεκτικοί όταν Έξοδος σύντομου κώδικα σε πρότυπο wordpressσε αρχεία php. Αυτό απαιτεί τουλάχιστον βασικές γνώσεις PHP. Διότι εάν το εισαγάγετε "σε λάθος μέρος" σε ένα αρχείο PHP, θα εμφανιστεί ένα σφάλμα στον ιστότοπο.

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

Πως εμφάνιση σύντομου κώδικα σε php V wordpress, εάν δεν υπάρχει έτοιμη λειτουργία PHP στο πρόσθετο;

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

Τι πρέπει να κάνουμε σε αυτή την περίπτωση, αφού πρέπει να εισαγάγουμε τον σύντομο κώδικα στο πρότυπο του WordPress και απευθείας στο αρχείο php του ιστότοπου; Σε αυτήν την περίπτωση, πρέπει απλώς να τυλίξετε τον σύντομο κώδικα μόνοι σας με τη συνάρτηση εξόδου PHP, η οποία εμφανίστηκε στην αρχή του άρθρου. Ως αποτέλεσμα, λαμβάνοντας υπόψη τον σύντομο κώδικα μας, θα λάβουμε αυτόν τον τύπο συνάρτησης PHP:

σύντομος κώδικας wordpress πώς να εισάγετε

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

Μεγάλα λάθη! Ή γιατί ο σύντομος κώδικας του wordpress δεν λειτουργεί;

Στην αρχή του άρθρου περιέγραψα ήδη πώς να το κάνω σωστά προσθέστε σύντομο κωδικό V wordpress,Και πως επικολλήστε τον σύντομο κώδικαPHP. Ας τα συνοψίσουμε όλα τώρα.

Στην πραγματικότητα, υπάρχουν δύο τρόποι προσθήκης, και συγκεκριμένα:

σύντομος κώδικας wordpress στο πρότυπο

Όπως μπορείτε να δείτε, διαφέρουν μεταξύ τους μόνο σε εισαγωγικά - μονό και διπλό. Η σύνταξη της γλώσσας PHP είναι πολύ προσεκτική με τέτοια εισαγωγικά. Και αν μέσα στη δεύτερη συνάρτηση, που είναι με δύο εισαγωγικά, εισαγάγετε έναν σύντομο κώδικα επίσης με δύο εισαγωγικά, για παράδειγμα, όπως είχαμε: τότε θα λάβετε ένα σφάλμα στον ιστότοπο.

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

Μπορείτε να προσθέσετε οποιονδήποτε από τους δύο πρώτους συντομότερους κωδικούς στο πρότυπο WordPress σας απευθείας στο πρόγραμμα επεξεργασίας. Για να το κάνετε αυτό, βρείτε ένα κατάλληλο αρχείο php στο πρόγραμμα επεξεργασίας ιστότοπου που ελέγχει το "μέρος" στον ιστότοπο όπου θέλετε να εμφανίσετε το ρυθμιστικό σας. Μπορείτε να βρείτε αυτό το μέρος στα εργαλεία προγραμματιστή απευθείας στο πρόγραμμα περιήγησής σας, πατώντας το συνδυασμό πλήκτρων Ctrl+Shift+I.