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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שדה תמונה

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

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

שדה טקסט

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

שדה אימייל

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

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

שדות ב ACF

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

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

רועי יוסף

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

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

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

השאירו תגובה

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

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