שלב ראשון – שינוי הלוגו בעמוד ההתחברות
ברירת המחדל של וורדפרס מציגה את הלוגו שלה בעמוד ההתחברות. כדי להחליף אותו בלוגו מותאם אישית משלכם, השתמשו בקוד הבא:
//Insert custom WP login logo
function sara_custom_login_logo() {
echo '
<style>
.login h1 a {
background-image: url(/wp-content/uploads/2020/06/wpdev-logo-26.svg) !important;
background-size: contain;
width:234px;
height:67px;
display:block;
}
</style>
';
}
add_action( 'login_head', 'sara_custom_login_logo' );
שימו לב: את הנתיב לתמונה (wp-content/uploads/2020/06/wpdev-logo-26.svg/) יש לשנות לכתובת המלאה של הלוגו שלכם.
שלב שני – שינוי הקישור של הלוגו
ברירת המחדל היא שהלוגו בעמוד ההתחברות מפנה לאתר וורדפרס. כדי להפנות את הלוגו לדף הבית של האתר שלכם:
// Change WP login logo URL
function sara_change_wp_login_url() {
return home_url(); // Use home_url() instead of bloginfo()
}
add_filter('login_headerurl', 'sara_change_wp_login_url');
שלב שלישי – עיצוב מתקדם לעמוד ההתחברות
לאחר ששיניתם את הלוגו, הקישור והכותרת, תוכלו להמשיך ולעצב את עמוד ההתחברות לפי העדפתכם.
לדוגמה:
הוספת עיצוב מותאם עם CSS
//WP login Style
function sara_custom_login_css() {
echo '<style type="text/css">
body.login {
background-color: #f0f4f8;
}
.login form {
background: #ffffff;
border: 1px solid #dcdcdc;
border-radius: 10px;
padding: 20px;
}
.login label {
color: #354255;
font-family: "Rubik", sans-serif;
}
.wp-core-ui .button, .wp-core-ui .button-secondary {
color: #ffffff;
background-color: #7780f3;
border-color: #7780f3;
text-shadow: none;
box-shadow: none;
transition: 0.3s;
font-family: "Rubik", sans-serif;
}
.wp-core-ui .button:hover, .wp-core-ui .button-secondary:hover {
background-color: #7780f3;
border-color: #7780f3;
}
.login #nav a, .login #backtoblog a {
color: #7780f3;
font-family: "Rubik", sans-serif;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #354255;
}
.wp-core-ui select {
color: #354255;
font-family: "Rubik", sans-serif;
}
#loginform input:focus {
border-color: #7780f3;
}
</style>';
}
add_action('login_head', 'sara_custom_login_css');
מה הקוד עושה?
- משנה את צבע הרקע של עמוד ההתחברות.
- משנה את גודל ותצוגת הלוגו.
- מוסיף גבול ורקע לטופס ההתחברות.
- משנה את צבע הטקסטים והפונט.
- מעצב מחדש את כפתור ההתחברות, כולל צבע Hover.
- משנה את צבעי הקישורים.
תוכלו כמובן לשנות את הצבעים, הפונטים והגדרות ה-CSS לפי הצרכים שלכם.
סיכום
התאמת עמוד ההתחברות של וורדפרס ללא תוספים היא קלה לביצוע ודורשת כמה שורות קוד בלבד. כך תוכלו לשמור על מיתוג אחיד באתר שלכם ולשדר מקצועיות כבר משלב ההתחברות.
ISL Design