Πώς να προσθέσετε εύκολα προσαρμοσμένο κώδικα – #4 Code Snippet

Χωρίς να χαλάσει ο ιστότοπο σας

Συχνά ενώ διαβάζετε διάφορα άρθρα για Code Snippet στην σελίδα μας ή στο Google για το WordPress , μπορεί να σας ζητηθεί να προσθέσετε προσαρμοσμένο κώδικα στο αρχείο functions.php του θέματος σας ή σε ένα συγκεκριμένο σημείο στον ιστότοπο σας. Το πρόβλημα είναι ότι ακόμη και το παραμικρό λάθος μπορεί να καταστρέψει τον ιστότοπο σας – Code Snippet. Σε αυτό το άρθρο, θα σας δείξουμε έναν εύκολο τρόπο για να προσθέσετε προσαρμοσμένο κώδικα (Code Snippet) στο WordPress χωρίς να φοβάστε αν χαλάσει ο ιστότοπο σας.

Το πρόβλημα είναι ότι ακόμη και ένα μικρό λαθάκι στο προσαρμοσμένο κώδικα μπορεί να χαλάσει τον ιστότοπό σας στο WordPress και να τον κάνει απρόσιτο. – Code Snippet

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

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

Πάμε να δούμε 4 από τα καλύτερα Plugins για να εισάγετε κώδικα στην σελίδα σας.

• Code Snippets
• SyntaxHighlighter Evolved
• Enlighter
• Syntax Code Highlighter

1. Code Snippets

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

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

Τιμή: ΔΩΡΕΑΝ | Περισσότερες πληροφορίες

2. SyntaxHighlighter Evolved

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

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

Το πρόσθετο εκτελείται επίσης διάφορες παραμέτρους σύντομου κώδικα, πράγμα που σημαίνει ότι πρέπει απλώς να εισαγάγετε έναν σύντομο κώδικα σε μια ανάρτηση ή σε μια σελίδα και, στη συνέχεια, να προσαρμόσετε διάφορα στοιχεία σε κάθε απόσπασμα. Είναι εύκολο, γρήγορο και απλό όπως τα περισσότερα άλλα προσαρμοσμένα μπλοκ Gutenberg. Αλλά και πάλι το νούμερο #1 για εμάς είναι το code snippet αλλά είναι μια δεύτερη εναλλακτική λύση.

Τιμή: ΔΩΡΕΑΝ | Περισσότερες πληροφορίες

3. Enlighter

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

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

Τιμή: ΔΩΡΕΑΝ | Περισσότερες πληροφορίες

4. Syntax Code Highlighter

Το Syntax Code Highlighter χρησιμοποιεί editor για να αποδώσει αποσπάσματα κώδικα στις αναρτήσεις και τις σελίδες του WordPress. Περνώντας στο Block Editor, απλά πρέπει να επικολλήσετε τον κώδικα που θέλετε να εμφανιστεί και να τοποθετήσετε ορισμένες από τις ρυθμίσεις στη δεξιά πλαϊνή γραμμή, χρησιμοποιώντας μεταβολικά πλαίσια και λεπτομέρειες. Αυτό διευκολύνει την επισήμανση και τον προσδιορισμό του αποσπάσματος κώδικα που βλέπει ο χρήστης.

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

Τιμή: ΔΩΡΕΑΝ | Περισσότερες πληροφορίες

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