# 104: Περιοχή δημιουργικών αποσπασμάτων, Μέρος 1 (HTML & CSS) - CSS-Κόλπα

Anonim

Έχουμε τώρα ένα σχέδιο Photoshop για να δουλέψουμε από την αρχική σελίδα της περιοχής Snippets. Είναι πολύ πιο εύχρηστο από ό, τι πριν, αλλά διατηρεί το πνεύμα του ουράνιου τόξου που είχε πριν. Τώρα μπορούμε να πηδήξουμε πραγματικά στην κατασκευή των προτύπων WordPress. Γράφοντας όλο το HTML και PHP και CSS και ΓΝΩΡΙΖΕΤΕ ΤΟ ΔΡΑΣΤΗΡΙΟ!

Το πρώτο βήμα κινείται πάνω από την προσαρμοσμένη κεφαλίδα που είχαμε έτοιμοι να ακολουθήσουμε στο στατικό μας σχεδιασμό Αυτό σημαίνει ότι αλλάζετε λίγο HTML για να έχετε τα σωστά στοιχεία περιτυλίγματος. Σημαίνει επίσης να βεβαιωθείτε ότι η λογική υπό όρους στην κεφαλίδα είναι στη θέση για να φορτώσετε το CSS ειδικά για αυτήν την περιοχή. Αυτό με κάνει πάντα να σκεφτώ τον κανόνα 1, 2 ή 3 που έχω για αρχεία CSS και αρχεία JavaScript σε οποιονδήποτε ιστότοπο. Το CSS-Tricks είναι ένα τέλειο παράδειγμα του ιστότοπου "2" όπου έχουμε παγκόσμια στυλ και ένα CSS για κάθε ειδική ενότητα του ιστότοπου όπου έχει αρκετά μοναδικό στυλ. Αυτή η διάταξη αποσπάσματος είναι σίγουρα μοναδική.

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

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