איפה מתחילים ולאן ממשיכים?

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

להורדת דרופל בעבריתלשפות וגרסאות אחרות, Drupal.org

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

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

שלום אורח

כניסה|הצטרפות

כעת מחוברים 2 משתמשים מזוהים, ו-1 אורחים:
ענת כהנא, nimbus

Ira הוא החבר הכי חדש בקהילה!

חדש בדיונים בפורום

עוד בפורום

חדש בבלוגים

עוד בבלוגים

חדש באתרים ישראלים

עוד אתרים ישראלים

יצירת מדריך שמוש חד פעמי כמו ב Twitter בעזרת מודול Flag

bluetegu, ש', 06/02/2010 - 17:02

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

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

כל ההסברים מבוססים על התעוד של המודול ב http://drupal.org/handbook/modules/flag . אני משתמש בגרסא 5 של דרופל, למעשה בגרסאת ביטא של המודול, כך שיתכן שישנם פרטי קוד שיעבדו אחרת בבסיס קוד אחר. אני משתמש במודול node profile בשביל להוסיף תכונות לכל משתמש.

הנה רשימת הצעדים שלי:

1. הכן את המדריך, תמונה בגודל המתאים עם כל ההסברים. המדריך יוצג כ background של div שנוסיף למטרה זו. הוסף לספרית images בספרית ה theme שלך (אני משתמש ב tendu( שם תמונת המדריך profile-hotwo.png
2. הכן כפתור סגירה, תמונה שתוצב מעל המדריך וכאשר המשתמש ילחץ עליה תסגור את המדריך. הוסף את התמונה לספרית images בשם flag-profile-howto-off.png
3. הגדר דגל עבור nodes, שאינו גלובלי, וצרף אותו לסוג המוגדר כ node profile, במקרה שלי נקרא member. בחר בממשק javascript. שם הדגל במקרה שלי הוא profile_howto. סמן שכל משתמש רשום יכול להשתמש בדגל. הורד את הסמון של הצג הדגל בדף הסכום. הדגל יוצג בדף המשתמש. במקרה שלי אני משתמש בפונקציה משלי להציג את דף המשתמש ולכן הורדתי את סמון הצג בדף ה node
4. הצג את המדריך. הנה הקוד שאני השתמשתי בתוך הפונקציה הכללית שבונה את דף המשתמש:

    $flag = flag_get_flag('profile_howto');
    if ($flag && !$flag->is_flagged($node->nid)) {
      $output .= theme('cprofile_howto', $node->nid);
    }

וכן את הפונקציה שבונה את ה divs.

/**
 * Theme cprofile howto message
 */
function theme_cprofile_howto($nid) {
  $output  = '<div id = "cprofile-howto">';
  $output .= '<div id = "cprofile-howto-flag-wrapper">';
  $output .= flag_create_link('profile_howto', $nid); 
  $output .= '</div>';
  $output .= '</div>';
  return $output;
}
 

5. הוסף את התמונה של כפתור הסגירה. כאן אני משתמש בדרך הכללית להחליף דגלים לתמונות, וזו הסיבה לשם שבחרתי לדגל - שמורכב משם הדגל וסיומת מצב הדגל off
הקוד הזה מוסף ל template.php ראה http://drupal.org/node/305061 להסבר

/**
 * Take control of flag theming
 */
function phptemplate_flag($flag, $action, $content_id, $after_flagging = FALSE) {
  return flag_phptemplate_adapter($flag, $action, $content_id, $after_flagging);
}

/** * Replace links with images (flag module) per drupal.org/node/305061 */ function phptemplate_preprocess_flag(&$vars) { $image_file = path_to_theme() . '/images/flag-' . $vars['flag_name_css'] . '-' . ($vars['action'] == 'flag' ? 'off' : 'on') . '.png'; // Uncomment the following line when debugging. // drupal_set_message("Flag is looking for '$image_file'..."); if (file_exists($image_file)) { // note that flags that appear in links are themed using link alter and not // using this function, as it doesn't allow for text and image together. $vars['link_text'] = '<img src="' . base_path() . $image_file . '" />'; } }

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

#cprofile-howto{background:#8da7c6 url(images/profile-howto.png) repeat-y 0 0;overflow:hidden;height:182px;width:100%;}
#cprofile-howto-flag-wrapper{margin-top:147px;margin-left:40px;}
#cprofile-howto .flag-throbber{display:none;}

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

// catch the profile howto flag event and hide the message
$(document).bind('flagGlobalAfterLinkUpdate', function(event, data){
    if (data.flagName == 'profile_howto' && data.flagStatus == 'flagged') {
      $('#cprofile-howto').hide();
    }
});

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