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

Πριν προχωρήσουμε περαιτέρω, ας ρίξουμε μια ματιά σε μερικά παραδείγματα:

1. Smashing Magazine Author Box

Αυτός είναι ο τρόπος με τον οποίο το κουτί συγγραφέα εμφανίζεται στο δημοφιλές blog σχεδιασμού Smashing Magazine. Η γραμμή πλαισίου ενός άρθρου εμφανίζει το όνομα του συγγραφέα, την εικόνα προφίλ, την περιγραφή, τη διεύθυνση URL του ιστολογίου και έναν σύνδεσμο στο λογαριασμό Twitter του συγγραφέα.

2. ProBlogDesign Author Box

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

Δημιουργία πλαισίου συγγραφέων για το θέμα του ιστολογίου σας

1. Αρχικά, ζητήστε από όλους τους συγγραφείς να ενημερώσουν το προφίλ συγγραφέων τους από το σύνδεσμο "Προφίλ" που παρέχεται μέσα στην περιοχή διαχείρισης του WordPress. Ο συγγραφέας θα πρέπει να συμπληρώσει το όνομα, το επώνυμο και να προσθέσει ένα προσαρμοσμένο bio στο πεδίο περιγραφής. Συνιστάται επίσης να προσθέσετε τον σύνδεσμο του ιστοτόπου του Συγγραφέα στο αντίστοιχο πεδίο όπως φαίνεται παρακάτω:

Αυτές είναι οι βασικές παράμετροι που θα εμφανιστούν στην ενότητα συγγραφέα byline. Θα προσθέσουμε αργότερα τις υπόλοιπες παραμέτρους (εάν απαιτείται).

2. Για να εμφανίσετε το πλαίσιο συγγραφέα, ανοίξτε το αρχείο single.php και δημιουργήστε ένα μοναδικό διανυσματικό κώδικα HTML μέσα στο οποίο θα περικλείεται το πλαίσιο συγγραφέα. Για παράδειγμα

Αυτό το div δημιουργήθηκε έτσι ώστε να μπορέσουμε να προσθέσουμε κανόνες CSS και να σχεδιάσουμε το τμήμα ανάλογα. Μπορείτε να τοποθετήσετε αυτόν τον κωδικό, όπου θέλετε να εμφανίζεται ο συγγραφέας.
3. Τώρα πρέπει να αποφασίσετε ποια είναι τα στοιχεία που θέλετε να εμφανίζονται στην ενότητα με συγγραφέα. Ορισμένες από τις παραμέτρους και οι αντίστοιχοι κωδικοί τους δίνονται παρακάτω:
1. Όνομα:
Εάν θέλετε να εμφανίσετε μόνο το όνομα του συγγραφέα, χρησιμοποιήστε το
2. Επώνυμο συντάκτη:
Για να εμφανίσετε το επώνυμο του συγγραφέα, χρησιμοποιήστε το
3. Εμφανίστε το όνομα και το επώνυμο:
Είναι εύκολο να συνδυάσετε και τους δύο παραπάνω κωδικούς και να εμφανίσετε το πλήρες όνομα του συγγραφέα. Για να εμφανίσετε το πλήρες όνομα, χρησιμοποιήστε
4. Εμφάνιση ονόματος συγγραφέα με σύνδεσμο στον ιστότοπό του :
Μπορείτε να δείτε το πλήρες όνομα του συγγραφέα και ταυτόχρονα να συνδέσετε το όνομα με τον ιστότοπο του δημιουργού. Χρήση
5. Συγγραφέας Περιγραφή:
Για να δείξετε την περιγραφή του συντάκτη bio, χρησιμοποιήστε
6. Εμφάνιση συνδέσμου ιστότοπου του συντάκτη:
Για να εμφανίσετε τη διεύθυνση URL του ιστοτόπου του συντάκτη, χρησιμοποιήστε
Όλοι οι παραπάνω κώδικες μπορούν να προσαρμοστούν ώστε να ταιριάζουν στο στυλ σας. Μπορείτε επίσης να περικλείσετε τους παραπάνω κωδικούς σε ετικέτες HTML όπως φαίνεται παρακάτω:
7. Συγγραφέας Gravatar:
Για να εμφανίσετε τη χρήση του Gravatar του συγγραφέα
Ο αριθμός "80" που χρησιμοποιείται στον παραπάνω κώδικα αντιπροσωπεύει το μέγεθος της εικόνας. Μπορείτε να το προσαρμόσετε περαιτέρω, το οποίο εξαρτάται από το πόσο μεγάλο ή πόσο μικρό θέλετε να εμφανίζεται το avatar.
Νομίζω ότι παίρνετε την ιδέα για τον τρόπο προσαρμογής των κωδικών, που εξαρτάται εξ ολοκλήρου από το πώς θέλετε να φαίνεται η ενότητα.
8. Ηλεκτρονική διεύθυνση του συντάκτη:
Για να εμφανίσετε τη διεύθυνση ηλεκτρονικού ταχυδρομείου του συντάκτη, χρησιμοποιήστε το
9. Σύνδεση με λογαριασμό Twitter:
Αυτό είναι λίγο δύσκολο, επειδή το WordPress δεν έχει κανένα πεδίο για την εμφάνιση της διεύθυνσης URL του προφίλ Twitter από προεπιλογή. Ωστόσο, υπάρχει ένας έξυπνος τρόπος αντιμετώπισης, ο οποίος μπορεί να χρησιμοποιηθεί για την εμφάνιση οποιουδήποτε προσαρμοσμένου συνδέσμου ή κειμένου όπως παρέχεται από τον συγγραφέα.
Ζητήστε από τους συντάκτες του ιστολογίου σας να προσθέσουν το σύνδεσμο του λογαριασμού τους Twitter στο πεδίο AIM κάτω από το "Προφίλ" στην περιοχή διαχείρισης του WordPress.
Τώρα πηγαίνετε πίσω στο αρχείο single.php και εισάγετε
για να εμφανιστεί ο σύνδεσμος προφίλ Twitter. Και πάλι, εξαρτάται τελείως από το πώς προσαρμόζετε την εμφάνιση και την έξοδο. Ακολουθεί ένα παράδειγμα κώδικα:
Στυλ Το τμήμα συγγραφέα χρησιμοποιεί το CSS 
Μόλις τελειώσει η εργασία κωδικοποίησης, ήρθε η ώρα να ομορφύνετε την ενότητα και να ευθυγραμμίσετε τα αντικείμενα σωστά. Ακολουθεί ένα παράδειγμα κώδικα css
 // περιέχει το gravatar // υπόλοιπο του κώδικα // λήγει το κουτί συγγραφέα 
