Πως μπορώ να έχω διαφορετικό χρώμα background στο header ή στο footer σε κάθε σελίδα ή άρθρο στο WordPress
συντάκτης Evangelos · Δημοσιεύτηκε · Ενημερώθηκε
Παίζοντας με τα χρώματα στο WordPress
& πως μπορώ να έχω διαφορετικό χρώμα background στο header στο WordPress
Αυτό που μου αρέσει στο WordPress είναι η ευκολία να κάνεις κάποια πράγματα και να βγαίνεις ασπροπρόσωπος.
Πολλές φορές υπάρχει η σχεδιαστική ανάγκη να παίξεις με τα χρώματα και να αποδώσεις διαφορετικούς χρωματισμούς σε κάθε σελίδα ή άρθρο. Για παράδειγμα να έχεις διαφορετικά χρώματα σε κάθε header ή footer στις σελίδες σου. Σίγουρα θα βρείτε κάποιο πρόσθετο που θα κάνει τη ‘βρώμικη’ δουλειά αλλά όπως θα δείτε είναι τόσο εύκολο που δεν θα χρειαστεί.
Τα βασικά
Σίγουρα θα χρειαστεί να γράψουμε λίγο CSS ώστε να προσδιορίσουμε ποιο χρώμα θέλουμε σε ποια σελίδα ή άρθρο.
Το CSS μπορούμε να το γράψουμε:
- Απευθείας στο style.css αλλά εμείς όπως πάντα προτείνουμε να κάνετε ένα Child Theme πρώτα, διαβάστε περισσότερα εδώ. Δημιουργώντας ένα Child Theme εξασφαλίζετε ότι η αλλαγές σας δεν θα χαθούν μετά από κάποιο update.
- Γράφοντας το CSS σε κάποιον editor. Εδώ υπάρχουν διάφοροι τρόποι και εμείς θα δούμε τους δύο πιο δημοφιλείς τρόπους.
α. Χρησιμοποιώντας τον ενσωματωμένο CSS editor του WordPress ή
β. κάποιο add-on που κάνει την ίδια δουλειά. Στη περίπτωση μας θα χρησιμοποιήσουμε τον πολύ καλό CSS Editor της SiteOrigin που είναι μάλιστα δωρεάν.
Στο παράδειγμα μας θα χρησιμοποιήσουμε το πολύ γνωστό θέμα Twenty Sixteen.
Πρώτη μας δουλειά είναι δημιουργήσουμε το ‘παιδί’ του θέματος, ένα child theme δηλαδή.
Για ευκολία γράφω παρακάτω το CSS:
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://www.example.com
Description: Twenty Sixteen Child theme
Author: Author
Author URI: http://www.example.com
Template: twentysixteen
Version: 1.0.0
*/
@import url("../twentysixteen/style.css");
Αφού το ενεργοποιήσουμε δημιουργούμε 3 σελίδες ή όσες θέλουμε και ένα μενού για να μας διευκολύνει στη πλοήγηση.
Στη συνέχεια θα πρέπει να εντοπίσουμε το id κάθε σελίδας ή άρθρου. Αυτό μπορεί να γίνει με δύο τρόπους.
- Να εγκαταστήσουμε κάποιο add-on όπως το Catch IDs το οποίο μας δείνει ποιο id έχει κάποια σελίδα ή άρθρο όπως βλέπετε παρακάτω:
- Εναλλακτικά μπορούμε τοποθετώντας τον κέρσορα επάνω στο τίτλο της σελίδας (είμαστε στη περιοχή διαχείρισης μην ξεχνάτε) να εμφανίσουμε στη γραμμή κατάστασης του browser ένα link που περιέχει το νούμερο του id μας. Δείτε παρακάτω:
Στη προκειμένη περίπτωση το id είναι το ‘4’. Με τον ίδιο τρόπο βρίσκουμε και τα id’s των άλλων σελίδων ή άρθρων.
Συνοψίζοντας μέχρι εδώ έχουμε δημιουργήσει το Child Theme, δημιουργήσαμε 3 σελίδες και γνωρίζουμε τα id’s τους.
Σχεδόν τελειώσαμε…
Εφαρμόζοντας στη πράξη
Όπως αναφέραμε παραπάνω η εφαρμογή του CSS θα γίνει είτε απευθείας στο style.css του θέματος απογόνου είτε χρησιμοποιώντας τον ενσωματωμένο CSS editor του WordPress ή κάποιοn τρίτο CSS Editor.
Το μόνο που μας έμεινε τώρα πριν ξεκινήσουμε, είναι να βρούμε τη κλάση ή το id που μορφοποιούν το header μας.
Αυτό γίνεται πολύ εύκολα με τον εξής τρόπο. Κάνουμε δεξιό κλικ στο frond end του site μας και επιλέγουμε ‘Έλεγχος αντικειμένου’ (Browser Inspector). Εναλλακτικά μπορούμε να πατήσουμε το F12.
Τότε θα μπορούμε να εντοπίσουμε εύκολα τη κλάση του header όπως βλέπετε παρακάτω:
Βλέπουμε λοιπόν ότι η κλάση του header είναι ‘site-header-main’
Γράφοντας στο style.css
Ανοίγουμε το style.css του θέματος απογόνου σε ένα διαθέσιμο editor και γράφουμε το παρακάτω css:
.page-id-4 .site-header-main{
background-color: #f80909;
}
.page-id-6 .site-header-main{
background-color: #00ff06;
}
.page-id-8 .site-header-main{
background-color: #98a2e0;
}
Το style.css θα πάρει δηλαδή τη παρακάτω μορφή:
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://www.example.com
Description: Twenty Sixteen Child theme
Author: Author
Author URI: http://www.example.com
Template: twentysixteen
Version: 1.0.0
*/
@import url("../twentysixteen/style.css");
.page-id-4 .site-header-main{
background-color: #f80909;
}
.page-id-6 .site-header-main{
background-color: #00ff06;
}
.page-id-8 .site-header-main{
background-color: #98a2e0;
}
Ουσιαστικά λέμε στη κλάση .site-header-main ότι στη σελίδα με id 4 (.page-id-4) θα εφαρμόσεις σαν χρώμα background το #f80909 (κόκκινο)
Το ίδιο γίνεται και με τις άλλες δύο σελίδες του παραδείγματος μας με id 6 και 8.
Το αποτέλεσμα το βλέπουμε παρακάτω:
Δουλεύοντας με τον ενσωματωμένο CSS Editor του WordPress
Έχοντας έτοιμο το κώδικα του CSS θα δοκιμάσουμε τώρα να τον εφαρμόσουμε στον ενσωματωμένο CSS editor του WordPress.
Από το μενού ‘Εμφάνιση’ επιλέγουμε το ‘Προσαρμογή’
Στο τέλος του μενού επιλέγουμε ‘Πρόσθετη CSS’
και επικολλούμε τον κώδικα του CSS που έχουμε ήδη έτοιμο (μην ξεχάσετε να διαγράψετε το κώδικα CSS από το αρχείο style.css) και αποθηκεύουμε.
Oooh la la! Ήδη βλέπουμε δεξιά στην οθόνη προεπισκόπησης το αποτέλεσμα. Τόσο απλά!
Δουλεύοντας με τον SiteOrigin CSS Editor.
Η SiteOrigin είναι μία ομάδα νέων ανθρώπων που μόνο καλά μπορείς να πεις για αυτούς.
Δουλειά της εταιρείας είναι η δημιουργία θεμάτων και πρόσθετων για το WordPress τόσο στη δωρεάν τους έκδοση αλλά και σε premium.
Σήμερα θα αναφερθούμε στον SiteOrigin CSS Editor ώστε να ολοκληρώσουμε το άρθρο μας.
Η εγκατάσταση του είναι απλή και δεν διαφέρει από τα άλλα πρόσθετα.
Στη σελίδα ‘Νέο πρόσθετο’ κάνουμε αναζήτηση ‘SiteOrigin CSS’ και το βλέπουμε πρώτο.
Αφού το κάνουμε εγκατάσταση πάμε στη σελίδα του πρόσθετου που βρίσκεται στο μενού ‘Εμφάνιση’ -> ‘Custom CSS’
Το περιβάλλον του είναι τόσο απλό μέχρι που δημιουργεί απορίες για τη δύναμη του πρόσθετου. Αλλά ας μη βιαζόμαστε. Σύντομα θα αναφερθούμε εκτενέστερα στον SiteOrigin CSS Editor για τις λειτουργίες του και τις δυνατότητες του. Σήμερα απλά θα τον χρησιμοποιήσουμε για να ολοκληρώσουμε το tutorial μας.
Στον editor λοιπόν κάνουμε επικόλληση το CSS (βλέπε πιο πάνω) και αποθηκεύουμε.
Αυτό ήταν. Είμαστε πλέον έτοιμοι να δούμε το αποτέλεσμα.
Νομίζω ότι ολοκληρώσαμε το tutorial πως μπορώ να έχω διαφορετικό χρώμα background στο header στο WordPress.
Πριν κλείσουμε θα πρέπει να αναφέρω ότι εάν θέλουμε να αλλάξουμε χρώμα στο footer σε κάθε σελίδα ή άρθρο μας στο WordPress ακολουθούμε την ίδια διαδικασία απλά βρίσκουμε τη κλάση που αντιστοιχεί στο footer και δουλεύουμε με αυτή.