איך מחליפים את הלוגו בדף ההתחברות

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

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

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

[alerts title="" style="danger" classes="col-xs-12 col-md-12"]למרות שקוד זה נבדק אל מול עשרות אתרי וורדפרס איננו יכולים לדעת כיצד תעשו שימוש בקוד זה או הידע בו אתם מחזיקים ולכן איננו יכולים לקחת אחריות על כל תוצאה ישירה או עקיפה אשר נוצרה משימוש לא  נכון בקוד זה. אנו ממליצים כי הטמעת הקוד תעשה על ידי מנהל אתר וורדפרס מיומן.[/alerts]

מה עושה הקוד?

בכדי להחליף את הלוגו בדף ההתחברות לוורדפרס עלינו להבין כי ישנם שלושה דברים שאנו צריכים לשנות בדף ההתחברות של וורדפרס

1. את התמונה עצמה (הלוגו) לתמונה הרצויה
2. את הקישור אליו מובילה התמונה (כרגע זה מוביל אצלכם לוורדפרס העולמי)
3. את הטקסט אשר מופיע במעבר עכבר

מכינים את התמונה ללוגו החדש שלנו

במדריך לא אעבור אתכם על איך מכינים תמונה ללוגו שלנו אלא רק על כמה כללי בסיס. את התמונה תוכלו לעשות בתוכנה שאתם אוהבים. באופן אישי אני משתמש בFireworks לעבודות פשוטות ובפוטושופ (PhotoShop) לבניית גרפיקות מורכבות.

רוחב: 213 פיקסלים גובה: 213 פיקסלים

את הלוגו החדש שלכם צריך לשים בתיקייה images בתוך תיקיית התבנית או להחליף את המסלול הרצוי בקוד אשר יצוין למטה לדוגמה: www.yoursite.co.il/wp-content/themes/YourTheme/images/

כדאי לקרוא לתמונה שאתם מכינים בשם logo-login.png

את הקוד מומלץ להטמיע בקובץ functions.php רק לאחר שסיימתם להעלות את התמונה לתיקייה המוזכרת בסעיף 2

מטמיעים את הקוד

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

// URL OF HEADER LOGO IMAGE
function my_custom_login_logo() {
echo '<style type="text/css"> h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo-login.png) !important; } </style>';
}

add_action('login_head', 'my_custom_login_logo');
// HEADER LOGO LINK AND ALT TEXT
function change_wp_login_url() {
echo bloginfo('url');  // OR ECHO YOUR OWN URL
}

function change_wp_login_title() {
echo get_option('blogname'); // OR ECHO YOUR OWN ALT TEXT
}

add_filter('login_headerurl', 'change_wp_login_url');
add_filter('login_headertitle', 'change_wp_login_title');

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

בונים אתרי וורדפרס בסטייל!

אנו עובדים על הרחבה, העשרה וגיוון מדור פיתוח אתרי וורדפרס! שווה להרשם לרשימת התפוצה שלנו ולהשאר מעודכנים בכל המדריכים החמים אשר עומדים להתפרסם באתר שגיב SEO. אם נתקלתם בבעיה או יש לכם שאלה רלוונטית אתם מוזמנים לפרסם אותה כתגובה ונשמח לעזור.