19Δεκ

Δημιουργήστε το δικό σας login screen στο WordPress 2.7

, 19 Δεκεμβρίου 2008 | WORDPRESS | 3 Σχόλια

Στο 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 μας.

3 comments so far

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter