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

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

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

כאשר הפוסט מוצג בהקשר של כל העבודות יופיעו בצד הימני רשימת כל העבודות. הקובץ שאחראי תצוגת העבודות הוא portfolio.php והוא למעשה מציג את העבודה הראשונה מבין כל העבודות. על הצד הימני אחראי הקובץ sidebar-portfolio והוא מציג את רשימת כל העבודות.

כאשר הפוסט מוצג בהקשר של טקסונומי יופיעו בצד הימני כל הפוסטים מאותו טקסונומי. הקובץ שאחראי תצוגת העבודות הוא taxonomy-work_type.php והוא למעשה מציג את העבודה הראשונה מבין העבודות עם אותו טקסונומי. על הצד הימני אחראי הקובץ sidebar-portfolio והוא מציג את רשימת העבודות עם אותו טקסונומי.

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

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

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

קוד ה-HTML עליו עבדנו, נראה בצורה סכמטית כך:

<div id="content" class="portfolio"	>
	<div class="alignleft rel" id='item-wrapper'>
		<div id='item-data'>
			תוכן הפוסט
		</div>
	</div>

	<div class="alignright">
		<ul id="postlist">
			<li ><a href="http://example.com/post1 " >פוסט 1</a></li>
			<li ><a href="http://example.com/post2 " >פוסט 2</a></li>
			<li ><a href="http://example.com/post3 " >פוסט 3</a></li>
			<li ><a href="http://example.com/post4 " >פוסט 4</a></li>
		</ul>
	</div>
	<div class="clear"></div>
</div>

להלן קוד ה-JS שמבצע את הטעינה הדינאמית:

<script>
	jQuery(document).ready(function($){
		$('#postlist a').live('click', function(e){
			e.preventDefault();
			var link = $(this).attr('href');
			$("#item-wrapper").html('טוען...');
			$('#postlist li').removeClass('current');
			$(this).parent().addClass('current');
			$("#item-wrapper").load(link+' #item-data', function() { $("#pikame").PikaChoose({carousel:true, rtl:true});});
		});
	});
	</script>

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

נעבור שורה שורה ונבין:

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

