• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wordcamp   2011-new1
 

Wordcamp 2011-new1

on

  • 1,705 views

wordcamp 2011

wordcamp 2011

Statistics

Views

Total Views
1,705
Views on SlideShare
831
Embed Views
874

Actions

Likes
0
Downloads
3
Comments
0

6 Embeds 874

http://wordcampjerusalem.com 620
http://codeart.co.il 208
http://www.mikvision.com 34
http://www.webgraphical.com 9
http://feeds.feedburner.com 2
http://support.neto.net.il 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wordcamp   2011-new1 Wordcamp 2011-new1 Presentation Transcript

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