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

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

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

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

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

פרטי מדריך:

• קטגוריה: וורדפרס
• רמת קושי: משתמשים מתחילים
• זמן ביצוע: 3 עד 5 דקות

מה עושה הקוד?

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

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

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

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

1. גודל הלוגו הוא
רוחב: 274 פיקסלים
גובה: 63 פיקסלים

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

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

4. את הקוד מומלץ להטמיע בקובץ 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');

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