Βελτιστοποίηση ταχύτητας WordPress με προσαρμοσμένα εικονίδια κοινωνικής διανομής

Μπορεί να φαίνεται ότι είναι ένα εύκολο έργο, αλλά προσθέτοντας καλά-συμπεριφορά κουμπιά κοινωνικής κατανομής σε ένα site WordPress μπορεί να είναι μια ταλαιπωρία. Όταν λέω ότι συμπεριφέρομαι καλά, εννοώ απλά, ελαφριά, φιλικά προς τους πόρους, γρήγορα - τα πιο κοινά plugins για κοινωνική προβολή εκεί έξω δεν είναι έτσι. Έχουν την τάση να τρώνε πόρους σαν τρελός, και γιατί θα ήθελε κάποιος να αυξήσει το χρόνο φόρτωσης του plugin κατά 25-35% μόνο για να εμφανίσει κάποια εικονίδια στον ιστότοπό τους?

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

Βήμα 1: Δημιουργήστε τα κουμπιά κοινής χρήσης κοινωνικής δικτύωσης

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

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

Σε αυτήν την οθόνη (παρακάτω), θα βρείτε δύο επιλογές: 'Δεν υπάρχει JavaScript' και 'JavaScript'. Τσιμπούρι JavaScript, καθώς θα επιτρέψει στο πρόγραμμα περιήγησης να ανιχνεύσει δυναμικά τη διεύθυνση URL, επομένως οι επισκέπτες σας θα μπορούν να μοιράζονται κάθε θέση μεμονωμένα όχι μόνο με τη διεύθυνση URL της αρχικής σελίδας.

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

Βήμα 2: Δημιουργία παιδικού θέματος

Τώρα θα πρέπει να προσθέσετε τα παραγόμενα εικονίδια και κώδικα στον ιστότοπό σας. Πρώτα απ 'όλα θα χρειαστεί να δημιουργήσετε ένα παιδικό θέμα.

Μπορείτε εύκολα να δημιουργήσετε ένα θέμα παιδιού WP με τη βοήθεια του εκπαιδευτικού μας εγχειριδίου ή μπορείτε να ακολουθήσετε τα βήματα αυτού του άρθρου του Κώδικα WP. Αν έχετε ήδη ένα, μπορείτε να μεταβείτε στο Βήμα 3.

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

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

Βήμα 3: Δημιουργήστε μια συνήθη λειτουργία που εμφανίζει τα εικονίδια

Θα προσθέσουμε μια προσαρμοσμένη συνάρτηση στο αρχείο functions.php του θέματος του παιδιού.

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

Εισάγετε την ακόλουθη γραμμή κώδικα σε αυτό το κενό αρχείο:

 
Όταν σας functions.php αρχείο είναι ρυθμισμένη προσθέστε το ακόλουθο απόσπασμα κώδικα σε αυτό:
 
 / * * Προσθέτει τα προσαρμοσμένα εικονίδια κοινής χρήσης κοινωνικής δικτύωσης * / function add_social_sharing () ?> 
Κοινή χρήση αυτής της ανάρτησης
   
Τελικά διαγράψτε τη γραμμή του σχολίου HTML από το απόσπασμα κώδικα παραπάνω και αντικαταστήστε τον με τον κώδικα HTML που δημιουργήσατε στο βήμα 1 με την γεννήτρια κουμπιών κοινωνικής διανομής.
 
Βήμα 4: Αντιγράψτε το κατάλληλο αρχείο προτύπου στο φάκελο Θέματα παιδιού
 
Από προεπιλογή, οι μεμονωμένες αναρτήσεις καθορίζονται από ένα αρχείο προτύπου που ονομάζεται single.php. Μερικές φορές - ειδικά σε πιο σύγχρονα θέματα - η δομή του single.php είναι πιο περίπλοκη, καθώς φορτώνει επιπλέον αρχεία προτύπου. Σε αυτό το βήμα πρέπει να βρούμε το κατάλληλο αρχείο προτύπου όπου μπορούμε να προσθέσουμε τα εικονίδια αργότερα.
 
Για να εντοπίσετε το σωστό σημείο για τα κουμπιά κοινωνικής δικτύωσης, πρέπει να βρούμε το αρχείο προτύπου περιέχει τη λειτουργία που φορτώνει το περιεχόμενο των μεμονωμένων αναρτήσεων.
 
Ας ανοίξουμε τον επεξεργαστή θεμάτων στον πίνακα ελέγχου admin του WordPress κάτω από Εμφάνιση> Επεξεργαστής. Στην επάνω δεξιά γωνία βρίσκετε μια αναπτυσσόμενη λίστα όπου μπορείτε να επιλέξετε το γονικό σας θέμα. Κάτω από το αναπτυσσόμενο μενού μπορείτε να δείτε όλα τα αρχεία προτύπων που περιέχει το γονικό σας θέμα. Κάντε κύλιση προς τα κάτω μέχρι να βρείτε το Πρότυπο ενιαίας δημοσίευσης (που ονομάζεται single.php) και ανοίξτε το.
 