Η παραπάνω δομή μπορεί να απεικονισθεί με το ακόλουθο διάγραμμα
Στην παραπάνω δομή CSS, δημιουργούμε τρεις ετικέτες div. Η ετικέτα Outer div θα περιέχει τις δύο εσωτερικές ετικέτες div που ονομάζονται "αριστερά" και "δεξιά" αντίστοιχα. Το "Αριστερό" div θα περιέχει τον συγγραφέα gravatar ενώ το δεξί div θα περιέχει το όνομα του συγγραφέα, το βιο και το σύνδεσμο προφίλ του Twitter. Θα ευθυγραμμίσουμε το "αριστερό" div προς τα αριστερά και το "δεξιά" div προς τα δεξιά. Εδώ είναι ολόκληρος ο κώδικας και το CSS που πρέπει να χρησιμοποιήσετε
Κώδικας
Συμπεριλάβετε τον ακόλουθο κώδικα στο αρχείο single.php, όπου θέλετε να εμφανίζεται η ενότητα πληροφοριών για τους συντάκτες:
Γραμμένο από

CSS
Συμπεριλάβετε τον ακόλουθο κώδικα στο φύλλο στυλ CSS
 .authorbox {width: 590px · height: 140px · background: #CCC · font-family: verdana · font-size: 13px · background-color: #FAFAFA · border: 1px solid · F0F0F0; πλάτος: 100px, ύψος: 100px, περιθώριο: 25px, } .right {float: αριστερά, κορυφή περιθωρίου: 25px, πλάτος: 425px, } 
Σημείωση: Είναι σκόπιμο να αλλάξετε τα ονόματα των τάξεων συγκρίνοντας με τις υπάρχουσες κατηγορίες του θέματος σας για να αποφύγετε τις συγκρούσεις.
Και εδώ είναι η παραγωγή των παραπάνω κωδίκων
Αυτό ολοκληρώνει το σεμινάριο. Έχετε δημιουργήσει μια ενότητα Πληροφορίες συγγραφέα στο θέμα σας WordPress; Ας ακούσουμε τις σκέψεις και τις ιδέες σας στην ενότητα σχολίων.