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

דמו של איך זה יראה בסוף… | קבצי מקור

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

 שלב 1 – התקנת וורדפרס ואיתחול ערכת נושא.

הצעד הראשון ביצירת אתר הפורטפוליו שלנו הוא להתקין וורדפרס.
ברגע שההתקנה הושלמה, אנחנו  צריכים ליצור ערכת נושא  אישית שלנו אשר תציג תיק עבודות שלנו. ישנן שיטות שונות ליצירת ערכות נושא אישית. יש המעדיפים ליצור תבנית חדשה לבנה ריקה, בעוד שאחרים בוחרים ליצור תבנית בת של תבנית TwentyTwelve החדשה. למדריך זה, אנו נשתמש בערכת הנושא http://viewportindustries.com/products/starkers/.

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

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

http://wordpress.org/extend/plugins/one-click-child-theme/

שלב 2 – תכנון הפריסה

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

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

שלב 3 – הגדרת Backend

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


/*--- Creating custom post type for project --*/
add_action('init', 'project_custom_init');

שיטת project_custom_init זו תשמש להגדרת הקסטם פוסט המותאם אישית באתר.

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

/*-- Custom Post Init Begin --*/
function project_custom_init()
{
 $labels = array(
 'name' => _x('Projects', 'post type general name'),
 'singular_name' => _x('Project', 'post type singular name'),
 'add_new' => _x('Add New', 'project'),
 'add_new_item' => __('Add New Project'),
 'edit_item' => __('Edit Project'),
 'new_item' => __('New Project'),
 'view_item' => __('View Project'),
 'search_items' => __('Search Projects'),
 'not_found' => __('No projects found'),
 'not_found_in_trash' => __('No projects found in Trash'),
 'parent_item_colon' => '',
 'menu_name' => 'Project'

);

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

$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','author','thumbnail','excerpt','comments')
);
// The following is the main step where we register the post.
register_post_type('project',$args);
}
/*-- Custom Post Init Ends --*/

יצירת הודעות מותאמות אישית עבור סוג הפוסט “פרויקט”

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


// Add filter to ensure the text Project, or project, is displayed when a user updates a book
add_filter('post_updated_messages', 'project_updated_messages');
function project_updated_messages( $messages ) {
global $post, $post_ID;

$messages['project'] = array(
0 => '', // Unused. Messages start at index 1.
1 => sprintf( __('Project updated. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
2 => __('Custom field updated.'),
3 => __('Custom field deleted.'),
4 => __('Project updated.'),
/* translators: %s: date and time of the revision */
5 => isset($_GET['revision']) ? sprintf( __('Project restored to revision from %s'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
6 => sprintf( __('Project published. <a href="%s">View project</a>'), esc_url( get_permalink($post_ID) ) ),
7 => __('Project saved.'),
8 => sprintf( __('Project submitted. <a href="%s" target="_blank">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
9 => sprintf( __('Project scheduled for: <strong>%1$s</strong>. <a href="%2$s" target="_blank">Preview project</a>'),
// translators: Publish box date format, see http://php.net/date
date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
10 => sprintf( __('Project draft updated. <a href="%s" target="_blank">Preview project</a>'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
);

return $messages;
}

הגדרת טקסונומיה מותאמת אישית(Custom Taxonomy)

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

את הקוד הבא כותבים כמובן גם ב functions.php ועכשיו נוכל לראות בממשק העריכה שהתווספו לנו תגיות בלשונית הproject.

// Initialize New Taxonomy Labels
 $labels = array(
 'name' => _x( 'Tags', 'taxonomy general name' ),
 'singular_name' => _x( 'Tag', 'taxonomy singular name' ),
 'search_items' => __( 'Search Types' ),
 'all_items' => __( 'All Tags' ),
 'parent_item' => __( 'Parent Tag' ),
 'parent_item_colon' => __( 'Parent Tag:' ),
 'edit_item' => __( 'Edit Tags' ),
 'update_item' => __( 'Update Tag' ),
 'add_new_item' => __( 'Add New Tag' ),
 'new_item_name' => __( 'New Tag Name' ),
 );
// Custom taxonomy for Project Tags
register_taxonomy('tag',array('project'), array(
 'hierarchical' => false,
 'labels' => $labels,
 'show_ui' => true,
 'query_var' => true,
 'rewrite' => array( 'slug' => 'tag' ),
 ));

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

יצירת פריטי דמו לפורטפוליו שלנו

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

בשביל לשכפל את התוכן אפשר להשתמש בתוסף הזה.

המשך יבוא ב”ה…