# 122: Δημιουργία αρχείου βίντεο, Μέρος 1 - CSS-Κόλπα

Anonim

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

Αυτές οι σελίδες είναι το δικό τους πρότυπο, το οποίο μπορούμε πολύ γρήγορα και εύκολα να μετατρέψουμε σε σχήμα όπως έχουμε κάνει πολλές φορές πριν. Βάζουμε το δικό μας περιτύλιγμα γύρω από τα πράγματα και χρησιμοποιούμε τη δομή πλέγματος για να του δώσουμε μια διάταξη 2/3 1/3.

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

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

Ενώ γράφουμε αυτήν τη νέα σήμανση, το προσθέτουμε με λειτουργίες WordPress που συμπληρώνουν τα κομμάτια που πρέπει να είμαστε δυναμικοί. Οι τίτλοι είναι the_title(). Οι σύνδεσμοι είναι the_permalink(). Οι μικρογραφίες είναι προσαρμοσμένα πεδία. Εύκολο cheezy.

Τα div χρησιμοποιούν ονόματα τάξεων από το σύστημα πλέγματος μας έτσι ώστε όλα τα πλωτά και μεγέθη και τα πράγματα να λειτουργούν αυτόματα. Δεν είμαστε αποτελεσματικοί; Κάποιο CSS πρέπει να είναι προσαρμοσμένο όμως, και γράφουμε ότι έπρεπε. Για παράδειγμα, η προσαρμογή της επένδυσης για ενότητες ειδικά σε αυτήν την ενότητα (ήταν πάρα πολύ, το μειώσαμε). Αυτό το πράγμα είναι εύκολο να κάνουμε μέσω ονομάτων τάξεων που έχουμε στη διάθεσή μας, καθώς χρησιμοποιήσαμε έξυπνα την body_class()επιστροφή όταν εργαζόμασταν στο κεφάλι.