Δίας
Η αλλαγή του χρώματος της μπάρας διεύθυνσης (address bar) στους browsers των κινητών είναι μια μικρή αλλά σημαντική λεπτομέρεια για το branding της ιστοσελίδας σας. Αυτό το εφέ επιτυγχάνεται μέσω του theme-color meta tag.
Αν χρησιμοποιείτε WordPress, ο πιο “καθαρός” τρόπος για να το κάνετε μέσω PHP είναι να προσθέσετε ένα κομμάτι κώδικα στο αρχείο functions.php του θέματός σας.
Πώς να αλλάξετε το χρώμα της μπάρας διεύθυνσης με PHP
Για να εισάγουμε το απαραίτητο HTML tag στην κεφαλίδα (<head>) του WordPress, χρησιμοποιούμε το hook wp_head.
Ο Κώδικας
Προσθέστε το παρακάτω snippet στο τέλος του αρχείου functions.php (προτιμήστε ένα Child Theme για να μην χαθούν οι αλλαγές σε μελλοντικό update):
PHP
function custom_browser_address_bar_color() {
// Ορίστε το χρώμα σε HEX μορφή (π.χ. #ff5733)
$color = "#3498db";
echo '';
echo '<meta name="theme-color" content="' . $color . '">';
echo '';
echo '<meta name="msapplication-navbutton-color" content="' . $color . '">';
echo '';
echo '<meta name="apple-mobile-web-app-capable" content="yes">';
echo '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
}
add_action('wp_head', 'custom_browser_address_bar_color');
Ανάλυση του κώδικα
theme-color: Είναι το standard tag που χρησιμοποιούν οι σύγχρονοι browsers όπως ο Google Chrome (Android), ο Firefox και η Opera.msapplication-navbutton-color: Ειδική ρύθμιση για συσκευές Windows Phone.- iOS Safari: Η Apple είναι λίγο πιο ιδιότροπη. Δεν επιτρέπει την πλήρη αλλαγή χρώματος με τον ίδιο τρόπο, αλλά με το
apple-mobile-web-app-status-bar-styleμπορείτε να ελέγξετε αν η μπάρα θα είναι διαφανής ή μαύρη.
Γιατί να το κάνετε;
- Επαγγελματισμός: Η ιστοσελίδα φαίνεται σαν μια ολοκληρωμένη εφαρμογή (Web App).
- User Experience (UX): Ενισχύει την ταυτότητα του brand σας, καθώς το χρώμα του site “ξεχειλίζει” και καταλαμβάνει όλη την οθόνη του χρήστη.
- Συνοχή: Δημιουργεί μια οπτική συνέχεια μεταξύ του περιεχομένου και του browser.
Συμβουλές (Tips)
[!TIP]
Χρησιμοποιήστε Contrast: Βεβαιωθείτε ότι το χρώμα που επιλέξατε δεν εμποδίζει την ανάγνωση των εικονιδίων του συστήματος (όπως η ώρα ή η στάθμη της μπαταρίας).
- Δυναμικό Χρώμα: Αν θέλετε το χρώμα να αλλάζει ανάλογα με την κατηγορία ή τη σελίδα, μπορείτε να χρησιμοποιήσετε conditionals μέσα στη συνάρτηση PHP (π.χ.
if (is_single()) { ... }). - Plugins: Αν δεν θέλετε να αγγίξετε κώδικα, υπάρχουν plugins όπως το Header and Footer Scripts, όπου μπορείτε απλά να επικολλήσετε το meta tag χειροκίνητα.
Σημείωση: Για να δείτε τις αλλαγές, θα πρέπει να καθαρίσετε την cache του browser στο κινητό σας ή να ανοίξετε τη σελίδα σε “Incognito mode”.
