שימוש ב Advanced Custom Fields ללא תלות ב Frontend

התוסף Advanced Custom Fields הוא הדרך הפופולרית ביותר ליצירת metaboxes באתרי וורדפרס

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

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

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

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

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

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

על הדרך, הצטרפו לרשימת התפוצה !

שימוש ב Repeating Fields

הלקוח יכול להוסיף וידאו כאוות נפשו על ידי שימוש ב ACF Repeater Field הכולל כותרת, URL של הוידאו ותמונה.

ACF Frontend Dependency Example
בתבנית שלכם, קריאה לשדה ה meta של ה repeater field באמצעות הקוד הבא תחזיר לכם את מספר הפריטים הקיימים בשדה זה:

get_post_meta( get_the_ID(), 'my_videos', true );

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

$videos = get_post_meta( get_the_ID(), 'my_videos', true );
  if( $videos ) {
    for( $i = 0; $i < $videos; $i++ ) {
      $title = esc_html( get_post_meta( get_the_ID(), 'my_videos_' . $i . '_title', true ) );
      $video = esc_url( get_post_meta( get_the_ID(), 'my_videos_' . $i . '_video', true ) );
      $thumbnail = (int) get_post_meta( get_the_ID(), 'my_videos_' . $i . '_thumbnail', true );

      // Thumbnail field returns image ID, so grab image. If none provided, use default image
      $thumbnail = $thumbnail ? wp_get_attachment_image( $thumbnail, 'medium' ) : '<img src="' . get_stylesheet_directory_uri() . '/images/default-video.png" />';

      // Displayed in two columns, so using column classes
      $class = 0 == $i || 0 == $i % 2 ? 'one-half first' : 'one-half';

      // Build the video box
      echo '<div class="' . $class . '"><a href="' . $video . '">' . $thumbnail . '</a>' . $title . '</div>';

    }
  }

בקוד זה ניתן לראות איך להשתמש ב ACF Image Field. ה – ID של התמונה נשמר במסד הנתונים וניתן לקבל בעצם את ה markup של התמונה באמצעות:

 wp_get_attachment_image( $image_id, 'image_size' );

 

ACF Options Page

כאשר אתם מוסיפים metaboxes ל options page של התוסף, המידע יישמר כ option ולא כ post meta, כלומר השימוש במקרה זה יהיה שם ה meta_key שבחרתם ו prefix בתחילתו בשם options_. במידה והיה ברשותכם עמוד options עם קריאה לפעולה, הגישה לאותן שדות תתבצע בצורה הבאה:


  $title = esc_html( get_option( 'options_cta_title' ) );
  $button_text = esc_html( get_option( 'options_cta_button_text' ) );
  $button_url = esc_url( get_option( 'options_cta_button_url' ) );
  
  if( $title && $button_text && $button_url )
    echo '<div class="call-to-action"><div class="wrap"><p>' . $title . '</p><p><a href="' . $button_url . '" class="button">' . $button_text . '</a></p></div></div>';

Term Metadata

בהנחה והוספתם שדה הנקרא ״כותרת משנית״ לקטגוריות, ACF שומר זה גם כן כ options בפורמט הבא: [taxonomy]_[term_id]_[field name]

מכאן בכדי לקבל את הערך של שדה הנקרא my_subtitle בדף הארכיון של הקטגוריות, תשמשו בקוד הבא:

// Make sure this is a category archive
	if( ! is_category() )
		return;
		
	
	$category = get_term_by( 'slug', get_query_var( 'category_name' ), 'category' );
	$subtitle = esc_html( get_option( 'category_' . $category->term_id . '_my_subtitle' ) );
	if( $subtitle )
		echo '<p class="subtitle">' . $subtitle . '</p>';

עד כאן… 🙂

רועי יוסף

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

תגובות פייסבוק

{ 3 תגובות… הוסף אחת }

השאירו תגובה

שיתופים
קראו גם את:
שיפור מהירות טעינת Google Fonts באמצעות preconnect
שיפור מהירות טעינת Google Fonts באמצעות preconnect

Google Fonts הוא שירות די אמין וניתן לומר כי ביצועי הרשת שלו טובים מאד -...