Wordcamp 2011-new1

24
WORDCAMP - 2011 בבבבב בFRAMEWORK בבSHORTCODES בבבבבב בבבב בבבבב בבבב בבבבבבב – בבבבבבHTTP://WWW.CODEART.CO.IL

description

wordcamp 2011

Transcript of Wordcamp 2011-new1

Page 1: Wordcamp   2011-new1

WORDCAMP - 2011

לפיתוח ערכת SHORTCODES וב FRAMEWORKשימוש ב עיצוב

אשרה גרינבלט – קודארטHTTP://WWW.CODEART.CO.IL

Page 2: Wordcamp   2011-new1

המטרה:

PSDפיתוח ערכת עיצוב מ

במינימום זמן

תוך מתן מקסימום שליטה לבעל האתר.

Reuseמילת מפתח -

Page 3: Wordcamp   2011-new1

מהי ערכת עיצוב?

ערכת עיצוב היא סט של קבצים שמשתלב •בתוך מערכת וורדפרס

ערכת עיצוב אחראית להצגת תוכן מתוך •בסיס הנתונים באמצעות פונקציות של

המערכתערכת עיצוב היא בעלת עיצוב מסוים )מבנה •

HTML + CSS)

בתהליך פיתוח ערכת עיצוב אנחנו צריכים להתייחס לשלושת האלמנטים האלו: סט

קבצים, תוכן דינאמי, עיצוב

Page 4: Wordcamp   2011-new1

סט הקבצים המרכיבים ערכת עיצוב:

קבצים בלבד2סט בסיסי –  

Style.css

Index.php

Page 5: Wordcamp   2011-new1

סט הקבצים המרכיבים ערכת עיצוב:סט עשיר יותר:

•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 )***(

Page 6: Wordcamp   2011-new1

http://codex.wordpress.org/Template_Hierarchy

Page 7: Wordcamp   2011-new1

FOOTER ו HEADERקבצי

במרבית האתרים ישנו חלק עליון וחלק תחתון של כל דף שהוא קבוע ומשותף

את החלק הזה אנחנו מוציאים מתוך הקבצים וכוללים Footer ו Headerשסקרתי ושמים ב

אותם בקבצים שלנו באמצעות הפקודות הבאות:

?<php get_header>? ;)(

?<php get_footer>? ;)(

Page 8: Wordcamp   2011-new1

FUNCTIONקובץ

קובץ זה אינו אחראי להצגת תוכן מסוים אלא להקמת תשתיות שישמשו לכל אורך האתר.

בין השאר נמצא שם רגיסטרציה של , קביעת sidebarsתפריטים, רגיסטרציה של

גדלים שונים לצלמיות ועוד

קובץ זה הוא הלב של סביבת העבודה שלנו. הוא יאפשר לנו שימוש חוזר בקוד שנכתב.

ושאר shortcodesלכאן אנחנו נוסיף את הפונקציות של ה פונקציונאליות

Page 9: Wordcamp   2011-new1

REUSEמילת המפתח -

יתרונות עבור המפתח -

של ערכת העיצוב הופך את הקוד של HTMLהפרדת פונקציונאליות מקבצי ה •ערכת העיצוב לקצר, ברור ונקי יותר

חסכון בזמן פיתוח •

חסכון בבאגים •

עבודת תחזוקה נוחה יותר•

תוספת יכולות וגמישות במינימום זמן פיתוח•

יתרונות עבור המשתמש –

יכולות וגמישות•

יתרון לעומת שימוש בתוספים – אין הכבדה על המערכת ואין חשש להתנגשויות

Page 10: Wordcamp   2011-new1

?REUSEאיך עושים

.1Shortcodes

פיתוחי FrameWorkאחד הכלים להפוך את ערכת העיצוב שלנו ל

Contact form7, nextgenמוכר לנו בתחילה משימוש בתוספים כמו gallery ועוד

function. פונקציות נוספות בקובץ 2

Page 11: Wordcamp   2011-new1

SHORTCODEלחלוקה לשתי עמודות – חלוקת עמוד לשתי עמודות function בקובץ shortcodeשילוב

/*

* EXAMPLE USAGE:

* [lefttag] my left content [/lefttag]

*/

function lefttag_func) $atts, $content ( {

return '>div class="en"<' .$content .'>/div<';

}

add_shortcode) 'lefttag', 'lefttag_func' (;

/*

* EXAMPLE USAGE:

* [righttag] my right content [/righttag]

*/

function righttag_func) $atts, $content ( {

return '>div class="heb"<' .$content .'>/div<';

}

add_shortcode) 'righttag', 'righttag_func' (;

Page 12: Wordcamp   2011-new1

שרלוונטי ל 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;}

