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

מספר מילים על כיצד להשתמש ב Advanced Custom Fields.

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

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

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

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

ברוכים הבאים ל 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; ?>

אז בכדי להציג את שדה הטקסט שיצרנו ב ACF בתבנית שלנו, עלינו למצוא את הקובץ האחראי להצגת פוסטים יחידים (בד״כ 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 בתבניות וורדפרס. אם ישנן שאולות אתם מוזמנים לשאול בתגובות מטה.

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

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

22תגובות...
  • 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

      היי הילה,

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

השאירו תגובה

Up!