מדריך שימוש בסיסי ב Advanced Custom Fields

מספר מילים על Advanced Custom Fields

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

לא לקח הרבה זמן עד שהבנתי איך להשתמש וליצור סוגי תוכן מותאמים (Custom Post Types) שעשו לי את החיים הרבה יותר קלים….

סוגי תוכן מותאמים (CPT) הן סוגי תוכן אשר מרחיבים את סוגי התוכן הקיימים כברירת מחדל בוורדפרס – פוסטים, עמודים, תפריטים, עמודי קובץ (attachments9 וגירסאות.

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

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

מה לגבי פלאגינים?

אחד הפתרונות ליצירת סוגי תוכן חדשים הוא שימוש בפלאגינים,  Events Calandar לאירועים, Meet the Team לאנשי צוות וכדומה. פתרון זה יעבוד להרבה אנשים, הוא פשוט ורואים תוצאות מהר מאד במהלך פיתוח האתר. עם זאת, מעולם לא חיבבתי שימוש מרובה בפלאגינים ממספר סיבות. ראשית, כמעט לכל פלאגין שתוסיפו למערכת תהיה השפעה שלילית על מהירות האתר. ברוב המקרים, כל פלאגין שתתקינו יטען קבצי css ו javascript משלו שיתווספו לעמודי האתר.

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

מה נעשה במדריך זה?

במדריך זה נבנה סוג תוכן מותאם אשר נקרא ״אנשי צוות״ וניצור על ידי ACF שדות שלושה שדות חדשים – שם, אימייל ותמונה לכל איש צוות. בנוסף, נבנה תבנית עמוד (page-template) אשר נוסיף לתבנית ברירת המחדל של וורדפרס (Twenty Fifteen בזמן כתיבת מדריך זה) ונגרום לאותה תבנית להציג את כל אנשי הצוות עם המידע שהכנסנו לשדות על ידי הלולאה של וורדפרס.

בכדי לשמור על סטנדרט עבודה נכון, נעשה כל זאת על תבנית בת שניצור. אתם מוזמנים לתת מבט במאמר הזה בכדי ללמוד איך ליצור תבנית בת בוורדפרס או שפשוט הורידו מכאן תבנית בת מוכנה שיצרתי, העתיקו את התיקייה בקובץ ה zip לתיקיית התבניות (wp-content/themes) בהתקנת הוורדפרס שלכם.

בכדי לעקוב אחר מדריך זה, וודאו כי לרשותכם התקנה נקייה של וורדפרס עם תבנית הבת שיצרתם או הורדתם ל Twenty Fifteen וודאו גם כי התקנתם והפעלתם את הפלאגין Advanced Custom Fields.

יצירת סוג תוכן מותאם לאנשי הצוות

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

function members_custom_init() {
      $labels = array(
          'name' => 'איש צוות',
          'singular_name' => 'איש צוות',
          'add_new' => 'הוסף איש צוות חדש',
          'add_new_item' => 'הוסף איש צוות חדש',
          'edit_item' => 'ערוך איש צוות',
          'new_item' => 'איש צוות חדש',
          'all_items' => 'כל אנשי הצוות',
          'view_item' => 'הצג איש צוות',
          'search_items' => 'חפש איש צוות',
          'not_found' =>  'לא נמצא איש צוות',
          'not_found_in_trash' => 'לא נמצא איש צוות בפח', 
          'parent_item_colon' => '',
          'menu_name' => 'אנשי צוות',
          );
 
      $args = array(
          'labels' => $labels,
          'exclude_from_search' => yes,
          'public' => true,
          'publicly_queryable' => true,
          'show_ui' => true, 
          'show_in_menu' => true, 
          'query_var' => true,
          'rewrite' => array( 'slug' => 'איש צוות' ),
          'capability_type' => 'post',
          'has_archive' => true, 
          'hierarchical' => false,
          'taxonomies' => '',
          'menu_position' => null,
          'supports' => array( 'title' )
          ); 
 
        register_post_type( 'team_member', $args );
    }
add_action( 'init', 'members_custom_init', 0);

קוד זה יגדיר סוג תוכן חדש בשם ״אנשי צוות״. שימו לב כי בשורה 37 הגדרנו את המזהה של סוג התוכן וקראנו לו team_member.
<
בכל אופן, שימרו את הקובץ וברגע שתכנסו ללוח הבקרה של וורדפרס יופיע לכם תפריט של ״אנשי צוות״. אם תלחצו על ״הוסף איש צוות חדש״ תגיעו למסך די ריק בשלב הנוכחי. אז בואו  נוסיף שדות משלנו למסך ואת זאת נעשה כמובן בעזרת Advanced Custom Fields.

מדריך שימוש ב Advanced Custom Fields

 הוספת קבוצת שדות ב ACF

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

שדה תמונה

  • שם שדה – member_image – זהו המזהה של השדה, נקרא לו בהמשך שנבנה את הלולאה
  • תווית שדה – תמונה (יכול להיות איזה שם שתבחרו)
  • סוג שדה – תמונה
  • ערך חוזר – אובייקט תמונה

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

שדה טקסט

  • תווית שדה – שם מלא
  • שם שדה – member_full_name
  • סוג שדה – טקסט

שדה אימייל

  • תווית שדה – אימייל
  • שם שדה – member_email
  • סוג שדה – מייל

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

שדות ב ACF

כעת נוסיף תנאי שקובע כי שדות אלו יופיעו אך ורק במסך העריכה של סוג הפוסט (סוג התוכן) שיצרנו לאנשי הצוות. תחת השדות שיצרנו יופיע סקשיין בשם ״מיקום״. נגדיר כלל המגדיר כי נראה את קבוצת בשדות שיצרנו אך ורק כאשר אנו מצאים בסוג תוכן (CPT) בשם team_member.

תנאh ACF

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

הצטרפו לרשימת התפוצה!

בניית תבנית עמוד (Page Template) בשם ״אנשי צוות״

על מנת להציג את אנשי הצוות, ניצור תבנית עמוד חדשה אשר נשייך בהמשך לעמוד חדש שניצור. לבניית תבנית העמוד צרו קובץ בתיקייה של תבנית הבת וקראו לו team.php. העתיקו אליו את הקוד הבא :

<?php
/* Template Name: אנשי צוות */

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		<?php
		    $args = array(
				'post_type' => array( 'team_member' )
			);
			query_posts( $args );
		?>
		<?php if ( have_posts() ) : ?>
			<div class="hentry team_members_wrapper">
			<?php
			// Start the loop.
			while ( have_posts() ) : the_post(); ?>
					<div class="entry-content team_member">
								<?php

								$image = get_field('member_image');
								$name = get_field('member_full_name');
								$email = get_field('member_email');

								?>

								<div class="member_image">
									<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
								</div>

								<div class="member_name">
									<?php echo $name ?>
								</div>

								<div class="member_email">
									<?php echo $email ?>
								</div>

					</div><!-- .entry-content -->
			<?php

			// End the loop.
			endwhile;
			?>
			</div>
			<?php
		// If no content, include the "No posts found" template.
		else :
			get_template_part( 'content', 'none' );
		endif;
		?>
		</main><!-- .site-main -->
	</div><!-- .content-area -->

<?php get_footer(); ?>

שימו לב כי בשורה 2 בחרנו את השם ל Page Template שיצרנו ובשורה 10 הגדרנו כי הלולאה תרוץ רק על Post Type מסוג team_member. לא ארחיב על בניית ה page template, בהקשר למאמר זה השורות 22-24 הן השורות החשובות.

פונקציית get_field ב ACF

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

במקרה שלנו השתמשנו בשלושה משתנים: email, $name$ ו image$ והצבנו בהם את הערך שקיבלנו מהשדות שיצרנו ב ACF על ידי שימוש ב get_field('the_field_slug')  כאשר את the_field_slug החלפנו במזהה השדה שבחרנו לכל אחד מהשדות. ניתן לבצע זאת גם ללא השימוש במשתנים ולהדפיס ישר את הערך בצורה הזאת:

<div class="member_name">
	<?php echo get_field('member_full_name'); ?>
</div>

 

אז מה נותר לעשות ?

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

  • ליצור מספר אנשי צוות בלוח הבקרה של וורדפרס והוסיפו להם תמונה, שם ואימייל.
  • ליצור עמוד חדש ולהגדיר בו את תבנית העמוד שיצרנו (ראו תמונה).

page_template

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

.team_member {
    float: right;
    width: 27%;
    text-align: center;
    margin: 3%;
    background-color: #F9F9F9;
    padding: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 16px;
}

.team_members_wrapper {
    overflow: hidden;
}


@media screen and (max-width: 640px) {
	.entry-content.team_member {
	    width: 100%;
	}
}

 

לסיכום

במדריך זה ביצענו מספר דברים:

  • יצרנו תבנית בת ל Twenty Fifteen
  • יצרנו סוג תוכן מותאם הנקרא ״אנשי צוות״
  • על ידי שימוש ב ACF, יצרנו שלושה שדות לכל איש צוות
  • יצרנו תבנית עמוד בשם ״אנשי צוות״ ועל ידי הלולאה של וורדפרס הצגנו את אנשי הצוות שיצרנו

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

רועי יוסף
רועי יוסף

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

10תגובות...
  • matan 18 ביולי 2015, 19:50

    מעולה, תודה!

  • רוב 17 בנובמבר 2015, 10:30

    תודה, עזר לי הקוד של התמונה.

  • Michael 4 ביולי 2016, 11:41

    אם כבר ACF, אז אפשר להוסיף באותה נשימה (היה נחמד אם היית כותב מאמר) את CMB2
    קוד פתוח עם בסיס מפתחים ומשתמשים ענק שמכיל את היכולות של ACF PRO בצורה רזה ונכונה יותר. #רק-אומר 🙂

    • רועי יוסף 4 ביולי 2016, 11:46

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

  • איתי 16 בפברואר 2018, 13:02

    מאמר מדהים!

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

    • רועי יוסף 16 בפברואר 2018, 21:29

      ה URL כבר קיים אם בנית את סוג התוכן (custom post type) בצורה שהראנו. כלומר ברגע שתיצור ״איש צוות״ חדש תוכל לראות את העמוד שלו ככל פוסט חדש שאתה יוצר.

      סביר להניח כי ברגע שתצפה באותו עמוד של איש צוות, וורדפרס תשתמש בקובץ single.php בכדי להציג אותו (זוהי ברירת המחדל). אתה יכול לעומת זאת, ליצור קובץ בשם single-team_member.php ולהעתיק לתוכו את הקוד מ single.php כך שוורדפרס תשתמש בקובץ זה על מנת להציג את העמוד של איש הצוות וזאת מעצם הדרך בה ההיררכיה של וורדפרס עובדת.

  • טל ש 23 באפריל 2018, 11:39

    מדהים!! תודה

  • טלי 3 ביוני 2018, 23:16

    תודה! פוסט מצויין!! ובכלל המון מידע יעיל בכל הפוסטים! עברתי כבר כמה עמודים:)

    גיליתי ממש בימים האחרונים את הפלאגין – הוא מדהים! שנים כתבתי עמודים חיצוניים כשהייתי צריכה שדות החוזרים על עצמם בין הדפים.
    אני משתמש בשדות אלו בתוך layout parts שחוזרים על עצמם בהרבה עמודים. אני משלבת את השורט קוד של השדות לתוך מודול טקסט בבילדר וזה עובד מעולה. הבעיה התחילה כשרציתי לשלב שורטקוד של שדה תמונה בתוך מודול של תמונה בבילדר. בחרתי שהשורטקוד יציג את ה url ושמתי אותו בתוך השדה של הכתובת של התמונה במודול אך זה לא מתרגם את השורט קוד לכתובת של התמונה ונשאר אז איז. אם שמה את זה בתוך מודול טקסט עובד מעולה. נתקלת בזה? יש פתרון יצירתי לעניין? תודה על תוכן מצויין!!

    • רועי יוסף 6 ביוני 2018, 23:27

      היי טלי,

      לצערי אין לי תשובה בשבילך, לא יצא לי להשתמש ב Advanced Custom Fields בשילוב עם Page Builder כזה או אחר.. שמח בכל אופן שגילית את התוסף! אט אט תגלי שאין לך צורך כלל ב Page Builders 🙂

השאירו תגובה