הוספת Meta Data לטקסונומיות בוורדפרס

עם השחרור של גרסה 4.4 של וורדפרס הגיעו הרבה שינויים שהקהילה חשקה בהם, אחד משינויים אלו הוא האפשרות להוסיף Meta Data לטקסונומיות בצורה קלילה ויעילה, מבלי הצורך להשתמש בתוספי צד-שלישי או ניפוח של טבלת wp_options.

בסרטון השחרור וההצגה של הפיצ׳רים החדשים שנוספו לוורדפרס בגרסה 4.4, ניתן לראות כי הם מציגים את האופציה להציג מידע נוסף על טקסונומיות (קטגוריות, תגיות וכד׳) בפאנל הניהול והציגו את הפונקציות החדשות – add_term_meta, get_term_meta, update_term_meta ו-delete_term_meta. פונקציות אלו עובדות בדיוק כמו הפונקציות אחיות שלהם, add_post_meta, get_post_meta וכד׳…

הפונקציות החדשות

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

הוספת Meta Data

הפונקציה add_term_meta מקבלת 4 פרמטרים, כאשר 3 הראשונים חובה – מספר מזהה של הטקסונומי (ID), מזהה ה-Meta Data והערך שיש לשמור, והפרמטר הרביעי הינו רשות – האם הרשומה צריכה להיות ייחודית, כלומר במידה וקיים כבר ערך שמור עם אותו מזהה לטקסונומי הנוכחי, זה יחזיר false ולא יכניס את הערך.

add_term_meta( $term_id, $meta_name, $meta_value, $unique );

אחזור Meta Data

הפונקצייה get_term_meta מקבלת 3 פרמטרים, כאשר השניים הראשונים חובה – מספר מזהה של הטקסונומי (ID) ומזהה ה-Meta Data, והפרמטר האחרון הוא רשות – האם להחזיר מספק רשומות (במידה וקיימות).

get_term_meta( $term_id, $meta_name, $multiple );

עדכון Meta Data

הפונקצייה update_term_meta מקבלת 4 פרמטרים, כאשר השלושה הראשונים הם חובה – מספר מזהה של הטקסונומי, מזהה ה-Meta Data ואת הערך שיש לשמור, והפרמטר הרביעי הוא רשות – הערך הישן שהיה קיים, שימושי כאשר יש לנו מספר רשומות עם אותם המזהים אך ערכים שונים. חשוב לציין כי אם לא תמצא רשומה קיימת, תיווצר אחת חדשה על מנת למנוע שגיאות.

update_term_meta( $term_id, $meta_name, $new_value, $old_value );

מחיקת Meta Data

הפונקצייה delete_term_meta מקבלת 3 פרמטרים, כאשר השניים הראשונים חובה – מספר מזהה הטקסונומי (ID) ומזהה ה-Meta Data, והפרמטר האחרון הוא רשות – הערך שאנחנו רוצים למחוק, שימושי כאשר יש מספר רשומות ולא מעוניינים למחוק את שאר הרשומות.

delete_term_meta( $term_id, $meta_name, $meta_value );

הצגת ה-Meta Data בפאנל ניהול

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

רישום Meta Data

בתור התחלה, נרשום את ה-Meta Data איתו נרצה לעבוד ואת הפונקציית סניטציה שלו, נעשה זאת ע״י שימוש בפונקצייה register_meta.

// Register Taxonomy Meta
function dorzki_register_category_color_meta() {

  register_meta( 'term', 'cat_color', 'dorzki_sanitize_category_color_meta' );

}


// Sanitize Taxonomy Meta
function dorzki_sanitize_category_color_meta( $cat_color ) {

  return ( preg_match( '/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/', $cat_color ) ) ? $cat_color : '#ffffff';

}

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

הוספת שדה למסכי הוספה ועריכת קטגורייה

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

// Add Meta Box to Taxonomy Creation
function dorzki_add_field_to_add_category_screen() {

  echo '<div class="form-field term-cat_color-wrap">';
  echo '  <label for="cat_color">' . __( 'Category Color', 'dorzki' ) . '</label>';
  echo '  <input name="cat_color" id="cat_color" type="text" value="" size="20">';
  echo '</div>';

}

add_action( 'category_add_form_fields', 'dorzki_add_field_to_add_category_screen' );


// Add Meta Box to Taxonomy Edit Screen
function dorzki_add_field_to_edit_category_screen( $_term ) {

  $_color = get_term_meta( $_term->term_id, 'cat_color', true );

  echo '<tr class="form-field form-required term-cat_color-wrap">';
  echo '  <th scope="row">';
  echo '    <label for="cat_color">' . __( 'Category Color', 'dorzki' ) . '</label>'; 
  echo '  </th>';
  echo '  <td>';
  echo '    <input name="cat_color" id="cat_color" type="text" value="' . $_color . '" size="20">';
  echo '    <p class="description">The category desired color.</p>';
  echo '  </td>';
  echo '</tr>';

}

add_action( 'category_edit_form_fields', 'dorzki_add_field_to_edit_category_screen' );

שמירת המידע לאחר שליחת הטופס

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

// Save Meta Box
function dorzki_save_category_color_meta( $_term_id ) {

  update_term_meta( $_term_id, 'cat_color', dorzki_sanitize_category_color_meta( $_POST['cat_color'] ) );

}

add_action( 'edit_category', 'dorzki_save_category_color_meta' );
add_action( 'create_category', 'dorzki_save_category_color_meta' );

הוספת עמודה בתצוגת קטגוריה

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

// Add Technology Icon Column
# Title
function dorzki_add_category_color_column_title( $_columns ) {

  $_columns['cat_color'] = __( 'Color', 'dorzki' );

  return $_columns;

}

add_action( 'manage_edit-category_columns', 'dorzki_add_category_color_column_title' );

# Values
function dorzki_add_category_color_column_value( $_ignore = '', $_column, $_term_id ) {

  if( $_column == 'cat_color' ) {

    printf( '<div class="category-color" style="background-color: %s;"></div>', get_term_meta( $_term_id, 'cat_color', true ) );

  }

}

add_action( 'manage_category_custom_column', 'dorzki_add_category_color_column_value', 10, 3 );

בונוס: שכלול תצוגת ובחירת הצבע

צעד זה הינו אופציונלי אך מעלה את חווית המשתמש בע בחירת הצבע והצגתו בעמודה של הצבע.

// Add Color Picker
function dorzki_register_admin_assets( $_screen_hook ) {

  if( $_screen_hook == 'edit-tags.php' && get_current_screen()->taxonomy == 'category' ) {

    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_style( 'cat_color-style', get_template_directory_uri(). '/css/cat_color.css', false, false );
    wp_enqueue_script( 'cat_color-script', get_template_directory_uri() . '/js/cat_color.js', array( 'jquery', 'wp-color-picker' ), false );

  }

}

add_action( 'admin_enqueue_scripts', 'dorzki_register_admin_assets' );

קוד ה-JavaScript (יש לשמור אותו בשם cat_color.js בתוך תיקיית ה-js של התבנית שלכם).

jQuery( document ).ready( function( $ ) {
  
  $( 'input[name="cat_color"]' ).wpColorPicker();

} );

קוד ה-CSS (יש לשמור אותו בשם cat_color.css בתוך תיקיית ה-css של התבנית שלכם).

.category-color {
  width: 16px;
  height: 16px;
  border-radius: 25px;
}

התוצאה

סיכום

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

Happy Coding.