Page 13: Wordcamp   2011-new1

על ידי SHORTCODEשימוש ב המשתמש

]lefttag [my left content [/lefttag] [righttag] my right content [/righttag]

Page 14: Wordcamp   2011-new1

על ידי המשתמש 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[

 

Page 15: Wordcamp   2011-new1

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="fb-root"<>/div<>script src="http://connect.facebook.net/'.$lang.'/all.js#appId=157072397705485&amp;xfbml=1"<>/script<>fb:like href="'.get_permalink)(.'" send="'.$send.'" layout='.$layout.' width="'.$width.'" show_faces="'.$faces.'"

action="like" font=""<>/fb:like;'>return $data;

{add_shortcode) 'fb-like', 'like' (;

Page 16: Wordcamp   2011-new1

טוויטר/* * 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="http://twitter.com/share" class="twitter-share-button" data-count='.$datacount.'<Tweet>/a<>script type="text/javascript" src="http://platform.twitter.com/widgets.js"<>/script<';

return $data;}add_shortcode) 'tweet-that', 'tweet' (;

Page 17: Wordcamp   2011-new1

בקוד של LIKEהוספת כפתורי דף פוסט יחיד

>div class="interactive_fb"<>?php echo do_shortcode)'[fb-like]'(;?<>/div<

>div class="interactive_twitt"<>?php echo do_shortcode)"[tweet-that datacount=horizontal]"(;?<>/div<

Page 18: Wordcamp   2011-new1

הוספת כפתורי לייק בתוכן של עמוד ספציפי

]fb-like[

]tweet-that datacount='horizontal[ '

Page 19: Wordcamp   2011-new1

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 = "SELECT p.*, count)tr.object_id( as count

Page 20: Wordcamp   2011-new1

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;";

$related = $wpdb-<get_results)$q(;

if ) $related (}

foreach)$related as $r(}

$retval' =.

<li<>a title="'.wptexturize)$r-<post_title(.'" href="'.get_permalink)$r-<ID(.'"<'.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'(;

Page 21: Wordcamp   2011-new1

SHORTCODE ליצירת קישור להצגת תוכן נוסף

function link_shortcode) $atts, $content = null ( {extract) shortcode_atts) array)'extra_id' =<''

(, $atts ( (;return '>a href="" class="trigger"

id="'.$extra_id.'"<'.$content.'>/a<';}add_shortcode) 'open', 'link_shortcode' (;

function extra_shortcode) $atts, $content = null ( {extract) shortcode_atts) array)'extra_id'=<''

(, $atts ( (;return '>div class="'.$extra_id.' extra"<'.$content.'>/div<';

}add_shortcode) 'extra', 'extra_shortcode' (;

   

Page 22: Wordcamp   2011-new1

סקריפט שאחראי לעשות את העבודה)(; ?<PHP WP_FOOTER>?לפני FOOTER לשים ב

>script type="text/javascript"<

jQuery)document(.ready)function)$({

jQuery)'.extra'(.hide)(;

jQuery)'.trigger'(.click)function)(

{

myid = jQuery)this(.attr)'id'(;

jQuery)'.'+myid(.toggle)(;

return false;

}(;

}(;

>/script<

Page 23: Wordcamp   2011-new1

דוגמא לפונקציונאליות נוספת שתעשיר את סביבת העבודה שלנו

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."/single.php";

}

add_filter)'single_template', Single_template_func(;

Page 24: Wordcamp   2011-new1

סיכום:

עבודה עם סביבת עבודה )ובפרט כאשר שלנו מכיל functionקובץ ה

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