Wordcamp 2011-new1

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="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&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 ' );

סקריפט שאחראי לעשות את העבודה לשים ב FOOTER לפני <?PHP WP_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 רבים ) חוסכת לנו זמן פיתוח ומעניקה לבעל האתר שליטה מירבית בתצוגה באתר .

http://wordcampjerusalem.com	491
http://codeart.co.il	139
http://feeds.feedburner.com	2
http://support.neto.net.il	1

Wordcamp 2011-new1

by codeart2011 on Sep 18, 2011

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 633

Statistics

Wordcamp 2011-new1 — Presentation Transcript