Εάν το γονικό θέμα χρησιμοποιεί το get_template_part () WP λειτουργία στο single.php αρχείο που σημαίνει ότι χρησιμοποιεί ένα πρόσθετο αρχείο προτύπου για να φορτώσει το περιεχόμενο της μοναδικής ανάρτησης.
 
Πρώτα πρέπει να μάθετε ποιο είναι αυτό. Το όνομα του αρχείου πρόσθετου προτύπου είναι η πρώτη παράμετρος του get_template_part () λειτουργία.
 
Σε Είκοσι Δεκαπέντε μοιάζει με αυτό:
 
get_template_part ('περιεχόμενο', get_post_format ());
 
Η πρώτη παράμετρος είναι 'περιεχόμενο' πράγμα που σημαίνει ότι αναζητούμε το αρχείο προτύπου που καλείται content.php. Πρέπει να αντιγράψετε αυτό το αρχείο από το ριζικό φάκελο γονικού θέματος στον ριζικό φάκελο του παιδιού ώστε να το τροποποιήσετε.
 
 
Βήμα 5: Προσθέστε το γάντζο δράσης στο σωστό αρχείο προτύπου
 
Δημιουργήσαμε μια λειτουργία που ονομάζεται add_social_sharing () στο Βήμα 3, και το προσαρτήσαμε σε ένα προσαρμοσμένο γάντζο δράσης που ονομάζεται custom_social_share. Τώρα θα πρέπει να προσθέσουμε αυτό το γάντζο στο σημείο όπου θέλουμε να εκτελεστεί η λειτουργία.
 
Ακολουθεί το απόσπασμα κώδικα που θα χρειαστεί να τοποθετήσετε στη σωστή θέση:
 
 
Στη συνέχεια, ας βρούμε τη σωστή θέση.
 
Ανοίξτε το αρχείο προτύπου που προσθέσατε στο θέμα του παιδιού στο Βήμα 4 σε ένα πρόγραμμα επεξεργασίας κώδικα ή στο πρόγραμμα επεξεργασίας κειμένου του πίνακα ελέγχου του WordPress και αναζητήστε το το περιεχόμενο() λειτουργία.
 
Ελέγξτε εάν υπάρχει a wp_link_pages () λειτουργία αμέσως μετά το το περιεχόμενο() λειτουργία. Αν υπάρχει, τότε έρχεται το απόσπασμα κώδικα παραπάνω. διαφορετικά ακολουθεί το το περιεχόμενο() λειτουργία.
 
 
Βήμα 6: Προσθέστε τον κώδικα CSS στο θέμα Child
 
Ανοιξε το style.css αρχείου του θέματος του παιδιού σας είτε στον επεξεργαστή κειμένου είτε στον επεξεργαστή θεμάτων του πίνακα ελέγχου του WordPress, αντιγράψτε τον κώδικα CSS που δημιουργήσατε στο Βήμα 1, επικολλήστε το στο τέλος του αρχείου και αποθηκεύστε το.
 
 
Θα προσθέσουμε δύο επιπλέον γραμμές στο αρχείο CSS για να εμφανιστούν σωστά τα εικονίδια κοινής χρήσης σε κάθε θέμα. Αντιγράψτε και επικολλήστε το ακόλουθο απόσπασμα κώδικα στο τέλος του style.css αρχείο:
 
 τα πλήκτρα ul.share li a border: 0;  ul.share-κουμπιά li img εμφάνιση: inline;  
 
Βήμα 7: Μεταφορτώστε το Social Media Icon Set στο διακομιστή
 
Μεταφορτώστε το επιλεγμένο σύνολο εικονιδίων κοινωνικών μέσων που κατεβάσατε στο Βήμα 1 στο φάκελο θέμα παιδιού σας. Συνδέστε το διακομιστή σας μέσω FTP, δημιουργήστε ένα νέο φάκελο που ονομάζεται εικόνες μέσα στη ρίζα του φακέλου θεμάτων παιδιού (/ wp-content / themes / your-child-theme / images) και ανεβάστε το εικονίδιο εδώ.
 
Ονομάζουμε το φάκελο εικόνες επειδή αυτό είναι το προεπιλεγμένο όνομα του φακέλου εικόνας που χρησιμοποιεί η γεννήτρια κουμπιών απλής κοινής χρήσης.
 
Βήμα 8: Ελέγξτε τη διαδρομή των αρχείων εικονιδίων
 
