Δημιουργήστε το δικό σας login screen στο WordPress 2.7
Στο wordpress 2.7 βλέπουμε πως το login screen έχει αλλάξει. Τι γίνεται όμως όταν θέλουμε να έχουμε το δικό μας login screen, customized έτσι ώστε να βελτιώνει την εικόνα της σελίδας μας αλλά και να ταιριάζει με το υπόλοιπο design;
Αυτό που έχουμε να κάνουμε είναι να δημιουργήσουμε ένα πολύ μικρό κομμάτι κώδικα. Πρώτα από όλα, πρέπει να κάνουμε χρήση php κώδικα στο fuctions.php αρχείο μας. Εάν δεν έχετε αυτό το αρχείο, δημιουργήστε το μέσα στο template folder σας.
// custom login for theme
// folder themes/theme_name/
function fb_custom_login() {
echo ‘<link rel=»stylesheet» type=»text/css» href=»‘ . get_bloginfo(‘template_directory’) . ‘/custom-login.css» />’; }
add_action(‘login_head’, ‘fb_custom_login’);
Ο παραπάνω κώδικας θα μας βοηθήσει να καλέσουμε το CSS αρχείο που θέλουμε για να παραμετροποιήσει το design από το login screen.
Μετά, δημιουργούμε ένα αρχείο με το όνομα custom-login.css μέσα στον φάκελο των Template μας.
Το css αρχείο μας θα έχει τον παρακάτω κώδικα:
html {
background-color: #fff;
}
#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}
#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}
#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}
Οι αλλαγές σας μπορούνε να γίνουνε εδώ μέσα. Τα ονόματα των CSS κλάσεων είναι από ότι βλέπετε πολύ αναλυτικά οπότε και οι αλλαγές δεν θα ήταν τόσο δύσκολες.
Μπορείτε να δείτε μερικές φωτογραφίες από Inspired templates εδώ:
http://www.flickr.com/groups/bm-custom-login/
Article Code από WP Engineer: http://wpengineer.com/create-your-own-wordpress-login-design/
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Δημιουργήστε το δικό σας login screen στο WordPress 2.7 γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
SEO Says: Αύγουστος 17, 2009 at 12:15 πμ
ευχαριστούμε πολύ για το post.
Θα ήταν εξαιρετικά χρήσιμο αν κάνατε και ένα thread για login tutorial χρησιμοποιόντας asp.
χρήστος
Basilakis Says: Αύγουστος 31, 2009 at 10:48 πμ
Καλησπέρα,
το WordPress είναι σε asp όχι σε php.
Mia Says: Ιανουάριος 16, 2010 at 10:45 πμ
Good tutorial & clearly defined – however , I believe that Austin Passy’s WP Custom Login Plugin is much simpler and quite easier to use ( especially for those who are new to WP & have no idea about PHP & coding ) . I had tested out most of these Custom Login Plugins and I must concede that Austin’s is the easiest one out of the pack . You can catch the tut I have written up here Customizing Your WP Admin Login Panel, and I’m certain you will agree at the ease of its use . Happy Blogging & thanks for all the useful links you have provided here 😀
Happy 2010 !