WORDCAMP - 2011

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

אשרה גרינבלט – קודארט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

FOOTER ו HEADERקבצי

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

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

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

?<php get_header>? ;)(

?<php get_footer>? ;)(

FUNCTIONקובץ

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

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

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

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

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

REUSEמילת המפתח -

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

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

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

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

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

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

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

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

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

?REUSEאיך עושים

.1Shortcodes

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

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

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

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' (;

שרלוונטי ל 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="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' (;

טוויטר/* * 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' (;

בקוד של 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<

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

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

$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'(;

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' (;

   

סקריפט שאחראי לעשות את העבודה)(; ?<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<

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

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

סיכום:

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

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