דף הבית » טריקים וטיפים, מומלצים

לוגו מותאם אישית במערכת הניהול

19 בדצמבר 2009 | מאת רמי | 23 תגובות | תגיות: , , ,

מערכת הניהול של וורדפרס ניתנת לשינוי והתאמה, הפעם נלמד איך לשנות את הלוגו של וורדפרס "W" בצידו הימני העליון של האתר ולחליפו בלוגו מותאם אישית.

הכנה מקדימה

תחילה יש להכין לוגו מותאם אישית באותן הפרופורציות, דהיינו קובץ GIF עם רקע שקוף ברוחב 30 וגובה 31. שימו דגש על הרקע של מערכת הניהול, כך שהלוגו החדש יתמזג ברקע שלה (#464646). שימרו את התמונה בשם "custom-admin-logo.gif" בתת-ספריה "images" של ערכת העיצוב.

הקוד

החלפת הלוגו יעשה תוך שימוש באקשן (Action) יעודי בשם admin_head. את הקוד הבא נעתיק לקובץ ה-functions.php של ערכת העיצוב.

function my_custom_admin_logo() {
    echo '
        <style type="text/css">
        #header-logo { background-image: url('
.get_bloginfo('template_directory').'/images/custom-admin-logo.gif) !important; }
        </style>
    '
;
}
add_action('admin_head', 'my_custom_admin_logo');

התוצאה

לוגו מותאם אישית במערכת הניהול

לוגו מותאם אישית במערכת הניהול

מאת רמי

אחראי על אתר וורדפרס בעברית ועל תרגום ושחרור גרסאות וורדפרס בעברית. מפתח ליבה, בכל גרסה החל מגרסה 2.8, מפתח מוביל בגרסה 4.4 ובגרסה 4.6. מספק שירותי פיתוח אתרים, פיתוח תוספי וורדפרס לסטרטאפים ופיתוח כלים למפתחי וורדפרס - GenerateWP.com.

23 תגובות »

  • מאור כותב :

    טיפ מגניב. יש אקשן כזה שאפשר לשנות איתו גם את האימאג' שבמסך הלוגין של ממשק הניהול?

  • רמי כותב :

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

  • רמי כותב :

    מאור, התעסקתי 10 דקות עם הקוד ומצאתי פתרון. אני אפרסם פוסט חדש בנושא בימים הקרובים.

  • מאור כותב :

    @רמי, שאלתי כי חשבתי שאתה כבר מכיר את הפיתרון… 🙂
    חיפשתי עכשיו גם כמה דקות ומצאתי, אז כבר כתבתי בעצמי את הפוסט וחסכתי לך את העבודה..

    אני מניח שהפינקבאק בדרך…

    עד שהוא יגיע זה הפוסט
    http://www.maorb.info/wordpress/2009-12/custom-login-logo

  • רשיד כותב :

    זה לא עובד עם וורדפרס 2.9
    במקום שתופיע התמונה החדשה מופיעה תמונה אחרת:
    wp-includes/images/blank.gif

  • רשיד כותב :

    אוקיי עכשיו שמתי לב.
    אתה כתבת: "שימרו את התמונה בשם "custom_logo.gif" בתת-ספריה "images" של ערכת העיצוב."
    ואילו בקוד מופיע שם שונה לתמונה: custom-admin-logo.gif
    תיקנתי וזה עובד עכשיו.
    תודה על הטיפ הזה ועל הטיפ ב wprecipes.com

  • רמי כותב :

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

  • יאיר כותב :

    שלום רמי,
    אולי אתה מכיר איזה אקשן שיכול לשלוט ברקע של מערכת הניהול?

  • אורן כותב :

    היי.
    האם יש דרך לשנות את הטקסט שמופיע בעמוד "התחבר" של בלוג וורדפרס ?
    תודה,
    אורן

  • רמי כותב :

    לא מכיר.

  • יצחק כותב :

    שלום רמי,

    וכרגיל תודה רבה על הטיפים…
    האם יש דרך לשנות את גודל התמונה של הלוגו הזה (שדיברת עליו בפוסט)
    דרך הקוד בקובץ הפונקציות?

    תודה רבה רבה לך!
    יצחק.

  • יצחק כותב :

    שלום רמי,

    שוב תודה רבה על הכל…
    הקוד לא עובד לי בגירסאות החדשות של וורדפרס,
    יש קוד שיגרום לזה לעבוד?

    תודה רבה רבה לך!!!
    יצחק.

  • רמי כותב :

    יצחק, הקוד פעל בגרסאות קודמות של וורדפרס, מאז ה-header של לוח הבקרה השתנה, בגרסה 3.1 התווסף ה-AdminBar, ובגרסה 3.3 ה-header מוזג עם ה-AdminBar ליצירת ה-ToolBar.

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

  • יצחק כותב :

    בסדר, מעולה!!! (לא שיש לי סבלנות, אבל…)

    תודה רבה רבה לך!!!

  • חתול כותב :

    נסה את ‎.ab-icon במקום ‎#header-logo

  • יצחק כותב :

    לא הצלחתי… לא יודע למה…

    תודה רבה רבה לך בכל אופן!!!
    יצחק.

  • חתול כותב :

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

  • יצחק כותב :

    אם תמצא בהזדמנות תכתוב כאן…
    תודה רבה רבה לך!!!

  • יעל שושני כותב :

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

  • רמי כותב :

    יעל, את בטח מדבר על "כותרת הבלוג" הטקסטואלית ב-FrontEnd באתר שלך. פוסט זה עוסק ב-BackEnd של ממשק הניהול.

  • pey כותב :

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

    function my_custom_admin_logo() {
    echo '
    <style type="text/css">
    #wp-admin-bar-wp-logo > .ab-item .ab-icon {
        background-image: url('
    . get_bloginfo('stylesheet_directory') . '/images/custom-admin-logo.png) !important;
        background-position: 0 0;
        width: 32px !important;
        }
    #wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
        background-position: 0 0;
        }  
    </style>
    '
    ;
    }
    //hook into the administrative header output
    add_action('admin_head', 'my_custom_admin_logo');
  • neronet כותב :

    לא בדקתי את זה ממש

  • רמי כותב :

    הפוסט הזה משנת 2009, יכול להיות שהקוד כבר לא מעודכן בימינו. הרבה מים זרמו בנהר ה-CSS של וורדפרס.

הוסף תגובה !

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

תגיות HTML מורשות לשימוש:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>