Πώς να προσθέσετε ένα σύντομο κουμπί CSS3 Cool στο WordPress

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


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

Τι είναι οι σύντομοι κωδικοί?

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

[σύντομος κωδικός]

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

Προσθήκη ενός προσαρμοσμένου “κουμπιού” Shortcode

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

συνάρτηση myprefix_button_shortcode ($ atts, $ content = null) {

// Εξαγωγή σύντομων χαρακτηριστικών
απόσπασμα (shortcode_atts (πίνακας (
'url' => '',
'τίτλος' => '',
'στόχος' => '',
'κείμενο' => '',
'color' => 'πράσινο',
), $ atts));

// Χρησιμοποιήστε την τιμή κειμένου για στοιχεία χωρίς περιεχόμενο
$ content = $ κείμενο; $ text: $ περιεχόμενο;

// Κουμπί επιστροφής με σύνδεσμο
εάν ($ url) {

$ link_attr = πίνακας (
'href' => esc_url ($ url),
'title' => esc_attr ($ τίτλος),
'target' => ('blank' == $ target); "_blank": "",
'class' => 'χρώμα κουμπιού myprefix-'. esc_attr ($ χρώμα),
)

$ link_attrs_str = ";

foreach ($ link_attr ως $ key => $ val) {

αν ($ val) {

$ link_attrs_str. = ". κλειδί $. '= "'. $ val. '"';

}

}


ΕΠΙΣΤΡΟΦΗ '". do_shortcode (περιεχόμενο $). "";

}

// Δεν έχει οριστεί σύνδεσμος, οπότε το κουμπί επιστροφής ως εύρος
αλλιώς {

ΕΠΙΣΤΡΟΦΗ '". do_shortcode (περιεχόμενο $). "";

}

}
add_shortcode ('button', 'myprefix_button_shortcode');

Χρήση του σύντομου κώδικα στον επεξεργαστή δημοσιεύσεων

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

// Παράδειγμα χρήσης 1
[κουμπί href = "Ο ΣΥΝΔΕΣΜΟΣ ΣΑΣ" target = "self"] Κείμενο κουμπιού [/ κουμπί]

// Παράδειγμα χρήσης 2
[κουμπί href = "Ο ΣΥΝΔΕΣΜΟΣ ΣΑΣ" target = "self" text = "Text Button"]

Στυλ του κουμπιού

Ποιο είναι το νόημα της δημιουργίας ενός σύντομου κώδικα εάν πρόκειται απλώς να μοιάζει με έναν απλό σύνδεσμο; Τίποτα. Γι ‘αυτό θα σας δείξω πώς να προσθέσετε ένα δροσερό CSS3 στο στυλ του κουμπιού λήψης και να το κάνω να φαίνεται σέξι.

Όπως παρατηρήσατε στο σύντομο κώδικα, πρόσθεσα την τάξη “myprefix-button”, ώστε να μπορείτε να το διαμορφώσετε εύκολα μέσω του αρχείου style.css. Εισαγάγετε τον ακόλουθο κώδικα στο φύλλο στυλ σας για να δημιουργήσετε ένα ωραίο μπλε κουμπί όπως αυτό στην εικόνα.

/ * Στυλ κύριου κουμπιού * /
.κουμπί myprefix {φόντο: # 65A343; κείμενο-σκιά: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; περίγραμμα-ακτίνα: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba (0, 0, 0, 0.1); δρομέας: δείκτης; οθόνη: inline-block; υπερχείλιση: κρυφό; επένδυση: 1px; κάθετη-ευθυγράμμιση: μεσαία; }

.myprefix-button span {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; χρώμα: #fff; οθόνη: μπλοκ; γραμματοσειρά: έντονο; μέγεθος γραμματοσειράς: 1em; επένδυση: 6px 12px; κείμενο-σκιά: 1px 1px 1px rgba (0, 0, 0, 0.25); }

/ * Αιωρηθείτε * /
.κουμπί myprefix: αιωρήστε το {φόντο: # 558938; διακόσμηση κειμένου: κανένα; }

/* Ενεργός */
.κουμπί myprefix: ενεργό {φόντο: # 446F2D; }

Πράσινο κουμπί σύντομου κώδικα

Υποστήριξη πολλαπλών χρωμάτων

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

/ * Μπλε κουμπί * /
.myprefix-button.color-blue {φόντο: # 2981e4}

/ * Μπλε κουμπί αιωρείται * /
.myprefix-button.color-blue: hover {φόντο: # 2575cf}

/ * Ενεργό μπλε κουμπί * /
.myprefix-button.color-blue: ενεργό {φόντο: # 0760AD}

Τώρα απλώς χρησιμοποιήστε την παράμετρο χρώματος στο σύντομο κώδικα:

[κουμπί href = "Ο ΣΥΝΔΕΣΜΟΣ ΣΑΣ" target = "self" color = "blue"] Κείμενο κουμπιού [/ κουμπί]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me