סקריפט זה נרשם להפעלה כאשר הדף סיים להטען, זוהי קריאת jquery סטנדרטית לחלוטין.

	$('#postlist a').live('click', function(e){

זוהי הרשמה על event קליק של קישורים בסרגל הניווט הצדדי שלנו. בכל קליק שכזה תופעל הפונקציה שרשמנו על ה event. ראו (jquery live)

	e.preventDefault();

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

	var link = $(this).attr('href');

אנחנו שומרות במשתנה את הכתובת אליה מצביע הקישור שעליו לחץ הגולש

	$("#item-wrapper").html('טוען...');

אנחנו מחליפות את תוכן ה div עם ה id בשם item-wrapperבמחרוזת "טוען..."

		$('#postlist li').removeClass('current');

עלינו לשנות את האייטם המסומן ברשימת הפוסטים בצד ימין, הפוסט הנוכחי מסומן נבדל בעזרת class='current' על מנת להוריד את הסימון שלו נוריד את הclass בשם current מכל ה li שבdiv עם ה id בשם postlist

		$(this).parent().addClass('current');

נוסיף את הclass בשם current לאבא של ה a שעליו לחצו כלומר ל li של הפוסט אותו נציג בקרוב

			$("#item-wrapper").load(link+' #item-data', function()

כאן אנחנו מבצעות את הטעינה. זו פקודת JS מסוג ajax. אנחנו טוענות מתוך הדף שאמור היה להטען (הדף שהקישור שלנו הוא אליו), רק את ה div עם ה id בשם item-data (זהו הdiv שמכיל את תוכן הפוסט החדש בדף הנטען) ואנחנו מבצעות את הטעינה הזו לתוך הdiv בדף הנוכחי שיש לו id בשם item-wrapper.

בנוסף כאשר תסתיים פעילות זו תקרא פונקציית callback שמטרתה לבצע פעילויות שנדרשות בסיום הטעינה, במקרה שלנו יש בקוד הנטען גלריית jquery שיש להפעיל את קוד ה-JS שמייצר אותה (רק לאחר טעינת ה-HTML כמובן)

				{ $("#pikame").PikaChoose({carousel:true, rtl:true});});

כיוון שבמקרה שלנו התוכן המוצג בתוך הdiv מצריך טעינת ג'אוה סקריט מסויים (הצגת גלריה) עלינו לטעון את הסקריפט פה. במצב רגיל אנחנו טוענות סקריפט זה בפוטר ב document ready אבל כאן ה document ready היה מזמן ואנחנו גם לא מגיעות לפוטר לכן עלינו לטעון מכאן את הסקריפט שאחראי לתצוגת הגלריה שלנו.

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

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

זה לא ממש מסובך אם רק עובדים מסודר.

המידע שאתם צריכים כדי לעבור:

1. גישה ל-ftp של השרת הנוכחי (פרטי שרת, שם משתמש וסיסמה)
2. גישה לניהול מסד הנתונים של השרת הנוכחי (פרטי שרת, שם משתמש וסיסמה)
3. גישה ל-ftp של השרת החדש (פרטי שרת, שם משתמש וסיסמה)
4. גישה לניהול מסד הנתונים של השרת החדש (פרטי שרת, שם משתמש וסיסמה)
5. גישה לניהול הדומיין שלכם
6. פרטי שרתי ה-DNS של האחסון החדש

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

גיבוי:

• הכנסו לאחסון שלכם בעזרת ftp והורידו את כל תוכן ספריית wp-content למחשב המקומי שלכם
• הכנסו ללמשק הניהול של מסד הנתונים וייצאו אותו בעזרת Export

ההעברה:

• התקינו וורדפרס על האחסון החדש
• העתיקו על ספריית wp-content של הוורדפרס החדש את הספריה שגיביתם
• הכנסו לממשק הניהול של מסד הנתונים
• מחקו את כל הטבלאות שיצר הוורדפרס החדש
• ייבאו את קובץ הגיבוי של מסד הנתונים הישן
• העבירו את הדומיין שלכם כך שיצביע לאחסון החדש (שנו את שרתי ה-DNS כך שיצביעו לאחסון החדש)

חכו עד 48 שעות לעדכון  DNS וזהו, עברתם.

ניתן גם להעביר בעזרת קובץ הייצוא של וורדפרס - אבל זה עשוי לגרום לבעיות שונות של כתובות פוסטים משתנות (תלוי מה בסיס הקישורים שלכם)

לא הבנתם? יש שאלות ? אנחנו כאן

לאחרונה נדרשנו להקים אחת שמיועד בתכניו לגולשים מחוברים בלבד, בנוסף לכך - חלק מהאתר הוגדר כבעל תוכן משתנה פר גולש.
כלומר - מי שלא רשום לאתר, רואה תמיד טופס התחברות (Login), מי שכן רואה את תכני האתר.
חלק מתכני האתר זהים לכל הגולשים, וחלקם מוגדרים אישית לכל גולש (מידע אישי המיועד לגולש בלבד).

תוכן לגולשים מחוברים בלבד

ראשית נראה כיצד התמודדנו עם נושא התוכן המיועד לגולשים מחוברים בלבד. לשם כך יצרנו תבנית דף כניסה (Login) . דף זה אינו דף הבית. הוספנו בדיקה בהאדר האם הגולש מחובר ובמקרה הצורך ביצוע הפניית redirect.

ההאדר נראה כך:

<?php if ( !is_page('login') && !is_user_logged_in() ) {
    header("Location: ".get_bloginfo('url')."/login");
}  else if (is_page('login') && is_user_logged_in()) {
	header("Location: ".get_bloginfo('url'));
}?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
 ....

למעשה יש לנו 4 מצבים:

1. הגולש אינו מחובר והדף שנטען עכשיו (שאנחנו בהאדר שלו) הוא דף ה login – מצב זה אינו מצריך התערבות.
2. הגולש אינו מחובר והדף שנטען עכשיו הוא דף פנימי כלשהו (נניח שהגולש כותב את כתובת הדף הפנימי בשורת הכתובת) – במקרה כזה נעביר אותו לדף ה login.
3. הגולש מחובר והדף שנטען עכשיו הוא דף ה login – במקרה כזה נעביר אותו לדף הראשי של האתר בו הוא יוכל לראות כבר תכנים פנימיים.
4. הגולש מחובר והדף שנטען עכשיו הוא דף כלשהו באתר – מצב זה אינו מצריך התערבות מאיתנו

בקוד שלעיל ניתן לראות את הטיפול במצבים 2 ו- 3.

הנה דף הלוגין - קל ופשוט.

<?php
/*
 * Template name: login
 */
?>
<?php get_header(); ?>
<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
		<p><label for="log"> שם: </label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /></p>
		<p><label for="pwd">סיסמה: </label> <input type="password" name="pwd" id="pwd" size="22" /></p>
		<p><input type="submit" name="submit" id='wp-submit' value="שליחה" class="button" /></p>
		<p><label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> זכור אותי</label></p>
		<input type="hidden" name="redirect_to" value="<?php bloginfo('url');?>"/>
</form>
<?php get_footer();?>

תוכן אישי לכל גולש מחובר

על מנת להציג תוכן אישי לכל גולש יצרנו היררכיית עמודים כזו:
עמוד פרטי משתמש (עמוד אב כללי)
- עמוד משתמש 1
- עמוד משתמש 2
וכו'
כאשר שם עמוד המשתמש הוא כשם המשתמש עצמו (username).

במקביל ייצרנו שתי תבניות תצוגה, אחת לעמוד האב והשניה לעמודי הבנים.
התבנית של עמוד האב נראית כך:

<?php
/*
 * Template name:user account
 */ ?>
<?php get_header();?>
<div id='title'>
    <img src="<?php bloginfo('template_url');?>/images/account-title-icon.png" />
    <p>פרטי החשבון</p>
</div>

<?php
if (have_posts()):
    the_post();
    global $current_user;
    get_currentuserinfo();
    $pname = $current_user->user_login;

    $page = get_page_by_title($pname);
	if ($page) {
		$content = apply_filters('the_content', $page->post_content);
		echo $content;
	} else {
		echo "תוכן זה לא קיים עבורך !";
	}
endif;
get_footer();
?>

למעשה אנחנו שולפים את שם המשתמש המחובר (בקריאה לפונקציה get_currentuserinfo ) ומציגים עבורו את תוכן הדף שנקרא על שמו (אם קיים כזה) כחלק מתצוגת עמוד האב. אם לא קיים דף כזה מציגים הודעה.

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

<?php
/*
 * Template name: user account inner
 */

if (have_posts()) {
    the_post();
    header('Location: '.get_permalink($post->post_parent));
}
?>

ניתן היה כמובן ליישם מנגנון כזה גם בעזרת shortcode המאפשר לעטוף את התוכן לכל משתמש וכו, אבל לנו אישית זה נראה הרבה פחות נח להזנת תכנים (בהנתן יותר מ-20 משתמשים רשומים באתר).

נשמח לשמוע שאלות, תהיות, השגות או סתם רעיונות נוספים

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

אריזת מספר קבצי תמונה בקובץ אחד יכולה להעשות באופן עצמאי בתוכנת גרפיקה כלשהי או על ידי Css Sprite Generator. קיימים מספר מחוללים (generators) ובהם גם כאלו שניתן לעבוד בהם Online ללא צורך בהורדת תוכנה. אנו בחרנו להשתמש בתוכנת tonttu (ניתן להוריד את התוכנה כאן).

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

לאחר שסיימנו לגרור את הקבצים שברצוננו לארוז, נבצע פעולת ייצוא (תחת התפריט "קובץ"). בכך נאמר למעשה לתוכנה לייצר לנו 3 קבצים:
1. קובץ בסיומת png שמכיל את כל האימגים שגררנו
2. קובץ css שמגדיר כיצד יש לחלץ מתוך קובץ התמונה הכללי כל פעם אימג' אחד. מובן שכל הdivs מקבלים את אותה תמונת רקע (המכילה את כל האימגים) והחילוץ של אימג מסויים נעשה על ידי הגדרת גודל ל div ומיקום ל background.
3. קובץ html שעושה שימוש ב css וב png ומציג למעשה את כל האימגים. בקובץ זה אין לנו שימוש מיוחד.

כעת אנו יכולים להשתמש בקובץ ה css שנוצר ולהעתיק את ההגדרות ממנו אל קובץ ה css המשמש אותנו באתר.

הבנת ערכי המאפיין background position

נניח שקובץ ה sprite.png שלנו כולל 3 תמונות כמו בדוגמא הבאה:

נוכל לראות שב CSS שמיוצר לנו, על מנת לראות אלמנט שנמצא במיקום 0,30 (תמונת הרקע של הcheck-box כאשר הוא מסומן) הפרמטר background-position בערך שמייצג את המיקום על ציר ה Y מקבל דווקא 30- . זאת למרות שבתמונת הרקע הוא נמצא במיקום 0,30. למעשה זה לא למרות זאת אלא דווקא משום כך.

/*--- filename : check_footer_uncheck.png ---*/
#id0 {
	width : 16px ;
	height : 16px ;
	background-position : left top ;
	background-repeat : no-repeat ;
}

/*--- filename : check_footer_check.png ---*/
#id1 {
	width : 16px ;
	height : 16px ;
	background-position : left -30px ;
	background-repeat : no-repeat ;
}

