פעימות

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

קשה לתאר את ההתרגשות שהייתה בי ברגע שגיליתי את נפלאות הפלאגין Advanced Custom Fields או בשמו הפרטי ACF.

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

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

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

בנקודה זו בדיוק נכנס התוסף ACF המדובר והאהוב….

ברוכים הבאים ל ACF

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

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

למה לא להשתמש תוספים ייעודיים בעצם?

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

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

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

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

הבסיס של ACF

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

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

הנה תמונות המייצגות את ההבדלים בין השדות המותאמים המגיעים כברירת מחדל עם וורדפרס (ימין) לעומת השדות של התוסף Advanced Custom Fields (שמאל):

בואו נראה כיצד להתקין ולעבוד עם התוסף Advanced Custom Fields…

התקנת התוסף ACF

התקנת התוסף מתבצעת כהתקנת כל תוסף בוורדפרס, גשו לתוספים >  הוסף חדש ורשמו Advanced Custom Fields בשדה החיפוש:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הפונקציה the_field של ACF

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

the_field($selector, [$post_id], [$format_value]);

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

<?php the_field('text_field'); ?>

הדוגמה הבאה למשל, תציג את הערך של שדה בעל המזהה text_field מפוסט בעל המזהה 123:

<?php the_field('text_field', 123); ?>

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

<?php if( get_field('text_field') ): ?>
    <?php the_field('text_field'); ?>
<?php endif; ?>

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

<?php if( get_field('cta_text') ): ?>
    <?php the_field('cta_text'); ?>
<?php endif; ?>

הצגת שדה תמונה של ACF בתבנית

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

<?php 

$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)

if( $image ) {

	echo wp_get_attachment_image( $image, $size );

}

?>

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

עבור ערך חוזר מסוג כתובת אינטרנט (URL):

<?php if( get_field('image') ): ?>

	<img src="<?php the_field('image'); ?>" />

<?php endif; ?>

עבור ערך חוזר מסוג מערך תמונות (Array):

<?php 

$image = get_field('image');

if( !empty($image) ): ?>

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

<?php endif; ?>

לסיכום

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

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

אתם מוזמנים לתת מבט במאמרים נוספים הקשורים ל ACF אם מעניין אתכם:

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

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

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

