Οδηγίες για το πως θα προσθέσει κανείς κώδικα μέσα στο WordPress

ΙΑΚΩΒΟΣ ΦΡΟΥΝΤΑΣ

Προσθήκη κώδικα στο WordPress

Shares

Aυτό το post γράφτηκε αρχικά το 2015. Τότε ακόμη έψαχνα ένα όμορφο τρόπο για να γίνεται πιο εύκολη η προσθήκη κώδικα μέσα στο WordPress. Οπότε σήμερα επανέρχομαι με μια νεότερη έκδοσή του.

Αν ξέρεις ήδη πως να γράφεις σωστά ένα άρθρο στο WordPress τότε είσαι έτοιμος γι' αυτό 🙂

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

To Prism

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

Εγκατάσταση του Prism

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

 

Βήματα εγκατάστασης
  1. Πηγαίνουμε στο μενού Πρόσθετα --> Προσθήκη Νέου
  2. Κάνουμε αναζήτηση για τον όρο Prism
  3. Βρίσκουμε το plugin με τον τίτλο Prism Syntax Highlighter for WordPress
  4. Το εγκαθιστούμε
  5. Ολοκληρώνουμε την διαδικασία εγκατάστασης ενεργοποιώντας το plugin Prism.
Το plugin Prism ενεργοποιημένο
Το plugin Prism ενεργοποιημένο
Χρήση του plugin

Το κουμπί του Prism που εμφανίζεται στον TinyMCE μετά την εγκατάσταση του pluginΤώρα αφού έχουμε εγκαταστήσει το plugin μέσα στον TinyMCE σε κάθε άρθρο και σελίδα δίπλα απο το κουμπί Add Media βλέπουμε οτι υπάρχει το Prism. Πατώντας το μας εισάγει όπου έχουμε επιλέξει εμείς τον κέρσορα ένα shortcode της μορφής  prism field="" language="" τώρα τα πάντα είναι έτοιμα για να εισάγουμε τον κώδικά μας.

 

Εισαγωγή του Κώδικα απο το GitHub

Προσωπικά, χρησιμοποιώ το GitHub τους τελευταίους μήνες πολύ ενεργά σε διάφορα project.  Μια απο τις πολλές δυνατότητες που μας δίνει είναι να ανεβάσουμε ένα αρχείο μέσα σε ένα repository και να το εξάγουμε σαν καθαρή πληροφορία (raw μορφή). Έτσι λοιπόν η διαδικασία έχει ως εξής: Για να εμφανίσετε ένα κομμάτι κώδικα στην σελίδα σας, ανεβάζετε το αρχείο στο GitHub, παίρνετε το λινκ απο την raw μορφή του και τροποιείτε ώς εξής το shortcode για να δουλέψει.

prism fieldurl="το λινκ απο την raw μορφή του αρχείου" language="η γλώσσα στην οποία είναι γραμμένος ο κώδικας σας"

 

Παράδειγμα

prism url="https://raw.githubusercontent.com/ifrountas/tutorials/master/prism-style.css" language="css"

Προσοχή! Εγώ για να μπορέσω να σας δείξω το παράδειγμα έχω παραλείψει τα [] που χρησιμοποιούμε για το άνοιγμα και το κλείσιμο των shortcodes μέσα στον text editor. Εσείς να τα βάλετε κανονικά. 🙂

 

Τελικό αποτέλεσμα του κώδικα
.codec {
  background-color: #272727;
  border-top: solid 1px #A1A1A1;
  border-right: solid 1px #A1A1A1;
  border-bottom: solid 1px #A1A1A1;
  border-left: solid 8px #A1A1A1;
  font-family: courier new, courier;
  color: #FFFFFF;
  padding: 5px;
  margin: 5px 0 5px 0;
  line-height: 180%;
  text-align: left;
  overflow: hidden;
}

 

Έχω φτιάξει μια λίστα για να μοιραζόμαστε τα νέα του WordPress
* Θα σου στέλνω μια φορά το μήνα όλα τα νέα μαζεμένα. Να ξέρεις οτι σιχαίνομαι το spam.

Σχετικές Ετικέτες

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει τα ανεπιθύμητα σχόλια. Μάθετε πώς υφίστανται επεξεργασία τα δεδομένα των σχολίων σας.

Αρέσει σε %d bloggers:

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

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close