Ο σχεδιασμός για σχόλια μπορεί να φαίνεται πολύ απλός. Και αυτό είναι! Αλλά νομίζω ότι το απλό είναι αποτελεσματικό σε αυτήν την περίπτωση. Τα σχόλια είναι ένα τόσο σημαντικό μέρος του CSS-Tricks που θέλω να είναι πολύ ευανάγνωστα και άνετα.
Τώρα πρόκειται να μεταβούμε στο WordPress και να κάνουμε αυτό το νήμα σχολίων πραγματικότητα. Το πρώτο πράγμα που κάνουμε είναι να βρούμε ένα πρότυπο στο οποίο θα εμφανίζουμε σχόλια. single.phpείναι ίσως το πιο σημαντικό (μεμονωμένες αναρτήσεις ιστολογίου). Βρίσκουμε σε αυτό το πρότυπο ότι η λειτουργία comments_template()είναι το μόνο που χρειάζεται να καλέσουμε για να λάβουμε ολόκληρη την περιοχή σχολίων. Ουσιαστικά αυτό που κάνει αυτή η λειτουργία είναι να πάρετε το αρχείο comments.phpκαι να το τοποθετήσετε εκεί. Έτσι, αρχίζουμε να το κοιτάζουμε.
Ο κωδικός σε αυτό το αρχείο ξεκινά με . Αυτό είναι πολύ κατάλληλο. Τα σχόλια είναι σίγουρα μια ενότητα και πρέπει να έχει ένα αναγνωριστικό. Θυμηθείτε ότι δεν κάνουμε κανένα στυλ με βάση τα αναγνωριστικά, αλλά τα σχόλιά σας τυλιγμένα σε ένα στοιχείο με ένα αναγνωριστικό σχολίων είναι καλό επειδή:
- Μπορείτε πάντα να κατακερματιστείτε τα σχόλια προσθέτοντας # σχόλια στη διεύθυνση URL.
- Άτομα που μισούν τα σχόλια μπορούν να τα αποκρύψουν στο φύλλο στυλ χρήστη τους με πιθανό αναγνωριστικό.
Συνεχίζουμε τον κώδικα σε αυτό το αρχείο. Διαγράφουμε ορισμένα πράγματα που είμαστε σίγουροι ότι δεν πρόκειται να χρησιμοποιήσουμε. Αλλάζουμε ορισμένα πράγματα ώστε να ταιριάζουν με αυτά που έχουμε σχεδιάσει στο Photoshop.
Στη συνέχεια συναντάμε τη συνάρτηση wp_list_comments()που είναι υπεύθυνη για τη διάδοση ολόκληρου του νήματος σχολίων. Στη συνέχεια συνεχίζει να φτύνει τα πράγματα όπως η φόρμα σχολίων. Στο μεταξύ, υπάρχει λογική για να δείχνετε πράγματα σε διαφορετικές καταστάσεις, όπως όταν τα σχόλια είναι κλειστά ή όταν τα σχόλια είναι ανοιχτά, αλλά δεν υπάρχουν.
Βρίσκουμε μια μικρή περίεργη συνάρτηση που ονομάζεται cancel_comment_reply_link()και βλέπουμε ότι χειρίζεται τη λειτουργικότητα για τη μετακίνηση της φόρμας σχολίων πίσω προς τα κάτω στην περίπτωση που έχει γίνει κλικ σε έναν σύνδεσμο Απάντησης και η φόρμα έχει ανεβεί προς τα πάνω, αλλά δεν θέλαμε αυτό να.
Στη συνέχεια, ανακαλύπτουμε τον HTML από τον οποίο προέρχονται wp_list_comments(). Χωρίς να κάνουμε τίποτα, θα λάβουμε HTML από αυτήν τη λειτουργία που είναι απολύτως λογική. Αλλά επίσης, είναι αυτό που είναι και δεν ταιριάζει σε κάθε πιθανό σχεδιασμό. Προσωπικά, προτιμώ να έχω πλήρη έλεγχο της σήμανσης. Έτσι, αντί να παίρνουμε απλώς αυτό που μας δίνει, το ελέγχουμε χρησιμοποιώντας μια προσαρμοσμένη λειτουργία στο functions.phpαρχείο μας που αντικαθιστά την προεπιλεγμένη σήμανση.
Τώρα που διαθέτουμε έλεγχο HTML, μπορούμε να μπαίνουμε σε μια "λειτουργία σχεδίασης" όπου αναπηδούμε μεταξύ CSS και HTML για να ολοκληρώσουμε το σχεδιασμό μας. Σχόλια CSS, όπως και οποιοδήποτε άλλο μικρό αρθρωτό κομμάτι CSS σε αυτό το έργο, θα μεταφερθούμε σε ένα αρχείο _comments.scss που μπορούμε να συμπεριλάβουμε στο παγκόσμιο. Η τέλεια περίπτωση όπου ο διαχωρισμός του CSS στο δικό του αρχείο έχει νόημα. Αν και, πρέπει να χρησιμοποιούμε όσο το δυνατόν περισσότερα παγκόσμια στυλ. Για παράδειγμα, κάθε σχόλιο είναι σίγουρα ένα .module, τα στυλ κεφαλίδας θα πρέπει να είναι εντάξει εδώ για ονόματα και η τυπογραφία γενικά θα πρέπει να προέρχεται απλώς από τα παγκόσμια στυλ τυπογραφίας.
Χρησιμοποιούμε ακόμη και το σύστημα πλέγματος μέσα στα σχόλια, καθώς κάθε σχόλιο είναι ουσιαστικά ένα πλέγμα δύο στηλών. Άλλα μικρά πράγματα είναι εντελώς προσαρμοσμένα στα σχόλια, όπως πού και πώς τοποθετούμε τους συνδέσμους απάντησης.
Στο τέλος του screencast, καταλαβαίνουμε ότι ο σχεδιασμός του Photoshop έχει ένα μοιραίο ελάττωμα. Τα ένθετα σχόλια ζουν μέσα σε ένα γονικό σχόλιο και είναι πολύ δύσκολο να κάνουμε τις ένθετες λειτουργικές μονάδες μας να φαίνονται σαν να είναι ξεχωριστές. Ίσως χρειαστεί να κάνουμε κάποιους συμβιβασμούς εδώ.