עבודה עם Framework ו ShortCode לפיתוח תבניות – מתוך וורדקמפ 2011

פוסט זה מסכם את ההרצאה שנתתי בכנס וורדפרס 2011 בירושלים.

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

המטרה - פיתוח ערכת עיצוב מ PSD במינימום זמןתוך מתן מקסימום שליטה לבעל האתר.

מילת מפתח - Reuse.

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

ערכת עיצוב היא סט של קבצים שמשתלב בתוך מערכת וורדפרס
ערכת עיצוב אחראית להצגת תוכן מתוך בסיס הנתונים באמצעות פונקציות של המערכת
ערכת עיצוב היא בעלת עיצוב מסוים (מבנה HTML + CSS)
בתהליך פיתוח ערכת עיצוב אנחנו צריכים להתייחס לשלושת האלמנטים האלו: סט קבצים, תוכן דינאמי, עיצוב.

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

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

Style.css

Index.php

סט עשיר יותר:

• Style.css
• Index.php
• Page.php
• Category.php
• Single.php
• Search.php
• 404.php
• Sidebar.php
• Header.php
• Footer.php
• Function.php
• Front-page.php

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

Page - מציג עמודים סטטיים (עמודים שהוקמו במערכת הניהול)

Single – מציג פוסט יחיד

Search – מציג תוצאות חיפוש

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

קבצי header.php ו footer.php

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

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

<?php get_header(); ?>
<?php get_footer(); ?>

קובץ function

קובץ זה אינו אחראי להצגת תוכן מסוים אלא להקמת תשתיות שישמשו לכל אורך האתר. בין השאר נמצא שם רגיסטרציה של תפריטים, רגיסטרציה של sidebars, קביעת גדלים שונים לצלמיות ועוד

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

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

מילת המפתח - Reuse

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

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

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

איך עושים reuse

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

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

•  פונקציות נוספות בקובץ 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 רלוונטי

/*-------- 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;}

שימוש ב short code על ידי המשתמש

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

ודוגמא נוספת ( מילים של ביאליק, תרגום של מורפיקס)

[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]
 * [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' );

הוספת כפתורי רשתות חברתיות בקובץ תבנית

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

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

הוספת כפתורי רשתות חברתיות בעורך התוכן

  [tweet-that datacount='none' ]
  [tweet-that datacount='horizontal' ]
  [tweet-that datacount='vertical' ]

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 ליצירת קישור להצגת תוכן נוסף

/*
 * EXAMPLE USAGE:
 *
[open extra_id='aaa']הכותרת שתהווה קישור [/open]
[extra extra_id='aaa']זהו הטקסט המורחב שיופיע כאשר לוחצים על הכותרת.[/extra]
*/

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