בונים ביחד תבנית וורדפרס – פרק 8

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

תגי מטא – הסבר למתחילים

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

הדגמה של תגי מטא בסיסיים:

<title>כאן תופיע כותרת הדף הנוכחי באתר שלכם</title>
<meta name="description" content="כאן יופיע תיאור האתר שלכם">
<meta name="keywords" content="כאן יופיעו מילות המפתח בפוסטים">

תגי מטא בוורדפרס

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

מה הסקריפט שנבנה יעשה בשבילנו?

	<?php 
	// אני הערה בקוד
	?>
	

תג כותרת אוטומטי – בונים את הפונקציה

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

הכנות:

1. נפתח את הקובץ header.php והכניסו את הפונקציה בתג הTITLE

<title><?php wpTitle(); ?></title>

2. נפתח את קובץ functions.php ונכלול את הקובץ templateTags.php

include TEMPLATEPATH.'/functions/templateTags.php';

3. נפתח את הקובץ templateTags.php וניצור בתוכו פונקציה

<?php
function wpTitle() {
	// כאן נבנה את הפונקציה שלנו
	// פונקציה זאת תחזיר כותרת מותאמת לסוג התוכן
}
?>

שלב א: התניות לסוגי תכנים

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

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

<?php
function wpTitle() {
	if(is_home() || is_front_page()) {	// נבדוק אם אנחנו בדף הבית
	
	}
	elseif(is_page() || is_single()) {	// נבדוק אם אנחנו בפוסט או בעמוד

	}
	elseif(is_category()) {	// נבדוק אם אנחנו בקטגוריה

	} 
	elseif(is_tag()) {	// נבדוק אם אנחנו בארכיון מסוג תג
	
	}
	elseif(is_day()) {	// נבדוק אם אנחנו בארכיון מסוג יום
	
	}
	elseif(is_month()){	// נבדוק אם אנחנו בארכיון מסוג חודש
	
	}
	elseif(is_year()){	// נבדוק אם אנחנו בארכיון מסוג שנה
	
	}
    elseif(is_author()) {	// נבדוק אם אנחנו בפרופיל כותב
	
	}
    elseif(is_search()) {	// נבדוק אם אנחנו בדף תוצאות חיפוש
	
	}
    elseif(is_404()) {	// נבדוק אם אנחנו בדף שגיאה 404
	}
    else {	// במקרה ואנחנו בתוכן מסוג אחר
		echo get_bloginfo('name');
	}	
}
?>

הסתכלתם? אבל באמת?

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

ההתניות מוכנות – לצעד הבא!

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

משלבים בין ההתניות לפקודות

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

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

<?php
function wpTitle() {
	if(is_home() || is_front_page()) {	// HOMEPAGE
		echo get_bloginfo('name');
	}
	elseif(is_page() || is_single()) {	// SINGLE
		echo get_the_title().' | '.get_bloginfo('name');
	}
	elseif(is_category()) {	// CATEGORY
		echo single_cat_title().' | '.get_bloginfo('name');
	}
	elseif(is_tag()) {	// ARCHIVE - TAG
		echo single_tag_title().' | '.get_bloginfo('name');
	}
	elseif(is_day()) {	// ARCHIVE - DAY
		printf( __( 'Daily Archives: <span>%s</span>', 'sagive' ), get_the_date() );
	}
	elseif(is_month()){	// ARCHIVE - MONTH	
		printf( __( 'Monthly Archives: <span>%s</span>', 'sagive' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'sagive' ) ) );
	}
	elseif(is_year()){	// ARCHIVE - YEAR
		printf( __( 'Yearly Archives: <span>%s</span>', 'sagive' ), get_the_date('Y'));
	}
	elseif(is_author()) {	// AUTHOR
		$author = get_the_author();
		echo $author.' | '.get_bloginfo('name');		
	}
	elseif(is_search()) {	// SEARCH RESULTS
		$search_query = get_search_query();
		echo __('Search Results for', 'sagive').': '.$search_query;		
	}
	elseif(is_404()) {	// 404 ERROR
		echo __('404: Ooops, The page could not be found!', 'sagive');
	}
	else {	// EVERYTHING ELSE!!! 
		echo get_bloginfo('name');
	}
}
?>

התוצר? פונקציה שתייצר עבורנו כותרת אוטומטית!

סיימנו עם החלק של פונקציה עבור כותרת עמוד אוטומטית לוורדפרס. לעובדה שיש לנו קוד אוטומטי מרוכז במקום אחד יש הרבה יתרונות מבחינת שינויים עתידיים וגם מבחינת קידום אתרים. אם אתם לא בעניין של קוד PHP "מורכב" אל חשש… בסוף המדריך ימתין לכם קישור להורדה של קובץ templateTags.php בשלמותו. לחרוצים ביניכם אני מאוד ממליץ ללמוד את זה כהלכה… זה ישרת אתכם בעתיד (מבטיח!)

תג תיאור אוטומטי – בונים את הפונקציה

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

דגשים לגבי תג description בוורדפרס:

הכנות:

1. נפתח את הקובץ header.php והכניסו את הפונקציה בתג ה DESCRIPTION

<meta name="description" content="<?php wpDesc(); ?>">

2. נפתח את הקובץ templateTags.php וניצור בתוכו פונקציה

<?php
function wpDesc() {
	// כאן נבנה את הפונקציה שלנו
	// פונקציה זאת תחזיר תיאור אוטומטי
}
?>

3. ניצור התניות עבור דף הבית, עמודים ופוסטים וקטגוריות

<?php
function wpDesc() {
	if(is_home() || is_front_page()) {		// דף הבית

	}
	elseif(is_single() || is_page()) {		// עמוד או פוסט

	}
	elseif(is_category()) {					// קטגוריה

	}
}
?>

4. נמלא את ההתניות עם הקוד המתאים לכל סוג תוכן

<?php
function wpDesc() {
if(is_home() || is_front_page()) {		// דף הבית
	echo get_bloginfo('description');
}
elseif(is_single() || is_page()) {		// עמוד או פוסט
	$length			=	'155';
	$postID			=	get_the_ID();
	$currentPost	=	get_post($postID);
	$theContent		=	$currentPost->post_content;
	$theExcerpt		=	$currentPost->post_excerpt;
	
	if($theExcerpt != '') {
		$shortContent	=	$theExcerpt;
	} else {
		$shortContent	=	str_replace(']]>', ']]&gt;', $theContent);
		$shortContent	=	strip_tags($shortContent);
		$shortContent	=	mb_substr($shortContent,0,$length);
	}
	echo $shortContent;
}
elseif(is_category()) {					// קטגוריה
	$currentCatId	=	get_query_var('cat');
	$catDesc		=	category_description($currentCatId);
	$shortCatDesc	=	str_replace(']]>', ']]&gt;', $catDesc);
	$shortCatDesc	=	strip_tags($shortCatDesc);
	$shortCatDesc	=	mb_substr($shortCatDesc,0,'155');		
	
	echo $shortCatDesc;
}
}
?>

תגי מטא בוורדפרס – פשוט אבל ארוך!

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

אם אתם לא שוחים בקוד PHP ומבינים את ההתניות של וורדפרס אז זה בוודאי היה פרק ארוך ומתסבך בשבילכם אבל הסירו דאגה. אתם יכולים להוריד את קובץ templateTags.php כולל הקוד שבנינו כאן.

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

בפרק הבא – טוענים קבצי CSS וJavascript

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

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