על מנת להבין את זה נסתכל אל הdiv שלנו שאנחנו רוצים שיקבל את הimg כתמונת רקע כאילו הוא חלון שמאחוריו יש לשים את תמונת הרקע. במקרה שלנו תמונת הרקע היא די גדולה ויש בה כל מיני תמונות כדי לראות את האלמנט המסויים שרצינו יש למקם את תמונת הרקע הגדולה מאחורי החלון 30 פיקסלים למעלה כלומר להזיז מלמעלה 30-.

חשיבות מיקום האימגים על משטח העבודה

בדוגמא שלעיל יש לנו div (חלון) גדול ואנחנו רוצים לתת לו תמונת רקע קטנה שתראה רק בחלקו של החלון (נאמר בצד ימין). עלינו למקם את התמונה בקצה השמאלי של קובץ התמונות כדי שנוכל להזיז את הרקע מאחורי החלון הרבה ימינה ולא תכנס שם בטעות איזשהי תמונה נוספת.
להלן דוגמא למיקום התמונות בקובץ sprite.png שתיצור בעיה:

כך זה יראה באתר:

כנ"ל לגבי מיקום קבצי רקע שאמורים לקבל repeat, גם במצב זה יש לנו חלון גדול ואנחנו רוצים להשתמש בתמונת רקע קטנה. כיוון שהחלון גדול (לעיתים גודלו אינו מוגדר מראש) נדאג שתמונת הרקע שלנו תהיה בקצה קובץ התמונות על מנת שלא תשתרבב לנו לחלון תמונה שלא רצינו.

