התאמה אישית של עמוד ההתחברות של וורדפרס ללא תוסף

עמוד ההתחברות של וורדפרס הוא אחד הדפים הראשונים שהלקוחות שלכם פוגשים, ולכן כדאי שהוא ייראה מקצועי ויתאים למיתוג האתר. במדריך הבא תלמדו כיצד לשדרג ולעצב את עמוד ההתחברות ללא שימוש בתוספים, בעזרת כמה שורות קוד פשוטות שניתן להוסיף לקובץ functions.php בתבנית הבת שלכם.
התאמה אישית של עמוד ההתחברות של וורדפרס ללא תוסף

שלב ראשון – שינוי הלוגו בעמוד ההתחברות

ברירת המחדל של וורדפרס מציגה את הלוגו שלה בעמוד ההתחברות. כדי להחליף אותו בלוגו מותאם אישית משלכם, השתמשו בקוד הבא:

				
					//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 לפי הצרכים שלכם.

סיכום

התאמת עמוד ההתחברות של וורדפרס ללא תוספים היא קלה לביצוע ודורשת כמה שורות קוד בלבד. כך תוכלו לשמור על מיתוג אחיד באתר שלכם ולשדר מקצועיות כבר משלב ההתחברות.

מעצבת ומפתחת אתרי אינטרנט למעלה מ-18 שנה. בעלת סטודיו ISL DESIGN לעיצוב ובניית אתרים, מומחית בפיתוח אתרים דינאמיים מורכבים, אתרי איקומרס, מספקת פיתוחים בהתאמה אישית, ומעבירה קורסים ושיעורים פרטיים בוורדפרס.
מדריכים באותו נושא
בואו נדבר על זה
5 1 דרג
דירוג המאמר
הירשם
עדכן אותי על
guest
0 תגובות
הישנות ביותר
החדשות ביותר הכי פופולאריות
תגובות בגוף המאמר
צפה בכל התגובות
דילוג לתוכן