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

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

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

ערכות הצבעים הבסיסיות בממשק הניהול

ערכות הצבעים הבסיסיות בממשק הניהול

הוספת ערכת עיצוב

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

wp_admin_css_color( $key, $name, $url, $colors );

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

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

תוסף לשינוי ערכת הצבעים

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

<?php
/*
Plugin Name: Custom Admin Color Scheme
Plugin URI: http://www.wp-tricks.co.il/ערכת-צבעים-מותאמת-אישית-לממשק-הניהול/
Description: Add a custom admin color scheme to your wordpress profile
Version: 1.0
Author: Rami
Author URI: http://www.wp-tricks.co.il/
*/


function custom_admin_color_scheme() {
    $plugin_url = get_option('siteurl') . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__)) ;
    wp_admin_css_color(
        'bdihot',
         __('bdihot.co.il'),
        $plugin_url . '/custom_admin_color_scheme.css',
        array('#9DC45A','#FFD34D','#FE984E','#71A1EB')
    );
}
add_action('admin_init','custom_admin_color_scheme');
?>

הסברים נוספים

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

  • כחול – wp-admin/css/colors-classic.css
  • אפור – wp-admin/css/colors-fresh.css

כשיוצרים עיצוב מותאם אישית יש ליצור קובץ CSS חדש המכיל את כל האלמנטים הרצויים. אבל אנחנו נרצה לקצר את התהליך כדי להקל על העבודה. נעשה זאת בעזרת יבוא של עיצוב קיים ונוסיף לו שינויים במקומות מסוימים (למשל שינוי צבע רקע, שינוי צבע כותרות וצבעי טקסטים).

כדי לעשות זאת, בקובץ ה-CSS שלנו אנו נייבא תחילה את את העיצובים ואז נוסיף את השינויים, להלן דוגמא:

@import url(../../../wp-admin/css/colors-classic.css);

html, body, .wrap {
    background:#FFFFFF;
}

.form-table td, .form-table th {
    border-bottom-color:#FFFFFF;
}

#wphead, #footer, #footer-upgrade {
    background:#71A1EB;
    color:#FE984E;
    border:0;
}

#wphead a:link, #wphead a:visited, #wphead p, #footer a:link, #footer a:visited, #footer p {
    color:#FE984E;
}

סיכום

התוצאה של כל הסיפור הזה היא:

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

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

להורדת התוסף המלא לחץ כאן.

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

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

מאת רמי

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

10 תגובות »

  • גל כותב :

    איך אני משנה את הערכת העיצוב לממשק הניהול שהכנתי לברירת המחדל של האתר ?

  • רמי כותב :

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

  • יצחק כותב :

    רמי,
    תודה רבה רבה!!!
    כבר התחלתי לבנות, זה ממש ממש מעולה…

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

    כלומר אני משתמש בערכת העיצוב twentyten,
    ואני רוצה לשים את התפריט הימני בצבע מסויים, ואת התפריט העליון בצבע מסויים וכו',
    אבל אני רוצה לעשות את זה בקליק אחד ולא כל פעם להיכנס לCSS של ערכת העיצוב,
    זה אפשרי בתוסף הזה?

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

  • רמי כותב :

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

    ישנם הרבה תוספים שמרחיבים את הפונקציונלית של twentyten והרבה ערכות-בנות, לכן יש סיכוי שקיים תוסף כזה לתבנית הספציפית הזו. אבל אני אינני מכיר כאלה.

  • יצחק כותב :

    שלום רמי,

    תודה רבה רבה על הכל!!!
    עבדתי עם זה (כרגע לממשק הניהול), עשיתי כמה ערכות ויצא מעולה!!! תודה רבה רבה לך!!!

    רק שבסוף נתקלתי בבעיה…
    כשהעליתי את התוסף לרשת אתרים הוא תוקע את הרשת, אתה יודע למה זה/איך אפשר לתקן את זה?

    כך הודעת השגיאה:
    Warning: Cannot modify header information – headers already sent by (output started at /home/yitzlu/public_html/2-45.com/wp-content/plugins/custum_admin_color_scheme/custom_admin_color_scheme.php:1) in /home/yitzlu/public_html/2-45.com/wp-includes/functions.php on line 861

    Warning: Cannot modify header information – headers already sent by (output started at /home/yitzlu/public_html/2-45.com/wp-content/plugins/custum_admin_color_scheme/custom_admin_color_scheme.php:1) in /home/yitzlu/public_html/2-45.com/wp-includes/functions.php on line 862

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

  • יצחק כותב :

    הסתדרתי, רמי,
    תודה רבה רבה לך!!!
    פסח כשר ושמח!!!

  • אריה כותב :

    שלום רמי
    רציתי לדעת איך אפשר לשנות את הצבע של הסרגל העליון הראשי
    רוצה להתאים אותו להדר

    תודה
    אריה

  • רמי כותב :

    אפשר לעשות זאת על ידי שינוי ה-CSS שלך או להשתמש בתוסף יעודי שזה תפקידו.

  • rodolfo כותב :

    This example has an issue with $plugin_url. That's not the way to get the URL

    We gotta use plugins_url(); and not a hardcoded wp-content path.

    I'm writing mainly because this page is linked from the Codex.

  • Terence כותב :

    Admin Color Schemes ~ they should be switchable NOT by user but by site. Think how much swearing and shouting that would save!

    Seriously though, what donut thought that making it switchable by user profile was a good idea? I guess there's some things about WordPress and WP developers I will never understand.

    By the way, if you ever come across a code snippet that I can add to my functions.php and give me a choice of selecting admin color scheme by site, rather than user, I will be forever in your debt.

הוסף תגובה !

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

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