Αφού ανεβάσατε τα εικονίδια κοινωνικών μέσων στο διακομιστή σας στο βήμα 7, είναι σημαντικό να ελέγξετε τη διαδρομή των αρχείων εικονιδίων για να βεβαιωθείτε ότι θα φορτωθούν.
 
Η διαδρομή ενός αρχείου εικόνας δίνει μια συμβουλή στο πρόγραμμα περιήγησης σχετικά με την τοποθεσία του στο διακομιστή. Ας ελέγξουμε τις διαδρομές εικόνας μέσα στο functions.php αρχείου του θέματος του παιδιού. Ανοίξτε το αρχείο στον επεξεργαστή κώδικα και περιηγηθείτε στο add_social_sharing () όπου θα πρέπει να ελέγξετε τον κώδικα HTML που δημιουργήσατε με την γεννήτρια κουμπιών απλής κοινής χρήσης.
 
Στον κώδικα HTML θα βρείτε ένα  ετικέτα με ένα src χαρακτηριστικό για κάθε εικονίδιο. Ελέγξτε εάν το καθένα src τα χαρακτηριστικά υποδεικνύουν την ακριβή τοποθεσία στην οποία ανεβάστηκε το σετ εικονιδίων στο Βήμα 7.
 
Η γεννήτρια κουμπιών απλής κοινής χρήσης προσθέτει σχετικές διαδρομές στο  αρχεία. Ωρες ωρες τα προγράμματα περιήγησης δεν μπορούν να εκτυπώσουν τις εικόνες αν χρησιμοποιείτε σχετική διαδρομή, έτσι είναι μια καλή ιδέα να Χρησιμοποιήστε απόλυτα μονοπάτια. Με αυτόν τον τρόπο, κάθε πρόγραμμα περιήγησης που χρησιμοποιείται ενδεχομένως από τους επισκέπτες σας μπορεί να είναι σίγουρο για τη θέση των απαιτούμενων αρχείων εικονιδίων.
 
Η σχετική διαδρομή εικόνας που προστέθηκε από τη γεννήτρια φαίνεται κάτι σαν αυτό:
 
 
Ας αλλάξουμε το src χαρακτηριστικό κάθε εικονιδίου σε μια απόλυτη διαδρομή, που σημαίνει ότι θα περιλαμβάνει την πλήρη διεύθυνση URL του αρχείου.
 
Η παραπάνω διαδρομή URL θα μοιάζει με αυτή:
 
 
Βήμα 9: Μεταφόρτωση των τροποποιημένων αρχείων και ενεργοποίηση του παιδικού θέματος
 
Συνδέστε το διακομιστή σας μέσω FTP και μεταφορτώστε όλα τα αρχεία που δημιουργήσαμε σε αυτό το σεμινάριο που δεν έχετε ανεβάσει ακόμη: το functions.php, ο style.css, και το κατάλληλο αρχείο προτύπου (σε αυτό το εγχειρίδιο είτε το single.php ή το content.php).
 
Τέλος, ενεργοποιήστε το θέμα παιδιού στο ταμπλό του διαχειριστή του WP στο πλαίσιο του Εμφάνιση> Θέματα μενού.
 
Τώρα είστε έτοιμοι με τα εξαιρετικά ελαφριά, εξοικονόμηση πόρων, προσαρμοσμένα εικονίδια κοινωνικής προβολής. Μπορείτε να κάνετε online και να το ελέγξετε ζωντανά στον ιστότοπό σας.
 
 
συμπέρασμα
 
Σε αυτό το σεμινάριο σας έδειξα πώς μπορείτε να προσθέσετε τα προσαρμοσμένα κουμπιά κοινωνικής κατανομής στο τέλος των μεμονωμένων αναρτήσεων. Μπορείτε να προσθέσετε τα εικονίδια κοινής χρήσης σε οποιεσδήποτε άλλες τοποθεσίες στον ιστότοπό σας με τη βοήθεια του γάντζου δράσης που δημιουργήσαμε.
 
Απλά προσθέστε τον κώδικα που χρησιμοποιήσαμε στο Βήμα 5 στο σημείο που θέλετε να εμφανίζονται τα κουμπιά:
 
 
Θα πρέπει επίσης να βρείτε το σωστό αρχείο προτύπου εάν θέλετε να τοποθετήσετε τα εικονίδια κάπου αλλού. Οι μεμονωμένες σελίδες καθορίζονται από ένα αρχείο προτύπου που ονομάζεται page.php, ενώ τα συνημμένα αρχεία όπως οι εικόνες φορτώνονται από attachment.php.
 
Αν θέλετε να εμφανίσετε τα κουμπιά κοινής χρήσης σε διαφορετικό σημείο στον ιστότοπό σας, μπορείτε να χρησιμοποιήσετε την Ιεραρχία προτύπων WordPress για να την βρείτε.
 
Λήψη πηγής