38תגובות...
  • 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 ושמתי אותו בתוך השדה של הכתובת של התמונה במודול אך זה לא מתרגם את השורט קוד לכתובת של התמונה ונשאר As is. אם שמה את זה בתוך מודול טקסט עובד מעולה. נתקלת בזה? יש פתרון יצירתי לעניין? תודה על תוכן מצויין!!

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

      היי טלי,

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

  • אודי בורג 16 בנובמבר 2018, 16:04

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

    • רועי יוסף 16 בנובמבר 2018, 16:36

      אתה לא מפספס כלום, אם אתה משתמש ב page bulider בכדי ליצור עמוד אנשי צוות ואתה מגיע לעיצוב שאתה רוצה לך על זה.

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

      • אודי בורג 16 בנובמבר 2018, 16:40

        לפלח את התוכן מאיזו בחינה?

        • רועי יוסף 16 בנובמבר 2018, 17:15

          אפשט את זה, נגיד והיית רוצה לקבל את התוכן משדה X (שהוא שדה מסוג תאריך) עבור כל הפוסטים הנמצאים בקטגוריה Y ולהציגם בעמוד מסויים בצורה אוטומטית?

          • אודי בורג 16 בנובמבר 2018, 17:48

            אוקי, הבנתי, זה לא יקרה עם page builder.
            כנראה שאני צריך לשחק עם זה כדי להבין יותר במה הוא יעזור לי.
            תודה רועי.

  • ‪משה 12 בפברואר 2019, 11:38

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

    • רועי יוסף 12 בפברואר 2019, 20:08

      היי משה, אני לא רואה מדוע יש צורך ב ACF עבור זה. איני רואה קשר ישיר בין השניים…

  • שמעון יוסף 27 במאי 2019, 9:37

    כשאני מדביק את הקוד הבא באתר הוא מסמן לי איקס ליד השורה הראשונה גם לאחר שאני משנה לו את השם

  • אביעד בגנו 5 באוגוסט 2019, 16:01

    תודה רבה! מדריך מצוין!

  • הילה 10 בספטמבר 2019, 10:59

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

    • רועי יוסף 10 בספטמבר 2019, 11:01

      היי הילה,

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

  • אלי 15 במרץ 2020, 22:08

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

    • רועי יוסף 15 במרץ 2020, 22:33

      היי אלי 🙂 לצערי איני מכיר תוסף כזה, אך אני בטוח שיש….

  • מוריה 31 במרץ 2020, 2:01

    תודה על המאמרים המעולים! כשיש לי בעיה אני תמיד בודקת פה- תוכן איכותי!

    אשמח לעזרה: בניתי אתר עם טמפלייט באלמנטור והוספתי ב CPT כמה פוסטייפים שלהם הוספתי שדות מותאמים ב ACF. אני רוצה להכניס את הפוסטייפים לתפריט – ואין להם שם בכלל איזכור. ז"א הפוסטייפים משום מה לא נמצאים לי באפשרויות שיכולות להיכנס לתפריט. מה יכולה להיות הסיבה?

    • רועי יוסף 31 במרץ 2020, 2:06

      היי מוריה, איך יצרת את ה Post Types ומה את מצפה לראות באפשרויות של התפריט?

      • מוריה 31 במרץ 2020, 15:05

        בתוסף CPT UI יצרתי Post Types. כרגע אין אפשרות להוסיף בתפריטים פריטים מעבר לסטנדרט (פוסטים, עמודים, קישורים מותאמים וקטגוריות.) לא מופיעות האפשרויות של הPost Type שיצרתי.

        אציין שה Post Type כן עובד מצוין, ואפשרי להזין לתוכו תכנים. אבל אני חייבת לשלב אותו בתפריט הניווט שבאתר. אולי הייתי צריכה להגדיר משהו מיוחד? כי בהגדרות – Show in Nav Menus – השארתי TRUE. כנ"ל Show in Menu.

        • רועי יוסף 31 במרץ 2020, 15:10

          הבנתי. אז ראשית את כמובן יכולה להוסיף זאת ידנית. שנית, כנראה הסיבה לכך היא שה CPT לא מסומן באפשרויות התצוגה. שימי לב כי בצד שמאל העליון של המסך המסך יש כפתור הנקרא ״אפשרויות תצוגה״ או "Screen Options״. סמני שם את ה CPT ותראי אותו באפשרויות התפריט…

  • מוריה 31 במרץ 2020, 15:16

    אין מילים! זו באמת היתה הבעיה…
    ממש עזר לי! תודה רבה על המענה המהיר והיעיל!

  • לוי 21 באפריל 2020, 15:27

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

    כעת אני שואל:

    1. איך מציינים ומציגים את השדות בתוך הפוסט, כלומר מה צריך לעשות בתוך הפוסט כדי להציג אותם?
    2. ישנם 3 קבצי single, בשלושה תיקיות צמודות, לאיזה קובץ יש להוסיף את שורות הקוד?

    תודה מראש

    • רועי יוסף 21 באפריל 2020, 15:34

      היי לוי,

      לא בטוח שאני מבין את השאלה,

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

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

      • לוי 21 באפריל 2020, 22:43

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

        ושאלה שניה, יש לי בתוך הפרויקט כמה קבצי single, אני מניח שהכוונה היא לקובץ שנמצאת בתיקיית generatepress, נכון?

  • ויקטור 9 ביולי 2020, 9:36

    היי רועי,

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

    https://wpbeaches.com/adjusting-woocommerce-price-description-acf-custom-field/

    ומשום מה אני לא מצליח לראות איזשהו שינוי.

    אשמח לעזרה, תודה

    • רועי יוסף 14 ביולי 2020, 2:38

      היי ויקטור,

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

  • אורה 29 באוקטובר 2020, 14:45

    הי רועי!

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

    תודה מראש!

  • אורה 4 בנובמבר 2020, 17:27

    תודה לך,

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

    • רועי יוסף 4 בנובמבר 2020, 23:56

      היי אורה – לצערי אין ביכולתי להסביר כיצד לתרגם תוסף בסקופ של המדריך הזה…

השאירו תגובה

 

Up!
לבלוג