Wordcamp 2011-new1

1,604
-1

Published on

wordcamp 2011

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,604
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wordcamp 2011-new1

  1. 1. WORDCAMP - 2011 שימוש ב FRAMEWORK וב SHORTCODES לפיתוח ערכת עיצוב אשרה גרינבלט – קודארט HTTP://WWW.CODEART.CO.IL
  2. 2. המטרה : <ul><li>פיתוח ערכת עיצוב מ PSD </li></ul><ul><li>במינימום זמן </li></ul><ul><li>תוך מתן מקסימום שליטה לבעל האתר . </li></ul><ul><li>מילת מפתח - Reuse </li></ul>
  3. 3. מהי ערכת עיצוב ? <ul><li>ערכת עיצוב היא סט של קבצים שמשתלב בתוך מערכת וורדפרס </li></ul><ul><li>ערכת עיצוב אחראית להצגת תוכן מתוך בסיס הנתונים באמצעות פונקציות של המערכת </li></ul><ul><li>ערכת עיצוב היא בעלת עיצוב מסוים ( מבנה HTML + CSS ) </li></ul><ul><li>בתהליך פיתוח ערכת עיצוב אנחנו צריכים להתייחס לשלושת האלמנטים האלו : סט קבצים , תוכן דינאמי , עיצוב </li></ul>
  4. 4. סט הקבצים המרכיבים ערכת עיצוב : <ul><li>  סט בסיסי – 2 קבצים בלבד </li></ul><ul><li>Style.css </li></ul><ul><li>Index.php </li></ul>
  5. 5. סט הקבצים המרכיבים ערכת עיצוב : <ul><li>סט עשיר יותר : </li></ul><ul><li>Style.css </li></ul><ul><li>Index.php </li></ul><ul><li>Page.php </li></ul><ul><li>Category.php </li></ul><ul><li>Single.php </li></ul><ul><li>Front-page.php </li></ul><ul><li>בגדול כל קובץ נקרא על ידי מערכת וורדפרס להציג מידע מסוים </li></ul><ul><li>- Page מציג עמודים סטטיים ( עמודים שהוקמו במערכת הניהול ) </li></ul><ul><li>Single – מציג פוסט יחיד </li></ul><ul><li>Search – מציג תוצאות חיפוש </li></ul><ul><li>http://codex.wordpress.org/Template_Hierarchy </li></ul><ul><li>Search.php </li></ul><ul><li>404.php </li></ul><ul><li>Sidebar.php </li></ul><ul><li>Header.php </li></ul><ul><li>Footer.php </li></ul><ul><li>Function.php (***) </li></ul>
  6. 6. <ul><li>http://codex.wordpress.org/Template_Hierarchy </li></ul>
  7. 7. קבצי HEADER ו FOOTER <ul><li>במרבית האתרים ישנו חלק עליון וחלק תחתון של כל דף שהוא קבוע ומשותף </li></ul><ul><li>את החלק הזה אנחנו מוציאים מתוך הקבצים שסקרתי ושמים ב Header ו Footer וכוללים אותם בקבצים שלנו באמצעות הפקודות הבאות : </li></ul><ul><li><?php get_header(); ?> </li></ul><ul><li><?php get_footer(); ?> </li></ul>
  8. 8. קובץ FUNCTION <ul><li>קובץ זה אינו אחראי להצגת תוכן מסוים אלא להקמת תשתיות שישמשו לכל אורך האתר . בין השאר נמצא שם רגיסטרציה של תפריטים , רגיסטרציה של sidebars , קביעת גדלים שונים לצלמיות ועוד </li></ul><ul><li>קובץ זה הוא הלב של סביבת העבודה שלנו . הוא יאפשר לנו שימוש חוזר בקוד שנכתב . </li></ul><ul><li>לכאן אנחנו נוסיף את הפונקציות של ה shortcodes ושאר פונקציונאליות </li></ul>
  9. 9. מילת המפתח - REUSE <ul><li>יתרונות עבור המפתח - </li></ul><ul><li>הפרדת פונקציונאליות מקבצי ה HTML של ערכת העיצוב הופך את הקוד של ערכת העיצוב לקצר , ברור ונקי יותר </li></ul><ul><li>חסכון בזמן פיתוח </li></ul><ul><li>חסכון בבאגים </li></ul><ul><li>עבודת תחזוקה נוחה יותר </li></ul><ul><li>תוספת יכולות וגמישות במינימום זמן פיתוח </li></ul><ul><li>יתרונות עבור המשתמש – </li></ul><ul><li>יכולות וגמישות </li></ul><ul><li>יתרון לעומת שימוש בתוספים – אין הכבדה על המערכת ואין חשש להתנגשויות </li></ul>
  10. 10. איך עושים REUSE ? <ul><li>Shortcodes </li></ul><ul><li>אחד הכלים להפוך את ערכת העיצוב שלנו ל FrameWork פיתוחי </li></ul><ul><li>מוכר לנו בתחילה משימוש בתוספים כמו Contact form7 , nextgen gallery ועוד </li></ul><ul><li>2. פונקציות נוספות בקובץ function </li></ul>
  11. 11. SHORTCODE לחלוקה לשתי עמודות <ul><li>שילוב shortcode בקובץ function – חלוקת עמוד לשתי עמודות </li></ul><ul><li>/* </li></ul><ul><li>* EXAMPLE USAGE: </li></ul><ul><li>* [lefttag] my left content [/lefttag] </li></ul><ul><li>*/ </li></ul><ul><li>function lefttag_func( $atts, $content ) { </li></ul><ul><li>return '<div class=&quot;en&quot;>' .$content .'</div>'; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode( 'lefttag', 'lefttag_func' ); </li></ul><ul><li>/* </li></ul><ul><li>* EXAMPLE USAGE: </li></ul><ul><li>* [righttag] my right content [/righttag] </li></ul><ul><li>*/ </li></ul><ul><li>function righttag_func( $atts, $content ) { </li></ul><ul><li>return '<div class=&quot;heb&quot;>' .$content .'</div>'; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode( 'righttag', 'righttag_func' ); </li></ul>
  12. 12. שילוב CSS שרלוונטי ל SHORTCODE שיצרנו בקובץ ה STYLE.CSS <ul><li>/*-------- shortcodes ---------*/ </li></ul><ul><li>.en {float: left; width: 220px; direction:ltr; text-align:left; padding: 0 10px 0 20px; min-height:300px;} </li></ul><ul><li>.heb {float: right; width: 220px; direction:rtl; text-align:right; padding: 0 0px 0 10px; min-height:300px;} </li></ul><ul><li>.en , .heb{font-size: 18px; font-family: arial;} </li></ul>
  13. 13. שימוש ב SHORTCODE על ידי המשתמש <ul><li>[ lefttag] my left content [/lefttag] [righttag] my right content [/righttag ] </li></ul>
  14. 14. שימוש ב SHORTCODE על ידי המשתמש דוגמא נוספת : <ul><li>[ lefttag] Long and winding road, and her nest, three eggs. And every egg - Hess, Penn Wake! - Old a chick, chick tiny [/lefttag] [righttag ] קן לציפור </li></ul><ul><li>בין העצים , </li></ul><ul><li>ובקן לה , </li></ul><ul><li>שלוש ביצים . </li></ul><ul><li>  </li></ul><ul><li>ובכל ביצה - </li></ul><ul><li>הס , פן תעיר ! - </li></ul><ul><li>ישן לו </li></ul><ul><li>אפרוח , אפרוח זעיר . </li></ul><ul><li>[/ righttag ] </li></ul><ul><li>  </li></ul>
  15. 15. SHORTCODE לכפתורי רשתות חברתיות <ul><li>/* </li></ul><ul><li>* EXAMPLE USAGE: </li></ul><ul><li>* [fb-like lang='he_IL' send='true' width='100' faces='false' ] </li></ul><ul><li>*/ </li></ul><ul><li>function like( $atts ) { </li></ul><ul><li>global $post; </li></ul><ul><li>extract( shortcode_atts( array( </li></ul><ul><li>'lang' => 'he_IL', // button language </li></ul><ul><li>'send' => 'false', //without send </li></ul><ul><li>'width' => '100', // default width </li></ul><ul><li>'faces' => 'false', // do show faces </li></ul><ul><li>'layout' => 'button_count', // options: box_count, button_count, standard </li></ul><ul><li>), $atts ) ); </li></ul><ul><li>$data = '<div id=&quot;fb-root&quot;></div><script src=&quot;http://connect.facebook.net/'.$lang.'/all.js#appId=157072397705485&amp;xfbml=1&quot;></script><fb:like href=&quot;'.get_permalink().'&quot; send=&quot;'.$send.'&quot; layout='.$layout.' width=&quot;'.$width.'&quot; show_faces=&quot;'.$faces.'&quot; action=&quot;like&quot; font=&quot;&quot;></fb:like>'; </li></ul><ul><li>return $data; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode( 'fb-like', 'like' ); </li></ul>
  16. 16. טוויטר <ul><li>/* </li></ul><ul><li>* EXAMPLE USAGE: </li></ul><ul><li>* [tweet-that datacount='none' ] </li></ul><ul><li>* [tweet-that datacount='horizontal' ] </li></ul><ul><li>* [tweet-that datacount='vertical' ] </li></ul><ul><li>*/ </li></ul><ul><li>function tweet( $atts ) { </li></ul><ul><li>global $post; </li></ul><ul><li>extract( shortcode_atts( array( </li></ul><ul><li>'datacount' => 'none', // options: none, horizontal, vertical </li></ul><ul><li>), $atts ) ); </li></ul><ul><li>$data= '<a href=&quot;http://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-count='.$datacount.'>Tweet</a><script type=&quot;text/javascript&quot; src=&quot;http://platform.twitter.com/widgets.js&quot;></script>'; </li></ul><ul><li>return $data; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode( 'tweet-that', 'tweet' ); </li></ul>
  17. 17. הוספת כפתורי LIKE בקוד של דף פוסט יחיד <ul><li><div class=&quot;interactive_fb&quot;><?php echo do_shortcode('[fb-like]');?></div> </li></ul><ul><li><div class=&quot;interactive_twitt&quot;><?php echo do_shortcode(&quot;[tweet-that datacount=horizontal]&quot;);?></div> </li></ul>
  18. 18. הוספת כפתורי לייק בתוכן של עמוד ספציפי <ul><li>[fb-like] </li></ul><ul><li>[tweet-that datacount='horizontal' ] </li></ul>
  19. 19. SHORTCODE להצגת פוסטים קשורים <ul><li>function related_posts_shortcode( $atts ) { </li></ul><ul><li>extract(shortcode_atts(array( </li></ul><ul><li> 'limit' => '5', </li></ul><ul><li>), $atts)); </li></ul><ul><li>global $wpdb, $post, $table_prefix; </li></ul><ul><li>if ($post->ID) { </li></ul><ul><li>$retval = '<ul>'; </li></ul><ul><li>// Get tags </li></ul><ul><li>$tags = wp_get_post_tags($post->ID); </li></ul><ul><li>$tagsarray = array(); </li></ul><ul><li>foreach ($tags as $tag) { </li></ul><ul><li>$tagsarray[] = $tag->term_id; </li></ul><ul><li>} </li></ul><ul><li>$tagslist = implode(',', $tagsarray); </li></ul><ul><li>// Do the query </li></ul><ul><li>$q = &quot;SELECT p.*, count(tr.object_id) as count </li></ul>
  20. 20. <ul><li>FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID </li></ul><ul><li>AND p.post_status = 'publish' </li></ul><ul><li>AND p.post_date_gmt < NOW() </li></ul><ul><li>GROUP BY tr.object_id </li></ul><ul><li>ORDER BY count DESC, p.post_date_gmt DESC </li></ul><ul><li>LIMIT $limit;&quot;; </li></ul><ul><li>$related = $wpdb->get_results($q); </li></ul><ul><li>if ( $related ) { </li></ul><ul><li>foreach($related as $r) { </li></ul><ul><li>$retval .= ' </li></ul><ul><li><li><a title=&quot;'.wptexturize($r->post_title).'&quot; href=&quot;'.get_permalink($r->ID).'&quot;>'.wptexturize($r->post_title).'</a></li> </li></ul><ul><li>'; </li></ul><ul><li>} </li></ul><ul><li>} else { </li></ul><ul><li>$retval .= ' </li></ul><ul><li><li>No related posts found</li> </li></ul><ul><li>'; </li></ul><ul><li>} </li></ul><ul><li>$retval .= '</ul> </li></ul><ul><li>'; </li></ul><ul><li>return $retval; </li></ul><ul><li>} </li></ul><ul><li>return; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode('related_posts', 'related_posts_shortcode'); </li></ul>
  21. 21. SHORTCODE ליצירת קישור להצגת תוכן נוסף <ul><li>function link_shortcode( $atts, $content = null ) { </li></ul><ul><li>extract( shortcode_atts( array ( </li></ul><ul><li>' extra_id ' =>'' </li></ul><ul><li>), $ atts ) ); </li></ul><ul><li>return '<a href=&quot;&quot; class=&quot;trigger&quot; id=&quot;'.$extra_id.'&quot;>'.$content.'</a >'; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode( 'open', 'link_shortcode ' ); </li></ul><ul><li>function extra_shortcode( $atts, $content = null ) { </li></ul><ul><li>extract( shortcode_atts( array ( </li></ul><ul><li>' extra_id '=>'' </li></ul><ul><li>), $ atts ) ); </li></ul><ul><li>return '<div class=&quot;'.$extra_id.' extra&quot;>'.$content.'</div >'; </li></ul><ul><li>} </li></ul><ul><li>add_shortcode( 'extra', 'extra_shortcode ' ); </li></ul><ul><li>  </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  22. 22. סקריפט שאחראי לעשות את העבודה לשים ב FOOTER לפני <?PHP WP_FOOTER(); ?> <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>jQuery(document).ready(function($){ </li></ul><ul><li>jQuery('.extra').hide(); </li></ul><ul><li>jQuery('.trigger').click(function() </li></ul><ul><li>{ </li></ul><ul><li>myid = jQuery(this).attr('id'); </li></ul><ul><li>jQuery('.'+myid).toggle(); </li></ul><ul><li>return false; </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>
  23. 23. דוגמא לפונקציונאליות נוספת שתעשיר את סביבת העבודה שלנו <ul><li>function Single_template_func() { </li></ul><ul><li>if (in_category('players')) </li></ul><ul><li>return TEMPLATEPATH . '/single-players.php'; </li></ul><ul><li>else if (in_category('staff')) </li></ul><ul><li>return TEMPLATEPATH . '/single-staff.php'; </li></ul><ul><li>else </li></ul><ul><li>return TEMPLATEPATH.&quot;/single.php&quot;; </li></ul><ul><li>} </li></ul><ul><li>add_filter('single_template', Single_template_func); </li></ul>
  24. 24. סיכום : <ul><li>עבודה עם סביבת עבודה ( ובפרט כאשר קובץ ה function שלנו מכיל פונקציונאליות רבה ו shortcodes רבים ) חוסכת לנו זמן פיתוח ומעניקה לבעל האתר שליטה מירבית בתצוגה באתר . </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×