Ενσωμάτωση απλών γραμμών διασύνδεσης CSS στο WordPress
Η δημιουργία μιας συνεπούς, συμπαγούς διάταξης πλέγματος στο WordPress μπορεί να είναι μια ανώδυνη διαδικασία αν χρησιμοποιείτε τα σωστά εργαλεία. Σε αυτό το σεμινάριο, θα μάθετε βήμα προς βήμα πώς να ρυθμίσετε γρήγορα ένα σύστημα πλέγματος στο WordPress που είναι πολύ ελαφρύ και εύκολο να τροποποιηθεί. Θα διατηρήσουμε τον σχεδιασμό απλό, έτσι ώστε να μπορούμε να επικεντρωθούμε στη χρήση των σωστών εργαλείων για να ρυθμίσετε το πλέγμα σας, αλλά να έχετε κατά νου ότι μπορείτε να διαμορφώσετε το πλέγμα μόνο του αν χρειαστεί.
Θα χρησιμοποιήσω ένα προεπιλεγμένο θέμα πισίνα στο WordPress για αυτό το σεμινάριο απλώς για να σας δείξω μια προσέγγιση "ξεκινήστε από το μηδέν" για να φτάσετε τα δίκτυα ακριβώς δεξιά.
Βήμα 1: Καθορίστε το πλάτος του πλέγματος
Πριν ξεκινήσετε, πρέπει να καθορίσετε πόσο ευρύ θα πρέπει να είναι το πλέγμα σας. Για τον ιστότοπο του WordPress, μπορώ να δω ότι το πλάτος της κύριας στήλης μου είναι 450px χρησιμοποιώντας τη λειτουργία "Επιθεωρήστε Element" του Google Chrome όταν κάνετε δεξί κλικ σε ένα αντικείμενο. Αυτός είναι ο πιο γρήγορος τρόπος που έχω διαπιστώσει ότι μπορεί να καθορίσει γρήγορα το πλάτος και το ύψος ενός αντικειμένου σε μια ιστοσελίδα.
Βήμα 2: Σχεδιαστής πλέγματος
Αντί να χτίζετε ένα πλέγμα με το χέρι, το οποίο μπορείτε να κάνετε εάν θέλετε, προτείνω να πάτε με ένα από τα πολλά διαθέσιμα εργαλεία γεννήτριας πλέγματος. Για αυτό το σεμινάριο, θα χρησιμοποιήσω τη γεννήτρια πλέγματος από το MindPlay. Είναι μια πολύ απλή και ελαφριά γεννήτρια πλέγματος.
Θέλω μια οθόνη με τρεις στήλες και πρέπει να σιγουρευτώ ότι τα εικονοστοιχεία μου είναι 450. Έτσι προσαρμόστε ανάλογα και μεταβείτε στην καρτέλα "Εξαγωγή". Δεν θα το ξεπεράσουμε *τυπογραφία χαρακτηριστικά σε αυτό το σεμινάριο, αν και αυτό αξίζει σίγουρα να εξερευνήσετε μόνοι σας.
Στην καρτέλα Εξαγωγή, χρησιμοποιήστε το πάνω πλαίσιο "Στυλ φύλλου" και μετακινηθείτε προς τα κάτω μέχρι να δείτε το σχόλιο "Πλέγμα". Θα αντιγράψετε τα πάντα από το σχόλιο στο κάτω μέρος αυτού του πλαισίου. Θα πρέπει να είναι περίπου 30 γραμμές από .
Βήμα 3: Ενημέρωση του φύλλου στυλ WordPress
Συνδεθείτε στον ιστότοπό σας στο WordPress και μεταβείτε στην επιλογή Εμφάνιση> Επεξεργαστής.
Στην κάτω δεξιά πλευρά του πίνακα εφαρμογών, θα δείτε a Styles.css αρχείο (ή κάτι παρόμοιο, ανάλογα με το θέμα σας). Κάντε κλικ σε αυτό για να το ανοίξετε.
Κάντε κύλιση στο κάτω μέρος του φύλλου και επικολλήστε το pre από το MindPlay.dk:
Βήμα 4: Εφαρμογή του δικτύου
Για να χρησιμοποιήσετε το πλέγμα, απλά δημιουργήστε ένα Εδώ είναι ένα δείγμα προ ότι μπορείτε να επικολλήσετε στη θέση σας για να ξεκινήσετε: Αριστερή στήλη Μέση στήλη Δεξιά στήλη Εδώ είναι αυτό που μοιάζει με το WordPress: Αποθηκεύστε / Ενημερώστε τη σελίδα και δείτε τα αποτελέσματα. Στην περίπτωσή μου, αυτή είναι η αρχική σελίδα για τον ιστότοπο: Όπως μπορείτε να δείτε από το παραπάνω screenshot, έχουμε τρεις στήλες μας και όλα είναι σωστά όπου αναμένουμε ότι θα είναι. Μπορείτε να προσθέσετε όσες σειρές θέλετε, ξεκινώντας απλά με τα παρακάτω Αριστερή στήλη Μέση στήλη Δεξιά στήλη Αριστερά σειρά # 2 Μεσαία γραμμή # 2 Δεξιά σειρά # 2 Δείτε πώς φαίνεται μέχρι στιγμής: Τώρα μπορείτε να προσθέσετε εικόνες ή κείμενο και στυλ κάθε σειρά ακριβώς όπως θα θέλατε. Ενδέχεται να έχετε προβλήματα σε ορισμένα προγράμματα περιήγησης όταν έχετε περισσότερες από μία σειρές. Για να αντιμετωπίσετε αυτό το ζήτημα, θα χρειαστεί να κάνετε το περιθώριο στα δεξιά ( Αυτό θα βεβαιωθείτε ότι σας Αν θέλετε να διαμορφώσετε το φόντο ολόκληρου του πλέγματος, θα χρειαστεί να ρυθμίσετε το ύψος του Ανάλογα με την έκδοση της γεννήτριας πλέγματος MindPlay.dk που χρησιμοποιείτε, ο ιστότοπος ενδέχεται να μην δημιουργήσει το ".grid-m4" και αντ 'αυτού θα χρειαστεί να χρησιμοποιήσετε Αριστερή στήλη Μέση στήλη Δεξιά στήλη Εδώ φαίνονται τα τελικά μου αποτελέσματα με δύο σειρές και μερικά απλά γραφικά: Διασκεδάστε να σχεδιάζετε και να θυμάστε ότι μπορείτε να διαμορφώσετε το πλέγμα σας με κάθε τρόπο που επιθυμείτε. Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Τάρα Χόρνορ για το Hongkiat.com. Η Tara έχει πτυχίο στα αγγλικά και γράφει για το μάρκετινγκ, τη διαφήμιση, το μαρκάρισμα, το γραφικό σχέδιο και την εκτύπωση επιτραπέζιων υπολογιστών. Εκτός από την καριέρα γραφής της, η Tara απολαμβάνει επίσης να περάσει χρόνο με τον σύζυγό της και δύο παιδιά.
:
Συμβουλές για την αποκατάσταση
.πλέγμα-m4, στην περίπτωσή μας) στο ύψος που θέλετε να είναι κάθε σειρά. Αν χρησιμοποιείτε εικ νες 250 x 250 x 250px, τότε κάντε το ύψος της γραμμής στο .πλέγμα-m4 να είναι 250px:.πλέγμα-m4 float: αριστερά; πλάτος: 20px; ύψος: 250px;
.πλέγμα-m1 στην αριστερή πλευρά της επόμενης σειράς δεν επιπλέει μέχρι τη σειρά πάνω από αυτήν..πλέγμα τάξη. Ας πούμε ότι έχετε τέσσερις σειρές στο πλέγμα σας, το καθένα σε 250px. Θα θελήσετε να προσθέσετε ύψος στην κλάση .grid στα 1000px, έτσι ώστε τα στοιχεία του styling που προσθέτετε να καλύπτουν ολόκληρο το σχέδιο του πλέγματος..πλέγμα πλάτος: 450px; ύψος: 1000px; περιθώριο: αυτόματη;
.πλέγμα-m1 μετά .πλέγμα-c3 για να διασφαλίσετε ότι το πλέγμα σας εκτείνεται στην κατάλληλη θέση:Τελικά αποτελέσματα
