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

  • 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 !

    Απάντηση

Σχολιάστε

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