לסיכום: שימוש ב css sprite נעשה יותר ויותר נפוץ ככלי לאופטימציה של אתרים והוא מומלץ על ידי גוגל.

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

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

על מנת שהגבול הימני והגבול השמאלי שניהם יקבלו את גובהם מכמות התוכן יש לבצע קינון של ה DIV's באופן הבא:

<div class="right_box">
	<div class="rb_top"></div>

	<div class="rb_mid">
		<div class="rb_mid_r">
			<div class="rb_mid_l">
				<div class="rb_mid_m">
					<?php the_content(); ?>
				</div>
			</div>
		</div>
	</div>

	<div class="rb_bottom"></div>
</div> 

נתמקד ב Div האמצעי (rb_mid). התרשים המצורף מתאר את ה Divs שבתוכו. הDiv הראשון באדום, השני בירוק והשלישי בכחול.

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

קוד CSS:

.rb_mid {}
.rb_mid_r {background: url(images/index-page/rb_mid_rlimit.png) repeat-y top right;   padding-right: 10px;} 

.rb_mid_l {background: url(images/index-page/rb_mid_llimit.png) repeat-y left top ; padding-left: 10px;  }	

.rb_mid_m {background: #eeeeee url(images/index-page/rb_mid_mid.jpg) repeat-x top right;  width: 590px;  }

וורדפרס מאפשרת לנו להשפיע על המחרוזות המוחזרות מפונקציות באמצעות פילטרים.

בדוגמא הבאה (שורת קוד ששולבה בקובץ functions.php) אנו מוסיפים את הפונקציה my_add_author_info כפילטר לפונקציה the_content .

add_filter('the_content', 'my_add_author_info ', 9);

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

כאשר תיקרא הפונקציה the_content היא תתבצע ולאחר מכן תקרא לפונקציה my_add_author_info ואף תעביר לה כפרמטר את הערך המוחזר ממנה (כלומר את תוכן הפוסט או העמוד). הערך המוחזר מהפונקציה my_add_aouthr_info (ולמעשה גם מהפונקציה the_content) יכלול גם את העריכה שפונקציה 2 ביצעה (כלומר את הוספת המידע לגבי המחבר).

כל מה שעלינו לעשות הוא לכתוב את הפונקציה my_add_author_info כך שתקבל מחרוזת ותחזיר מחרוזת חדשה אליה היא שירשרה מידע לגבי המחבר ולשלבה בקובץ functions.php לפני הוספת הפילטר.

קוד לדוגמא:

function 'my_add_author_info($content)
{
     	$author_data = '<div>  שם המחבר,  תפקידו וכו' </div>';
	return $content.$author_data;
}
add_filter('the_content', 'my_add_author_info ', 10); 

באפשרותינו לשלוט בסדר הפילטרים באחת משתי דרכים: באמצעות מיקום הפילטרים בקובץ function.php או באמצעות הפרמטר השלישי של add_filter הלוא הוא priority (עדיפות). ככל שהערך בפרמטר priority נמוך יותר כך העדיפות גבוהה יותר.

להלן שתי דוגמאות לסדר פעולות שונה
1. עדיפות זהה, רשאית יתווסף לתוכן הפוסט מידע על המחבר ולאחריו גם רשימת פוסטים דומים

function 'my_add_author_info($content)
{
     	$author_data = '<div>  שם המחבר,  תפקידו וכו' </div>';
	return $content.$author_data;
}
add_filter('the_content', 'my_add_author_info ', 10);
function 'my_add_similer_post($content)
{
	$similer_post = '<div>  פוסטים דומים</div>';
	return $content.$ similer_post;
}
add_filter('the_content', 'my_add_similer_post ', 10); 

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

function 'my_add_author_info($content)
{
     	$author_data = '<div>  שם המחבר,  תפקידו וכו' </div>';
	return $content.$author_data;
}
add_filter('the_content', 'my_add_author_info ', 10);
function 'my_add_similer_post($content)
{
	$similer_post = '<div>  פוסטים דומים</div>';
	return $content.$ similer_post;
}
add_filter('the_content', 'my_add_similer_post ', 9); 

אין ספק שאחד הפיצ'רים הנוחים ביותר למאמרים\פוסטים ארוכים הוא "תוכן עניינים" בתחילת הפוסט.
יש כמה תוספים לוורדפרס שעושים את העבודה, לרוע המזל לא מצאתי אחד שגם עושה אותה כפי שאני רוצה, וגם נותן לי לבחור אם ואיפה להכניס את הטבלה.
שלא לומר - כשאנחנו מוסיפים את הקוד ישירות לתבנית אנחנו מייעלים את ההתקנה, חוסכים בתוספים ומאפשרים קסטומיזציה של קוד.

בכל מקרה הקוד למעשה מתחלק ל-2
1. קוד ה-jquery הרלוונטי
2. שימוש ב-shortcode על מנת לאפשר את הכנסתו לתוך המיקום הרצוי בפוסט

שימו לב שהקוד מותאם אישית לתבנית בה אנו משתמשים, יש להתאימו לתבנית כדי שיעבוד.

קוד ה-javascript:

$("#toc").append(\'<p>במאמר זה:</p>\')
$(".hentry h1, .hentry h2, .hentry h3").each(function(i) {
        var current = $(this);
        current.attr("id", "title" + i);
        $("#toc").append("<a id=\'link" + i +
"\' href=\'#title" + i +  "\' title=\'" +
current.attr("tagName") + "\'><br/>" +
current.html() + "</a>");})

הקוד למעלה עובר למעשה על כל המסמך ומחפש כותרות מרמה 1-3 (ניתן לשנות כמובן)
לכל כותרת שכזו אנחנו מוסיפים id ואח"כ מייצרים עבורה קישור בתוך טבלת הקישורים שלנו (היושבת בתוך div בשם toc)
וזהו.

אם רוצים להוסיף גם קישורים "למעלה" לפני כל כותרת, צריך להוסיף לקוד את השורה

current.before(\'<a href="#toc">למעלה</a>\');

כפקודה אחרונה בלולאה. הקוד הזה יוסיף לנו קישור לטבלת התוכן (toc) לפני כל כותרת.

עד כה הקוד, על מנת להפעיל אותו צריך לדאוג שיהיה בתוך document.ready... הבעיה היא שאם אנחנו רוצים להחליט על הפעלה ברמת הפוסט (כלומר shortcode) הרי שעברנו את נקודת האל-חזור, ההאדרים כבר הוגדרו. למזלנו ל-jquery יש פטנט נחמד נוסף. כל קוד שנכתב כקריאה לפונקציה אוטומטית משוייך ל-document.ready
כך שהקוד שלנו למעשה ייראה כך:

$(function($) {$("#toc").append('<p>במאמר זה:</p>')
$(".hentry h1, .hentry h2, .hentry h3").each(function(i) {
    var current = $(this);
    current.attr("id", "title" + i);
    $("#toc").append("<a id='link" + i + "' href='#title" +
        i + "' title='" + current.attr("tagName") + "'><br/>" +
current.html() + "</a>");
	current.before('<a href="#toc">למעלה</a>');});}))

ועכשיו המעבר לוורדפרס:
- קודם כל כאשר משתמשים ב-jquery בוורדפרס, אין לנו יכולת להשתמש ב-$, השימוש הנכון הוא בעזרת הצורה המלאה (קרי jQuery). אם רוצים קצת לעקוף ניתן להעביר לפונקציה הראשית את הסימן $ כפרמטר ואז הוא יוכר בתוכה. כלומר הקוד שלנו עכשיו נראה כך:

jQuery(function($) {$("#toc").append(\'<p>במאמר זה:</p>\')
$(".hentry h1, .hentry h2, .hentry h3").each(function(i) {
    var current = $(this);
    current.attr("id", "title" + i);
    $("#toc").append("<a id=\'link" + i + "\' href=\'#title" +
        i + "\' title=\'" + current.attr("tagName") + "\'><br/>" +
current.html() + "</a>");
	current.before(\'<a href="#toc">למעלה</a>\');});})

- השלב הבא הוא הפיכת הקוד לפונקציית shortcode
זה נראה כך:

function my_toc($atts) {
	return '<div id="toc"></div>
<script type="text/javascript">
jQuery(function($) {
    $("#toc").append(\'<p>במאמר זה:</p>\')
    $(".hentry h1, .hentry h2, .hentry h3").each(function(i) {
        var current = $(this);
        current.attr("id", "title" + i);
        $("#toc").append("<a id=\'link" + i + "\' href=\'#title" +
            i + "\' title=\'" + current.attr("tagName") + "\'><br/>" +
            current.html() + "</a>");
	current.before(\'<a href="#toc">למעלה</a>\');
    });
})
</script>';
}
add_shortcode('TOC', 'my_toc');

לאחד הלקוחות שלנו קרתה הבעיה הזו בדיוק....
הוא קם בבוקר והבלוג שלו לא עבד, הוא כמובן התקשר אלינו ישירות ואנחנו התחלנו לחטט מה קרה לאתר.
לאחר מספר שניות הבנו שהסיבה שפוסטים אינם מופיעים בדף הבית קשורה לעובדה שדף הבית מציג רק קטגוריה אחת, ואילו הפוסטים מקוטלגים כולם כ-Uncategorized.
זאת ועוד, קטגוריית ברירת המחדל אצל הלקוח שונתה וע"כ שמה אפילו לא היה Uncategorized...

חפירה קלה בפורומים של וורדפרס.אורג גילתה לא מעט אנשים שנתקלו בבעיה כזה, ולמעשה שניים שחזרו לספר על הפתרון הסופי.
מסתבר שהבעיה קרורה בדרך כלל למערכת ה-mysql (מה שלא באמת מפתיע), כאשר ספריית ה -tmp/ מתמלאת, השרת הופך לבעייתי והאינדיקציה הראשונה היא בשמות תגיות וקטגוריות.

לקחנו הימור, בד בבד עם מחיקת התכנים מספריית ה-tmp. של הלקוח (מה שהיה סביר שלא יעזור) פנינו אל האחסון.
שעה מאוחר יותר חיכה לנו מייל:

Hi Hannit,

You're right /tmp partition was full.
I've just cleaned it.
Be free contact us if you need further assistance.

והכל חזר לעבוד בצורה נפלאה.
שווה לזכור ולשמור.

קוד-ארט מרימה קורס ראשון מסוגו בארץ למפתחי וורדפרס (WordPress).

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

דרישות קדם לקורס:

• HTML 3 ומעלה (עדיף 4)
• CSS 2 ומעלה
• PHP ברמה סבירה +
• JS, J/query - יתרון

הקורס מיועד למתכנתים (אלא אם יתגלה צורך משמעותי ללימוד של PHP) ומטרתו הפיכת תכנתי PHP לתכנתי וורדפרס.

הקורס ייארך 40 שעות, בכיתת מחשבים באזור המרכז (כנראה ת"א).

הקורס מיועד להפתח באוקטובר ומיועד ל-10 איש בלבד.