Coding Tips

Πως να αλλάξετε το WordPress logo στην σελίδα εισόδου wp-admin

Είτε είστε προγραμματιστής, είτε είστε ιδιοκτήτης website, σίγουρα θα έχετε παρατηρήσει το logo του WordPress που βρίσκεται στην σελίδα σύνδεσης. Την σελίδα αυτή μπορούμε να την βρούμε συμπληρώνοντας δίπλα στην διεύθυνση της ιστοσελίδας ή του e-shop μας την φράση “/wp-admin”. Δηλαδή, αν η ιστοσελίδα μας λέγεται “www.mywebsite.gr”, τότε η σελίδα σύνδεσης θα βρίσκεται στην διεύθυνση “www.mywebsite.gr/wp-admin”.

Με τον τρόπο αυτό μπορούμε να καταλάβουμε και αν κάποιο website που μας αρέσει, είναι και αυτό σε WordPress. Όμως το θέμα αυτό είναι εκτός του παρόντος άρθρου και θα το αναλύσουμε λεπτομερώς σε άλλη δημοσίευση.

Αρχικά, ο κώδικας που θα χρειαστούμε είναι ο εξής:

add_action('login_head', 'my_custom_wploginlogo');

function my_custom_wploginlogo() {

echo '<style>

.login h1 a {
background-image:none,url(https://mywebsite.gr/wp-content/uploads/logo.png)!important;
background-size:220px!important;
height:90px!important;
width:230px!important;
} 

.login #login_error, .login .message, .login .success {
border-radius:5px!important;
} 

#loginform {
border-radius:5px!important;
}

</style>';
}

Ο παραπάνω κώδικας θα πρέπει να τοποθετηθεί μέσα στο αρχείο functions.php του θέματος (το γνωστό template ή theme) σας. Κατά προτίμηση θα πρέπει να χρησιμοποιείτε κάποιο child theme, ώστε ο κώδικας σας να παραμείνει στο ίδιο αρχείο όταν θα αναβαθμίσετε το θέμα σας. Αν δεν γνωρίζετε πως να φτιάχνετε ένα child-theme, αγνοήστε το προς το παρόν και διαβάστε το σχετικό άρθρο μας σχετικά με την δημιουργία child θέματος.

Ας δούμε αναλυτικά τα βήματα του κώδικα:

  1. Αρχικά στην παράμετρο backround-image: θα πρέπει να βάλετε την διεύθυνση της εικόνας που θέλετε μέσα από την βιβλιοθήκη (Media Library) του WordPress σας.
  2. Ρυθμίστε τα height και width αναλόγως την περίπτωση σας
  3. Ελέγξτε την εμφάνιση και στα κινητά, καθώς ενδεχομένως να χρειαστεί επιπλέον ρύθμιση
  4. Τα border-radius χρησιμοποιήθηκαν για να δώσουν μια πιο σύγχρονη εμφάνιση στην φόρμα με καμπυλωτές γωνίες.
  5. Το hook που χρησιμοποιούμε είναι το login_head, το οποίο μπορείτε να χρησιμοποιήσετε για να εφαρμόσετε οποιαδήποτε άλλη αλλαγή θέλετε στην εμφάνιση της σελίδας σύνδεσης!

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